refactor: simplify mobile board layouts

apps/nextjs/src/components/board/sections/category/category-menu-actions.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 
 import { fetchApi } from "@homarr/api/client";
-import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
+import { getCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 import { createId } from "@homarr/common";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { useSettings } from "@homarr/settings";
@@ -18,7 +18,6 @@ export const useCategoryMenuActions = (category: CategorySection) => {
   const { addCategory, moveCategory, removeCategory, renameCategory } = useCategoryActions();
   const t = useI18n();
   const board = useRequiredBoard();
-  const currentLayoutId = useCurrentLayout();
 
   const createCategoryAtYOffset = useCallback(
     (position: number) => {
@@ -105,6 +104,7 @@ export const useCategoryMenuActions = (category: CategorySection) => {
 
   const settings = useSettings();
   const openAllInNewTabs = useCallback(async () => {
+    const currentLayoutId = getCurrentLayout(board);
     const appIds = (
       await filterByItemKind(
         board.items.filter(
@@ -132,7 +132,7 @@ export const useCategoryMenuActions = (category: CategorySection) => {
       });
       break;
     }
-  }, [category, board, currentLayoutId, t, openConfirmModal, settings]);
+  }, [category, board, t, openConfirmModal, settings]);
 
   return {
     addCategoryAbove,

apps/nextjs/src/components/board/sections/dynamic-section.tsx

@@ -1,7 +1,7 @@
 import { Badge, Box, Card } from "@mantine/core";
 import combineClasses from "clsx";
 
-import { useRequiredBoard } from "@homarr/boards/context";
+import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 
 import type { DynamicSectionItem } from "~/app/[locale]/boards/_types";
 import { BoardDynamicSectionMenu } from "./dynamic/dynamic-menu";
@@ -14,6 +14,7 @@ interface Props {
 
 export const BoardDynamicSection = ({ section }: Props) => {
   const board = useRequiredBoard();
+  const currentLayoutId = useCurrentLayout();
   const options = section.options;
 
   return (
@@ -51,7 +52,8 @@ export const BoardDynamicSection = ({ section }: Props) => {
             {options.title}
           </Badge>
         )}
-        <GridStack section={section} className="min-row" />
+        {/* Use unique key by layout to reinitialize gridstack */}
+        <GridStack key={`${currentLayoutId}-${section.id}`} section={section} className="min-row" />
       </Card>
       <BoardDynamicSectionMenu section={section} />
     </Box>

apps/nextjs/src/components/board/sections/gridstack/gridstack.tsx

@@ -4,8 +4,6 @@ import type { BoxProps } from "@mantine/core";
 import { Box } from "@mantine/core";
 import combineClasses from "clsx";
 
-import { useCurrentLayout } from "@homarr/boards/context";
-
 import type { DynamicSectionItem, Section } from "~/app/[locale]/boards/_types";
 import { SectionContent } from "../content";
 import { SectionProvider } from "../section-context";
@@ -17,12 +15,6 @@ interface Props extends BoxProps {
 }
 
 export const GridStack = ({ section, ...props }: Props) => {
-  const currentLayoutId = useCurrentLayout();
-
-  return <GridStackForLayout key={currentLayoutId} section={section} {...props} />;
-};
-
-const GridStackForLayout = ({ section, ...props }: Props) => {
   const { items, innerSections } = useSectionItems(section.id);
   const itemIds = [...items, ...innerSections].map((item) => item.id);
 

apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts

@@ -103,7 +103,6 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
         // Updates the react-query state
         moveAndResizeItem({
           itemId: id,
-          layoutId: currentLayoutId,
           // We want the following properties to be null by default
           // so the next free position is used from the gridstack
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -121,7 +120,6 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
       if (type === "section") {
         moveAndResizeInnerSection({
           innerSectionId: id,
-          layoutId: currentLayoutId,
           // We want the following properties to be null by default
           // so the next free position is used from the gridstack
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -138,7 +136,7 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
 
       console.error(`Unknown grid-stack-item type to move. type='${type}' id='${id}'`);
     },
-    [currentLayoutId, moveAndResizeItem, moveAndResizeInnerSection],
+    [moveAndResizeItem, moveAndResizeInnerSection],
   );
   const onAdd = useCallback(
     (addedNode: GridStackNode) => {
@@ -151,7 +149,6 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
         // Updates the react-query state
         moveItemToSection({
           itemId: id,
-          layoutId: currentLayoutId,
           sectionId: section.id,
           // We want the following properties to be null by default
           // so the next free position is used from the gridstack
@@ -170,7 +167,6 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
       if (type === "section") {
         moveInnerSectionToSection({
           innerSectionId: id,
-          layoutId: currentLayoutId,
           sectionId: section.id,
           // We want the following properties to be null by default
           // so the next free position is used from the gridstack
@@ -188,7 +184,7 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
 
       console.error(`Unknown grid-stack-item type to add. type='${type}' id='${id}'`);
     },
-    [currentLayoutId, moveItemToSection, moveInnerSectionToSection, section.id],
+    [moveItemToSection, moveInnerSectionToSection, section.id],
   );
 
   // initialize the gridstack

apps/nextjs/src/components/board/sections/section-actions.tsx

@@ -1,10 +1,10 @@
 import { useCallback } from "react";
 
+import { getCurrentLayout } from "@homarr/boards/context";
 import { useUpdateBoard } from "@homarr/boards/updater";
 
 interface MoveAndResizeInnerSection {
   innerSectionId: string;
-  layoutId: string;
   xOffset: number;
   yOffset: number;
   width: number;
@@ -12,7 +12,6 @@ interface MoveAndResizeInnerSection {
 }
 interface MoveInnerSectionToSection {
   innerSectionId: string;
-  layoutId: string;
   sectionId: string;
   xOffset: number;
   yOffset: number;
@@ -24,7 +23,7 @@ export const useSectionActions = () => {
   const { updateBoard } = useUpdateBoard();
 
   const moveAndResizeInnerSection = useCallback(
-    ({ innerSectionId, layoutId, ...positionProps }: MoveAndResizeInnerSection) => {
+    ({ innerSectionId, ...positionProps }: MoveAndResizeInnerSection) => {
       updateBoard((previous) => ({
         ...previous,
         sections: previous.sections.map((section) => {
@@ -32,10 +31,12 @@ export const useSectionActions = () => {
           if (section.id !== innerSectionId) return section;
           if (section.kind !== "dynamic") return section;
 
+          const currentLayout = getCurrentLayout(previous);
+
           return {
             ...section,
             layouts: section.layouts.map((layout) => {
-              if (layout.layoutId !== layoutId) return layout;
+              if (layout.layoutId !== currentLayout) return layout;
               return {
                 ...layout,
                 ...positionProps,
@@ -49,7 +50,7 @@ export const useSectionActions = () => {
   );
 
   const moveInnerSectionToSection = useCallback(
-    ({ innerSectionId, layoutId, sectionId, ...positionProps }: MoveInnerSectionToSection) => {
+    ({ innerSectionId, sectionId, ...positionProps }: MoveInnerSectionToSection) => {
       updateBoard((previous) => {
         return {
           ...previous,
@@ -58,10 +59,12 @@ export const useSectionActions = () => {
             if (section.id !== innerSectionId) return section;
             if (section.kind !== "dynamic") return section;
 
+            const currentLayout = getCurrentLayout(previous);
+
             return {
               ...section,
               layouts: section.layouts.map((layout) => {
-                if (layout.layoutId !== layoutId) return layout;
+                if (layout.layoutId !== currentLayout) return layout;
                 return {
                   ...layout,
                   ...positionProps,