wip: add modal to move items on board (#927)

apps/nextjs/src/app/[locale]/widgets/[kind]/_dimension-modal.tsx

@@ -25,10 +25,10 @@ export const PreviewDimensionsModal = createModal<InnerProps>(({ actions, innerP
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
       <Stack>
-        <InputWrapper label={t("item.move.field.width.label")}>
+        <InputWrapper label={t("item.moveResize.field.width.label")}>
           <Slider min={64} max={1024} step={64} {...form.getInputProps("width")} />
         </InputWrapper>
-        <InputWrapper label={t("item.move.field.height.label")}>
+        <InputWrapper label={t("item.moveResize.field.height.label")}>
           <Slider min={64} max={1024} step={64} {...form.getInputProps("height")} />
         </InputWrapper>
         <Group justify="end">

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

@@ -9,7 +9,9 @@ import { WidgetEditModal, widgetImports } from "@homarr/widgets";
 
 import type { Item } from "~/app/[locale]/boards/_types";
 import { useEditMode } from "~/app/[locale]/boards/(content)/_context";
+import { useSectionContext } from "../sections/section-context";
 import { useItemActions } from "./item-actions";
+import { ItemMoveModal } from "./item-move-modal";
 
 export const BoardItemMenu = ({
   offset,
@@ -24,12 +26,14 @@ export const BoardItemMenu = ({
   const tItem = useScopedI18n("item");
   const t = useI18n();
   const { openModal } = useModalAction(WidgetEditModal);
+  const { openModal: openMoveModal } = useModalAction(ItemMoveModal);
   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]);
+  const { gridstack } = useSectionContext().refs;
 
   // Reset error boundary on next render if item has been edited
   useEffect(() => {
@@ -95,7 +99,15 @@ export const BoardItemMenu = ({
         <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={<IconLayoutKanban size={16} />}
+          onClick={() => {
+            if (!gridstack.current) return;
+            openMoveModal({ item, columnCount: gridstack.current.getColumn(), gridStack: gridstack.current });
+          }}
+        >
+          {tItem("action.moveResize")}
+        </Menu.Item>{" "}
         <Menu.Item leftSection={<IconCopy size={16} />} onClick={() => duplicateItem({ itemId: item.id })}>
           {tItem("action.duplicate")}
         </Menu.Item>

apps/nextjs/src/components/board/items/item-move-modal.tsx

@@ -0,0 +1,112 @@
+import { useCallback, useRef } from "react";
+import { Button, Grid, Group, NumberInput, Stack } from "@mantine/core";
+
+import { useZodForm } from "@homarr/form";
+import type { GridStack } from "@homarr/gridstack";
+import { createModal } from "@homarr/modals";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import { z } from "@homarr/validation";
+
+import type { Item } from "~/app/[locale]/boards/_types";
+import { useItemActions } from "./item-actions";
+
+interface InnerProps {
+  gridStack: GridStack;
+  item: Pick<Item, "id" | "xOffset" | "yOffset" | "width" | "height">;
+  columnCount: number;
+}
+
+export const ItemMoveModal = createModal<InnerProps>(({ actions, innerProps }) => {
+  const tCommon = useScopedI18n("common");
+  const t = useI18n();
+  // Keep track of the maximum width based on the x offset
+  const maxWidthRef = useRef(innerProps.columnCount - innerProps.item.xOffset);
+  const { moveAndResizeItem } = useItemActions();
+  const form = useZodForm(
+    z.object({
+      xOffset: z
+        .number()
+        .min(0)
+        .max(innerProps.columnCount - 1),
+      yOffset: z.number().min(0),
+      width: z.number().min(1).max(maxWidthRef.current),
+      height: z.number().min(1),
+    }),
+    {
+      initialValues: {
+        xOffset: innerProps.item.xOffset,
+        yOffset: innerProps.item.yOffset,
+        width: innerProps.item.width,
+        height: innerProps.item.height,
+      },
+      onValuesChange(values, previous) {
+        // Update the maximum width when the x offset changes
+        if (values.xOffset !== previous.xOffset) {
+          maxWidthRef.current = innerProps.columnCount - values.xOffset;
+        }
+      },
+    },
+  );
+
+  const handleSubmit = useCallback(
+    (values: Omit<InnerProps["item"], "id">) => {
+      const gridItem = innerProps.gridStack
+        .getGridItems()
+        .find((item) => item.getAttribute("data-id") === innerProps.item.id);
+      if (!gridItem) return;
+      innerProps.gridStack.update(gridItem, {
+        h: values.height,
+        w: values.width,
+        x: values.xOffset,
+        y: values.yOffset,
+      });
+      actions.closeModal();
+    },
+    [moveAndResizeItem],
+  );
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit, console.error)}>
+      <Stack>
+        <Grid>
+          <Grid.Col span={{ base: 12, md: 6 }}>
+            <NumberInput
+              label={t("item.moveResize.field.xOffset.label")}
+              min={0}
+              max={innerProps.columnCount - 1}
+              {...form.getInputProps("xOffset")}
+            />
+          </Grid.Col>
+
+          <Grid.Col span={{ base: 12, md: 6 }}>
+            <NumberInput label={t("item.moveResize.field.yOffset.label")} min={0} {...form.getInputProps("yOffset")} />
+          </Grid.Col>
+
+          <Grid.Col span={{ base: 12, md: 6 }}>
+            <NumberInput
+              label={t("item.moveResize.field.width.label")}
+              min={1}
+              max={innerProps.columnCount - form.values.xOffset}
+              {...form.getInputProps("width")}
+            />
+          </Grid.Col>
+
+          <Grid.Col span={{ base: 12, md: 6 }}>
+            <NumberInput label={t("item.moveResize.field.height.label")} min={1} {...form.getInputProps("height")} />
+          </Grid.Col>
+        </Grid>
+        <Group justify="end">
+          <Button variant="subtle" onClick={actions.closeModal}>
+            {tCommon("action.cancel")}
+          </Button>
+          <Button type="submit">{tCommon("action.saveChanges")}</Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+}).withOptions({
+  defaultTitle(t) {
+    return t("item.moveResize.title");
+  },
+  size: "lg",
+});

packages/translation/src/lang/en.ts

@@ -689,7 +689,7 @@ export default {
       create: "New item",
       import: "Import item",
       edit: "Edit item",
-      move: "Move item",
+      moveResize: "Move / resize item",
       duplicate: "Duplicate item",
       remove: "Remove item",
     },
@@ -702,7 +702,8 @@ export default {
       title: "Choose item to add",
       addToBoard: "Add to board",
     },
-    move: {
+    moveResize: {
+      title: "Move / resize item",
       field: {
         width: {
           label: "Width",
@@ -710,6 +711,12 @@ export default {
         height: {
           label: "Height",
         },
+        xOffset: {
+          label: "X offset",
+        },
+        yOffset: {
+          label: "Y offset",
+        },
       },
     },
     edit: {