Unify toolbox drag and drop reorder behavior

website/src/features/toolboxes/ToolboxPages.jsx

@@ -4,7 +4,7 @@ import { Icon } from "../../components/Icon.jsx";
 import { ImportButton } from "../../components/ImportButton.jsx";
 import { StorageQuota } from "../../components/StorageQuota.jsx";
 import { ToastPositionSwitch } from "../../components/ToastPositionSwitch.jsx";
-import { usePointerReorder } from "../../hooks/usePointerReorder.js";
+import { useGroupedReorder } from "../../hooks/useGroupedReorder.js";
 import { compressImage } from "../../utils/imageCompression.js";
 import { getSetting as dbGetSetting, setSetting as dbSetSetting } from "../../utils/indexedDbStorage.js";
 import { getGameCardCover, ToolboxCard, ToolboxGameIcon, ToolboxIconPicker } from "./ToolboxCard.jsx";
@@ -40,20 +40,24 @@ async function copyText(value) {
 export function ToolboxesPage({ siteContent, toolboxes, getToolboxGame, actions, storageUsage, toastPosition, setToastPosition }) {
   const content = siteContent.toolboxes;
   const {
-    draggingId: draggingToolboxId,
-    dropTarget,
-    startDrag: startToolboxDrag
-  } = usePointerReorder({
-    targetSelector: ".toolbox-card",
-    getTargetId: (target) => target.dataset.toolboxId,
+    itemReorder,
+    getItemProps,
+    isItemDragging,
+    isItemDropTarget,
+    getDropPlacement
+  } = useGroupedReorder({
+    namespace: "toolbox-cards",
+    items: toolboxes,
+    getItemId: (toolbox) => toolbox.id,
+    orientation: "horizontal",
     getPlacement: (event, target) => {
       const rect = target.getBoundingClientRect();
       return event.clientY > rect.top + rect.height / 2 || event.clientX > rect.left + rect.width / 2 ? "after" : "before";
     },
-    onMove: (draggingId, targetId, placement) => {
-      const nextIds = toolboxes.map((toolbox) => toolbox.id).filter((id) => id !== draggingId);
-      const targetIndex = nextIds.indexOf(targetId);
-      nextIds.splice(placement === "after" ? targetIndex + 1 : targetIndex, 0, draggingId);
+    onItemMove: (operation) => {
+      const nextIds = toolboxes.map((toolbox) => toolbox.id).filter((id) => id !== operation.sourceId);
+      const targetIndex = nextIds.indexOf(operation.targetId);
+      nextIds.splice(operation.placement === "after" ? targetIndex + 1 : targetIndex, 0, operation.sourceId);
       actions.updateToolboxOrder(nextIds);
     }
   });
@@ -100,9 +104,7 @@ export function ToolboxesPage({ siteContent, toolboxes, getToolboxGame, actions,
             toolbox={toolbox}
             game={getToolboxGame(toolbox)}
             actions={actions}
-            draggingToolboxId={draggingToolboxId}
-            dropTarget={dropTarget}
-            onDragStart={startToolboxDrag}
+            reorder={{ itemReorder, getItemProps, isItemDragging, isItemDropTarget, getDropPlacement }}
           />
         )) : (
           <div className="empty"><h2>{content.emptyTitle}</h2><p>{content.emptyText}</p></div>