feat: improve mobile board experience

Author: ajnart

apps/docs/docs/management/boards/index.mdx

@@ -83,9 +83,13 @@ Changing the column count automatically adjusts item positions and sizes to fit
 
 #### Mobile layout
 
-Mobile boards use an automatic, read-only layout with two columns. Items follow the visual order of the desktop layout and are limited to two columns wide and three rows high.
+Phones use an automatic, read-only layout with exactly two columns in both portrait and landscape. Tablets use this layout at widths up to 48em. Items follow the visual order of the desktop layout and are limited to two columns wide and three rows high.
 
-Categories and dynamic sections are not displayed as containers on mobile. Their items are included directly in the automatic grid, even when a category is collapsed on desktop. To rearrange, add, remove, or resize board items, open the board on a larger screen.
+Named categories and dynamic sections appear as lightweight headings and section shortcuts, but never as layout containers. Their items are included directly in the automatic grid, even when a category is collapsed on desktop. Layout and widget configuration stay locked on mobile; links, refresh actions, automations, and widget details remain interactive.
+
+App items use compact tiles. Widgets can opt into a compact summary, and larger widgets provide a full-screen detail view. Widgets farther down a long board are loaded shortly before they enter the viewport while their space is preserved with a skeleton.
+
+To rearrange, add, remove, resize, or configure board items, open the board on a larger screen.
 
 ### Background
 #### Background image URL

apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx

@@ -44,6 +44,7 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
       headerActions: <BoardContentHeaderActions demoReadOnly={env.DEMO_MODE && env.DEMO_READ_ONLY} />,
       getInitialBoardAsync: getInitialBoard,
       withTour: true,
