feat: add user setting for home board (#956)

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_change-home-board.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { Button, Group, Select, Stack } from "@mantine/core";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useI18n } from "@homarr/translation/client";
+import type { z } from "@homarr/validation";
+import { validation } from "@homarr/validation";
+
+import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
+
+interface ChangeHomeBoardFormProps {
+  user: RouterOutputs["user"]["getById"];
+  boardsData: { value: string; label: string }[];
+}
+
+export const ChangeHomeBoardForm = ({ user, boardsData }: ChangeHomeBoardFormProps) => {
+  const t = useI18n();
+  const { mutate, isPending } = clientApi.user.changeHomeBoardId.useMutation({
+    async onSettled() {
+      await revalidatePathActionAsync(`/manage/users/${user.id}`);
+    },
+    onSuccess(_, variables) {
+      form.setInitialValues({
+        homeBoardId: variables.homeBoardId,
+      });
+      showSuccessNotification({
+        message: t("user.action.changeHomeBoard.notification.success.message"),
+      });
+    },
+    onError() {
+      showErrorNotification({
+        message: t("user.action.changeHomeBoard.notification.error.message"),
+      });
+    },
+  });
+  const form = useZodForm(validation.user.changeHomeBoard, {
+    initialValues: {
+      homeBoardId: user.homeBoardId ?? "",
+    },
+  });
+
+  const handleSubmit = (values: FormType) => {
+    mutate({
+      userId: user.id,
+      ...values,
+    });
+  };
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <Stack gap="md">
+        <Select w="100%" data={boardsData} {...form.getInputProps("homeBoardId")} />
+
+        <Group justify="end">
+          <Button type="submit" color="teal" loading={isPending}>
+            {t("common.action.save")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};
+
+type FormType = z.infer<typeof validation.user.changeHomeBoard>;

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-language-change.tsx

@@ -1,12 +0,0 @@
-import { Stack, Title } from "@mantine/core";
-
-import { LanguageCombobox } from "~/components/language/language-combobox";
-
-export const ProfileLanguageChange = () => {
-  return (
-    <Stack mb="lg">
-      <Title order={2}>Language & Region</Title>
-      <LanguageCombobox />
-    </Stack>
-  );
-};

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx

@@ -6,14 +6,15 @@ import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
 
+import { LanguageCombobox } from "~/components/language/language-combobox";
 import { DangerZoneItem, DangerZoneRoot } from "~/components/manage/danger-zone";
 import { catchTrpcNotFound } from "~/errors/trpc-not-found";
 import { createMetaTitle } from "~/metadata";
 import { canAccessUserEditPage } from "../access";
+import { ChangeHomeBoardForm } from "./_components/_change-home-board";
 import { DeleteUserButton } from "./_components/_delete-user-button";
 import { UserProfileAvatarForm } from "./_components/_profile-avatar-form";
 import { UserProfileForm } from "./_components/_profile-form";
-import { ProfileLanguageChange } from "./_components/_profile-language-change";
 
 interface Props {
   params: {
@@ -54,6 +55,8 @@ export default async function EditUserPage({ params }: Props) {
     notFound();
   }
 
+  const boards = await api.board.getAllBoards();
+
   const isCredentialsUser = user.provider === "credentials";
 
   return (
@@ -74,7 +77,21 @@ export default async function EditUserPage({ params }: Props) {
         </Box>
       </Group>
 
-      <ProfileLanguageChange />
+      <Stack mb="lg">
+        <Title order={2}>{tGeneral("item.language")}</Title>
+        <LanguageCombobox />
+      </Stack>
+
+      <Stack mb="lg">
+        <Title order={2}>{tGeneral("item.board")}</Title>
+        <ChangeHomeBoardForm
+          user={user}
+          boardsData={boards.map((board) => ({
+            value: board.id,
+            label: board.name,
+          }))}
+        />
+      </Stack>
 
       {isCredentialsUser && (
         <DangerZoneRoot>