feat(board): add mobile home board (#1910)

* feat(board): add mobile home board

* fix: add missing translations

* fix: mysql key reference with other datatype

* fix: format issue

* fix: missing trpc context arguments in tests

* fix: missing trpc context arguments in tests

apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx

@@ -101,7 +101,11 @@ export default async function BoardSettingsPage(props: Props) {
                 <BoardAccessSettings board={board} initialPermissions={permissions} />
               </AccordionItemFor>
               <AccordionItemFor value="dangerZone" icon={IconAlertTriangle} danger noPadding>
-                <DangerZoneSettingsContent hideVisibility={boardSettings.homeBoardId === board.id} />
+                <DangerZoneSettingsContent
+                  hideVisibility={
+                    boardSettings.homeBoardId === board.id || boardSettings.mobileHomeBoardId === board.id
+                  }
+                />
               </AccordionItemFor>
             </>
           )}

apps/nextjs/src/app/[locale]/manage/boards/_components/board-card-menu-dropdown.tsx

@@ -3,7 +3,7 @@
 import { useCallback } from "react";
 import Link from "next/link";
 import { Menu } from "@mantine/core";
-import { IconCopy, IconHome, IconSettings, IconTrash } from "@tabler/icons-react";
+import { IconCopy, IconDeviceMobile, IconHome, IconSettings, IconTrash } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -43,6 +43,12 @@ export const BoardCardMenuDropdown = ({ board }: BoardCardMenuDropdownProps) =>
       await revalidatePathActionAsync("/");
     },
   });
