add task planner & alert improvments

website/src/components/AppOverlays.jsx

@@ -1,10 +1,22 @@
 // Rôle : regroupe les modales, notifications et viewers rendus au-dessus de l'application.
 import React from "react";
+import { Icon } from "./Icon.jsx";
 import { ImageViewer } from "./ImageViewer.jsx";
 import { ConfirmModal, CreateToolboxModal, LinkToolboxModal, NotificationToast } from "./ToolboxModals.jsx";
 import { navigate } from "../router/hashRouter.js";
 import { uid } from "../features/toolboxes/storage/toolboxStorage.js";
 
+export function InlineNotice({ className = "", iconName = "link", message, tone = "warning" }) {
+  if (!message) return null;
+  const classes = ["inline-notice", `is-${tone}`, className].filter(Boolean).join(" ");
+  return (
+    <span className={classes} role="status">
+      <Icon name={iconName} />
+      <span>{message}</span>
+    </span>
+  );
+}
+
 export function AppOverlays({
   actions,
   confirmModal,

website/src/features/toolboxes/ToolboxPages.jsx

@@ -17,6 +17,7 @@ import {
   normalizeCountersData,
   normalizeImageAnnotationData,
   normalizeLinksData,
+  normalizeTaskPlannerData,
   normalizeTimerData,
   normalizeUrl,
   uid
@@ -146,6 +147,7 @@ function ToolboxView({ siteContent, toolbox, toolboxGame, embedded, actions, sto
     normalizeCalculatorData,
     normalizeImageAnnotationData,
     normalizeTimerData,
+    normalizeTaskPlannerData,
     normalizeUrl,
     hostnameFromUrl,
     copyText,

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

@@ -0,0 +1,623 @@
+// Rôle : fournit l'outil task planner avec tâches récurrentes, parents et pré requis.
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Icon } from "../../../components/Icon.jsx";
+import { InlineNotice } from "../../../components/AppOverlays.jsx";
+import { usePointerReorder } from "../../../hooks/usePointerReorder.js";
+
+const TASK_TYPES = ["daily", "weekly", "unique"];
+const WEEK_DAYS = [
+  { value: 1, label: "Lundi" },
+  { value: 2, label: "Mardi" },
+  { value: 3, label: "Mercredi" },
+  { value: 4, label: "Jeudi" },
+  { value: 5, label: "Vendredi" },
+  { value: 6, label: "Samedi" },
+  { value: 0, label: "Dimanche" }
+];
+
+function getTaskTypeLabel(type, textContent) {
+  if (type === "daily") return textContent.dailyType || "Quotidienne";
+  if (type === "weekly") return textContent.weeklyType || "Hebdomadaire";
+  return textContent.uniqueType || "Ponctuelle";
+}
+
+function parseResetTime(value) {
+  const [hours, minutes] = String(value || "00:00").split(":").map((part) => Number.parseInt(part, 10));
+  return {
+    hours: Number.isInteger(hours) ? Math.min(23, Math.max(0, hours)) : 0,
+    minutes: Number.isInteger(minutes) ? Math.min(59, Math.max(0, minutes)) : 0
+  };
+}
+
+function getLatestDailyReset(now, resetTime) {
+  const { hours, minutes } = parseResetTime(resetTime);
+  const reset = new Date(now);
+  reset.setHours(hours, minutes, 0, 0);
+  if (reset.getTime() > now) reset.setDate(reset.getDate() - 1);
+  return reset.getTime();
+}
+
+function getLatestWeeklyReset(now, resetTime, weekDay) {
+  const { hours, minutes } = parseResetTime(resetTime);
+  const reset = new Date(now);
+  reset.setHours(hours, minutes, 0, 0);
+  const dayDiff = (reset.getDay() - weekDay + 7) % 7;
+  reset.setDate(reset.getDate() - dayDiff);
+  if (reset.getTime() > now) reset.setDate(reset.getDate() - 7);
+  return reset.getTime();
+}
+
+function applyDueResets(data, now = Date.now()) {
+  let latestResetAt = data.lastResetAt;
+  let changed = false;
+  const tasks = data.tasks.map((task) => {
+    if (task.type === "unique") return task;
+    const resetAt = task.type === "daily"
+      ? getLatestDailyReset(now, data.resetTime)
+      : getLatestWeeklyReset(now, data.resetTime, task.weeklyResetDay ?? data.weeklyResetDay);
+    latestResetAt = Math.max(latestResetAt, resetAt);
+    if (!task.checked || resetAt <= (task.checkedAt || data.lastResetAt)) return task;
+    changed = true;
+    return { ...task, checked: false, checkedAt: 0 };
+  });
+
+  if (latestResetAt > data.lastResetAt) changed = true;
+  return changed ? { ...data, lastResetAt: latestResetAt, tasks } : data;
+}
+
+function moveTask(tasks, fromTaskId, toTaskId, placement = "before") {
+  const nextTasks = [...tasks];
+  const fromIndex = nextTasks.findIndex((task) => task.id === fromTaskId);
+  const toIndex = nextTasks.findIndex((task) => task.id === toTaskId);
+  if (fromIndex < 0 || toIndex < 0) return tasks;
+  const [moved] = nextTasks.splice(fromIndex, 1);
+  const targetIndex = nextTasks.findIndex((task) => task.id === toTaskId);
+  nextTasks.splice(placement === "after" ? targetIndex + 1 : targetIndex, 0, moved);
+  return nextTasks;
+}
+
+function sortTasks(tasks, sortMode) {
+  if (sortMode !== "type") return tasks;
+  const order = new Map(TASK_TYPES.map((type, index) => [type, index]));
+  return [...tasks].sort((a, b) => (order.get(a.type) ?? 99) - (order.get(b.type) ?? 99));
+}
+
+function getTaskTitle(tasks, taskId) {
+  return tasks.find((task) => task.id === taskId)?.title || "Tâche supprimée";
+}
+
+function getTaskParentId(taskId, relations, taskIds) {
+  return relations.find((relation) => relation.fromTaskId === taskId && taskIds.has(relation.toTaskId))?.toTaskId || "";
+}
+
+function getTaskParentMap(tasks, relations) {
+  const taskIds = new Set(tasks.map((task) => task.id));
+  const parentMap = new Map(tasks.map((task) => [task.id, getTaskParentId(task.id, relations, taskIds)]));
+  tasks.forEach((task) => {
+    const visited = new Set([task.id]);
+    let parentId = parentMap.get(task.id);
+    while (parentId) {
+      if (visited.has(parentId)) {
+        parentMap.set(task.id, "");
+        return;
+      }
+      visited.add(parentId);
+      parentId = parentMap.get(parentId);
+    }
+  });
+  return parentMap;
+}
+
+function getTasksForParent(tasks, parentMap, parentId, sortMode) {
+  return sortTasks(tasks.filter((task) => (parentMap.get(task.id) || "") === parentId), sortMode);
+}
+
+export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
+  const data = context.normalizeTaskPlannerData(context.getModuleData(toolboxId, moduleId, { tasks: [] }));
+  const textContent = context.moduleText?.taskPlanner || {};
+  const [title, setTitle] = useState("");
+  const [type, setType] = useState("daily");
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [openDescriptions, setOpenDescriptions] = useState(() => new Set());
+  const [openTaskSettings, setOpenTaskSettings] = useState(() => new Set());
+  const [dependencyNoticeTaskIds, setDependencyNoticeTaskIds] = useState(() => new Set());
+  const dependencyNoticeTimeouts = useRef(new Map());
+  const parentMap = useMemo(() => getTaskParentMap(data.tasks, data.relations), [data.tasks, data.relations]);
+  const {
+    draggingId,
+    dropTarget,
+    startDrag
+  } = usePointerReorder({
+    targetSelector: ".task-planner-item",
+    getTargetId: (target) => target.dataset.taskId,
+    canDropOn: (target, draggingTaskId) => data.sortMode === "manual" && target.dataset.parentId === (parentMap.get(draggingTaskId) || ""),
+    onMove: (fromTaskId, toTaskId, placement) => save({ ...data, tasks: moveTask(data.tasks, fromTaskId, toTaskId, placement) })
+  });
+
+  function save(nextData) {
+    context.setModuleData(toolboxId, moduleId, nextData, "taskPlanner");
+  }
+
+  useEffect(() => {
+    const intervalId = window.setInterval(() => setNowMs(Date.now()), 60000);
+    return () => window.clearInterval(intervalId);
+  }, []);
+
+  useEffect(() => () => {
+    dependencyNoticeTimeouts.current.forEach((timeoutId) => window.clearTimeout(timeoutId));
+  }, []);
+
+  useEffect(() => {
+    const resetData = applyDueResets(data, nowMs);
+    if (resetData !== data) save(resetData);
+  });
+
+  function addTask(event) {
+    event.preventDefault();
+    const cleanTitle = title.trim();
+    if (!cleanTitle) return;
+    save({
+      ...data,
+      tasks: [
+        ...data.tasks,
+        {
+          id: context.uid("task"),
+          title: cleanTitle,
+          description: "",
+          type,
+          checked: false,
+          checkedAt: 0
+        }
+      ]
+    });
+    setTitle("");
+    setType("daily");
+  }
+
+  function updateTask(taskId, updater) {
+    save({ ...data, tasks: data.tasks.map((task) => task.id === taskId ? updater(task) : task) });
+  }
+
+  function deleteTask(taskId) {
+    save({
+      ...data,
+      tasks: data.tasks.filter((task) => task.id !== taskId),
+      relations: data.relations.filter((relation) => relation.fromTaskId !== taskId && relation.toTaskId !== taskId)
+    });
+  }
+
+  function addLinkTarget(fromTaskId, toTaskId) {
+    if (!toTaskId || fromTaskId === toTaskId || data.relations.some((relation) => relation.fromTaskId === fromTaskId && relation.toTaskId === toTaskId)) return;
+    save({
+      ...data,
+      relations: [
+        ...data.relations.filter((relation) => relation.fromTaskId !== fromTaskId),
+        { id: context.uid("relation"), fromTaskId, toTaskId, dependency: false }
+      ]
+    });
+  }
+
+  function removeLinkTarget(fromTaskId, toTaskId) {
+    save({
+      ...data,
+      relations: data.relations.filter((relation) => relation.fromTaskId !== fromTaskId || relation.toTaskId !== toTaskId)
+    });
+  }
+
+  function setDependency(fromTaskId, toTaskId, dependency) {
+    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, { id: context.uid("relation"), fromTaskId, toTaskId, dependency }]
+    });
+  }
+
+  function toggleSet(setter, taskId) {
+    setter((current) => {
+      const next = new Set(current);
+      if (next.has(taskId)) next.delete(taskId);
+      else next.add(taskId);
+      return next;
+    });
+  }
+
+  function showDependencyNotice(taskId) {
+    const currentTimeoutId = dependencyNoticeTimeouts.current.get(taskId);
+    if (currentTimeoutId) window.clearTimeout(currentTimeoutId);
+    setDependencyNoticeTaskIds((current) => new Set(current).add(taskId));
+    const timeoutId = window.setTimeout(() => {
+      dependencyNoticeTimeouts.current.delete(taskId);
+      setDependencyNoticeTaskIds((current) => {
+        const next = new Set(current);
+        next.delete(taskId);
+        return next;
+      });
+    }, 2600);
+    dependencyNoticeTimeouts.current.set(taskId, timeoutId);
+  }
+
+  return (
+    <div className="task-planner-module">
+      <div className="task-planner-topbar">
+        <div className="task-planner-global-controls">
+          <button
+            className={`tool-split-scroll-toggle task-planner-sort-toggle ${data.sortMode === "type" ? "active" : ""}`}
+            type="button"
+            onClick={() => save({ ...data, sortMode: data.sortMode === "type" ? "manual" : "type" })}
+            aria-pressed={data.sortMode === "type"}
+            aria-label={textContent.sortModeLabel || "Tri automatique"}
+            title={textContent.sortModeLabel || "Tri automatique"}
+          >
+            <Icon name="sort-time" />
+            <i aria-hidden="true" />
+          </button>
+          <button
+            className={`task-planner-settings-toggle ${settingsOpen ? "active" : ""}`}
+            type="button"
+            onClick={() => setSettingsOpen((value) => !value)}
+            aria-expanded={settingsOpen}
+            aria-label={textContent.settingsTitle || "Réglages du planificateur"}
+            title={textContent.settingsTitle || "Réglages du planificateur"}
+          >
+            <Icon name="settings" />
+            <span>{textContent.settingsButtonLabel || "Paramètres des réinitialisations"}</span>
+          </button>
+        </div>
+        {editing && (
+          <form className="inline-form task-planner-add-form" onSubmit={addTask}>
+            <input name="title" placeholder={textContent.titlePlaceholder || "Nouvelle tâche"} value={title} onChange={(event) => setTitle(event.target.value)} />
+            <select value={type} onChange={(event) => setType(event.target.value)} aria-label={textContent.typeLabel || "Type"}>
+              {TASK_TYPES.map((taskType) => <option key={taskType} value={taskType}>{getTaskTypeLabel(taskType, textContent)}</option>)}
+            </select>
+            <button className="primary">{textContent.addButton || "Ajouter"}</button>
+          </form>
+        )}
+      </div>
+
+      {settingsOpen && (
+        <section className="task-planner-settings" aria-label={textContent.settingsTitle || "Réglages du planificateur"}>
+          <label>
+            <span>{textContent.globalWeeklyResetDayLabel || "Reset hebdo"}</span>
+            <select value={data.weeklyResetDay} onChange={(event) => save({ ...data, weeklyResetDay: Number(event.target.value) })}>
+              {WEEK_DAYS.map((day) => <option key={day.value} value={day.value}>{day.label}</option>)}
+            </select>
+          </label>
+          <label>
+            <span>{textContent.resetTimeLabel || "Heure de reset"}</span>
+            <input type="time" value={data.resetTime} onChange={(event) => save({ ...data, resetTime: event.target.value || "00:00" })} />
+          </label>
+        </section>
+      )}
+
+      <ul className="task-planner-list">
+        {data.tasks.length ? (
+          <TaskPlannerBranch
+            parentId=""
+            parentMap={parentMap}
+            tasks={data.tasks}
+            data={data}
+            draggingId={draggingId}
+            dropTarget={dropTarget}
+            textContent={textContent}
+            openDescriptions={openDescriptions}
+            openTaskSettings={openTaskSettings}
+            dependencyNoticeTaskIds={dependencyNoticeTaskIds}
+            onDragStart={startDrag}
+            onToggleDescription={(taskId) => toggleSet(setOpenDescriptions, taskId)}
+            onToggleSettings={(taskId) => toggleSet(setOpenTaskSettings, taskId)}
+            onDependencyNotice={showDependencyNotice}
+            onUpdateTask={updateTask}
+            onDeleteTask={deleteTask}
+            onAddLinkTarget={addLinkTarget}
+            onRemoveLinkTarget={removeLinkTarget}
+            onSetDependency={setDependency}
+          />
+        ) : (
+          <li className="task-planner-empty">{textContent.emptyTasks || "Aucune tâche planifiée."}</li>
+        )}
+      </ul>
+    </div>
+  );
+}
+
+function TaskPlannerBranch({
+  parentId,
+  parentMap,
+  tasks,
+  data,
+  draggingId,
+  dropTarget,
+  textContent,
+  openDescriptions,
+  openTaskSettings,
+  dependencyNoticeTaskIds,
+  onDragStart,
+  onToggleDescription,
+  onToggleSettings,
+  onDependencyNotice,
+  onUpdateTask,
+  onDeleteTask,
+  onAddLinkTarget,
+  onRemoveLinkTarget,
+  onSetDependency,
+  visited = new Set()
+}) {
+  const children = getTasksForParent(tasks, parentMap, parentId, data.sortMode).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) => {
+    const nestedChildren = getTasksForParent(tasks, parentMap, task.id, data.sortMode).filter((child) => !nextVisited.has(child.id));
+    return (
+      <TaskPlannerItem
+        key={task.id}
+        task={task}
+        tasks={tasks}
+        data={data}
+        parentMap={parentMap}
+        parentId={parentId}
+        draggingId={draggingId}
+        dropTarget={dropTarget}
+        textContent={textContent}
+        descriptionOpen={openDescriptions.has(task.id)}
+        settingsOpen={openTaskSettings.has(task.id)}
+        dependencyNoticeVisible={dependencyNoticeTaskIds.has(task.id)}
+        onDragStart={onDragStart}
+        onToggleDescription={() => onToggleDescription(task.id)}
+        onToggleSettings={() => onToggleSettings(task.id)}
+        onDependencyNotice={onDependencyNotice}
+        onUpdateTask={onUpdateTask}
+        onDeleteTask={onDeleteTask}
+        onAddLinkTarget={onAddLinkTarget}
+        onRemoveLinkTarget={onRemoveLinkTarget}
+        onSetDependency={onSetDependency}
+      >
+        {nestedChildren.length ? (
+          <TaskPlannerBranch
+            parentId={task.id}
+            parentMap={parentMap}
+            tasks={tasks}
+            data={data}
+            draggingId={draggingId}
+            dropTarget={dropTarget}
+            textContent={textContent}
+            openDescriptions={openDescriptions}
+            openTaskSettings={openTaskSettings}
+            dependencyNoticeTaskIds={dependencyNoticeTaskIds}
+            onDragStart={onDragStart}
+            onToggleDescription={onToggleDescription}
+            onToggleSettings={onToggleSettings}
+            onDependencyNotice={onDependencyNotice}
+            onUpdateTask={onUpdateTask}
+            onDeleteTask={onDeleteTask}
+            onAddLinkTarget={onAddLinkTarget}
+            onRemoveLinkTarget={onRemoveLinkTarget}
+            onSetDependency={onSetDependency}
+            visited={nextVisited}
+          />
+        ) : null}
+      </TaskPlannerItem>
+    );
+  });
+}
+
+function TaskPlannerItem({
+  task,
+  tasks,
+  data,
+  parentMap,
+  parentId,
+  draggingId,
+  dropTarget,
+  textContent,
+  descriptionOpen,
+  settingsOpen,
+  dependencyNoticeVisible,
+  onDragStart,
+  onToggleDescription,
+  onToggleSettings,
+  onDependencyNotice,
+  onUpdateTask,
+  onDeleteTask,
+  onAddLinkTarget,
+  onRemoveLinkTarget,
+  onSetDependency,
+  children
+}) {
+  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 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 className = [
+    "task-planner-item",
+    task.checked ? "is-complete" : "",
+    missingDependencies.length ? "has-missing-dependency" : "",
+    draggingId === task.id ? "is-dragging" : "",
+    dropTarget.id === task.id ? "is-drop-target" : "",
+    dropTarget.id === task.id && dropTarget.placement === "after" ? "drop-after" : ""
+  ].filter(Boolean).join(" ");
+
+  function updateChecked(event) {
+    const checked = event.target.checked;
+    if (checked && missingDependencies.length > 0) onDependencyNotice(task.id);
+    onUpdateTask(task.id, (current) => ({
+      ...current,
+      checked,
+      checkedAt: checked ? Date.now() : 0
+    }));
+  }
+
+  return (
+    <li className={className} data-task-id={task.id} data-parent-id={parentId}>
+      <div className="task-planner-line">
+        <button
+          className="task-planner-drag-handle"
+          type="button"
+          onPointerDown={(event) => onDragStart(event, task.id)}
+          disabled={data.sortMode !== "manual"}
+          aria-label={`${textContent.reorderTitle || "Déplacer"} ${task.title}`}
+          title={data.sortMode === "manual" ? textContent.reorderTitle || "Déplacer" : textContent.reorderDisabledTitle || "Tri manuel désactivé"}
+        >
+          <Icon name="drag" />
+        </button>
+        <input
+          type="checkbox"
+          checked={task.checked}
+          onChange={updateChecked}
+          aria-label={`${task.checked ? textContent.uncheckTitle || "Marquer non effectué" : textContent.checkTitle || "Marquer effectué"} ${task.title}`}
+        />
+        <input
+          className="tool-split-entry-label task-planner-title-input"
+          value={task.title}
+          onChange={(event) => onUpdateTask(task.id, (current) => ({ ...current, title: event.target.value }))}
+          onBlur={(event) => onUpdateTask(task.id, (current) => ({ ...current, title: event.target.value.trim() || current.title }))}
+          aria-label={textContent.titleLabel || "Titre"}
+        />
+        <select
+          className="task-planner-type-select"
+          value={task.type}
+          onChange={(event) => onUpdateTask(task.id, (current) => {
+            const nextType = event.target.value;
+            const nextTask = { ...current, type: nextType };
+            if (nextType !== "weekly") delete nextTask.weeklyResetDay;
+            return nextTask;
+          })}
+          aria-label={textContent.typeLabel || "Type"}
+        >
+          {TASK_TYPES.map((taskType) => <option key={taskType} value={taskType}>{getTaskTypeLabel(taskType, textContent)}</option>)}
+        </select>
+        {missingDependencies.length > 0 && (
+          <span className="task-planner-warning" title={textContent.missingDependencyTitle || "Pré requis non effectué"}>
+            {textContent.missingDependencyBadge || "Pré requis"}
+          </span>
+        )}
+        <div className="task-planner-actions">
+          <button
+            className={`task-planner-dropdown-button ${descriptionOpen ? "active" : ""}`}
+            type="button"
+            onClick={onToggleDescription}
+            aria-expanded={descriptionOpen}
+            aria-label={`${descriptionOpen ? textContent.hideDescriptionTitle || "Masquer la description" : textContent.showDescriptionTitle || "Afficher la description"} ${task.title}`}
+            title={descriptionOpen ? textContent.hideDescriptionTitle || "Masquer la description" : textContent.showDescriptionTitle || "Afficher la description"}
+          >
+            <Icon name={descriptionOpen ? "chevron-up" : "chevron-down"} />
+          </button>
+          <button
+            className={`task-planner-settings-button ${settingsOpen ? "active" : ""}`}
+            type="button"
+            onClick={onToggleSettings}
+            aria-expanded={settingsOpen}
+            aria-label={`${textContent.taskSettingsTitle || "Réglages de la tâche"} ${task.title}`}
+            title={textContent.taskSettingsTitle || "Réglages de la tâche"}
+          >
+            <Icon name="settings" />
+          </button>
+          <button className="task-planner-delete-button danger" type="button" onClick={() => onDeleteTask(task.id)} aria-label={`${textContent.deleteTitle || "Supprimer"} ${task.title}`} title={textContent.deleteTitle || "Supprimer"}>
+            <Icon name="trash" />
+          </button>
+        </div>
+      </div>
+      <InlineNotice className="task-planner-notice" message={noticeMessage} />
+      {descriptionOpen && (
+        <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}`}
+        />
+      )}
+      {settingsOpen && (
+        <div className="task-planner-task-settings">
+        {task.type === "weekly" && (
+          <label className="task-planner-weekly-override">
+            <span>{textContent.taskWeeklyResetDayLabel || "Jour hebdo"}</span>
+            <select
+              value={task.weeklyResetDay ?? ""}
+              onChange={(event) => onUpdateTask(task.id, (current) => {
+                const nextTask = { ...current };
+                if (event.target.value === "") {
+                  delete nextTask.weeklyResetDay;
+                } else {
+                  nextTask.weeklyResetDay = Number(event.target.value);
+                }
+                return nextTask;
+              })}
+            >
+              <option value="">{textContent.inheritWeeklyResetDay || "Global"}</option>
+              {WEEK_DAYS.map((day) => <option key={day.value} value={day.value}>{day.label}</option>)}
+            </select>
+          </label>
+        )}
+        <LinksEditor
+          label={textContent.linksLabel || "Parent"}
+          relations={relations}
+          task={task}
+          tasks={tasks}
+          parentMap={parentMap}
+          relationTargets={relationTargets}
+          emptyLabel={textContent.emptyLinks || "Aucun parent"}
+          addLabel={textContent.addLinkLabel || "Définir un parent"}
+          removeLabel={textContent.removeRelationTitle || "Retirer"}
+          dependencyLabel={textContent.dependencyCheckboxLabel || "Pré requis"}
+          onAddLinkTarget={onAddLinkTarget}
+          onRemoveLinkTarget={onRemoveLinkTarget}
+          onSetDependency={onSetDependency}
+        />
+        </div>
+      )}
+      {children && <ul className="task-planner-list task-planner-child-list">{children}</ul>}
+    </li>
+  );
+}
+
+function LinksEditor({ label, relations, task, tasks, parentMap, relationTargets, emptyLabel, addLabel, removeLabel, dependencyLabel, onAddLinkTarget, onRemoveLinkTarget, onSetDependency }) {
+  const descendantIds = new Set();
+  function collectDescendants(taskId) {
+    tasks.filter((item) => parentMap.get(item.id) === taskId).forEach((child) => {
+      descendantIds.add(child.id);
+      collectDescendants(child.id);
+    });
+  }
+  collectDescendants(task.id);
+  const availableTargets = relationTargets.filter((target) => !descendantIds.has(target.id));
+
+  return (
+    <div className="task-planner-relations">
+      <span>{label}</span>
+      <div>
+        {relations.length ? relations.map((relation) => (
+          <div className="task-planner-relation-chip" key={relation.id}>
+            <span>{getTaskTitle(tasks, relation.toTaskId)}</span>
+            <label title={dependencyLabel}>
+              <input
+                type="checkbox"
+                checked={relation.dependency}
+                onChange={(event) => onSetDependency(task.id, relation.toTaskId, event.target.checked)}
+                aria-label={`${dependencyLabel} ${getTaskTitle(tasks, relation.toTaskId)}`}
+              />
+              <span>{dependencyLabel}</span>
+            </label>
+            <button type="button" onClick={() => onRemoveLinkTarget(task.id, relation.toTaskId)} title={removeLabel} aria-label={`${removeLabel} ${getTaskTitle(tasks, relation.toTaskId)}`}>
+              <Icon name="close" />
+            </button>
+          </div>
+        )) : <em>{emptyLabel}</em>}
+      </div>
+      <select
+        value=""
+        onChange={(event) => {
+          onAddLinkTarget(task.id, event.target.value);
+          event.target.value = "";
+        }}
+        aria-label={addLabel}
+      >
+        <option value="">{addLabel}</option>
+        {availableTargets.map((target) => <option key={target.id} value={target.id}>{target.title}</option>)}
+      </select>
+    </div>
+  );
+}

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

@@ -11,6 +11,7 @@ import { ImageAnnotationModule } from "./ImageAnnotationModule.jsx";
 import { LinksModule } from "./LinksModule.jsx";
 import { NotepadModule } from "./NotepadModule.jsx";
 import { ImagesModule } from "./ImagesModule.jsx";
+import { TaskPlannerModule } from "./TaskPlannerModule.jsx";
 import { TimerModule } from "./TimerModule.jsx";
 
 const MODULE_COMPONENTS = {
@@ -21,6 +22,7 @@ const MODULE_COMPONENTS = {
   counters: { label: "Compteurs", icon: "abacus", Component: CountersModule, editable: true, scrollable: true },
   calculator: { label: "Calculateur", icon: "calculator", Component: CalculatorModule, editable: false },
   timer: { label: "Timer", icon: "clock", Component: TimerModule, editable: false },
+  taskPlanner: { label: "Planificateur de tâches", icon: "tasklist", Component: TaskPlannerModule, editable: true, scrollable: true },
   imageAnnotation: { label: "Annotation d'images", icon: "map", Component: ImageAnnotationModule, editable: true }
 };
 

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

@@ -1,9 +1,13 @@
 // Rôle : normalise, compacte et sérialise les données toolbox persistées.
-const ID_PREFIXES = { tbx: "t", mod: "m", item: "i", section: "g", image: "s", link: "l", counter: "c", calc: "r", marker: "k", timer: "z" };
+const ID_PREFIXES = { tbx: "t", mod: "m", item: "i", section: "g", image: "s", link: "l", counter: "c", calc: "r", marker: "k", timer: "z", task: "a", relation: "e" };
 const ID_ALPHABET = "abcdefghijklmnopqrstuvwxyz0123456789";
 const TIMER_TABS = new Set(["stopwatch", "countdown"]);
 const COUNTDOWN_TYPES = new Set(["duration", "daily_time", "time_pattern", "interval"]);
 const TIMER_ALERT_MODES = new Set(["off", "visible", "site"]);
+const TASK_TYPES = new Set(["unique", "daily", "weekly"]);
+const TASK_SORT_MODES = new Set(["manual", "type"]);
+const DEFAULT_TASK_PLANNER_WEEKLY_RESET_DAY = 1;
+const DEFAULT_TASK_PLANNER_RESET_TIME = "00:00";
 const TOOLBOX_ICON_BASE = "/static/img/toolbox-icons/";
 const TOOLBOX_ICON_FILES = [
   "toolbox.png",
@@ -34,6 +38,7 @@ const DEFAULT_MODULE_TITLES = {
   counters: "Compteurs",
   calculator: "Calculateur",
   timer: "Timer",
+  taskPlanner: "Planificateur de tâches",
   imageAnnotation: "Annotation d'images"
 };
 
@@ -224,6 +229,22 @@ function isTimeString(value, allowWildcard = false) {
   });
 }
 
+function isClockTimeString(value) {
+  if (!/^\d{2}:\d{2}$/.test(String(value || ""))) return false;
+  const [hours, minutes] = String(value).split(":").map(Number);
+  return Number.isInteger(hours) && Number.isInteger(minutes) && hours >= 0 && hours <= 23 && minutes >= 0 && minutes <= 59;
+}
+
+function normalizeWeekDay(value, fallback = DEFAULT_TASK_PLANNER_WEEKLY_RESET_DAY) {
+  const parsed = Number.parseInt(value, 10);
+  return Number.isInteger(parsed) && parsed >= 0 && parsed <= 6 ? parsed : fallback;
+}
+
+function normalizeTimestamp(value) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : 0;
+}
+
 export function labelFromFileName(name) {
   if (!name || name === "image.png") return "";
   return name.replace(/\.[^.]+$/, "").trim();
@@ -300,6 +321,65 @@ 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 normalized = {
+    id: task?.id || uid("task"),
+    title,
+    description: String(task?.description || "").trim(),
+    type,
+    checked: task?.checked === true,
+    checkedAt: normalizeTimestamp(task?.checkedAt)
+  };
+  if (type === "weekly" && task?.weeklyResetDay !== undefined) normalized.weeklyResetDay = normalizeWeekDay(task.weeklyResetDay);
+  if (!normalized.checked) normalized.checkedAt = 0;
+  return normalized;
+}
+
+function normalizeTaskPlannerRelations(data, taskIds) {
+  const seen = new Set();
+  const seenChildren = new Set();
+  const legacyDependencies = new Set((Array.isArray(data?.dependencies) ? data.dependencies : [])
+    .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 || "");
+      if (!taskIds.has(fromTaskId) || !taskIds.has(toTaskId) || fromTaskId === toTaskId) return null;
+      const key = `${fromTaskId}:${toTaskId}`;
+      if (seen.has(key) || seenChildren.has(fromTaskId)) return null;
+      seen.add(key);
+      seenChildren.add(fromTaskId);
+      return {
+        id: relation?.id || uid("relation"),
+        fromTaskId,
+        toTaskId,
+        dependency: relation?.dependency === true || legacyDependencies.has(key)
+      };
+    })
+    .filter(Boolean);
+}
+
+export function normalizeTaskPlannerData(data) {
+  const tasks = (Array.isArray(data?.tasks) ? data.tasks : []).map(normalizeTaskPlannerTask).filter(Boolean);
+  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),
+    tasks,
+    relations: normalizeTaskPlannerRelations(data, taskIds)
+  };
+}
+
 function clampPercent(value) {
   const parsed = Number(value);
   if (!Number.isFinite(parsed)) return 0;
@@ -433,6 +513,40 @@ export function compactModuleDataForStorage(type, value) {
     }
     return Object.keys(compact).length ? compact : null;
   }
+  if (type === "taskPlanner") {
+    const normalized = normalizeTaskPlannerData(value);
+    const compact = {};
+    if (normalized.sortMode !== "manual") compact.sortMode = normalized.sortMode;
+    if (normalized.weeklyResetDay !== DEFAULT_TASK_PLANNER_WEEKLY_RESET_DAY) compact.weeklyResetDay = normalized.weeklyResetDay;
+    if (normalized.resetTime !== DEFAULT_TASK_PLANNER_RESET_TIME) compact.resetTime = normalized.resetTime;
+    if (normalized.lastResetAt) compact.lastResetAt = normalized.lastResetAt;
+    if (normalized.tasks.length) {
+      compact.tasks = normalized.tasks.map((task) => {
+        const compactTask = {
+          id: task.id,
+          title: task.title,
+          type: task.type
+        };
+        if (task.description) compactTask.description = task.description;
+        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.relations.length) {
+      compact.relations = normalized.relations.map((relation) => {
+        const compactRelation = {
+          id: relation.id,
+          fromTaskId: relation.fromTaskId,
+          toTaskId: relation.toTaskId
+        };
+        if (relation.dependency) compactRelation.dependency = true;
+        return compactRelation;
+      });
+    }
+    return Object.keys(compact).length ? compact : null;
+  }
   return value;
 }
 
@@ -511,6 +625,24 @@ function remapModuleDataForExport(type, data, nextId) {
     return remapped;
   }
 
+  if (type === "taskPlanner") {
+    const taskIdMap = new Map();
+    compact.tasks?.forEach((task) => taskIdMap.set(task.id, nextId("task")));
+    const remapped = { ...compact };
+    if (compact.tasks) remapped.tasks = compact.tasks.map((task) => ({ ...task, id: taskIdMap.get(task.id) }));
+    if (compact.relations) {
+      remapped.relations = compact.relations
+        .map((relation) => ({
+          ...relation,
+          id: nextId("relation"),
+          fromTaskId: taskIdMap.get(relation.fromTaskId),
+          toTaskId: taskIdMap.get(relation.toTaskId)
+        }))
+        .filter((relation) => relation.fromTaskId && relation.toTaskId);
+    }
+    return remapped;
+  }
+
   return compact;
 }
 

website/src/styles/_icons.scss

@@ -52,6 +52,16 @@
   -webkit-mask-image: url("/static/icons/link.svg");
 }
 
+.ui-icon-settings {
+  mask-image: url("/static/icons/settings.svg");
+  -webkit-mask-image: url("/static/icons/settings.svg");
+}
+
+.ui-icon-tasklist {
+  mask-image: url("/static/icons/tasklist.svg");
+  -webkit-mask-image: url("/static/icons/tasklist.svg");
+}
+
 .ui-icon-edit {
   mask-image: url("/static/icons/edit.svg");
   -webkit-mask-image: url("/static/icons/edit.svg");

website/src/styles/_responsive.scss

@@ -205,6 +205,30 @@
     grid-template-columns: 1fr;
   }
 
+  .task-planner-settings,
+  .task-planner-task-settings {
+    grid-template-columns: 1fr;
+  }
+
+  .task-planner-line {
+    grid-template-columns: 30px 24px minmax(0, 1fr) auto;
+  }
+
+  .task-planner-type-select,
+  .task-planner-warning {
+    grid-column: 3 / -1;
+  }
+
+  .task-planner-actions {
+    grid-column: 4;
+    grid-row: 1;
+  }
+
+  .task-planner-description,
+  .task-planner-task-settings {
+    margin-left: 0;
+  }
+
   .calculator-form {
     grid-row: auto;
   }

website/src/styles/_toolboxes.scss

@@ -686,6 +686,11 @@
   -webkit-mask-image: url("/static/icons/checklist.svg");
 }
 
+.module-icon-tasklist {
+  mask-image: url("/static/icons/tasklist.svg");
+  -webkit-mask-image: url("/static/icons/tasklist.svg");
+}
+
 .module-icon-picture {
   mask-image: url("/static/icons/picture.svg");
   -webkit-mask-image: url("/static/icons/picture.svg");
@@ -1164,10 +1169,455 @@ textarea:focus {
 
 .module-add-panel + .links-list,
 .module-add-panel + .checklist,
+.module-add-panel + .task-planner-list,
 .module-add-panel + .counters-grid {
   margin-top: 0;
 }
 
+.task-planner-module {
+  display: grid;
+  gap: var(--space-4);
+  padding: var(--space-4);
+}
+
+.task-planner-topbar {
+  display: grid;
+  gap: 10px;
+  align-items: stretch;
+}
+
+.task-planner-topbar .inline-form {
+  padding: 0;
+}
+
+.task-planner-global-controls {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.task-planner-settings-toggle,
+.task-planner-dropdown-button,
+.task-planner-settings-button {
+  display: inline-grid;
+  width: 34px;
+  min-width: 34px;
+  min-height: 34px;
+  place-items: center;
+  padding: 0;
+  border: 1px solid rgba(165, 180, 252, 0.1);
+  border-radius: var(--radius-md);
+  background: rgba(21, 26, 48, 0.76);
+  color: var(--color-text-secondary);
+}
+
+.task-planner-settings-toggle {
+  grid-template-columns: 16px minmax(0, auto);
+  width: auto;
+  max-width: 100%;
+  padding: 0 12px;
+  gap: 8px;
+}
+
+.task-planner-settings-toggle span {
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  font-weight: 900;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.task-planner-settings-toggle .ui-icon,
+.task-planner-dropdown-button .ui-icon,
+.task-planner-settings-button .ui-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.task-planner-settings {
+  display: grid;
+  grid-template-columns: minmax(130px, 1fr) minmax(110px, 0.72fr);
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid rgba(165, 180, 252, 0.12);
+  border-radius: var(--radius-md);
+  background:
+    linear-gradient(135deg, rgba(139, 92, 246, 0.06), transparent 58%),
+    rgba(7, 10, 24, 0.34);
+}
+
+.task-planner-settings label,
+.task-planner-weekly-override {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.task-planner-settings span,
+.task-planner-weekly-override span,
+.task-planner-relations > span {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.task-planner-settings select,
+.task-planner-settings input,
+.task-planner-add-form select,
+.task-planner-type-select,
+.task-planner-weekly-override select,
+.task-planner-relations select {
+  width: 100%;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background-color: rgba(15, 23, 42, 0.64);
+  color: var(--color-text-primary);
+}
+
+.task-planner-settings select option,
+.task-planner-add-form select option,
+.task-planner-type-select option,
+.task-planner-weekly-override select option,
+.task-planner-relations select option {
+  background: #11182f;
+  color: var(--color-text-primary);
+}
+
+.task-planner-add-form {
+  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.36fr) auto;
+}
+
+.task-planner-list {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.task-planner-child-list {
+  position: relative;
+  gap: 8px;
+  margin-top: 8px;
+  padding-left: 22px;
+}
+
+.task-planner-child-list::before {
+  content: "";
+  position: absolute;
+  top: -4px;
+  bottom: 15px;
+  left: 7px;
+  width: 1px;
+  background: linear-gradient(180deg, rgba(246, 196, 83, 0.46), rgba(139, 92, 246, 0.18));
+}
+
+.task-planner-child-list > .task-planner-item {
+  position: relative;
+}
+
+.task-planner-child-list > .task-planner-item::before {
+  content: "";
+  position: absolute;
+  top: 25px;
+  left: -15px;
+  width: 11px;
+  height: 1px;
+  background: rgba(246, 196, 83, 0.46);
+}
+
+.task-planner-empty {
+  padding: var(--space-4);
+  border: 1px dashed rgba(165, 180, 252, 0.18);
+  border-radius: var(--radius-md);
+  color: var(--color-text-muted);
+  text-align: center;
+}
+
+.task-planner-item {
+  position: relative;
+  display: grid;
+  gap: 10px;
+  padding: 10px;
+  border: 1px solid rgba(165, 180, 252, 0.12);
+  border-radius: var(--radius-md);
+  background: rgba(5, 7, 17, 0.36);
+}
+
+.task-planner-item.is-complete > .task-planner-line {
+  opacity: 0.78;
+}
+
+.task-planner-item.has-missing-dependency {
+  border-color: rgba(246, 196, 83, 0.34);
+  background:
+    linear-gradient(135deg, rgba(246, 196, 83, 0.06), transparent 44%),
+    rgba(5, 7, 17, 0.36);
+}
+
+.task-planner-item.is-dragging {
+  cursor: grabbing;
+  opacity: 0.58;
+  transform: scale(0.99);
+}
+
+.task-planner-item.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-item.is-drop-target.drop-after {
+  box-shadow: inset 0 -3px 0 rgba(246, 196, 83, 0.8);
+}
+
+.task-planner-line {
+  display: grid;
+  grid-template-columns: 30px 24px minmax(0, 1fr) 134px auto auto;
+  gap: 8px;
+  align-items: center;
+}
+
+.task-planner-line > input[type="checkbox"] {
+  justify-self: center;
+}
+
+.task-planner-drag-handle,
+.task-planner-delete-button {
+  display: inline-grid;
+  width: 30px;
+  min-width: 30px;
+  min-height: 30px;
+  place-items: center;
+  padding: 0;
+  border: 1px solid rgba(165, 180, 252, 0.1);
+  border-radius: var(--radius-md);
+  background: rgba(21, 26, 48, 0.76);
+  color: var(--color-text-secondary);
+}
+
+.task-planner-drag-handle:disabled {
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+
+.task-planner-drag-handle .ui-icon,
+.task-planner-delete-button .ui-icon {
+  width: 15px;
+  height: 15px;
+}
+
+.task-planner-actions {
+  display: inline-flex;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.task-planner-title-input {
+  font-weight: 800;
+}
+
+.task-planner-item.is-complete > .task-planner-line .task-planner-title-input {
+  color: var(--color-text-muted);
+  text-decoration: line-through;
+}
+
+.task-planner-type-select {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  min-height: 36px;
+  overflow: hidden;
+  padding: 0 30px 0 10px;
+  border-color: rgba(165, 180, 252, 0.09);
+  text-overflow: ellipsis;
+  background-image:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23c4b5fd' viewBox='-6.5 0 32 32'%3E%3Cpath d='M18.813 11.406l-7.906 9.906c-.75.906-1.906.906-2.625 0L.376 11.406c-.75-.938-.375-1.656.781-1.656h16.875c1.188 0 1.531.719.781 1.656z'/%3E%3C/svg%3E"),
+    linear-gradient(135deg, rgba(139, 92, 246, 0.04), rgba(31, 41, 78, 0.08)),
+    linear-gradient(rgba(21, 26, 48, 0.38), rgba(21, 26, 48, 0.38));
+  background-position:
+    calc(100% - 10px) 50%,
+    0 0,
+    0 0;
+  background-size:
+    11px 11px,
+    auto,
+    auto;
+  background-repeat: no-repeat;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-weight: 900;
+}
+
+.task-planner-type-select:hover,
+.task-planner-type-select:focus {
+  border-color: rgba(196, 181, 253, 0.22);
+  background-image:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f6c453' viewBox='-6.5 0 32 32'%3E%3Cpath d='M18.813 11.406l-7.906 9.906c-.75.906-1.906.906-2.625 0L.376 11.406c-.75-.938-.375-1.656.781-1.656h16.875c1.188 0 1.531.719.781 1.656z'/%3E%3C/svg%3E"),
+    linear-gradient(135deg, rgba(246, 196, 83, 0.06), rgba(139, 92, 246, 0.08)),
+    linear-gradient(rgba(21, 26, 48, 0.58), rgba(21, 26, 48, 0.58));
+  color: var(--color-text-primary);
+}
+
+.task-planner-warning {
+  padding: 4px 8px;
+  border: 1px solid rgba(246, 196, 83, 0.28);
+  border-radius: var(--radius-pill);
+  background: rgba(246, 196, 83, 0.08);
+  color: var(--color-accent-gold);
+  font-size: var(--font-size-xs);
+  font-weight: 900;
+  white-space: nowrap;
+}
+
+.inline-notice {
+  display: inline-flex;
+  width: fit-content;
+  max-width: 100%;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 9px;
+  border: 1px solid rgba(246, 196, 83, 0.28);
+  border-radius: var(--radius-md);
+  background:
+    linear-gradient(135deg, rgba(246, 196, 83, 0.1), rgba(139, 92, 246, 0.08)),
+    rgba(9, 12, 28, 0.9);
+  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.22);
+  color: var(--color-accent-gold);
+  font-size: var(--font-size-xs);
+  font-weight: 900;
+  line-height: 1.2;
+  animation: inline-notice-in 160ms ease;
+}
+
+.inline-notice .ui-icon {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+}
+
+.task-planner-notice {
+  position: absolute;
+  top: 48px;
+  left: 72px;
+  z-index: 2;
+  pointer-events: none;
+}
+
+@keyframes inline-notice-in {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.task-planner-description,
+.task-planner-task-settings {
+  margin-left: 62px;
+}
+
+.task-planner-description {
+  min-height: 72px;
+  resize: vertical;
+}
+
+.task-planner-task-settings {
+  display: grid;
+  grid-template-columns: minmax(130px, 0.32fr) minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  padding: 10px;
+  border: 1px solid rgba(165, 180, 252, 0.1);
+  border-radius: var(--radius-md);
+  background: rgba(7, 10, 24, 0.24);
+}
+
+.task-planner-relations {
+  display: grid;
+  grid-column: span 1;
+  gap: 6px;
+  min-width: 0;
+}
+
+.task-planner-relations > div {
+  display: grid;
+  gap: 5px;
+  min-height: 28px;
+}
+
+.task-planner-relations em {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
+  font-style: normal;
+}
+
+.task-planner-relation-chip {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto 28px;
+  gap: 8px;
+  align-items: center;
+  padding: 4px 5px 4px 9px;
+  border: 1px solid rgba(165, 180, 252, 0.12);
+  border-radius: var(--radius-md);
+  background: rgba(21, 26, 48, 0.46);
+}
+
+.task-planner-relation-chip > span {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.task-planner-relation-chip label {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
+  font-weight: 800;
+}
+
+.task-planner-relation-chip label input {
+  min-height: 0;
+}
+
+.task-planner-relation-chip button {
+  display: inline-flex;
+  width: 26px;
+  min-width: 26px;
+  min-height: 26px;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding: 0;
+  border: 1px solid rgba(165, 180, 252, 0.12);
+  border-radius: var(--radius-md);
+  background: rgba(21, 26, 48, 0.58);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-weight: 800;
+}
+
+.task-planner-relation-chip button .ui-icon {
+  width: 12px;
+  height: 12px;
+}
+
+.task-planner-relations select {
+  min-height: 34px;
+  padding-inline: 10px;
+}
+
 .counters-add-form {
   grid-template-columns: minmax(0, 1fr) auto;
 }
@@ -1336,6 +1786,52 @@ textarea:focus {
   color: var(--color-text-primary);
 }
 
+.timer-countdown-form select,
+.task-planner-settings select,
+.task-planner-add-form select,
+.task-planner-type-select,
+.task-planner-weekly-override select,
+.task-planner-relations select {
+  appearance: none;
+  -webkit-appearance: none;
+  overflow: hidden;
+  padding-right: 34px;
+  text-overflow: ellipsis;
+  background-image:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23c4b5fd' viewBox='-6.5 0 32 32'%3E%3Cpath d='M18.813 11.406l-7.906 9.906c-.75.906-1.906.906-2.625 0L.376 11.406c-.75-.938-.375-1.656.781-1.656h16.875c1.188 0 1.531.719.781 1.656z'/%3E%3C/svg%3E"),
+    linear-gradient(135deg, rgba(139, 92, 246, 0.04), rgba(31, 41, 78, 0.08)),
+    linear-gradient(rgba(21, 26, 48, 0.38), rgba(21, 26, 48, 0.38));
+  background-position:
+    calc(100% - 10px) 50%,
+    0 0,
+    0 0;
+  background-size:
+    11px 11px,
+    auto,
+    auto;
+  background-repeat: no-repeat;
+}
+
+.timer-countdown-form select:hover,
+.timer-countdown-form select:focus,
+.task-planner-settings select:hover,
+.task-planner-settings select:focus,
+.task-planner-add-form select:hover,
+.task-planner-add-form select:focus,
+.task-planner-type-select:hover,
+.task-planner-type-select:focus,
+.task-planner-weekly-override select:hover,
+.task-planner-weekly-override select:focus,
+.task-planner-relations select:hover,
+.task-planner-relations select:focus {
+  border-color: rgba(196, 181, 253, 0.22);
+  background-image:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f6c453' viewBox='-6.5 0 32 32'%3E%3Cpath d='M18.813 11.406l-7.906 9.906c-.75.906-1.906.906-2.625 0L.376 11.406c-.75-.938-.375-1.656.781-1.656h16.875c1.188 0 1.531.719.781 1.656z'/%3E%3C/svg%3E"),
+    linear-gradient(135deg, rgba(246, 196, 83, 0.06), rgba(139, 92, 246, 0.08)),
+    linear-gradient(rgba(21, 26, 48, 0.58), rgba(21, 26, 48, 0.58));
+  color: var(--color-text-primary);
+}
+
 .time-parts-input {
   display: grid;
   grid-template-columns: minmax(34px, 1fr) 4px minmax(34px, 1fr) 4px minmax(34px, 1fr);
@@ -1735,6 +2231,14 @@ textarea:focus {
 .tool-split-entry > button:not(.tool-split-entry-summary, .tool-split-entry-value, .danger):hover,
 .counter-actions button:not(.danger):hover,
 .link-item button:not(.danger):hover,
+.task-planner-drag-handle:hover:not(:disabled),
+.task-planner-settings-toggle:hover,
+.task-planner-settings-toggle.active,
+.task-planner-dropdown-button:hover,
+.task-planner-dropdown-button.active,
+.task-planner-settings-button:hover,
+.task-planner-settings-button.active,
+.task-planner-relation-chip button:hover,
 .module-scroll-button:hover,
 .module-scroll-button.active,
 .tool-split-scroll-toggle:hover,
@@ -1820,7 +2324,8 @@ textarea:focus {
 .tool-split-action-button.danger,
 .tool-split-entry > button.danger,
 .counter-actions button.danger,
-.link-item button.danger {
+.link-item button.danger,
+.task-planner-delete-button.danger {
   border-color: rgba(251, 113, 133, 0.2);
   background: rgba(21, 26, 48, 0.88);
   color: var(--color-danger);
@@ -1829,7 +2334,8 @@ textarea:focus {
 .tool-split-action-button.danger:hover:not(:disabled),
 .tool-split-entry > button.danger:hover,
 .counter-actions button.danger:hover,
-.link-item button.danger:hover {
+.link-item button.danger:hover,
+.task-planner-delete-button.danger:hover {
   border-color: rgba(251, 113, 133, 0.56);
   background:
     linear-gradient(135deg, rgba(80, 25, 42, 0.72), rgba(48, 18, 34, 0.82)) padding-box,
@@ -1843,7 +2349,8 @@ textarea:focus {
 .tool-split-action-button.danger:hover .ui-icon,
 .tool-split-entry > button.danger:hover .ui-icon,
 .counter-actions button.danger:hover .ui-icon,
-.link-item button.danger:hover .ui-icon {
+.link-item button.danger:hover .ui-icon,
+.task-planner-delete-button.danger:hover .ui-icon {
   background-color: #fff;
   filter: drop-shadow(0 0 6px rgba(251, 113, 133, 0.26));
 }