add categories to task planner

docs/STORAGE_SCHEMA.md

@@ -269,11 +269,13 @@ Type : `taskPlanner`
   "weeklyResetDay": 1,
   "resetTime": "00:00",
   "lastResetAt": 1760000000000,
+  "categoryOrder": ["Raid", "Farm"],
   "tasks": [
     {
       "id": "task1",
       "title": "Quête 1",
       "description": "Préparer la route.",
+      "category": "Raid",
       "type": "daily",
       "checked": true,
       "checkedAt": 1760000000000
@@ -295,7 +297,7 @@ Type : `taskPlanner`
       "id": "relation2",
       "fromTaskId": "task2",
       "toTaskId": "task1",
-      "dependency": true
+      "prerequisite": true
     }
   ]
 }
@@ -308,10 +310,14 @@ Notes :
 - `weeklyResetDay` suit les jours JavaScript : `0` dimanche, `1` lundi, ..., `6` samedi.
 - `resetTime` est global à l'outil et vaut `HH:MM`.
 - `weeklyResetDay` sur une tâche hebdo surcharge le jour global.
+- `category` sur une tâche racine est facultatif. Les tâches enfants héritent de la catégorie effective de leur parent et ne stockent pas de catégorie propre.
+- Les tâches catégorisées sont regroupées par catégorie au niveau racine.
+- `categoryOrder` stocke l'ordre d'affichage des catégories utilisées. Les catégories absentes des tâches sont retirées à la normalisation.
 - `relations` stocke les parents directionnels. `fromTaskId` désigne la tâche enfant, `toTaskId` son parent.
 - une tâche ne conserve qu'un seul parent.
-- `dependency: true` marque aussi ce parent comme pré requis.
+- `prerequisite: true` marque aussi ce parent comme pré requis.
 - Les pré requis sont non bloquants : ils affichent un avertissement si le parent requis n'est pas effectué.
+- En tri manuel, une tâche catégorisée ne peut être réordonnée qu'avec des tâches du même parent et de la même catégorie.
 
 Stockage compact :
 
@@ -320,10 +326,12 @@ Stockage compact :
 - `resetTime` est omis si la valeur vaut `00:00`.
 - `lastResetAt` est omis si la valeur vaut `0`.
 - `description` est omis si vide.
+- `category` est omis si vide ou si la tâche a un parent.
+- `categoryOrder` est omis si aucune catégorie n'est utilisée.
 - `checked` et `checkedAt` sont omis si la tâche n'est pas effectuée.
 - `weeklyResetDay` unitaire est omis si non défini.
 - `relations` est omis si vide.
-- `relations[].dependency` est omis si `false`.
+- `relations[].prerequisite` est omis si `false`.
 
 ## Outil Liens
 

tests/helpers/data-validation.mjs

