feat: add board (#15)

* wip: Add gridstack board
* wip: Centralize board pages, Add board settings page
* fix: remove cyclic dependency and rename widget-sort to kind
* improve: Add header actions as parallel route
* feat: add item select modal, add category edit modal,
* feat: add edit item modal
* feat: add remove item modal
* wip: add category actions
* feat: add saving of board, wip: add app widget
* Merge branch 'main' into add-board
* chore: update turbo dependencies
* chore: update mantine dependencies
* chore: fix typescript errors, lint and format
* feat: add confirm modal to category removal, move items of removed category to above wrapper
* feat: remove app widget to continue in another branch
* feat: add loading spinner until board is initialized
* fix: issue with cellheight of gridstack items
* feat: add translations for board
* fix: issue with translation for settings page
* chore: address pull request feedback

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

@@ -0,0 +1,61 @@
+import type { MutableRefObject, RefObject } from "react";
+import type { GridItemHTMLElement } from "fily-publish-gridstack";
+import { GridStack } from "fily-publish-gridstack";
+
+import type { Section } from "~/app/[locale]/boards/_types";
+
+interface InitializeGridstackProps {
+  section: Section;
+  refs: {
+    wrapper: RefObject<HTMLDivElement>;
+    items: MutableRefObject<Record<string, RefObject<GridItemHTMLElement>>>;
+    gridstack: MutableRefObject<GridStack | undefined>;
+  };
+  sectionColumnCount: number;
+}
+
+export const initializeGridstack = ({
+  section,
+  refs,
+  sectionColumnCount,
+}: InitializeGridstackProps) => {
+  if (!refs.wrapper.current) return false;
+  // calculates the currently available count of columns
+  const columnCount = section.kind === "sidebar" ? 2 : sectionColumnCount;
+  const minRow =
+    section.kind !== "sidebar"
+      ? 1
+      : Math.floor(refs.wrapper.current.offsetHeight / 128);
+  // initialize gridstack
+  const newGrid = refs.gridstack;
+  newGrid.current = GridStack.init(
+    {
+      column: columnCount,
+      margin: section.kind === "sidebar" ? 5 : 10,
+      cellHeight: 128,
+      float: true,
+      alwaysShowResizeHandle: true,
+      acceptWidgets: true,
+      disableOneColumnMode: true,
+      staticGrid: true,
+      minRow,
+      animate: false,
+      styleInHead: true,
+    },
+    // selector of the gridstack item (it's eather category or wrapper)
+    `.grid-stack-${section.kind}[data-section-id='${section.id}']`,
+  );
+  const grid = newGrid.current;
+  if (!grid) return false;
+  // Must be used to update the column count after the initialization
+  grid.column(columnCount, "none");
+
+  grid.batchUpdate();
+  grid.removeAll(false);
+  section.items.forEach(({ id }) => {
+    const ref = refs.items.current[id]?.current;
+    ref && grid.makeWidget(ref);
+  });
+  grid.batchUpdate(false);
+  return true;
+};