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

@@ -57,7 +57,7 @@ export const useItemActions = () => {
       updateBoard((previous) => {
         const lastSection = previous.sections
           .filter((section): section is EmptySection => section.kind === "empty")
-          .sort((sectionA, sectionB) => sectionB.position - sectionA.position)[0];
+          .sort((sectionA, sectionB) => sectionB.yOffset - sectionA.yOffset)[0];
 
         if (!lastSection) return previous;
 

apps/nextjs/src/components/board/items/item-content.tsx

@@ -0,0 +1,89 @@
+import { Card } from "@mantine/core";
+import { useElementSize } from "@mantine/hooks";
+import { QueryErrorResetBoundary } from "@tanstack/react-query";
+import combineClasses from "clsx";
+import { ErrorBoundary } from "react-error-boundary";
+
+import { loadWidgetDynamic, reduceWidgetOptionsWithDefaultValues, useServerDataFor } from "@homarr/widgets";
+import { WidgetError } from "@homarr/widgets/errors";
+
+import type { Item } from "~/app/[locale]/boards/_types";
+import { useEditMode, useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
+import classes from "../sections/item.module.css";
+import { BoardItemMenu } from "./item-menu";
+
+interface BoardItemContentProps {
+  item: Item;
+}
+
+export const BoardItemContent = ({ item }: BoardItemContentProps) => {
+  const { ref, width, height } = useElementSize<HTMLDivElement>();
+  const board = useRequiredBoard();
+
+  return (
+    <Card
+      ref={ref}
+      className={combineClasses(
+        classes.itemCard,
+        `${item.kind}-wrapper`,
+        "grid-stack-item-content",
+        item.advancedOptions.customCssClasses.join(" "),
+      )}
+      withBorder
+      styles={{
+        root: {
+          "--opacity": board.opacity / 100,
+          containerType: "size",
+        },
+      }}
+      p={0}
+    >
+      <InnerContent item={item} width={width} height={height} />
+    </Card>
+  );
+};
+
+interface InnerContentProps {
+  item: Item;
+  width: number;
+  height: number;
+}
+
+const InnerContent = ({ item, ...dimensions }: InnerContentProps) => {
+  const board = useRequiredBoard();
+  const [isEditMode] = useEditMode();
+  const serverData = useServerDataFor(item.id);
+  const Comp = loadWidgetDynamic(item.kind);
+  const options = reduceWidgetOptionsWithDefaultValues(item.kind, item.options);
+  const newItem = { ...item, options };
+
+  if (!serverData?.isReady) return null;
+
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ErrorBoundary
+          onReset={reset}
+          fallbackRender={({ resetErrorBoundary, error }) => (
+            <>
+              <BoardItemMenu offset={4} item={newItem} resetErrorBoundary={resetErrorBoundary} />
+              <WidgetError kind={item.kind} error={error as unknown} resetErrorBoundary={resetErrorBoundary} />
+            </>
+          )}
+        >
+          <BoardItemMenu offset={4} item={newItem} />
+          <Comp
+            options={options as never}
+            integrationIds={item.integrationIds}
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            serverData={serverData?.data as never}
+            isEditMode={isEditMode}
+            boardId={board.id}
+            itemId={item.id}
+            {...dimensions}
+          />
+        </ErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  );
+};

apps/nextjs/src/components/board/items/item-menu.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useMemo, useRef } from "react";
+import { ActionIcon, Menu } from "@mantine/core";
+import { IconCopy, IconDotsVertical, IconLayoutKanban, IconPencil, IconTrash } from "@tabler/icons-react";
+
+import { clientApi } from "@homarr/api/client";
+import { useConfirmModal, useModalAction } from "@homarr/modals";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import { WidgetEditModal, widgetImports } from "@homarr/widgets";
+
+import type { Item } from "~/app/[locale]/boards/_types";
+import { useEditMode } from "~/app/[locale]/boards/(content)/_context";
+import { useItemActions } from "./item-actions";
+
+export const BoardItemMenu = ({
+  offset,
+  item,
+  resetErrorBoundary,
+}: {
+  offset: number;
+  item: Item;
+  resetErrorBoundary?: () => void;
+}) => {
+  const refResetErrorBoundaryOnNextRender = useRef(false);
+  const tItem = useScopedI18n("item");
+  const t = useI18n();
+  const { openModal } = useModalAction(WidgetEditModal);
+  const { openConfirmModal } = useConfirmModal();
+  const [isEditMode] = useEditMode();
+  const { updateItemOptions, updateItemAdvancedOptions, updateItemIntegrations, duplicateItem, removeItem } =
+    useItemActions();
+  const { data: integrationData, isPending } = clientApi.integration.all.useQuery();
+  const currentDefinition = useMemo(() => widgetImports[item.kind].definition, [item.kind]);
+
+  // Reset error boundary on next render if item has been edited
+  useEffect(() => {
+    if (refResetErrorBoundaryOnNextRender.current) {
+      resetErrorBoundary?.();
+      refResetErrorBoundaryOnNextRender.current = false;
+    }
+  }, [item, resetErrorBoundary]);
+
+  if (!isEditMode || isPending) return null;
+
+  const openEditModal = () => {
+    openModal({
+      kind: item.kind,
+      value: {
+        advancedOptions: item.advancedOptions,
+        options: item.options,
+        integrationIds: item.integrationIds,
+      },
+      onSuccessfulEdit: ({ options, integrationIds, advancedOptions }) => {
+        updateItemOptions({
+          itemId: item.id,
+          newOptions: options,
+        });
+        updateItemAdvancedOptions({
+          itemId: item.id,
+          newAdvancedOptions: advancedOptions,
+        });
+        updateItemIntegrations({
+          itemId: item.id,
+          newIntegrations: integrationIds,
+        });
+        refResetErrorBoundaryOnNextRender.current = true;
+      },
+      integrationData: (integrationData ?? []).filter(
+        (integration) =>
+          "supportedIntegrations" in currentDefinition &&
+          (currentDefinition.supportedIntegrations as string[]).some((kind) => kind === integration.kind),
+      ),
+      integrationSupport: "supportedIntegrations" in currentDefinition,
+    });
+  };
+
+  const openRemoveModal = () => {
+    openConfirmModal({
+      title: tItem("remove.title"),
+      children: tItem("remove.message"),
+      onConfirm: () => {
+        removeItem({ itemId: item.id });
+      },
+    });
+  };
+
+  return (
+    <Menu withinPortal withArrow position="right-start" arrowPosition="center">
+      <Menu.Target>
+        <ActionIcon variant="default" radius={"xl"} pos="absolute" top={offset} right={offset} style={{ zIndex: 10 }}>
+          <IconDotsVertical size={"1rem"} />
+        </ActionIcon>
+      </Menu.Target>
+      <Menu.Dropdown miw={128}>
+        <Menu.Label>{tItem("menu.label.settings")}</Menu.Label>
+        <Menu.Item leftSection={<IconPencil size={16} />} onClick={openEditModal}>
+          {tItem("action.edit")}
+        </Menu.Item>
+        <Menu.Item leftSection={<IconLayoutKanban size={16} />}>{tItem("action.move")}</Menu.Item>
+        <Menu.Item leftSection={<IconCopy size={16} />} onClick={() => duplicateItem({ itemId: item.id })}>
+          {tItem("action.duplicate")}
+        </Menu.Item>
+        <Menu.Divider />
+        <Menu.Label c="red.6">{t("common.dangerZone")}</Menu.Label>
+        <Menu.Item c="red.6" leftSection={<IconTrash size={16} />} onClick={openRemoveModal}>
+          {tItem("action.remove")}
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+};