Unify toolbox drag and drop reorder behavior

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

@@ -1,6 +1,7 @@
 // Rôle : fournit l'outil liens avec ajout manuel et import texte.
 import { useCallback, useState } from "react";
 import { Icon } from "../../../components/Icon.jsx";
+import { moveItem, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
 import { TextImportModal } from "./TextImportModal.jsx";
 import { parseColonImportLines } from "./textImport.js";
 
@@ -13,6 +14,20 @@ export function LinksModule({ toolboxId, moduleId, context, editing }) {
   const [importOpen, setImportOpen] = useState(false);
   const [copiedId, setCopiedId] = useState("");
   const closeImportModal = useCallback(() => setImportOpen(false), []);
+  const {
+    itemReorder,
+    getItemProps,
+    isItemDragging,
+    isItemDropTarget,
+    getDropPlacement
+  } = useGroupedReorder({
+    namespace: "links",
+    items: data.links,
+    getItemId: (link) => link.id,
+    getParentId: () => moduleId,
+    onItemMove: (operation) => save(moveItem(data.links, operation.sourceId, operation.targetId, operation.placement)),
+    hierarchy: { enabled: true, stickyParents: true }
+  });
 
   function save(links) {
     context.setModuleData(toolboxId, moduleId, { links });
@@ -88,8 +103,25 @@ export function LinksModule({ toolboxId, moduleId, context, editing }) {
         />
       )}
       <ul className="links-list">
-        {data.links.map((link) => (
-          <li className="link-item" key={link.id}>
+        {data.links.map((link) => {
+          const className = [
+            "link-item",
+            isItemDragging(link.id) ? "is-dragging" : "",
+            isItemDropTarget(link.id) ? "is-drop-target" : "",
+            getDropPlacement("item", link.id) === "after" ? "drop-after" : ""
+          ].filter(Boolean).join(" ");
+
+          return (
+          <li className={className} key={link.id} {...getItemProps({ itemId: link.id, parentId: moduleId })}>
+            <button
+              className="link-drag-handle"
+              type="button"
+              onPointerDown={(event) => itemReorder.startDrag(event, link.id)}
+              aria-label={`${textContent.reorderTitle || "Déplacer"} ${link.title || link.url}`}
+              title={textContent.reorderTitle || "Déplacer"}
+            >
+              <Icon name="drag" />
+            </button>
             <a href={link.url} target="_blank" rel="noreferrer" title={link.url}>
               <strong>{link.title || context.hostnameFromUrl(link.url)}</strong>
               <span>{link.url}</span>
@@ -103,7 +135,8 @@ export function LinksModule({ toolboxId, moduleId, context, editing }) {
               </button>
             </div>
           </li>
-        ))}
+          );
+        })}
       </ul>
     </>
   );