diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx index 36818573a..1ffb892d1 100644 --- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx +++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx @@ -101,7 +101,11 @@ export default async function BoardSettingsPage(props: Props) { - + )} diff --git a/apps/nextjs/src/app/[locale]/manage/boards/_components/board-card-menu-dropdown.tsx b/apps/nextjs/src/app/[locale]/manage/boards/_components/board-card-menu-dropdown.tsx index eef7dedb2..68ecf3a57 100644 --- a/apps/nextjs/src/app/[locale]/manage/boards/_components/board-card-menu-dropdown.tsx +++ b/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) => }> {t("setHomeBoard.label")} + }> + {t("setMobileHomeBoard.label")} + {session?.user.permissions.includes("board-create") && ( }> {t("duplicate.label")} diff --git a/apps/nextjs/src/app/[locale]/manage/boards/page.tsx b/apps/nextjs/src/app/[locale]/manage/boards/page.tsx index 2b1529894..4974b6a86 100644 --- a/apps/nextjs/src/app/[locale]/manage/boards/page.tsx +++ b/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) => { )} + {board.isMobileHome && ( + + }> + {t("action.setMobileHomeBoard.badge.label")} + + + )} + {board.creator && ( diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx index 8890cbce0..69f2329b0 100644 --- a/apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx +++ b/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")} /> + ({ + value: board.id, + label: board.name, + image: board.logoImageUrl, + }))} + SelectOption={({ label, image }: { value: string; label: string; image: string | null }) => ( + + {/* eslint-disable-next-line @next/next/no-img-element */} + {image ? {label} : } + + {label} + + + )} + {...form.getInputProps("mobileHomeBoardId")} + /> )} diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_change-home-board.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_change-home-board.tsx index b6fe54770..1666e15b2 100644 --- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_change-home-board.tsx +++ b/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 (
- +