feat: board settings (#137)

* refactor: improve user feedback for general board settings section * wip: add board settings for background and colors, move danger zone to own file, refactor code * feat: add shade selector * feat: add slider for opacity * fix: issue with invalid hex values for color preview * refactor: add shared mutation hook for saving partial board settings with invalidate query * fix: add cleanup for not applied changes to logo and page title * feat: add layout settings * feat: add empty custom css section to board settings * refactor: improve layout of board logo on mobile * feat: add theme provider for board colors * refactor: add auto contrast for better contrast of buttons with low primary shade * feat: add background for boards * feat: add opacity for boards * feat: add rename board * feat: add visibility and delete of board settings * fix: issue that wrong data is updated with update board method * refactor: improve danger zone button placement for mobile * fix: board not revalidated when already in boards layout * refactor: improve board color preview * refactor: change save button color to teal, add placeholders for general board settings * chore: update initial migration * refactor: remove unnecessary div * chore: address pull request feedback * fix: ci issues * fix: deepsource issues * chore: address pull request feedback * fix: formatting issue * chore: address pull request feedback
2024-03-03 16:01:32 +01:00
parent 2a83df3485
commit bb02163e25
49 changed files with 1620 additions and 406 deletions
--- a/apps/nextjs/src/components/board/modals/board-rename-modal.tsx
+++ b/apps/nextjs/src/components/board/modals/board-rename-modal.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import type { ManagedModal } from "mantine-modal-manager";
+
+import { clientApi } from "@homarr/api/client";
+import { useForm } from "@homarr/form";
+import { useI18n } from "@homarr/translation/client";
+import { Button, Group, Stack, TextInput } from "@homarr/ui";
+import type { validation, z } from "@homarr/validation";
+
+interface InnerProps {
+  id: string;
+  previousName: string;
+  onSuccess?: (name: string) => void;
+}
+
+export const BoardRenameModal: ManagedModal<InnerProps> = ({
+  actions,
+  innerProps,
+}) => {
+  const utils = clientApi.useUtils();
+  const t = useI18n();
+  const { mutate, isPending } = clientApi.board.rename.useMutation({
+    onSettled() {
+      void utils.board.byName.invalidate({ name: innerProps.previousName });
+      void utils.board.default.invalidate();
+    },
+  });
+  const form = useForm<FormType>({
+    initialValues: {
+      name: innerProps.previousName,
+    },
+  });
+
+  const handleSubmit = (values: FormType) => {
+    mutate(
+      {
+        id: innerProps.id,
+        name: values.name,
+      },
+      {
+        onSuccess: () => {
+          actions.closeModal();
+          innerProps.onSuccess?.(values.name);
+        },
+      },
+    );
+  };
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <Stack>
+        <TextInput
+          label={t("board.field.name.label")}
+          {...form.getInputProps("name")}
+          data-autofocus
+        />
+        <Group justify="end">
+          <Button variant="subtle" color="gray" onClick={actions.closeModal}>
+            {t("common.action.cancel")}
+          </Button>
+          <Button type="submit" loading={isPending}>
+            {t("common.action.confirm")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};
+
+type FormType = Omit<z.infer<(typeof validation)["board"]["rename"]>, "id">;