feat(boards): add responsive layout system (#2271)

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

@@ -4,23 +4,24 @@ import type { BoxProps } from "@mantine/core";
 import { Box } from "@mantine/core";
 import combineClasses from "clsx";
 
-import type { Section } from "~/app/[locale]/boards/_types";
+import type { DynamicSectionItem, Section } from "~/app/[locale]/boards/_types";
 import { SectionContent } from "../content";
 import { SectionProvider } from "../section-context";
 import { useSectionItems } from "../use-section-items";
 import { useGridstack } from "./use-gridstack";
 
 interface Props extends BoxProps {
-  section: Section;
+  section: Exclude<Section, { kind: "dynamic" }> | DynamicSectionItem;
 }
 
 export const GridStack = ({ section, ...props }: Props) => {
-  const { itemIds, innerSections } = useSectionItems(section);
+  const { items, innerSections } = useSectionItems(section.id);
+  const itemIds = [...items, ...innerSections].map((item) => item.id);
 
   const { refs } = useGridstack(section, itemIds);
 
   return (
-    <SectionProvider value={{ section, innerSections, refs }}>
+    <SectionProvider value={{ section, items, innerSections, refs }}>
       <Box
         {...props}
         data-kind={section.kind}

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

@@ -2,7 +2,7 @@ import type { RefObject } from "react";
 import { createRef, useCallback, useEffect, useRef } from "react";
 import { useElementSize } from "@mantine/hooks";
 
-import { useRequiredBoard } from "@homarr/boards/context";
+import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
 import type { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode } from "@homarr/gridstack";
 
@@ -68,10 +68,13 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
 
   const board = useRequiredBoard();
 
+  const currentLayoutId = useCurrentLayout();
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const currentLayout = board.layouts.find((layout) => layout.id === currentLayoutId)!;
   const columnCount =
     section.kind === "dynamic" && "width" in section && typeof section.width === "number"
       ? section.width
-      : board.columnCount;
+      : currentLayout.columnCount;
 
   const itemRefKeys = Object.keys(itemRefs.current);
   // define items in itemRefs for easy access and reference to items