@@ -211,15 +211,18 @@ export function validateSiteContent(site) {
     "toolboxes.modules.taskPlanner.showDescriptionTitle",
     "toolboxes.modules.taskPlanner.hideDescriptionTitle",
     "toolboxes.modules.taskPlanner.taskSettingsTitle",
-    "toolboxes.modules.taskPlanner.missingDependencyTitle",
+    "toolboxes.modules.taskPlanner.missingPrerequisiteTitle",
-    "toolboxes.modules.taskPlanner.missingDependencyBadge",
+    "toolboxes.modules.taskPlanner.missingPrerequisiteBadge",
-    "toolboxes.modules.taskPlanner.missingDependencyNotice",
+    "toolboxes.modules.taskPlanner.missingPrerequisiteNotice",
+    "toolboxes.modules.taskPlanner.categoryLabel",
+    "toolboxes.modules.taskPlanner.categoryPlaceholder",
+    "toolboxes.modules.taskPlanner.categoryReorderTitle",
     "toolboxes.modules.taskPlanner.taskWeeklyResetDayLabel",
     "toolboxes.modules.taskPlanner.inheritWeeklyResetDay",
     "toolboxes.modules.taskPlanner.linksLabel",
     "toolboxes.modules.taskPlanner.emptyLinks",
     "toolboxes.modules.taskPlanner.addLinkLabel",
-    "toolboxes.modules.taskPlanner.dependencyCheckboxLabel",
+    "toolboxes.modules.taskPlanner.prerequisiteCheckboxLabel",
     "toolboxes.modules.taskPlanner.removeRelationTitle",
     "toolboxes.modules.taskPlanner.emptyTasks",
     "toolboxes.modules.imageAnnotation.addImage",

tests/static-toolboxes.test.mjs

@@ -141,7 +141,9 @@ test("toolbox module registry and modules expose expected behavior", async () =>
   assert.match(taskPlannerModule, /normalizeTaskPlannerData/);
   assert.match(taskPlannerModule, /applyDueResets/);
   assert.match(taskPlannerModule, /relations/);
-  assert.match(taskPlannerModule, /dependency/);
+  assert.match(taskPlannerModule, /prerequisite/);
+  assert.match(taskPlannerModule, /categoryOrder/);
+  assert.match(taskPlannerModule, /categoryLabel/);
   assert.match(taskPlannerModule, /task-planner-warning/);
   assert.match(taskPlannerModule, /usePointerReorder/);
   assert.match(checklistModule, /export function ChecklistModule/);

tests/toolbox-modules.test.mjs

@@ -33,14 +33,15 @@ test("task planner data normalizes invalid settings and relations", () => {
     sortMode: "unknown",
     weeklyResetDay: 9,
     resetTime: "27:80",
+    categoryOrder: ["Raid", "Missing", "Farm", "Raid"],
     tasks: [
-      { id: "task1", title: "Daily", type: "daily", checked: true, checkedAt: 1000 },
+      { id: "task1", title: "Daily", type: "daily", checked: true, checkedAt: 1000, category: "Farm" },
-      { id: "task2", title: "Weekly", type: "weekly", weeklyResetDay: 4 },
+      { id: "task2", title: "Weekly", type: "weekly", weeklyResetDay: 4, category: "Raid" },
-      { id: "task3", title: "Invalid type", type: "later" }
+      { id: "task3", title: "Invalid type", type: "later", category: "Farm" }
     ],
     relations: [
       { id: "link1", fromTaskId: "task1", toTaskId: "task2" },
-      { id: "dep1", fromTaskId: "task2", toTaskId: "task1", dependency: true },
+      { id: "dep1", fromTaskId: "task3", toTaskId: "task2", prerequisite: true },
       { id: "bad", fromTaskId: "task1", toTaskId: "missing" },
       { id: "self", fromTaskId: "task2", toTaskId: "task2" }
     ]
@@ -49,29 +50,16 @@ test("task planner data normalizes invalid settings and relations", () => {
   assert.equal(normalized.sortMode, "manual");
   assert.equal(normalized.weeklyResetDay, 1);
   assert.equal(normalized.resetTime, "00:00");
+  assert.deepEqual(normalized.categoryOrder, ["Raid"]);
+  assert.equal(normalized.tasks[0].category, undefined);
   assert.equal(normalized.tasks[1].weeklyResetDay, 4);
+  assert.equal(normalized.tasks[1].category, "Raid");
   assert.equal(normalized.tasks[2].type, "unique");
   assert.deepEqual(normalized.relations.map((relation) => relation.id), ["link1", "dep1"]);
-  assert.equal(normalized.relations[0].dependency, false);
+  assert.equal(normalized.relations[0].prerequisite, false);
-  assert.equal(normalized.relations[1].dependency, true);
+  assert.equal(normalized.relations[1].prerequisite, true);
 });
 
-test("task planner accepts temporary split links data as combined relations", () => {
-  const normalized = normalizeTaskPlannerData({
-    tasks: [
-      { id: "task1", title: "Daily", type: "daily" },
-      { id: "task2", title: "Weekly", type: "weekly" }
-    ],
-    links: [{ id: "link1", fromTaskId: "task1", toTaskId: "task2" }],
-    dependencies: [{ id: "dep1", fromTaskId: "task2", toTaskId: "task1" }]
-  });
-
-  assert.deepEqual(normalized.relations.map((relation) => relation.toTaskId), ["task2", "task1"]);
-  assert.equal(normalized.relations[0].dependency, false);
-  assert.equal(normalized.relations[1].dependency, true);
-});
-
-
 test("task planner storage compacts defaults and export remaps task relations", () => {
   const compact = compactModuleDataForStorage("taskPlanner", {
     sortMode: "type",
@@ -79,18 +67,20 @@ test("task planner storage compacts defaults and export remaps task relations",
     resetTime: "00:00",
     tasks: [
       { id: "task1", title: "Daily", description: "", type: "daily", checked: false },
-      { id: "task2", title: "Weekly", description: "Run", type: "weekly", checked: true, checkedAt: 2000, weeklyResetDay: 5 }
+      { id: "task2", title: "Weekly", description: "Run", type: "weekly", checked: true, checkedAt: 2000, weeklyResetDay: 5, category: "Raid" }
     ],
+    categoryOrder: ["Raid"],
     relations: [
-      { id: "link1", fromTaskId: "task1", toTaskId: "task2", dependency: false },
+      { id: "dep1", fromTaskId: "task1", toTaskId: "task2", prerequisite: true }
-      { id: "dep1", fromTaskId: "task2", toTaskId: "task1", dependency: true }
     ]
   });
 
   assert.equal(compact.sortMode, "type");
   assert.equal(compact.weeklyResetDay, undefined);
   assert.equal(compact.resetTime, undefined);
+  assert.deepEqual(compact.categoryOrder, ["Raid"]);
   assert.deepEqual(compact.tasks[0], { id: "task1", title: "Daily", type: "daily" });
+  assert.equal(compact.tasks[1].category, "Raid");
   assert.equal(compact.tasks[1].weeklyResetDay, 5);
 
   const exported = createToolboxExportPayload(
@@ -101,8 +91,5 @@ test("task planner storage compacts defaults and export remaps task relations",
   assert.deepEqual(exportedPlanner.tasks.map((task) => task.id), ["a1", "a2"]);
   assert.equal(exportedPlanner.relations[0].fromTaskId, "a1");
   assert.equal(exportedPlanner.relations[0].toTaskId, "a2");
-  assert.equal(exportedPlanner.relations[0].dependency, undefined);
+  assert.equal(exportedPlanner.relations[0].prerequisite, true);
-  assert.equal(exportedPlanner.relations[1].fromTaskId, "a2");
-  assert.equal(exportedPlanner.relations[1].toTaskId, "a1");
-  assert.equal(exportedPlanner.relations[1].dependency, true);
 });

website/public/data/site.json

@@ -345,15 +345,18 @@
         "showDescriptionTitle": "Afficher la description",
         "hideDescriptionTitle": "Masquer la description",
         "taskSettingsTitle": "Réglages de la tâche",
-        "missingDependencyTitle": "Pré requis non effectué",
+        "missingPrerequisiteTitle": "Pré requis non effectué",
-        "missingDependencyBadge": "Pré requis",
+        "missingPrerequisiteBadge": "Pré requis",
-        "missingDependencyNotice": "Pré requis parent non effectué",
+        "missingPrerequisiteNotice": "Pré requis parent non effectué",
+        "categoryLabel": "Catégorie",
+        "categoryPlaceholder": "Nom de catégorie",
+        "categoryReorderTitle": "Déplacer la catégorie",
         "taskWeeklyResetDayLabel": "Jour hebdo",
         "inheritWeeklyResetDay": "Global",
         "linksLabel": "Parent",
         "emptyLinks": "Aucun parent",
         "addLinkLabel": "Définir un parent",
-        "dependencyCheckboxLabel": "Pré requis",
+        "prerequisiteCheckboxLabel": "Pré requis",
         "removeRelationTitle": "Retirer",
         "emptyTasks": "Aucune tâche planifiée."
       },

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

@@ -76,6 +76,17 @@ function moveTask(tasks, fromTaskId, toTaskId, placement = "before") {
   return nextTasks;
 }
 
+function moveCategory(categoryOrder, fromCategory, toCategory, placement = "before") {
+  const index = categoryOrder.indexOf(fromCategory);
+  const targetIndex = categoryOrder.indexOf(toCategory);
+  if (index < 0 || targetIndex < 0 || fromCategory === toCategory) return categoryOrder;
+  const nextOrder = [...categoryOrder];
+  const [moved] = nextOrder.splice(index, 1);
+  const nextTargetIndex = nextOrder.indexOf(toCategory);
+  nextOrder.splice(placement === "after" ? nextTargetIndex + 1 : nextTargetIndex, 0, moved);
+  return nextOrder;
+}
+
 function sortTasks(tasks, sortMode) {
   if (sortMode !== "type") return tasks;
   const order = new Map(TASK_TYPES.map((type, index) => [type, index]));
@@ -112,6 +123,82 @@ function getTasksForParent(tasks, parentMap, parentId, sortMode) {
   return sortTasks(tasks.filter((task) => (parentMap.get(task.id) || "") === parentId), sortMode);
 }
 
+function getTaskCategory(task) {
+  return String(task?.category || "").trim();
+}
+
+function getTaskById(tasks, taskId) {
+  return tasks.find((task) => task.id === taskId) || null;
+}
+
+function getEffectiveTaskCategory(task, tasks, parentMap) {
+  const parentId = parentMap.get(task?.id) || "";
+  const parentTask = parentId ? getTaskById(tasks, parentId) : null;
+  return parentTask ? getEffectiveTaskCategory(parentTask, tasks, parentMap) : getTaskCategory(task);
+}
+
+function getTaskCategoryForParent(task, tasks, parentMap, parentId) {
+  return parentId ? getEffectiveTaskCategory(task, tasks, parentMap) : getTaskCategory(task);
+}
+
+function getTaskCategoryDataset(task, tasks, parentMap) {
+  return getEffectiveTaskCategory(task, tasks, parentMap);
+}
+
+function countTaskTree(taskIds, tasks, parentMap) {
+  let count = 0;
+  const visited = new Set();
+  function visit(taskId) {
+    if (visited.has(taskId)) return;
+    visited.add(taskId);
+    count += 1;
+    tasks
+      .filter((task) => (parentMap.get(task.id) || "") === taskId)
+      .forEach((child) => visit(child.id));
+  }
+  taskIds.forEach(visit);
+  return count;
+}
+
+function getTaskCategoryGroups(tasks, parentMap, parentId, sortMode, categoryOrder) {
+  const siblings = getTasksForParent(tasks, parentMap, parentId, sortMode);
+  if (parentId) {
+    return {
+      uncategorized: siblings,
+      categories: []
+    };
+  }
+  const categories = [];
+  siblings.forEach((task) => {
+    const category = getTaskCategoryForParent(task, tasks, parentMap, parentId);
+    if (category && !categories.includes(category)) categories.push(category);
+  });
+  const orderedCategories = [
+    ...categoryOrder.filter((category) => categories.includes(category)),
+    ...categories.filter((category) => !categoryOrder.includes(category))
+  ];
+  return {
+    uncategorized: siblings.filter((task) => !getTaskCategoryForParent(task, tasks, parentMap, parentId)),
+    categories: orderedCategories.map((category) => ({
+      category,
+      tasks: siblings.filter((task) => getTaskCategoryForParent(task, tasks, parentMap, parentId) === category)
+    })).filter((group) => group.tasks.length)
+  };
+}
+
+function getCategorySectionId(parentId, category) {
+  return `${parentId || ""}\n${category}`;
+}
+
+function parseCategorySectionId(id) {
+  const separatorIndex = id.indexOf("\n");
+  if (separatorIndex < 0) return { parentId: "", category: id };
+  return {
+    parentId: id.slice(0, separatorIndex),
+    category: id.slice(separatorIndex + 1)
+  };
+}
+
 export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
   const data = context.normalizeTaskPlannerData(context.getModuleData(toolboxId, moduleId, { tasks: [] }));
   const textContent = context.moduleText?.taskPlanner || {};
@@ -121,8 +208,8 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [openDescriptions, setOpenDescriptions] = useState(() => new Set());
   const [openTaskSettings, setOpenTaskSettings] = useState(() => new Set());
-  const [dependencyNoticeTaskIds, setDependencyNoticeTaskIds] = useState(() => new Set());
+  const [prerequisiteNoticeTaskIds, setPrerequisiteNoticeTaskIds] = useState(() => new Set());
-  const dependencyNoticeTimeouts = useRef(new Map());
+  const prerequisiteNoticeTimeouts = useRef(new Map());
   const parentMap = useMemo(() => getTaskParentMap(data.tasks, data.relations), [data.tasks, data.relations]);
   const {
     draggingId,
@@ -131,9 +218,31 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
   } = usePointerReorder({
     targetSelector: ".task-planner-item",
     getTargetId: (target) => target.dataset.taskId,
-    canDropOn: (target, draggingTaskId) => data.sortMode === "manual" && target.dataset.parentId === (parentMap.get(draggingTaskId) || ""),
+    canDropOn: (target, draggingTaskId) => {
+      const draggingTask = data.tasks.find((task) => task.id === draggingTaskId);
+      return data.sortMode === "manual"
+        && target.dataset.parentId === (parentMap.get(draggingTaskId) || "")
+        && target.dataset.category === getTaskCategoryDataset(draggingTask, data.tasks, parentMap);
+    },
     onMove: (fromTaskId, toTaskId, placement) => save({ ...data, tasks: moveTask(data.tasks, fromTaskId, toTaskId, placement) })
   });
+  const {
+    draggingId: draggingCategoryId,
+    dropTarget: categoryDropTarget,
+    startDrag: startCategoryDrag
+  } = usePointerReorder({
+    targetSelector: ".task-planner-category-section",
+    getTargetId: (target) => getCategorySectionId(target.dataset.parentId || "", target.dataset.category || ""),
+    canDropOn: (target, draggingIdValue) => {
+      const draggingCategory = parseCategorySectionId(draggingIdValue);
+      return target.dataset.parentId === draggingCategory.parentId && Boolean(target.dataset.category);
+    },
+    onMove: (fromId, toId, placement) => {
+      const fromCategory = parseCategorySectionId(fromId).category;
+      const toCategory = parseCategorySectionId(toId).category;
+      save({ ...data, categoryOrder: moveCategory(data.categoryOrder, fromCategory, toCategory, placement) });
+    }
+  });
 
   function save(nextData) {
     context.setModuleData(toolboxId, moduleId, nextData, "taskPlanner");
@@ -145,7 +254,7 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
   }, []);
 
   useEffect(() => () => {
-    dependencyNoticeTimeouts.current.forEach((timeoutId) => window.clearTimeout(timeoutId));
+    prerequisiteNoticeTimeouts.current.forEach((timeoutId) => window.clearTimeout(timeoutId));
   }, []);
 
   useEffect(() => {
@@ -191,9 +300,15 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
     if (!toTaskId || fromTaskId === toTaskId || data.relations.some((relation) => relation.fromTaskId === fromTaskId && relation.toTaskId === toTaskId)) return;
     save({
       ...data,
+      tasks: data.tasks.map((task) => {
+        if (task.id !== fromTaskId || !task.category) return task;
+        const nextTask = { ...task };
+        delete nextTask.category;
+        return nextTask;
+      }),
       relations: [
         ...data.relations.filter((relation) => relation.fromTaskId !== fromTaskId),
-        { id: context.uid("relation"), fromTaskId, toTaskId, dependency: false }
+        { id: context.uid("relation"), fromTaskId, toTaskId, prerequisite: false }
       ]
     });
   }
@@ -205,16 +320,32 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
     });
   }
 
-  function setDependency(fromTaskId, toTaskId, dependency) {
+  function setPrerequisite(fromTaskId, toTaskId, prerequisite) {
     const hasRelation = data.relations.some((relation) => relation.fromTaskId === fromTaskId && relation.toTaskId === toTaskId);
     save({
       ...data,
       relations: hasRelation
-        ? data.relations.map((relation) => relation.fromTaskId === fromTaskId && relation.toTaskId === toTaskId ? { ...relation, dependency } : relation)
+        ? data.relations.map((relation) => relation.fromTaskId === fromTaskId && relation.toTaskId === toTaskId ? { ...relation, prerequisite } : relation)
-        : [...data.relations, { id: context.uid("relation"), fromTaskId, toTaskId, dependency }]
+        : [...data.relations, { id: context.uid("relation"), fromTaskId, toTaskId, prerequisite }]
     });
   }
 
+  function setTaskCategory(taskId, category) {
+    const normalizedCategory = String(category || "").trim();
+    const tasks = data.tasks.map((task) => {
+      if (task.id !== taskId) return task;
+      const nextTask = { ...task };
+      if (normalizedCategory) nextTask.category = normalizedCategory;
+      else delete nextTask.category;
+      return nextTask;
+    });
+    const categoryOrder = [
+      ...data.categoryOrder.filter((categoryName) => tasks.some((task) => task.category === categoryName)),
+      ...tasks.map((task) => task.category).filter(Boolean).filter((categoryName) => !data.categoryOrder.includes(categoryName))
+    ];
+    save({ ...data, tasks, categoryOrder });
+  }
+
   function toggleSet(setter, taskId) {
     setter((current) => {
       const next = new Set(current);
@@ -224,19 +355,19 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
     });
   }
 
-  function showDependencyNotice(taskId) {
+  function showPrerequisiteNotice(taskId) {
-    const currentTimeoutId = dependencyNoticeTimeouts.current.get(taskId);
+    const currentTimeoutId = prerequisiteNoticeTimeouts.current.get(taskId);
     if (currentTimeoutId) window.clearTimeout(currentTimeoutId);
-    setDependencyNoticeTaskIds((current) => new Set(current).add(taskId));
+    setPrerequisiteNoticeTaskIds((current) => new Set(current).add(taskId));
     const timeoutId = window.setTimeout(() => {
-      dependencyNoticeTimeouts.current.delete(taskId);
+      prerequisiteNoticeTimeouts.current.delete(taskId);
-      setDependencyNoticeTaskIds((current) => {
+      setPrerequisiteNoticeTaskIds((current) => {
         const next = new Set(current);
         next.delete(taskId);
         return next;
       });
     }, 2600);
-    dependencyNoticeTimeouts.current.set(taskId, timeoutId);
+    prerequisiteNoticeTimeouts.current.set(taskId, timeoutId);
   }
 
   return (
@@ -301,19 +432,23 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
             data={data}
             draggingId={draggingId}
             dropTarget={dropTarget}
+            draggingCategoryId={draggingCategoryId}
+            categoryDropTarget={categoryDropTarget}
             textContent={textContent}
             openDescriptions={openDescriptions}
             openTaskSettings={openTaskSettings}
-            dependencyNoticeTaskIds={dependencyNoticeTaskIds}
+            prerequisiteNoticeTaskIds={prerequisiteNoticeTaskIds}
             onDragStart={startDrag}
+            onCategoryDragStart={startCategoryDrag}
             onToggleDescription={(taskId) => toggleSet(setOpenDescriptions, taskId)}
             onToggleSettings={(taskId) => toggleSet(setOpenTaskSettings, taskId)}
-            onDependencyNotice={showDependencyNotice}
+            onPrerequisiteNotice={showPrerequisiteNotice}
             onUpdateTask={updateTask}
             onDeleteTask={deleteTask}
             onAddLinkTarget={addLinkTarget}
             onRemoveLinkTarget={removeLinkTarget}
-            onSetDependency={setDependency}
+            onSetPrerequisite={setPrerequisite}
+            onSetTaskCategory={setTaskCategory}
           />
         ) : (
           <li className="task-planner-empty">{textContent.emptyTasks || "Aucune tâche planifiée."}</li>
@@ -330,26 +465,31 @@ function TaskPlannerBranch({
   data,
   draggingId,
   dropTarget,
+  draggingCategoryId,
+  categoryDropTarget,
   textContent,
   openDescriptions,
   openTaskSettings,
-  dependencyNoticeTaskIds,
+  prerequisiteNoticeTaskIds,
   onDragStart,
+  onCategoryDragStart,
   onToggleDescription,
   onToggleSettings,
-  onDependencyNotice,
+  onPrerequisiteNotice,
   onUpdateTask,
   onDeleteTask,
   onAddLinkTarget,
   onRemoveLinkTarget,
-  onSetDependency,
+  onSetPrerequisite,
+  onSetTaskCategory,
   visited = new Set()
 }) {
-  const children = getTasksForParent(tasks, parentMap, parentId, data.sortMode).filter((task) => !visited.has(task.id));
+  const groupedTasks = getTaskCategoryGroups(tasks, parentMap, parentId, data.sortMode, data.categoryOrder);
+  const children = [...groupedTasks.uncategorized, ...groupedTasks.categories.flatMap((group) => group.tasks)].filter((task) => !visited.has(task.id));
   if (!children.length) return null;
   const nextVisited = new Set([...visited, ...children.map((task) => task.id)]);
 
-  return children.map((task) => {
+  function renderTask(task) {
     const nestedChildren = getTasksForParent(tasks, parentMap, task.id, data.sortMode).filter((child) => !nextVisited.has(child.id));
     return (
       <TaskPlannerItem
@@ -364,16 +504,17 @@ function TaskPlannerBranch({
         textContent={textContent}
         descriptionOpen={openDescriptions.has(task.id)}
         settingsOpen={openTaskSettings.has(task.id)}
-        dependencyNoticeVisible={dependencyNoticeTaskIds.has(task.id)}
+        prerequisiteNoticeVisible={prerequisiteNoticeTaskIds.has(task.id)}
         onDragStart={onDragStart}
         onToggleDescription={() => onToggleDescription(task.id)}
         onToggleSettings={() => onToggleSettings(task.id)}
-        onDependencyNotice={onDependencyNotice}
+        onPrerequisiteNotice={onPrerequisiteNotice}
         onUpdateTask={onUpdateTask}
         onDeleteTask={onDeleteTask}
         onAddLinkTarget={onAddLinkTarget}
         onRemoveLinkTarget={onRemoveLinkTarget}
-        onSetDependency={onSetDependency}
+        onSetPrerequisite={onSetPrerequisite}
+        onSetTaskCategory={onSetTaskCategory}
       >
         {nestedChildren.length ? (
           <TaskPlannerBranch
@@ -383,25 +524,67 @@ function TaskPlannerBranch({
             data={data}
             draggingId={draggingId}
             dropTarget={dropTarget}
+            draggingCategoryId={draggingCategoryId}
+            categoryDropTarget={categoryDropTarget}
             textContent={textContent}
             openDescriptions={openDescriptions}
             openTaskSettings={openTaskSettings}
-            dependencyNoticeTaskIds={dependencyNoticeTaskIds}
+            prerequisiteNoticeTaskIds={prerequisiteNoticeTaskIds}
             onDragStart={onDragStart}
+            onCategoryDragStart={onCategoryDragStart}
             onToggleDescription={onToggleDescription}
             onToggleSettings={onToggleSettings}
-            onDependencyNotice={onDependencyNotice}
+            onPrerequisiteNotice={onPrerequisiteNotice}
             onUpdateTask={onUpdateTask}
             onDeleteTask={onDeleteTask}
             onAddLinkTarget={onAddLinkTarget}
             onRemoveLinkTarget={onRemoveLinkTarget}
-            onSetDependency={onSetDependency}
+            onSetPrerequisite={onSetPrerequisite}
+            onSetTaskCategory={onSetTaskCategory}
             visited={nextVisited}
           />
         ) : null}
       </TaskPlannerItem>
     );
-  });
+  }
+
+  return [
+    ...groupedTasks.uncategorized.filter((task) => !visited.has(task.id)).map(renderTask),
+    ...groupedTasks.categories.map((group) => {
+      const groupTasks = group.tasks.filter((task) => !visited.has(task.id));
+      if (!groupTasks.length) return null;
+      const groupCount = countTaskTree(groupTasks.map((task) => task.id), tasks, parentMap);
+      const categoryId = getCategorySectionId(parentId, group.category);
+      const sectionClassName = [
+        "task-planner-category-section",
+        draggingCategoryId === categoryId ? "is-dragging" : "",
+        categoryDropTarget.id === categoryId ? "is-drop-target" : "",
+        categoryDropTarget.id === categoryId && categoryDropTarget.placement === "after" ? "drop-after" : ""
+      ].filter(Boolean).join(" ");
+      return (
+        <li className={sectionClassName} key={`${parentId || "root"}:${group.category}`} data-parent-id={parentId} data-category={group.category}>
+          <div className="checklist-section-header task-planner-category-header">
+            <div>
+              <button
+                className="task-planner-category-drag-handle"
+                type="button"
+                onPointerDown={(event) => onCategoryDragStart(event, categoryId)}
+                aria-label={`${textContent.categoryReorderTitle || "Déplacer la catégorie"} ${group.category}`}
+                title={textContent.categoryReorderTitle || "Déplacer la catégorie"}
+              >
+                <Icon name="drag" />
+              </button>
+              <h3>{group.category}</h3>
+            </div>
+            <span>{groupCount}</span>
+          </div>
+          <ul className="task-planner-list">
+            {groupTasks.map(renderTask)}
+          </ul>
+        </li>
+      );
+    })
+  ].filter(Boolean);
 }
 
 function TaskPlannerItem({
@@ -415,26 +598,32 @@ function TaskPlannerItem({
   textContent,
   descriptionOpen,
   settingsOpen,
-  dependencyNoticeVisible,
+  prerequisiteNoticeVisible,
   onDragStart,
   onToggleDescription,
   onToggleSettings,
-  onDependencyNotice,
+  onPrerequisiteNotice,
   onUpdateTask,
   onDeleteTask,
   onAddLinkTarget,
   onRemoveLinkTarget,
-  onSetDependency,
+  onSetPrerequisite,
+  onSetTaskCategory,
   children
 }) {
+  const parentTask = parentId ? getTaskById(tasks, parentId) : null;
+  const inheritedCategory = parentTask ? getEffectiveTaskCategory(parentTask, tasks, parentMap) : "";
+  const categoryValue = parentTask ? inheritedCategory : task.category || "";
+  const categoryEditable = !parentTask;
+  const [categoryDraft, setCategoryDraft] = useState(categoryValue);
   const relations = data.relations.filter((relation) => relation.fromTaskId === task.id);
-  const missingDependencies = relations.filter((relation) => relation.dependency && !tasks.find((item) => item.id === relation.toTaskId)?.checked);
+  const missingPrerequisites = relations.filter((relation) => relation.prerequisite && !tasks.find((item) => item.id === relation.toTaskId)?.checked);
   const relationTargets = tasks.filter((item) => item.id !== task.id && !relations.some((relation) => relation.toTaskId === item.id));
-  const noticeMessage = dependencyNoticeVisible && missingDependencies.length > 0 ? textContent.missingDependencyNotice || "Pré requis parent non effectué" : "";
+  const noticeMessage = prerequisiteNoticeVisible && missingPrerequisites.length > 0 ? textContent.missingPrerequisiteNotice || "Pré requis parent non effectué" : "";
   const className = [
     "task-planner-item",
     task.checked ? "is-complete" : "",
-    missingDependencies.length ? "has-missing-dependency" : "",
+    missingPrerequisites.length ? "has-missing-prerequisite" : "",
     draggingId === task.id ? "is-dragging" : "",
     dropTarget.id === task.id ? "is-drop-target" : "",
     dropTarget.id === task.id && dropTarget.placement === "after" ? "drop-after" : ""
@@ -442,7 +631,7 @@ function TaskPlannerItem({
 
   function updateChecked(event) {
     const checked = event.target.checked;
-    if (checked && missingDependencies.length > 0) onDependencyNotice(task.id);
+    if (checked && missingPrerequisites.length > 0) onPrerequisiteNotice(task.id);
     onUpdateTask(task.id, (current) => ({
       ...current,
       checked,
@@ -450,8 +639,16 @@ function TaskPlannerItem({
     }));
   }
 
+  useEffect(() => {
+    setCategoryDraft(categoryValue);
+  }, [categoryValue, task.id]);
+
+  function commitCategoryDraft() {
+    if (categoryEditable && categoryDraft.trim() !== (task.category || "")) onSetTaskCategory(task.id, categoryDraft);
+  }
+
   return (
-    <li className={className} data-task-id={task.id} data-parent-id={parentId}>
+    <li className={className} data-task-id={task.id} data-parent-id={parentId} data-category={getTaskCategoryDataset(task, tasks, parentMap)}>
       <div className="task-planner-line">
         <button
           className="task-planner-drag-handle"
@@ -489,9 +686,9 @@ function TaskPlannerItem({
         >
           {TASK_TYPES.map((taskType) => <option key={taskType} value={taskType}>{getTaskTypeLabel(taskType, textContent)}</option>)}
         </select>
-        {missingDependencies.length > 0 && (
+        {missingPrerequisites.length > 0 && (
-          <span className="task-planner-warning" title={textContent.missingDependencyTitle || "Pré requis non effectué"}>
+          <span className="task-planner-warning" title={textContent.missingPrerequisiteTitle || "Pré requis non effectué"}>
-            {textContent.missingDependencyBadge || "Pré requis"}
+            {textContent.missingPrerequisiteBadge || "Pré requis"}
           </span>
         )}
         <div className="task-planner-actions">
@@ -522,13 +719,32 @@ function TaskPlannerItem({
       </div>
       <InlineNotice className="task-planner-notice" message={noticeMessage} />
       {descriptionOpen && (
-        <textarea
+        <div className="task-planner-description-panel">
-          className="task-planner-description"
+          <label className={`task-planner-category-field ${categoryEditable ? "" : "is-disabled"}`}>
-          value={task.description}
+            <span>{textContent.categoryLabel || "Catégorie"}</span>
-          onChange={(event) => onUpdateTask(task.id, (current) => ({ ...current, description: event.target.value }))}
+            <input
-          placeholder={textContent.descriptionPlaceholder || "Description"}
+              value={categoryDraft}
-          aria-label={`${textContent.descriptionLabel || "Description"} ${task.title}`}
+              onChange={(event) => setCategoryDraft(event.target.value)}
-        />
+              onBlur={commitCategoryDraft}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") event.currentTarget.blur();
+              }}
+              disabled={!categoryEditable}
+              placeholder={textContent.categoryPlaceholder || "Nom de catégorie"}
+              aria-label={`${textContent.categoryLabel || "Catégorie"} ${task.title}`}
+            />
+          </label>
+          <label className="task-planner-description-field">
+            <span>{textContent.descriptionLabel || "Description"}</span>
+            <textarea
+              className="task-planner-description"
+              value={task.description}
+              onChange={(event) => onUpdateTask(task.id, (current) => ({ ...current, description: event.target.value }))}
+              placeholder={textContent.descriptionPlaceholder || "Description"}
+              aria-label={`${textContent.descriptionLabel || "Description"} ${task.title}`}
+            />
+          </label>
+        </div>
       )}
       {settingsOpen && (
         <div className="task-planner-task-settings">
@@ -562,10 +778,10 @@ function TaskPlannerItem({
           emptyLabel={textContent.emptyLinks || "Aucun parent"}
           addLabel={textContent.addLinkLabel || "Définir un parent"}
           removeLabel={textContent.removeRelationTitle || "Retirer"}
-          dependencyLabel={textContent.dependencyCheckboxLabel || "Pré requis"}
+          prerequisiteLabel={textContent.prerequisiteCheckboxLabel || "Pré requis"}
           onAddLinkTarget={onAddLinkTarget}
           onRemoveLinkTarget={onRemoveLinkTarget}
-          onSetDependency={onSetDependency}
+          onSetPrerequisite={onSetPrerequisite}
         />
         </div>
       )}
@@ -574,7 +790,7 @@ function TaskPlannerItem({
   );
 }
 
-function LinksEditor({ label, relations, task, tasks, parentMap, relationTargets, emptyLabel, addLabel, removeLabel, dependencyLabel, onAddLinkTarget, onRemoveLinkTarget, onSetDependency }) {
+function LinksEditor({ label, relations, task, tasks, parentMap, relationTargets, emptyLabel, addLabel, removeLabel, prerequisiteLabel, onAddLinkTarget, onRemoveLinkTarget, onSetPrerequisite }) {
   const descendantIds = new Set();
   function collectDescendants(taskId) {
     tasks.filter((item) => parentMap.get(item.id) === taskId).forEach((child) => {
@@ -592,14 +808,14 @@ function LinksEditor({ label, relations, task, tasks, parentMap, relationTargets
         {relations.length ? relations.map((relation) => (
           <div className="task-planner-relation-chip" key={relation.id}>
             <span>{getTaskTitle(tasks, relation.toTaskId)}</span>
-            <label title={dependencyLabel}>
+            <label title={prerequisiteLabel}>
               <input
                 type="checkbox"
-                checked={relation.dependency}
+                checked={relation.prerequisite}
-                onChange={(event) => onSetDependency(task.id, relation.toTaskId, event.target.checked)}
+                onChange={(event) => onSetPrerequisite(task.id, relation.toTaskId, event.target.checked)}
-                aria-label={`${dependencyLabel} ${getTaskTitle(tasks, relation.toTaskId)}`}
+                aria-label={`${prerequisiteLabel} ${getTaskTitle(tasks, relation.toTaskId)}`}
               />
-              <span>{dependencyLabel}</span>
+              <span>{prerequisiteLabel}</span>
             </label>
             <button type="button" onClick={() => onRemoveLinkTarget(task.id, relation.toTaskId)} title={removeLabel} aria-label={`${removeLabel} ${getTaskTitle(tasks, relation.toTaskId)}`}>
               <Icon name="close" />

website/src/features/toolboxes/storage/toolboxStorage.js

@@ -154,8 +154,8 @@ export function normalizeChecklistData(data) {
   const sections = Array.isArray(data?.sections)
     ? data.sections.map((section) => normalizeChecklistSection(section)).filter((section) => section.items.length || section.title)
     : [];
-  const legacyItems = (data?.items || []).map(normalizeChecklistItem).filter((item) => item.label);
+  const simpleItems = (data?.items || []).map(normalizeChecklistItem).filter((item) => item.label);
-  if (!sections.length && legacyItems.length) return { hideCompletedSections, hideCompletedSectionsFully, sections: [{ id: uid("section"), title: "", items: legacyItems }], items: legacyItems };
+  if (!sections.length && simpleItems.length) return { hideCompletedSections, hideCompletedSectionsFully, sections: [{ id: uid("section"), title: "", items: simpleItems }], items: simpleItems };
   const items = sections.flatMap((section) => section.items);
   return { hideCompletedSections, hideCompletedSectionsFully, sections, items };
 }
@@ -267,7 +267,6 @@ export function normalizeCalculatorData(data) {
 
 export function normalizeTimerData(data) {
   const stopwatch = data?.stopwatch || {};
-  const legacyAlertMode = TIMER_ALERT_MODES.has(data?.alertMode) ? data.alertMode : "off";
   const laps = (Array.isArray(stopwatch.laps) ? stopwatch.laps : [])
     .map((lap) => ({
       id: lap?.id || uid("timer"),
@@ -282,7 +281,7 @@ export function normalizeTimerData(data) {
         id: countdown?.id || uid("timer"),
         label: String(countdown?.label || "Timer").trim() || "Timer",
         type,
-        alertMode: TIMER_ALERT_MODES.has(countdown?.alertMode) ? countdown.alertMode : legacyAlertMode
+        alertMode: TIMER_ALERT_MODES.has(countdown?.alertMode) ? countdown.alertMode : "off"
       };
       if (type === "duration") {
         const durationMs = Math.max(0, Number(countdown?.durationMs) || 0);
@@ -299,8 +298,7 @@ export function normalizeTimerData(data) {
         return isTimeString(pattern, true) ? { ...normalized, pattern } : null;
       }
       if (type === "interval") {
-        const legacyIntervalMs = (Number.parseInt(countdown?.intervalMinutes, 10) || 0) * 60000;
+        const intervalMs = Math.max(0, Number(countdown?.intervalMs) || 0);
-        const intervalMs = Math.max(0, Number(countdown?.intervalMs) || legacyIntervalMs);
         const anchorAt = Math.max(0, Number(countdown?.anchorAt) || 0);
         return intervalMs > 0 ? { ...normalized, intervalMs, anchorAt } : null;
       }
@@ -324,6 +322,7 @@ export function normalizeTimerData(data) {
 function normalizeTaskPlannerTask(task) {
   const title = String(task?.title || "").trim() || "Tâche";
   const type = TASK_TYPES.has(task?.type) ? task.type : "unique";
+  const category = String(task?.category || "").trim();
   const normalized = {
     id: task?.id || uid("task"),
     title,
@@ -332,23 +331,29 @@ function normalizeTaskPlannerTask(task) {
     checked: task?.checked === true,
     checkedAt: normalizeTimestamp(task?.checkedAt)
   };
+  if (category) normalized.category = category;
   if (type === "weekly" && task?.weeklyResetDay !== undefined) normalized.weeklyResetDay = normalizeWeekDay(task.weeklyResetDay);
   if (!normalized.checked) normalized.checkedAt = 0;
   return normalized;
 }
 
+function normalizeTaskPlannerCategoryOrder(value, tasks) {
+  const categories = new Set(tasks.map((task) => task.category).filter(Boolean));
+  const ordered = [];
+  (Array.isArray(value) ? value : []).forEach((category) => {
+    const normalized = String(category || "").trim();
+    if (normalized && categories.has(normalized) && !ordered.includes(normalized)) ordered.push(normalized);
+  });
+  tasks.forEach((task) => {
+    if (task.category && !ordered.includes(task.category)) ordered.push(task.category);
+  });
+  return ordered;
+}
+
 function normalizeTaskPlannerRelations(data, taskIds) {
   const seen = new Set();
   const seenChildren = new Set();
-  const legacyDependencies = new Set((Array.isArray(data?.dependencies) ? data.dependencies : [])
+  return (Array.isArray(data?.relations) ? data.relations : [])
-    .map((relation) => `${relation?.fromTaskId || ""}:${relation?.toTaskId || ""}`));
-  const sourceRelations = Array.isArray(data?.relations)
-    ? data.relations
-    : [
-        ...(Array.isArray(data?.links) ? data.links : []),
-        ...(Array.isArray(data?.dependencies) ? data.dependencies : []).map((relation) => ({ ...relation, dependency: true }))
-      ];
-  return sourceRelations
     .map((relation) => {
       const fromTaskId = String(relation?.fromTaskId || "");
       const toTaskId = String(relation?.toTaskId || "");
@@ -361,22 +366,32 @@ function normalizeTaskPlannerRelations(data, taskIds) {
         id: relation?.id || uid("relation"),
         fromTaskId,
         toTaskId,
-        dependency: relation?.dependency === true || legacyDependencies.has(key)
+        prerequisite: relation?.prerequisite === true
       };
     })
     .filter(Boolean);
 }
 
 export function normalizeTaskPlannerData(data) {
-  const tasks = (Array.isArray(data?.tasks) ? data.tasks : []).map(normalizeTaskPlannerTask).filter(Boolean);
+  const rawTasks = (Array.isArray(data?.tasks) ? data.tasks : []).map(normalizeTaskPlannerTask).filter(Boolean);
+  const rawTaskIds = new Set(rawTasks.map((task) => task.id));
+  const relations = normalizeTaskPlannerRelations(data, rawTaskIds);
+  const childTaskIds = new Set(relations.map((relation) => relation.fromTaskId));
+  const tasks = rawTasks.map((task) => {
+    if (!childTaskIds.has(task.id) || !task.category) return task;
+    const normalized = { ...task };
+    delete normalized.category;
+    return normalized;
+  });
   const taskIds = new Set(tasks.map((task) => task.id));
   return {
     sortMode: TASK_SORT_MODES.has(data?.sortMode) ? data.sortMode : "manual",
     weeklyResetDay: normalizeWeekDay(data?.weeklyResetDay),
     resetTime: isClockTimeString(data?.resetTime) ? data.resetTime : DEFAULT_TASK_PLANNER_RESET_TIME,
     lastResetAt: normalizeTimestamp(data?.lastResetAt),
+    categoryOrder: normalizeTaskPlannerCategoryOrder(data?.categoryOrder, tasks),
     tasks,
-    relations: normalizeTaskPlannerRelations(data, taskIds)
+    relations: relations.filter((relation) => taskIds.has(relation.fromTaskId) && taskIds.has(relation.toTaskId))
   };
 }
 
@@ -387,7 +402,7 @@ function clampPercent(value) {
 }
 
 export function normalizeImageAnnotationData(data) {
-  const image = String(data?.image || data?.dataUrl || "");
+  const image = String(data?.image || "");
   const markers = (data?.markers || [])
     .map((marker) => ({
       id: marker?.id || uid("marker"),
@@ -528,12 +543,14 @@ export function compactModuleDataForStorage(type, value) {
           type: task.type
         };
         if (task.description) compactTask.description = task.description;
+        if (task.category) compactTask.category = task.category;
         if (task.checked) compactTask.checked = true;
         if (task.checked && task.checkedAt) compactTask.checkedAt = task.checkedAt;
         if (task.type === "weekly" && task.weeklyResetDay !== undefined) compactTask.weeklyResetDay = task.weeklyResetDay;
         return compactTask;
       });
     }
+    if (normalized.categoryOrder.length) compact.categoryOrder = normalized.categoryOrder;
     if (normalized.relations.length) {
       compact.relations = normalized.relations.map((relation) => {
         const compactRelation = {
@@ -541,7 +558,7 @@ export function compactModuleDataForStorage(type, value) {
           fromTaskId: relation.fromTaskId,
           toTaskId: relation.toTaskId
         };
-        if (relation.dependency) compactRelation.dependency = true;
+        if (relation.prerequisite) compactRelation.prerequisite = true;
         return compactRelation;
       });
     }

website/src/styles/_overlays.scss

@@ -127,7 +127,7 @@
 .image-viewer-side {
   display: grid;
   align-content: start;
-  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-rows: auto auto;
   gap: var(--space-3);
   min-width: 0;
   width: 100%;
@@ -151,6 +151,8 @@
 .image-viewer-side .annotation-marker-list {
   min-width: 0;
   max-height: 100%;
+  align-content: start;
+  grid-auto-rows: max-content;
   overflow-y: auto;
   overscroll-behavior: contain;
   padding-right: 4px;

website/src/styles/_responsive.scss

@@ -224,7 +224,7 @@
     grid-row: 1;
   }
 
-  .task-planner-description,
+  .task-planner-description-panel,
   .task-planner-task-settings {
     margin-left: 0;
   }

website/src/styles/_toolboxes.scss

@@ -1336,6 +1336,65 @@ textarea:focus {
   text-align: center;
 }
 
+.task-planner-category-section {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+  border: 1px solid rgba(246, 196, 83, 0.16);
+  border-radius: var(--radius-md);
+  background:
+    linear-gradient(135deg, rgba(246, 196, 83, 0.04), transparent 42%),
+    rgba(7, 10, 24, 0.18);
+}
+
+.task-planner-category-header {
+  padding: 0 2px;
+}
+
+.task-planner-category-header > div {
+  display: inline-flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+}
+
+.task-planner-category-header h3 {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--color-accent-gold);
+  font-size: var(--font-size-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.task-planner-category-header > span {
+  flex: 0 0 auto;
+  padding: 3px 9px;
+  border: 1px solid rgba(246, 196, 83, 0.22);
+  border-radius: var(--radius-pill);
+  background: rgba(246, 196, 83, 0.08);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-weight: 800;
+}
+
+.task-planner-category-section.is-dragging {
+  cursor: grabbing;
+  opacity: 0.58;
+  transform: scale(0.99);
+}
+
+.task-planner-category-section.is-drop-target {
+  border-color: rgba(246, 196, 83, 0.72);
+  box-shadow: inset 0 3px 0 rgba(246, 196, 83, 0.8);
+}
+
+.task-planner-category-section.is-drop-target.drop-after {
+  box-shadow: inset 0 -3px 0 rgba(246, 196, 83, 0.8);
+}
+
 .task-planner-item {
   position: relative;
   display: grid;
@@ -1350,7 +1409,7 @@ textarea:focus {
   opacity: 0.78;
 }
 
-.task-planner-item.has-missing-dependency {
+.task-planner-item.has-missing-prerequisite {
   border-color: rgba(246, 196, 83, 0.34);
   background:
     linear-gradient(135deg, rgba(246, 196, 83, 0.06), transparent 44%),
@@ -1384,6 +1443,7 @@ textarea:focus {
 }
 
 .task-planner-drag-handle,
+.task-planner-category-drag-handle,
 .task-planner-delete-button {
   display: inline-grid;
   width: 30px;
@@ -1403,6 +1463,7 @@ textarea:focus {
 }
 
 .task-planner-drag-handle .ui-icon,
+.task-planner-category-drag-handle .ui-icon,
 .task-planner-delete-button .ui-icon {
   width: 15px;
   height: 15px;
@@ -1517,11 +1578,50 @@ textarea:focus {
   }
 }
 
-.task-planner-description,
+.task-planner-description-panel,
 .task-planner-task-settings {
   margin-left: 62px;
 }
 
+.task-planner-description-panel {
+  display: grid;
+  gap: 10px;
+}
+
+.task-planner-category-field,
+.task-planner-description-field {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.task-planner-category-field span,
+.task-planner-description-field span {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.task-planner-category-field input {
+  width: 100%;
+}
+
+.task-planner-category-field.is-disabled span {
+  color: rgba(148, 163, 184, 0.72);
+}
+
+.task-planner-category-field.is-disabled input,
+.task-planner-category-field input:disabled {
+  border-color: rgba(165, 180, 252, 0.08);
+  background:
+    linear-gradient(135deg, rgba(148, 163, 184, 0.05), transparent 62%),
+    rgba(15, 23, 42, 0.42);
+  box-shadow: none;
+  color: rgba(203, 213, 225, 0.66);
+  cursor: not-allowed;
+}
+
 .task-planner-description {
   min-height: 72px;
   resize: vertical;
@@ -2232,6 +2332,7 @@ textarea:focus {
 .counter-actions button:not(.danger):hover,
 .link-item button:not(.danger):hover,
 .task-planner-drag-handle:hover:not(:disabled),
+.task-planner-category-drag-handle:hover,
 .task-planner-settings-toggle:hover,
 .task-planner-settings-toggle.active,
 .task-planner-dropdown-button:hover,