Unify toolbox drag and drop reorder behavior

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

@@ -1,11 +1,11 @@
 // Rôle : fournit l'outil Combos avec palettes d'inputs et rendu visuel par périphérique.
 import { useEffect, useMemo, useState } from "react";
 import { Icon } from "../../../components/Icon.jsx";
-import { usePointerReorder } from "../../../hooks/usePointerReorder.js";
-
-const UNCATEGORIZED_DROP_ID = "combos:uncategorized";
-const CATEGORY_SECTION_PREFIX = "combos:category";
-const CATEGORY_BOUNDARY_DROP_PREFIX = "combos:category-boundary";
+import {
+  applyGroupedReorderOperation,
+  getGroupedEntries,
+  useGroupedReorder
+} from "../../../hooks/useGroupedReorder.js";
 
 const DEVICE_OPTIONS = [
   { value: "playstation", label: "PlayStation" },
@@ -142,358 +142,13 @@ function getComboCategory(combo) {
   return String(combo?.category || "").trim();
 }
 
-function getCategoryGroups(combos, categoryOrder) {
-  const categories = [];
-  combos.forEach((combo) => {
-    const category = getComboCategory(combo);
-    if (category && !categories.includes(category)) categories.push(category);
-  });
-  const orderedCategories = [
-    ...categoryOrder.filter((category) => categories.includes(category)),
-    ...categories.filter((category) => !categoryOrder.includes(category))
-  ];
-  const groups = orderedCategories.map((category) => ({
-    category,
-    combos: combos.filter((combo) => getComboCategory(combo) === category)
-  })).filter((group) => group.combos.length);
-  const renderedCategories = new Set();
-  return combos.map((combo) => {
-    const category = getComboCategory(combo);
-    if (!category) return { type: "combo", combo };
-    if (renderedCategories.has(category)) return null;
-    renderedCategories.add(category);
-    return { type: "category", group: groups.find((group) => group.category === category) };
-  }).filter(Boolean);
+function setComboCategory(combo, category) {
+  const nextCombo = { ...combo };
+  if (category) nextCombo.category = category;
+  else delete nextCombo.category;
+  return nextCombo;
 }
 
-function getCategoryComboIds(combos, category) {
-  return combos.filter((combo) => getComboCategory(combo) === category).map((combo) => combo.id);
-}
-
-function getAllCategories(combos) {
-  const categories = [];
-  combos.forEach((combo) => {
-    const category = getComboCategory(combo);
-    if (category && !categories.includes(category)) categories.push(category);
-  });
-  return categories;
-}
-
-function getCompleteCategoryOrder(categoryOrder, categories) {
-  return [
-    ...categoryOrder.filter((category) => categories.includes(category)),
-    ...categories.filter((category) => !categoryOrder.includes(category))
-  ];
-}
-
-function getCategorySectionId(category) {
-  return `${CATEGORY_SECTION_PREFIX}\n${category}`;
-}
-
-function parseCategorySectionId(id) {
-  const parts = String(id || "").split("\n");
-  if (parts[0] !== CATEGORY_SECTION_PREFIX) return "";
-  return parts.slice(1).join("\n");
-}
-
-function isCategorySectionId(id) {
-  return String(id || "").startsWith(`${CATEGORY_SECTION_PREFIX}\n`);
-}
-
-function getCategoryBoundaryDropId(category, placement) {
-  return `${CATEGORY_BOUNDARY_DROP_PREFIX}\n${category}\n${placement}`;
-}
-
-function parseCategoryBoundaryDropId(id) {
-  const parts = String(id || "").split("\n");
-  if (parts[0] !== CATEGORY_BOUNDARY_DROP_PREFIX) return { category: "", placement: "" };
-  return {
-    category: parts[1] || "",
-    placement: parts[2] === "after" ? "after" : "before"
-  };
-}
-
-function isCategoryBoundaryDropId(id) {
-  return String(id || "").startsWith(`${CATEGORY_BOUNDARY_DROP_PREFIX}\n`);
-}
-
-function isUncategorizedDropId(id) {
-  return id === UNCATEGORIZED_DROP_ID;
-}
-
-function moveComboGroup(combos, movingIds, targetComboId, placement = "before") {
-  const movingSet = new Set(movingIds);
-  if (!movingSet.size || movingSet.has(targetComboId)) return combos;
-  const movingCombos = combos.filter((combo) => movingSet.has(combo.id));
-  const remainingCombos = combos.filter((combo) => !movingSet.has(combo.id));
-  const targetIndex = remainingCombos.findIndex((combo) => combo.id === targetComboId);
-  if (targetIndex < 0) return combos;
-  remainingCombos.splice(placement === "after" ? targetIndex + 1 : targetIndex, 0, ...movingCombos);
-  return remainingCombos;
-}
-
-function getBoundaryComboId(combos, comboIds, placement) {
-  const ids = new Set(comboIds);
-  const orderedCombos = combos.filter((combo) => ids.has(combo.id));
-  return placement === "after" ? orderedCombos.at(-1)?.id || "" : orderedCombos[0]?.id || "";
-}
-
-function moveCategoryOrder(categoryOrder, categories, fromCategory, toCategory, placement = "before") {
-  const nextOrder = getCompleteCategoryOrder(categoryOrder, categories);
-  const index = nextOrder.indexOf(fromCategory);
-  const targetIndex = nextOrder.indexOf(toCategory);
-  if (index < 0 || targetIndex < 0 || fromCategory === toCategory) return nextOrder;
-  const [moved] = nextOrder.splice(index, 1);
-  const nextTargetIndex = nextOrder.indexOf(toCategory);
-  nextOrder.splice(placement === "after" ? nextTargetIndex + 1 : nextTargetIndex, 0, moved);
-  return nextOrder;
-}
-
-function moveCategoryOrderToStart(categoryOrder, categories, fromCategory) {
-  const nextOrder = getCompleteCategoryOrder(categoryOrder, categories).filter((category) => category !== fromCategory);
-  return [fromCategory, ...nextOrder];
-}
-
-function moveCategoryOrderToEnd(categoryOrder, categories, fromCategory) {
-  const nextOrder = getCompleteCategoryOrder(categoryOrder, categories).filter((category) => category !== fromCategory);
-  return [...nextOrder, fromCategory];
-}
-
-function moveComboToCategory(combos, comboId, category) {
-  return combos.map((combo) => {
-    if (combo.id !== comboId) return combo;
-    const nextCombo = { ...combo };
-    if (category) nextCombo.category = category;
-    else delete nextCombo.category;
-    return nextCombo;
-  });
-}
-
-function getFirstComboIdOutsideCategory(combos, category, excludedIds = []) {
-  const excluded = new Set(excludedIds);
-  return combos.find((combo) => !excluded.has(combo.id) && getComboCategory(combo) !== category)?.id || "";
-}
-
-function getLastComboIdOutsideCategory(combos, category, excludedIds = []) {
-  const excluded = new Set(excludedIds);
-  return [...combos].reverse().find((combo) => !excluded.has(combo.id) && getComboCategory(combo) !== category)?.id || "";
-}
-
-function insertCategoryGroupAtBoundary(data, fromCategory, boundary, movingIds) {
-  const allCategories = getAllCategories(data.combos);
-  const targetIds = getCategoryComboIds(data.combos, boundary.category);
-  const boundaryComboId = getBoundaryComboId(data.combos, targetIds, boundary.placement);
-  if (!boundaryComboId) return data;
-  return {
-    ...data,
-    combos: moveComboGroup(data.combos, movingIds, boundaryComboId, boundary.placement),
-    categoryOrder: moveCategoryOrder(data.categoryOrder, allCategories, fromCategory, boundary.category, boundary.placement)
-  };
-}
-
-function moveCategoryGroupToEdge(data, fromCategory, edge) {
-  const movingIds = getCategoryComboIds(data.combos, fromCategory);
-  if (!movingIds.length) return data;
-  const allCategories = getAllCategories(data.combos);
-  const boundaryComboId = edge === "start"
-    ? getFirstComboIdOutsideCategory(data.combos, fromCategory, movingIds)
-    : getLastComboIdOutsideCategory(data.combos, fromCategory, movingIds);
-  const combos = boundaryComboId
-    ? moveComboGroup(data.combos, movingIds, boundaryComboId, edge === "start" ? "before" : "after")
-    : data.combos;
-  return {
-    ...data,
-    combos,
-    categoryOrder: edge === "start"
-      ? moveCategoryOrderToStart(data.categoryOrder, allCategories, fromCategory)
-      : moveCategoryOrderToEnd(data.categoryOrder, allCategories, fromCategory)
-  };
-}
-
-function moveComboToEdge(data, comboId, edge, category = "") {
-  const nextCombosWithCategory = moveComboToCategory(data.combos, comboId, category);
-  const boundaryComboId = edge === "start"
-    ? nextCombosWithCategory.find((combo) => combo.id !== comboId)?.id || ""
-    : [...nextCombosWithCategory].reverse().find((combo) => combo.id !== comboId)?.id || "";
-  const combos = boundaryComboId
-    ? moveComboGroup(nextCombosWithCategory, [comboId], boundaryComboId, edge === "start" ? "before" : "after")
-    : nextCombosWithCategory;
-  return { ...data, combos };
-}
-
-function moveComboBeforeCategoryBoundary(data, comboId, boundary) {
-  const nextCombosWithCategory = moveComboToCategory(data.combos, comboId, "");
-  const targetIds = getCategoryComboIds(data.combos, boundary.category).filter((id) => id !== comboId);
-  const boundaryComboId = getBoundaryComboId(data.combos, targetIds, boundary.placement);
-  return {
-    ...data,
-    combos: boundaryComboId ? moveComboGroup(nextCombosWithCategory, [comboId], boundaryComboId, boundary.placement) : nextCombosWithCategory
-  };
-}
-
-function addCategoryToOrder(categoryOrder, category) {
-  return category && !categoryOrder.includes(category) ? [...categoryOrder, category] : categoryOrder;
-}
-
-function cleanCategoryOrder(categoryOrder, combos) {
-  const categories = getAllCategories(combos);
-  return getCompleteCategoryOrder(categoryOrder, categories);
-}
-
-function getCategoryEdge(categoryDropTarget, comboDropTarget, category, edge) {
-  const dropId = getCategoryBoundaryDropId(category, edge === "start" ? "before" : "after");
-  return categoryDropTarget.id === dropId || comboDropTarget.id === dropId;
-}
-
-function getDropEdgeClass(categoryDropTarget, comboDropTarget, category, edge) {
-  return getCategoryEdge(categoryDropTarget, comboDropTarget, category, edge) ? "is-drop-target" : "";
-}
-
-function getEdgeFromPlacement(placement) {
-  return placement === "after" ? "end" : "start";
-}
-
-function insertComboIntoCategory(data, comboId, category, placement) {
-  const nextCombos = moveComboToCategory(data.combos, comboId, category);
-  const targetIds = getCategoryComboIds(data.combos, category).filter((id) => id !== comboId);
-  const boundaryComboId = getBoundaryComboId(data.combos, targetIds, placement);
-  return {
-    ...data,
-    combos: boundaryComboId ? moveComboGroup(nextCombos, [comboId], boundaryComboId, placement) : nextCombos,
-    categoryOrder: addCategoryToOrder(data.categoryOrder, category),
-    collapsedCategories: data.collapsedCategories.filter((item) => item !== category)
-  };
-}
-
-function moveCategoryGroupAroundCombo(data, fromCategory, targetComboId, placement, movingIds) {
-  return {
-    ...data,
-    combos: moveComboGroup(data.combos, movingIds, targetComboId, placement)
-  };
-}
-
-function getCategoryOrderAfterComboMove(categoryOrder, combos) {
-  return cleanCategoryOrder(categoryOrder, combos);
-}
-
-function moveComboAroundCombo(data, fromComboId, targetComboId, placement) {
-  const targetCombo = data.combos.find((combo) => combo.id === targetComboId);
-  if (!targetCombo) return data;
-  const targetCategory = getComboCategory(targetCombo);
-  const nextCombos = moveComboToCategory(data.combos, fromComboId, targetCategory);
-  const movedCombos = moveComboGroup(nextCombos, [fromComboId], targetComboId, placement);
-  return {
-    ...data,
-    combos: movedCombos,
-    categoryOrder: getCategoryOrderAfterComboMove(data.categoryOrder, movedCombos)
-  };
-}
-
-function isBoundaryEdgeTarget(toId, edge) {
-  if (!isCategoryBoundaryDropId(toId)) return false;
-  return parseCategoryBoundaryDropId(toId).placement === (edge === "start" ? "before" : "after");
-}
-
-function moveCategoryBoundary(data, fromCategory, toId) {
-  if (isUncategorizedDropId(toId)) return moveCategoryGroupToEdge(data, fromCategory, "start");
-  if (!isCategoryBoundaryDropId(toId)) return data;
-  const boundary = parseCategoryBoundaryDropId(toId);
-  if (!boundary.category || boundary.category === fromCategory) return data;
-  if (isBoundaryEdgeTarget(toId, "start") && getCompleteCategoryOrder(data.categoryOrder, getAllCategories(data.combos))[0] === boundary.category) {
-    return moveCategoryGroupToEdge(data, fromCategory, "start");
-  }
-  if (isBoundaryEdgeTarget(toId, "end")) {
-    const order = getCompleteCategoryOrder(data.categoryOrder, getAllCategories(data.combos));
-    if (order.at(-1) === boundary.category) return moveCategoryGroupToEdge(data, fromCategory, "end");
-  }
-  const movingIds = getCategoryComboIds(data.combos, fromCategory);
-  return insertCategoryGroupAtBoundary(data, fromCategory, boundary, movingIds);
-}
-
-function moveCategoryOrderAroundTarget(categoryOrder, combos, fromCategory, toCategory, placement) {
-  return moveCategoryOrder(categoryOrder, getAllCategories(combos), fromCategory, toCategory, placement);
-}
-
-function moveCategoryAroundCategory(data, fromCategory, toCategory, placement) {
-  const movingIds = getCategoryComboIds(data.combos, fromCategory);
-  const targetIds = getCategoryComboIds(data.combos, toCategory);
-  const boundaryComboId = getBoundaryComboId(data.combos, targetIds, placement);
-  if (!boundaryComboId) return data;
-  return {
-    ...data,
-    combos: moveComboGroup(data.combos, movingIds, boundaryComboId, placement),
-    categoryOrder: moveCategoryOrderAroundTarget(data.categoryOrder, data.combos, fromCategory, toCategory, placement)
-  };
-}
-
-function removeComboCategoryAtBoundary(data, comboId, boundary) {
-  const nextData = moveComboBeforeCategoryBoundary(data, comboId, boundary);
-  return {
-    ...nextData,
-    categoryOrder: cleanCategoryOrder(nextData.categoryOrder, nextData.combos)
-  };
-}
-
-function moveComboByBoundary(data, fromComboId, toId) {
-  const boundary = parseCategoryBoundaryDropId(toId);
-  if (!boundary.category) return data;
-  return removeComboCategoryAtBoundary(data, fromComboId, boundary);
-}
-
-function removeComboCategory(data, comboId, placement) {
-  return moveComboToEdge(data, comboId, getEdgeFromPlacement(placement), "");
-}
-
-function insertAfterCategory(data, comboId, category, placement) {
-  return insertComboIntoCategory(data, comboId, category, placement);
-}
-
-function getCategoryTargetId(target) {
-  if (target.dataset.dropId) return target.dataset.dropId;
-  if (target.classList.contains("combos-category")) return getCategorySectionId(target.dataset.category || "");
-  return target.dataset.comboId || "";
-}
-
-function getComboTargetId(target) {
-  if (target.dataset.dropId) return target.dataset.dropId;
-  if (target.classList.contains("combo-card")) return target.dataset.comboId || "";
-  return getCategorySectionId(target.dataset.category || "");
-}
-
-function canDropComboOnTarget(target, draggingId, combos) {
-  const draggingCombo = combos.find((combo) => combo.id === draggingId);
-  if (!draggingCombo) return false;
-  const draggingCategory = getComboCategory(draggingCombo);
-  if (target.classList.contains("combos-root-drop-zone")) return Boolean(draggingCategory);
-  if (target.classList.contains("combos-category-boundary-drop-zone")) return true;
-  if (target.classList.contains("combos-category")) return target.dataset.category !== draggingCategory;
-  if (target.classList.contains("combo-card")) return target.dataset.comboId !== draggingId;
-  return false;
-}
-
-function canDropCategoryOnTarget(target, draggingId) {
-  const draggingCategory = parseCategorySectionId(draggingId);
-  if (!draggingCategory) return false;
-  if (target.classList.contains("combos-root-drop-zone")) return true;
-  if (target.classList.contains("combos-category-boundary-drop-zone")) {
-    const boundary = parseCategoryBoundaryDropId(target.dataset.dropId);
-    return boundary.category && boundary.category !== draggingCategory;
-  }
-  if (target.classList.contains("combos-category")) return target.dataset.category && target.dataset.category !== draggingCategory;
-  return !target.dataset.comboCategory;
-}
-
-function getCategoryDropPlacement(event, target) {
-  if (target.classList.contains("combos-category-boundary-drop-zone") || target.classList.contains("combos-root-drop-zone")) return "before";
-  const rect = target.getBoundingClientRect();
-  return event.clientY > rect.top + rect.height / 2 ? "after" : "before";
-}
-
-function getComboDropPlacement(event, target) {
-  if (target.classList.contains("combos-category-boundary-drop-zone") || target.classList.contains("combos-root-drop-zone")) return "before";
-  const rect = target.getBoundingClientRect();
-  return event.clientY > rect.top + rect.height / 2 ? "after" : "before";
-}
 
 function ComboInputToken({ input, device, palette = false, onClick, onDragStart }) {
   const label = getInputLabel(input);
@@ -629,28 +284,46 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
   const paletteGroups = useMemo(() => getPaletteGroups(data.device, keyboardLayout), [data.device, keyboardLayout]);
   const paletteColumns = useMemo(() => getPaletteColumns(paletteGroups), [paletteGroups]);
   const cleanDraftInputs = draftInputs.map((step) => step.filter(Boolean)).filter((step) => step.length);
-  const entries = getCategoryGroups(data.combos, data.categoryOrder);
-  const {
-    draggingId: draggingCategoryId,
-    dropTarget: categoryDropTarget,
-    startDrag: startCategoryDrag
-  } = usePointerReorder({
-    targetSelector: ".combos-category, .combo-card, .combos-root-drop-zone, .combos-category-boundary-drop-zone",
-    getTargetId: getCategoryTargetId,
-    canDropOn: canDropCategoryOnTarget,
-    getPlacement: getCategoryDropPlacement,
-    onMove: moveCategory
+  const entries = getGroupedEntries(data.combos, {
+    groupOrder: data.categoryOrder,
+    getItemGroup: getComboCategory,
+    groupIdKey: "category",
+    groupItemKey: "combos"
   });
   const {
-    draggingId: draggingComboId,
-    dropTarget: comboDropTarget,
-    startDrag: startComboDrag
-  } = usePointerReorder({
-    targetSelector: ".combo-card, .combos-category, .combos-root-drop-zone, .combos-category-boundary-drop-zone",
-    getTargetId: getComboTargetId,
-    canDropOn: (target, draggingId) => canDropComboOnTarget(target, draggingId, data.combos),
-    getPlacement: getComboDropPlacement,
-    onMove: moveCombo
+    itemReorder,
+    groupReorder,
+    getItemProps,
+    getGroupProps,
+    getGroupBoundaryProps,
+    isItemDragging,
+    isItemDropTarget,
+    isGroupDragging,
+    isGroupDropTarget,
+    isBoundaryDropTarget,
+    getDropPlacement,
+    shouldShowGroupBoundaries
+  } = useGroupedReorder({
+    namespace: "combos",
+    items: data.combos,
+    getItemId: (combo) => combo.id,
+    getItemGroup: getComboCategory,
+    reorderFeatures: {
+      item: {
+        groupChange: true,
+        boundaryDrop: true,
+        ungroupedDrop: true
+      },
+      group: {
+        reorder: true,
+        boundaryDrop: true,
+        ungroupedDrop: true,
+        itemDrop: true
+      }
+    },
+    onItemMove: applyComboReorder,
+    onGroupMove: applyComboReorder,
+    hierarchy: { enabled: false, stickyParents: false }
   });
 
   function save(nextData) {
@@ -666,39 +339,15 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
     });
   }
 
-  function moveCategory(fromId, toId, placement) {
-    const fromCategory = parseCategorySectionId(fromId);
-    const movingIds = getCategoryComboIds(data.combos, fromCategory);
-    if (!movingIds.length) return;
-    if (isUncategorizedDropId(toId) || isCategoryBoundaryDropId(toId)) {
-      save(moveCategoryBoundary(data, fromCategory, toId));
-      return;
-    }
-    if (isCategorySectionId(toId)) {
-      save(moveCategoryAroundCategory(data, fromCategory, parseCategorySectionId(toId), placement));
-      return;
-    }
-    if (data.combos.some((combo) => combo.id === toId)) {
-      save(moveCategoryGroupAroundCombo(data, fromCategory, toId, placement, movingIds));
-    }
-  }
-
-  function moveCombo(fromComboId, targetId, placement) {
-    const movedCombo = data.combos.find((combo) => combo.id === fromComboId);
-    if (!movedCombo) return;
-    if (isUncategorizedDropId(targetId)) {
-      save(removeComboCategory(data, fromComboId, placement));
-      return;
-    }
-    if (isCategoryBoundaryDropId(targetId)) {
-      save(moveComboByBoundary(data, fromComboId, targetId));
-      return;
-    }
-    if (isCategorySectionId(targetId)) {
-      save(insertAfterCategory(data, fromComboId, parseCategorySectionId(targetId), placement));
-      return;
-    }
-    save(moveComboAroundCombo(data, fromComboId, targetId, placement));
+  function applyComboReorder(operation) {
+    save(applyGroupedReorderOperation(data, {
+      operation,
+      itemsKey: "combos",
+      groupOrderKey: "categoryOrder",
+      collapsedGroupsKey: "collapsedCategories",
+      getItemGroup: getComboCategory,
+      setItemGroup: setComboCategory
+    }));
   }
 
   function addInputToStep(kind, value, stepIndex) {
@@ -880,16 +529,16 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
     const comboClassName = [
       "combo-card",
       "is-editing",
-      draggingComboId === combo.id ? "is-dragging" : "",
-      comboDropTarget.id === combo.id || categoryDropTarget.id === combo.id ? "is-drop-target" : "",
-      (comboDropTarget.id === combo.id && comboDropTarget.placement === "after") || (categoryDropTarget.id === combo.id && categoryDropTarget.placement === "after") ? "drop-after" : ""
+      isItemDragging(combo.id) ? "is-dragging" : "",
+      isItemDropTarget(combo.id) ? "is-drop-target" : "",
+      getDropPlacement("item", combo.id) === "after" ? "drop-after" : ""
     ].filter(Boolean).join(" ");
     return (
-      <article className={comboClassName} key={combo.id} data-combo-id={combo.id} data-combo-category={category}>
+      <article className={comboClassName} key={combo.id} {...getItemProps({ itemId: combo.id, groupId: category })}>
         <button
           className="task-planner-drag-handle combo-drag-handle"
           type="button"
-          onPointerDown={(event) => startComboDrag(event, combo.id)}
+          onPointerDown={(event) => itemReorder.startDrag(event, combo.id)}
           aria-label={`${textContent.reorderComboTitle || "Déplacer le combo"} ${combo.name}`}
           title={textContent.reorderComboTitle || "Déplacer le combo"}
         >
@@ -918,41 +567,38 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
 
   function renderCategory(group) {
     const category = group.category;
-    const categoryId = getCategorySectionId(category);
-    const beforeDropId = getCategoryBoundaryDropId(category, "before");
-    const afterDropId = getCategoryBoundaryDropId(category, "after");
     const isCollapsed = data.collapsedCategories.includes(category);
     const categoryClassName = [
       "combos-category checklist-section is-grouped",
       isCollapsed ? "is-collapsed" : "",
-      draggingCategoryId === categoryId ? "is-dragging" : "",
-      categoryDropTarget.id === categoryId || comboDropTarget.id === categoryId ? "is-drop-target" : "",
-      (categoryDropTarget.id === categoryId && categoryDropTarget.placement === "after") || (comboDropTarget.id === categoryId && comboDropTarget.placement === "after") ? "drop-after" : ""
+      isGroupDragging(category) ? "is-dragging" : "",
+      isGroupDropTarget(category) ? "is-drop-target" : "",
+      getDropPlacement("group", category) === "after" ? "drop-after" : ""
     ].filter(Boolean).join(" ");
-    const showBoundaryDropZones = Boolean(draggingComboId || draggingCategoryId);
+    const showBoundaryDropZones = shouldShowGroupBoundaries();
     const beforeDropZone = showBoundaryDropZones ? (
       <div
-        className={`combos-category-boundary-drop-zone ${getDropEdgeClass(categoryDropTarget, comboDropTarget, category, "start")}`}
+        className={`combos-category-boundary-drop-zone ${isBoundaryDropTarget({ groupId: category, placement: "before" }) ? "is-drop-target" : ""}`}
         key={`${category}:before-drop`}
-        data-drop-id={beforeDropId}
+        {...getGroupBoundaryProps({ groupId: category, placement: "before" })}
       />
     ) : null;
     const afterDropZone = showBoundaryDropZones ? (
       <div
-        className={`combos-category-boundary-drop-zone ${getDropEdgeClass(categoryDropTarget, comboDropTarget, category, "end")}`}
+        className={`combos-category-boundary-drop-zone ${isBoundaryDropTarget({ groupId: category, placement: "after" }) ? "is-drop-target" : ""}`}
         key={`${category}:after-drop`}
-        data-drop-id={afterDropId}
+        {...getGroupBoundaryProps({ groupId: category, placement: "after" })}
       />
     ) : null;
     return [
       beforeDropZone,
-      <section className={categoryClassName} key={category} data-category={category}>
+      <section className={categoryClassName} key={category} {...getGroupProps({ groupId: category })}>
         <div className="checklist-section-header combos-category-header">
           <div className="combos-category-title">
             <button
               className="task-planner-category-drag-handle"
               type="button"
-              onPointerDown={(event) => startCategoryDrag(event, categoryId)}
+              onPointerDown={(event) => groupReorder.startDrag(event, { groupId: category })}
               aria-label={`${textContent.reorderCategoryTitle || "Déplacer la catégorie"} ${category}`}
               title={textContent.reorderCategoryTitle || "Déplacer la catégorie"}
             >
@@ -984,17 +630,6 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
     ];
   }
 
-  function renderUncategorizedDropZone() {
-    const draggingCombo = draggingComboId ? data.combos.find((combo) => combo.id === draggingComboId) : null;
-    const draggingCategory = parseCategorySectionId(draggingCategoryId);
-    if ((!draggingCombo || !getComboCategory(draggingCombo)) && !draggingCategory) return null;
-    return (
-      <div className={`combos-root-drop-zone is-visible ${comboDropTarget.id === UNCATEGORIZED_DROP_ID || categoryDropTarget.id === UNCATEGORIZED_DROP_ID ? "is-drop-target" : ""}`} data-drop-id={UNCATEGORIZED_DROP_ID}>
-        {textContent.noCategoryLabel || "Sans catégorie"}
-      </div>
-    );
-  }
-
   return (
     <div className="combos-module">
       {(editing || editingComboId) && (
@@ -1115,8 +750,7 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
       )}
 
       <div className="combos-category-list">
-        {renderUncategorizedDropZone()}
-        {entries.map((entry) => entry.type === "category" ? renderCategory(entry.group) : renderCombo(entry.combo))}
+        {entries.map((entry) => entry.type === "group" ? renderCategory(entry.group) : renderCombo(entry.item))}
       </div>
     </div>
   );