feat: add dynamic section (#842)

* chore: add parent_section_id and change position to x and y_offset for sqlite section table

* chore: rename existing positions to x_offset and y_offset

* chore: add related mysql migration

* chore: add missing height and width to section table

* fix: missing width and height in migration copy script

* fix: typecheck issues

* fix: test not working caused by unsimilar schemas

* wip: add dynamic section

* refactor: improve structure of gridstack sections

* feat: add rendering of dynamic sections

* feat: add saving of moved sections

* wip: add static row count, restrict min-width and height

* chore: address pull request feedback

* fix: format issues

* fix: size calculation within dynamic sections

* fix: on resize not called when min width or height is reached

* fix: size of items while dragging is to big

* chore: temporarly remove migration files

* chore: readd migrations

* fix: format and deepsource issues

* chore: remove db_dev.sqlite file

* chore: add *.sqlite to .gitignore

* chore: address pull request feedback

* feat: add dynamic section actions for adding and removing them

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

@@ -0,0 +1,35 @@
+"use client";
+
+import type { BoxProps } from "@mantine/core";
+import { Box } from "@mantine/core";
+import combineClasses from "clsx";
+
+import type { 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;
+}
+
+export const GridStack = ({ section, ...props }: Props) => {
+  const { itemIds, innerSections } = useSectionItems(section);
+
+  const { refs } = useGridstack(section, itemIds);
+
+  return (
+    <SectionProvider value={{ section, innerSections, refs }}>
+      <Box
+        {...props}
+        data-kind={section.kind}
+        data-section-id={section.id}
+        className={combineClasses(`grid-stack grid-stack-${section.kind}`, props.className)}
+        ref={refs.wrapper}
+      >
+        <SectionContent />
+      </Box>
+    </SectionProvider>
+  );
+};