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/empty-section.tsx

@@ -0,0 +1,35 @@
+import type { RefObject } from "react";
+import { useAtomValue } from "jotai";
+
+import type { EmptySection } from "~/app/[locale]/boards/_types";
+import { editModeAtom } from "../editMode";
+import { SectionContent } from "./content";
+import { useGridstack } from "./gridstack/use-gridstack";
+
+interface Props {
+  section: EmptySection;
+  mainRef: RefObject<HTMLDivElement>;
+}
+
+const defaultClasses = "grid-stack grid-stack-empty min-row";
+
+export const BoardEmptySection = ({ section, mainRef }: Props) => {
+  const { refs } = useGridstack({ section, mainRef });
+  const isEditMode = useAtomValue(editModeAtom);
+
+  return (
+    <div
+      className={
+        section.items.length > 0 || isEditMode
+          ? defaultClasses
+          : `${defaultClasses} gridstack-empty-wrapper`
+      }
+      style={{ transitionDuration: "0s" }}
+      data-empty
+      data-section-id={section.id}
+      ref={refs.wrapper}
+    >
+      <SectionContent items={section.items} refs={refs} />
+    </div>
+  );
+};