fix: address board review and CI feedback

apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx

@@ -1,4 +1,5 @@
 import type { JSX, PropsWithChildren } from "react";
+import { headers } from "next/headers";
 import { notFound, redirect } from "next/navigation";
 import { AppShellMain } from "@mantine/core";
 import { TRPCError } from "@trpc/server";
@@ -6,8 +7,10 @@ import { TRPCError } from "@trpc/server";
 import { auth } from "@homarr/auth/next";
 import { BoardProvider } from "@homarr/boards/context";
 import { EditModeProvider } from "@homarr/boards/edit-mode";
+import { userAgent } from "@homarr/common/server";
 import { createLogger } from "@homarr/core/infrastructure/logs";
 
+import { MobileBoardViewportProvider } from "~/components/board/use-mobile-board";
 import { MainHeader } from "~/components/layout/header";
 import { BoardLogoWithTitle } from "~/components/layout/logo/board-logo";
 import { ClientShell } from "~/components/layout/shell";
@@ -61,28 +64,31 @@ export const createBoardLayout = <TParams extends Params>({
 
       throw error;
     });
-    const colorScheme = await getCurrentColorSchemeAsync();
+    const [colorScheme, requestHeaders] = await Promise.all([getCurrentColorSchemeAsync(), headers()]);
+    const initialIsMobile = userAgent(new Headers(requestHeaders)).device.type === "mobile";
 
     return (
-      <BoardProvider initialBoard={initialBoard}>
-        <BoardReadyProvider>
-          <EditModeProvider>
-            <BoardMantineProvider defaultColorScheme={colorScheme}>
-              <CustomCss />
-              <BoardTourWrapper hasSession={withTour && !!session}>
-                <ClientShell hasNavigation={false}>
-                  <MainHeader
-                    logo={<BoardLogoWithTitle size="md" hideTitleOnMobile />}
-                    actions={headerActions}
-                    hasNavigation={false}
-                  />
-                  <AppShellMain>{children}</AppShellMain>
-                </ClientShell>
-              </BoardTourWrapper>
-            </BoardMantineProvider>
-          </EditModeProvider>
-        </BoardReadyProvider>
-      </BoardProvider>
+      <MobileBoardViewportProvider initialIsMobile={initialIsMobile}>
+        <BoardProvider initialBoard={initialBoard}>
+          <BoardReadyProvider>
+            <EditModeProvider>
+              <BoardMantineProvider defaultColorScheme={colorScheme}>
+                <CustomCss />
+                <BoardTourWrapper hasSession={withTour && !!session}>
+                  <ClientShell hasNavigation={false}>
+                    <MainHeader
+                      logo={<BoardLogoWithTitle size="md" hideTitleOnMobile />}
+                      actions={headerActions}
+                      hasNavigation={false}
+                    />
+                    <AppShellMain>{children}</AppShellMain>
+                  </ClientShell>
+                </BoardTourWrapper>
+              </BoardMantineProvider>
+            </EditModeProvider>
+          </BoardReadyProvider>
+        </BoardProvider>
+      </MobileBoardViewportProvider>
     );
   };
 

apps/nextjs/src/components/board/mobile/mobile-board.module.css

@@ -1,6 +1,6 @@
 .grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(var(--mobile-column-count), minmax(0, 1fr));
   grid-auto-flow: row;
   grid-auto-rows: min(calc((100vw - 42px) / 2), 12rem);
   gap: 10px;

apps/nextjs/src/components/board/mobile/mobile-board.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { RefObject } from "react";
+import type { CSSProperties, RefObject } from "react";
 import { useMemo, useRef } from "react";
 import { Box } from "@mantine/core";
 
@@ -11,19 +11,22 @@ import type { GridItemHTMLElement, GridStack as GridStackInstance } from "@homar
 import { BoardItemContent } from "../items/item-content";
 import { SectionProvider } from "../sections/section-context";
 import classes from "./mobile-board.module.css";
-import { createMobileBoardItems } from "./mobile-layout";
+import { createMobileBoardItems, mobileColumnCount } from "./mobile-layout";
 
 export const MobileBoard = () => {
   const board = useRequiredBoard();
   const desktopLayout = getDesktopLayout(board);
   const items = useMemo(() => createMobileBoardItems(board, desktopLayout.id), [board, desktopLayout.id]);
-  const rootSection = board.sections.find((section) => section.kind !== "dynamic");
+  const rootSection = board.sections.find((section) => section.kind !== "dynamic") ?? {
+    id: "mobile",
+    kind: "empty" as const,
+    xOffset: 0,
+    yOffset: 0,
+  };
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const itemRefs = useRef<Record<string, RefObject<GridItemHTMLElement | null>>>({});
   const gridstackRef = useRef<GridStackInstance | null>(null);
 
-  if (!rootSection) return null;
-
   return (
     <ReadOnlyEditModeProvider>
       <SectionProvider
@@ -34,7 +37,11 @@ export const MobileBoard = () => {
           refs: { wrapper: wrapperRef, items: itemRefs, gridstack: gridstackRef },
         }}
       >
-        <Box className={classes.grid} data-mobile-board>
+        <Box
+          className={classes.grid}
+          style={{ "--mobile-column-count": mobileColumnCount } as CSSProperties}
+          data-mobile-board
+        >
           {items.map((item) => (
             <Box
               key={item.id}

apps/nextjs/src/components/board/mobile/mobile-layout.ts

@@ -1,6 +1,6 @@
 import type { Board, DynamicSectionItem, ItemLayout, SectionItem } from "~/app/[locale]/boards/_types";
 
-const mobileColumnCount = 2;
+export const mobileColumnCount = 2;
 const mobileMaxHeight = 3;
 
 type PositionedElement = DynamicSectionItem | SectionItem;

apps/nextjs/src/components/board/use-mobile-board.ts

@@ -1,7 +0,0 @@
-"use client";
-
-import { useMediaQuery } from "@mantine/hooks";
-
-export const mobileBoardMediaQuery = "(max-width: 48em)";
-
-export const useIsMobileBoard = () => useMediaQuery(mobileBoardMediaQuery);

apps/nextjs/src/components/board/use-mobile-board.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { createContext, useContext } from "react";
+import { useMediaQuery } from "@mantine/hooks";
+
+export const mobileBoardMediaQuery = "(max-width: 48em)";
+
+const InitialMobileBoardContext = createContext<boolean | undefined>(undefined);
+
+export const MobileBoardViewportProvider = ({
+  initialIsMobile,
+  children,
+}: PropsWithChildren<{ initialIsMobile: boolean }>) => (
+  <InitialMobileBoardContext.Provider value={initialIsMobile}>{children}</InitialMobileBoardContext.Provider>
+);
+
+export const useIsMobileBoard = () => {
+  const initialIsMobile = useContext(InitialMobileBoardContext);
+  return useMediaQuery(mobileBoardMediaQuery, initialIsMobile, { getInitialValueInEffect: true });
+};