+      mobileProfileInActions: true,
     }),
     // eslint-disable-next-line no-restricted-syntax
     page: async ({ params }: { params: Promise<TParams> }) => {

apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { useRouter } from "next/navigation";
 import { OnboardingTour } from "@gfazioli/mantine-onboarding-tour";
-import { Box, Group, Menu, ScrollArea } from "@mantine/core";
-import { useHotkeys } from "@mantine/hooks";
+import { Box, Button, Divider, Drawer, Group, Menu, ScrollArea, Stack, Text } from "@mantine/core";
+import { useDisclosure, useHotkeys, useReducedMotion } from "@mantine/hooks";
 import {
   IconBox,
   IconBoxAlignTop,
@@ -17,11 +17,18 @@ import {
   IconReplace,
   IconResize,
   IconSettings,
+  IconDotsVertical,
+  IconHome,
+  IconLogin,
+  IconList,
+  IconLogout,
+  IconTool,
+  IconUser,
 } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
-import { useSession } from "@homarr/auth/client";
-import { useRequiredBoard } from "@homarr/boards/context";
+import { signOut, useSession } from "@homarr/auth/client";
+import { getDesktopLayout, useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
 import { revalidatePathActionAsync } from "@homarr/common/client";
 import { env } from "@homarr/common/env";
@@ -32,21 +39,30 @@ import { showErrorNotification, showSuccessNotification } from "@homarr/notifica
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import { Link } from "@homarr/ui";
 
+import { useAuthContext } from "~/app/[locale]/_client-providers/session";
 import { useItemActions } from "~/components/board/items/item-actions";
 import { ItemSelectModal } from "~/components/board/items/item-select-modal";
 import { useBoardPermissions } from "~/components/board/permissions/client";
 import { useCategoryActions } from "~/components/board/sections/category/category-actions";
 import { CategoryEditModal } from "~/components/board/sections/category/category-edit-modal";
 import { useDynamicSectionActions } from "~/components/board/sections/dynamic/dynamic-actions";
+import { createMobileBoardElements } from "~/components/board/mobile/mobile-layout";
 import { useIsMobileBoard } from "~/components/board/use-mobile-board";
 import { IntegrationSelectModal } from "~/components/integration/integration-select-modal";
+import { CurrentColorSchemeCombobox } from "~/components/color-scheme/current-color-scheme-combobox";
+import { CurrentLanguageCombobox } from "~/components/language/current-language-combobox";
 import { HeaderButton } from "~/components/layout/header/button";
 
 export const BoardContentHeaderActions = ({ demoReadOnly }: { demoReadOnly: boolean }) => {
   const [isEditMode] = useEditMode();
   const board = useRequiredBoard();
   const { hasChangeAccess } = useBoardPermissions(board);
   const isMobile = useIsMobileBoard();
+  const t = useI18n();
+
+  if (isMobile) {
+    return <MobileMoreMenu showSettings={hasChangeAccess && !demoReadOnly} />;
+  }
 
   if (!hasChangeAccess) {
     return <SelectBoardsMenu />;
@@ -60,7 +76,7 @@ export const BoardContentHeaderActions = ({ demoReadOnly }: { demoReadOnly: bool
 
       {!demoReadOnly && (
         <OnboardingTour.Target id="board-settings">
-          <HeaderButton href={`/boards/${board.name}/settings`}>
+          <HeaderButton href={`/boards/${board.name}/settings`} aria-label={t("item.menu.label.settings")}>
             <IconSettings stroke={1.5} />
           </HeaderButton>
         </OnboardingTour.Target>
@@ -125,7 +141,7 @@ const AddMenu = () => {
   return (
     <Menu position="bottom-end">
       <Menu.Target>
-        <HeaderButton w="auto" px={4}>
+        <HeaderButton w="auto" px={4} aria-label={t("common.action.add")}>
           <Group gap={4} wrap="nowrap">
             <IconPlus stroke={1.5} />
             <IconChevronDown color="gray" size={16} />
@@ -164,6 +180,7 @@ const EditModeMenu = ({ demoReadOnly, hidden }: { demoReadOnly: boolean; hidden:
   const board = useRequiredBoard();
   const utils = clientApi.useUtils();
   const t = useScopedI18n("board.action.edit");
+  const tItem = useScopedI18n("item");
   const { mutate: saveBoard, isPending } = clientApi.board.saveBoard.useMutation({
     onSuccess() {
       showSuccessNotification({
@@ -203,7 +220,7 @@ const EditModeMenu = ({ demoReadOnly, hidden }: { demoReadOnly: boolean; hidden:
 
   return (
     <OnboardingTour.Target id="board-edit-mode">
-      <HeaderButton onClick={toggle} loading={isPending}>
+      <HeaderButton onClick={toggle} loading={isPending} aria-label={tItem("action.edit")}>
         {isEditMode ? <IconPencilOff stroke={1.5} /> : <IconPencil stroke={1.5} />}
       </HeaderButton>
     </OnboardingTour.Target>
@@ -212,13 +229,14 @@ const EditModeMenu = ({ demoReadOnly, hidden }: { demoReadOnly: boolean; hidden:
 
 const SelectBoardsMenu = () => {
   const { data: boards = [] } = clientApi.board.getAllBoards.useQuery();
+  const t = useI18n();
 
   return (
     <OnboardingTour.Target id="board-switcher">
       <Box>
         <Menu position="bottom-end">
           <Menu.Target>
-            <HeaderButton w="auto" px={4}>
+            <HeaderButton w="auto" px={4} aria-label={t("board.mobile.currentBoard")}>
               <IconReplace stroke={1.5} />
             </HeaderButton>
           </Menu.Target>
@@ -242,6 +260,145 @@ const SelectBoardsMenu = () => {
   );
 };
 
+const MobileMoreMenu = ({ showSettings }: { showSettings: boolean }) => {
+  const board = useRequiredBoard();
+  const { data: session } = useSession();
+  const { logoutUrl } = useAuthContext();
+  const t = useI18n();
+  const tProfile = useScopedI18n("common.userAvatar.menu");
+  const reduceMotion = useReducedMotion();
+  const [opened, disclosure] = useDisclosure(false);
+  const desktopLayout = getDesktopLayout(board);
+  const sections = useMemo(
+    () => createMobileBoardElements(board, desktopLayout.id).filter((element) => element.type === "sectionHeading"),
+    [board, desktopLayout.id],
+  );
+
+  const jumpToSection = (anchorId: string) => {
+    disclosure.close();
+    requestAnimationFrame(() => {
+      const heading = document.getElementById(anchorId);
+      heading?.scrollIntoView({ behavior: reduceMotion ? "auto" : "smooth", block: "start" });
+      heading?.focus({ preventScroll: true });
+    });
+  };
+
+  return (
+    <>
+      <HeaderButton onClick={disclosure.open} aria-label={t("board.mobile.more")}>
+        <IconDotsVertical stroke={1.5} />
+      </HeaderButton>
+      <Drawer
+        opened={opened}
+        onClose={disclosure.close}
+        title={t("board.mobile.more")}
+        position="bottom"
+        size="auto"
+        padding="md"
+        overlayProps={{ backgroundOpacity: 0.45, blur: 2 }}
+      >
+        <Stack gap="xs" pb="calc(var(--mantine-spacing-sm) + env(safe-area-inset-bottom))">
+          <Button
+            component={Link}
+            href="/boards"
+            variant="subtle"
+            size="lg"
+            justify="flex-start"
+            leftSection={<IconHome size={20} />}
+          >
+            {tProfile("homeBoard")}
+          </Button>
+          <CurrentColorSchemeCombobox w="100%" />
+          <CurrentLanguageCombobox width="100%" withinPortal={false} />
+          {session ? (
+            <>
+              <Button
+                component={Link}
+                href={`/manage/users/${session.user.id}/general`}
+                variant="subtle"
+                size="lg"
+                justify="flex-start"
+                leftSection={<IconUser size={20} />}
+              >
+                {tProfile("preferences")}
+              </Button>
+              <Button
+                component={Link}
+                href="/manage"
+                variant="subtle"
+                size="lg"
+                justify="flex-start"
+                leftSection={<IconTool size={20} />}
+              >
+                {tProfile("management")}
+              </Button>
+              <Button
+                variant="subtle"
+                color="red"
+                size="lg"
+                justify="flex-start"
+                leftSection={<IconLogout size={20} />}
+                onClick={() => {
+                  void signOut({ redirect: false }).then(() => {
+                    window.location.assign(logoutUrl ?? "/auth/login");
+                  });
+                }}
+              >
+                {tProfile("logout")}
+              </Button>
+            </>
+          ) : (
+            <Button
+              component={Link}
+              href="/auth/login"
+              variant="subtle"
+              size="lg"
+              justify="flex-start"
+              leftSection={<IconLogin size={20} />}
+            >
+              {tProfile("login")}
+            </Button>
+          )}
+          {showSettings && (
+            <Button
+              component={Link}
+              href={`/boards/${board.name}/settings`}
+              variant="subtle"
+              size="lg"
+              justify="flex-start"
+              leftSection={<IconSettings size={20} />}
+            >
+              {t("item.menu.label.settings")}
+            </Button>
+          )}
+          {sections.length >= 2 && (
+            <>
+              {showSettings && <Divider />}
+              <Group gap="xs" px="sm" pt="xs">
+                <IconList size={18} aria-hidden />
+                <Text size="sm" fw={600}>
+                  {t("board.mobile.sections")}
+                </Text>
+              </Group>
+              {sections.map((section) => (
+                <Button
+                  key={section.id}
+                  variant="subtle"
+                  size="lg"
+                  justify="flex-start"
+                  onClick={() => jumpToSection(section.anchorId)}
+                >
+                  {section.title}
+                </Button>
+              ))}
+            </>
+          )}
+        </Stack>
+      </Drawer>
+    </>
+  );
+};
+
 const anchorSelector = "a[href]:not([target='_blank'])";
 const usePreventLeaveWithDirty = (isDirty: boolean) => {
   const t = useI18n();

apps/nextjs/src/app/[locale]/boards/_board-switcher-logo.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { Group, Menu, ScrollArea, Text, UnstyledButton } from "@mantine/core";
+import { IconCheck, IconChevronDown, IconLayoutBoard } from "@tabler/icons-react";
+
+import { clientApi } from "@homarr/api/client";
+import { useRequiredBoard } from "@homarr/boards/context";
+import { useI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
+
+import { BoardLogo } from "~/components/layout/logo/board-logo";
+
+export const BoardSwitcherLogo = () => {
+  const board = useRequiredBoard();
+  const { data: boards = [] } = clientApi.board.getAllBoards.useQuery();
+  const t = useI18n();
+
+  return (
+    <Menu position="bottom-start" width={280}>
+      <Menu.Target>
+        <UnstyledButton
+          aria-label={`${t("board.mobile.currentBoard")}: ${board.name}`}
+          maw="min(42vw, 20rem)"
+          mih={44}
+          px={4}
+        >
+          <Group gap="xs" wrap="nowrap">
+            <BoardLogo size={28} />
+            <Text fw={600} truncate>
+              {board.name}
+            </Text>
+            <IconChevronDown size={16} aria-hidden />
+          </Group>
+        </UnstyledButton>
+      </Menu.Target>
+      <Menu.Dropdown>
+        <Menu.Label>{t("board.mobile.currentBoard")}</Menu.Label>
+        <ScrollArea.Autosize mah={320}>
+          {boards.map((availableBoard) => {
+            const isCurrent = availableBoard.id === board.id;
+            return (
+              <Menu.Item
+                key={availableBoard.id}
+                component={Link}
+                href={`/boards/${availableBoard.name}`}
+                leftSection={isCurrent ? <IconCheck size={20} /> : <IconLayoutBoard size={20} />}
+                aria-current={isCurrent ? "page" : undefined}
+              >
+                {availableBoard.name}
+              </Menu.Item>
+            );
+          })}
+        </ScrollArea.Autosize>
+      </Menu.Dropdown>
+    </Menu>
+  );
+};

apps/nextjs/src/app/[locale]/boards/_header-actions.tsx

@@ -3,14 +3,16 @@
 import { IconLayoutBoard } from "@tabler/icons-react";
 
 import { useRequiredBoard } from "@homarr/boards/context";
+import { useI18n } from "@homarr/translation/client";
 
 import { HeaderButton } from "~/components/layout/header/button";
 
 export const BoardOtherHeaderActions = () => {
   const board = useRequiredBoard();
+  const t = useI18n();
 
   return (
-    <HeaderButton href={`/boards/${board.name}`}>
+    <HeaderButton href={`/boards/${board.name}`} aria-label={t("common.userAvatar.menu.homeBoard")}>
       <IconLayoutBoard stroke={1.5} />
     </HeaderButton>
   );