fix: align mobile root section ordering

Author: ajnart

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

@@ -11,18 +11,13 @@ 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, mobileColumnCount } from "./mobile-layout";
+import { createMobileBoardItems, getMobileRootSection, 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") ?? {
-    id: "mobile",
-    kind: "empty" as const,
-    xOffset: 0,
-    yOffset: 0,
-  };
+  const rootSection = getMobileRootSection(board);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const itemRefs = useRef<Record<string, RefObject<GridItemHTMLElement | null>>>({});
   const gridstackRef = useRef<GridStackInstance | null>(null);

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

@@ -5,9 +5,20 @@ import { BoardMockBuilder } from "../items/actions/test/mocks/board-mock";
 import { DynamicSectionMockBuilder } from "../items/actions/test/mocks/dynamic-section-mock";
 import { EmptySectionMockBuilder } from "../items/actions/test/mocks/empty-section-mock";
 import { ItemMockBuilder } from "../items/actions/test/mocks/item-mock";
-import { createMobileBoardItems } from "./mobile-layout";
+import { createMobileBoardItems, getMobileRootSection } from "./mobile-layout";
 
 describe("createMobileBoardItems", () => {
+  test("selects the first root section in visual order", () => {
+    const board = new BoardMockBuilder().build();
+    board.sections.push(
+      new EmptySectionMockBuilder({ id: "stored-first", xOffset: 0, yOffset: 1 }).build(),
+      new EmptySectionMockBuilder({ id: "visually-first", xOffset: 1, yOffset: 0 }).build(),
+      new EmptySectionMockBuilder({ id: "visually-second", xOffset: 2, yOffset: 0 }).build(),
+    );
+
+    expect(getMobileRootSection(board).id).toBe("visually-first");
+  });
+
   test("flattens categories and dynamic sections in visual order", () => {
     const board = new BoardMockBuilder().build();
     const desktopLayoutId = board.layouts.at(0)?.id;

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

@@ -15,6 +15,19 @@ type PositionedLayout = {
 const comparePosition = (elementA: PositionedElement, elementB: PositionedElement) =>
   elementA.yOffset - elementB.yOffset || elementA.xOffset - elementB.xOffset;
 
+const getMobileRootSections = (board: Board) =>
+  board.sections
+    .filter((section) => section.kind !== "dynamic")
+    .toSorted((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset || sectionA.xOffset - sectionB.xOffset);
+
+export const getMobileRootSection = (board: Board) =>
+  getMobileRootSections(board)[0] ?? {
+    id: "mobile",
+    kind: "empty" as const,
+    xOffset: 0,
+    yOffset: 0,
+  };
+
 const getLayout = <TLayout extends PositionedLayout>(
   layouts: TLayout[],
   desktopLayoutId: string,
@@ -26,9 +39,7 @@ const getLayout = <TLayout extends PositionedLayout>(
   )[0];
 
 export const createMobileBoardItems = (board: Board, desktopLayoutId: string): SectionItem[] => {
-  const rootSections = board.sections
-    .filter((section) => section.kind !== "dynamic")
-    .toSorted((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset || sectionA.xOffset - sectionB.xOffset);
+  const rootSections = getMobileRootSections(board);
   const defaultSectionId = rootSections[0]?.id ?? "mobile";
   const layoutPriority = new Map(
     board.layouts