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

@@ -0,0 +1,65 @@
+import { useCallback } from "react";
+
+import { useUpdateBoard } from "~/app/[locale]/boards/(content)/_client";
+
+interface MoveAndResizeInnerSection {
+  innerSectionId: string;
+  xOffset: number;
+  yOffset: number;
+  width: number;
+  height: number;
+}
+interface MoveInnerSectionToSection {
+  innerSectionId: string;
+  sectionId: string;
+  xOffset: number;
+  yOffset: number;
+  width: number;
+  height: number;
+}
+
+export const useSectionActions = () => {
+  const { updateBoard } = useUpdateBoard();
+
+  const moveAndResizeInnerSection = useCallback(
+    ({ innerSectionId, ...positionProps }: MoveAndResizeInnerSection) => {
+      updateBoard((previous) => ({
+        ...previous,
+        sections: previous.sections.map((section) => {
+          // Return same section if section is not the one we're moving
+          if (section.id !== innerSectionId) return section;
+          return {
+            ...section,
+            ...positionProps,
+          };
+        }),
+      }));
+    },
+    [updateBoard],
+  );
+
+  const moveInnerSectionToSection = useCallback(
+    ({ innerSectionId, sectionId, ...positionProps }: MoveInnerSectionToSection) => {
+      updateBoard((previous) => {
+        return {
+          ...previous,
+          sections: previous.sections.map((section) => {
+            // Return section without changes when not the section we're moving
+            if (section.id !== innerSectionId) return section;
+            return {
+              ...section,
+              ...positionProps,
+              parentSectionId: sectionId,
+            };
+          }),
+        };
+      });
+    },
+    [updateBoard],
+  );
+
+  return {
+    moveAndResizeInnerSection,
+    moveInnerSectionToSection,
+  };
+};