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

@@ -1,30 +1,23 @@
-import type { RefObject } from "react";
+import combineClasses from "clsx";
 
 import type { EmptySection } from "~/app/[locale]/boards/_types";
 import { useEditMode } from "~/app/[locale]/boards/(content)/_context";
-import { SectionContent } from "./content";
-import { useGridstack } from "./gridstack/use-gridstack";
+import { GridStack } from "./gridstack/gridstack";
+import { useSectionItems } from "./use-section-items";
 
 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 });
+export const BoardEmptySection = ({ section }: Props) => {
+  const { itemIds } = useSectionItems(section);
   const [isEditMode] = useEditMode();
 
   return (
-    <div
-      className={section.items.length > 0 || isEditMode ? defaultClasses : `${defaultClasses} gridstack-empty-wrapper`}
+    <GridStack
+      section={section}
       style={{ transitionDuration: "0s" }}
-      data-empty
-      data-section-id={section.id}
-      ref={refs.wrapper}
-    >
-      <SectionContent items={section.items} refs={refs} />
-    </div>
+      className={combineClasses("min-row", itemIds.length > 0 || isEditMode ? undefined : "grid-stack-empty-wrapper")}
+    />
   );
 };