+  const setMobileHomeBoardMutation = clientApi.board.setMobileHomeBoard.useMutation({
+    onSettled: async () => {
+      // Revalidate all as it's part of the user settings, /boards page and board manage page
+      await revalidatePathActionAsync("/");
+    },
+  });
   const deleteBoardMutation = clientApi.board.deleteBoard.useMutation({
     onSettled: async () => {
       await revalidatePathActionAsync("/manage/boards");
@@ -68,6 +74,10 @@ export const BoardCardMenuDropdown = ({ board }: BoardCardMenuDropdownProps) =>
     await setHomeBoardMutation.mutateAsync({ id: board.id });
   }, [board.id, setHomeBoardMutation]);
 
+  const handleSetMobileHomeBoard = useCallback(async () => {
+    await setMobileHomeBoardMutation.mutateAsync({ id: board.id });
+  }, [board.id, setMobileHomeBoardMutation]);
+
   const handleDuplicateBoard = useCallback(() => {
     openDuplicateModal({
       board: {
@@ -85,6 +95,9 @@ export const BoardCardMenuDropdown = ({ board }: BoardCardMenuDropdownProps) =>
       <Menu.Item onClick={handleSetHomeBoard} leftSection={<IconHome {...iconProps} />}>
         {t("setHomeBoard.label")}
       </Menu.Item>
+      <Menu.Item onClick={handleSetMobileHomeBoard} leftSection={<IconDeviceMobile {...iconProps} />}>
+        {t("setMobileHomeBoard.label")}
+      </Menu.Item>
       {session?.user.permissions.includes("board-create") && (
         <Menu.Item onClick={handleDuplicateBoard} leftSection={<IconCopy {...iconProps} />}>
           {t("duplicate.label")}

apps/nextjs/src/app/[locale]/manage/boards/page.tsx

@@ -15,7 +15,7 @@ import {
   Title,
   Tooltip,
 } from "@mantine/core";
-import { IconDotsVertical, IconHomeFilled, IconLock, IconWorld } from "@tabler/icons-react";
+import { IconDeviceMobile, IconDotsVertical, IconHomeFilled, IconLock, IconWorld } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
@@ -88,6 +88,14 @@ const BoardCard = async ({ board }: BoardCardProps) => {
               </Tooltip>
             )}
 
+            {board.isMobileHome && (
+              <Tooltip label={t("action.setMobileHomeBoard.badge.tooltip")}>
+                <Badge tt="none" color="yellow" variant="light" leftSection={<IconDeviceMobile size=".7rem" />}>
+                  {t("action.setMobileHomeBoard.badge.label")}
+                </Badge>
+              </Tooltip>
+            )}
+
             {board.creator && (
               <Group gap="xs">
                 <UserAvatar user={board.creator} size="sm" />

apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx

@@ -37,6 +37,25 @@ export const BoardSettingsForm = ({ defaultValues }: { defaultValues: ServerSett
             )}
             {...form.getInputProps("homeBoardId")}
           />
+          <SelectWithCustomItems
+            label={tBoard("homeBoard.mobileLabel")}
+            description={tBoard("homeBoard.description")}
+            data={selectableBoards.map((board) => ({
+              value: board.id,
+              label: board.name,
+              image: board.logoImageUrl,
+            }))}
+            SelectOption={({ label, image }: { value: string; label: string; image: string | null }) => (
+              <Group>
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                {image ? <img width={16} height={16} src={image} alt={label} /> : <IconLayoutDashboard size={16} />}
+                <Text fz="sm" fw={500}>
+                  {label}
+                </Text>
+              </Group>
+            )}
+            {...form.getInputProps("mobileHomeBoardId")}
+          />
         </>
       )}
     </CommonSettingsForm>

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

@@ -18,13 +18,14 @@ interface ChangeHomeBoardFormProps {
 
 export const ChangeHomeBoardForm = ({ user, boardsData }: ChangeHomeBoardFormProps) => {
   const t = useI18n();
-  const { mutate, isPending } = clientApi.user.changeHomeBoardId.useMutation({
+  const { mutate, isPending } = clientApi.user.changeHomeBoards.useMutation({
     async onSettled() {
       await revalidatePathActionAsync(`/manage/users/${user.id}`);
     },
     onSuccess(_, variables) {
       form.setInitialValues({
         homeBoardId: variables.homeBoardId,
+        mobileHomeBoardId: variables.mobileHomeBoardId,
       });
       showSuccessNotification({
         message: t("user.action.changeHomeBoard.notification.success.message"),
@@ -36,9 +37,10 @@ export const ChangeHomeBoardForm = ({ user, boardsData }: ChangeHomeBoardFormPro
       });
     },
   });
-  const form = useZodForm(validation.user.changeHomeBoard, {
+  const form = useZodForm(validation.user.changeHomeBoards, {
     initialValues: {
       homeBoardId: user.homeBoardId ?? "",
+      mobileHomeBoardId: user.mobileHomeBoardId ?? "",
     },
   });
 
@@ -52,7 +54,18 @@ export const ChangeHomeBoardForm = ({ user, boardsData }: ChangeHomeBoardFormPro
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
       <Stack gap="md">
-        <Select w="100%" data={boardsData} {...form.getInputProps("homeBoardId")} />
+        <Select
+          label={t("management.page.user.setting.general.item.board.type.general")}
+          w="100%"
+          data={boardsData}
+          {...form.getInputProps("homeBoardId")}
+        />
+        <Select
+          label={t("management.page.user.setting.general.item.board.type.mobile")}
+          w="100%"
+          data={boardsData}
+          {...form.getInputProps("mobileHomeBoardId")}
+        />
 
         <Group justify="end">
           <Button type="submit" color="teal" loading={isPending}>
@@ -64,4 +77,4 @@ export const ChangeHomeBoardForm = ({ user, boardsData }: ChangeHomeBoardFormPro
   );
 };
 
-type FormType = z.infer<typeof validation.user.changeHomeBoard>;
+type FormType = z.infer<typeof validation.user.changeHomeBoards>;

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

@@ -89,7 +89,7 @@ export default async function EditUserPage(props: Props) {
       </Stack>
 
       <Stack mb="lg">
-        <Title order={2}>{tGeneral("item.board")}</Title>
+        <Title order={2}>{tGeneral("item.board.title")}</Title>
         <ChangeHomeBoardForm
           user={user}
           boardsData={boards.map((board) => ({