add task planner & alert improvments

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>
+  );
+}