Unify toolbox drag and drop reorder behavior

website/src/features/toolboxes/modules/CountersModule.jsx

@@ -1,11 +1,27 @@
 // Rôle : fournit l'outil compteurs personnalisables.
 import { useState } from "react";
 import { Icon } from "../../../components/Icon.jsx";
+import { moveItem, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
 
 export function CountersModule({ toolboxId, moduleId, context, editing }) {
   const data = context.normalizeCountersData(context.getModuleData(toolboxId, moduleId, { counters: [] }));
   const textContent = context.moduleText?.counters || {};
   const [label, setLabel] = useState("");
+  const {
+    itemReorder,
+    getItemProps,
+    isItemDragging,
+    isItemDropTarget,
+    getDropPlacement
+  } = useGroupedReorder({
+    namespace: "counters",
+    items: data.counters,
+    getItemId: (counter) => counter.id,
+    getParentId: () => moduleId,
+    orientation: "horizontal",
+    onItemMove: (operation) => save(moveItem(data.counters, operation.sourceId, operation.targetId, operation.placement)),
+    hierarchy: { enabled: true, stickyParents: true }
+  });
 
   function save(counters) {
     context.setModuleData(toolboxId, moduleId, { counters });
@@ -33,8 +49,25 @@ export function CountersModule({ toolboxId, moduleId, context, editing }) {
         </form>
       )}
       <div className="counters-grid">
-        {data.counters.map((counter) => (
-          <article className="counter-item" key={counter.id}>
+        {data.counters.map((counter) => {
+          const className = [
+            "counter-item",
+            isItemDragging(counter.id) ? "is-dragging" : "",
+            isItemDropTarget(counter.id) ? "is-drop-target" : "",
+            getDropPlacement("item", counter.id) === "after" ? "drop-after" : ""
+          ].filter(Boolean).join(" ");
+
+          return (
+          <article className={className} key={counter.id} {...getItemProps({ itemId: counter.id, parentId: moduleId })}>
+            <button
+              className="counter-drag-handle"
+              type="button"
+              onPointerDown={(event) => itemReorder.startDrag(event, counter.id)}
+              aria-label={`${textContent.reorderTitle || "Déplacer"} ${counter.label}`}
+              title={textContent.reorderTitle || "Déplacer"}
+            >
+              <Icon name="drag" />
+            </button>
             <div>
               <strong>{counter.value}</strong>
               <span>{counter.label}</span>
@@ -50,7 +83,8 @@ export function CountersModule({ toolboxId, moduleId, context, editing }) {
               </button>
             </div>
           </article>
-        ))}
+          );
+        })}
       </div>
     </>
   );