feat: add home board for users (#505)

* feat: add home board for users

* fix: format issues

* fix: deepsource issue

* chore: address pull request feedback

* fix: typecheck issue

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 { IconSettings, IconTrash } from "@tabler/icons-react";
+import { IconHome, IconSettings, IconTrash } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -40,7 +40,13 @@ export const BoardCardMenuDropdown = ({
 
   const { openConfirmModal } = useConfirmModal();
 
-  const { mutateAsync, isPending } = clientApi.board.deleteBoard.useMutation({
+  const setHomeBoardMutation = clientApi.board.setHomeBoard.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");
     },
@@ -54,23 +60,36 @@ export const BoardCardMenuDropdown = ({
       }),
       // eslint-disable-next-line no-restricted-syntax
       onConfirm: async () => {
-        await mutateAsync({
+        await deleteBoardMutation.mutateAsync({
           id: board.id,
         });
       },
     });
-  }, [board.id, board.name, mutateAsync, openConfirmModal, t]);
+  }, [board.id, board.name, deleteBoardMutation, openConfirmModal, t]);
+
+  const handleSetHomeBoard = useCallback(async () => {
+    await setHomeBoardMutation.mutateAsync({ id: board.id });
+  }, [board.id, setHomeBoardMutation]);
 
   return (
     <Menu.Dropdown>
+      <Menu.Item
+        onClick={handleSetHomeBoard}
+        leftSection={<IconHome {...iconProps} />}
+      >
+        {t("setHomeBoard.label")}
+      </Menu.Item>
       {hasChangeAccess && (
-        <Menu.Item
-          component={Link}
-          href={`/boards/${board.name}/settings`}
-          leftSection={<IconSettings {...iconProps} />}
-        >
-          {t("settings.label")}
-        </Menu.Item>
+        <>
+          <Menu.Divider />
+          <Menu.Item
+            component={Link}
+            href={`/boards/${board.name}/settings`}
+            leftSection={<IconSettings {...iconProps} />}
+          >
+            {t("settings.label")}
+          </Menu.Item>
+        </>
       )}
       {hasFullAccess && (
         <>
@@ -80,7 +99,7 @@ export const BoardCardMenuDropdown = ({
             c="red.7"
             leftSection={<IconTrash {...iconProps} />}
             onClick={handleDeletion}
-            disabled={isPending}
+            disabled={deleteBoardMutation.isPending}
           >
             {t("delete.label")}
           </Menu.Item>

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

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import {
   ActionIcon,
+  Badge,
   Button,
   Card,
   CardSection,
@@ -13,7 +14,12 @@ import {
   Title,
   Tooltip,
 } from "@mantine/core";
-import { IconDotsVertical, IconLock, IconWorld } from "@tabler/icons-react";
+import {
+  IconDotsVertical,
+  IconHomeFilled,
+  IconLock,
+  IconWorld,
+} from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
@@ -71,12 +77,27 @@ const BoardCard = async ({ board }: BoardCardProps) => {
             </Text>
           </Group>
 
-          {board.creator && (
-            <Group gap="xs">
-              <UserAvatar user={board.creator} size="sm" />
-              <Text>{board.creator?.name}</Text>
-            </Group>
-          )}
+          <Group>
+            {board.isHome && (
+              <Tooltip label={t("action.setHomeBoard.badge.tooltip")}>
+                <Badge
+                  tt="none"
+                  color="yellow"
+                  variant="light"
+                  leftSection={<IconHomeFilled size=".7rem" />}
+                >
+                  {t("action.setHomeBoard.badge.label")}
+                </Badge>
+              </Tooltip>
+            )}
+
+            {board.creator && (
+              <Group gap="xs">
+                <UserAvatar user={board.creator} size="sm" />
+                <Text>{board.creator?.name}</Text>
+              </Group>
+            )}
+          </Group>
         </Group>
       </CardSection>