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}
+
+
+ )}
+ {...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 (