From 3772db12e20632cb1f2b5e72dbf72d7051b709d2 Mon Sep 17 00:00:00 2001
From: Shinuwa <git@shinuwa.fr>
Date: Mon, 3 Aug 2026 23:11:16 +0200
Subject: [PATCH] Improve hidden completed parent display

---
 .../toolboxes/modules/TaskPlannerModule.jsx   | 16 +++++-
 website/src/styles/_toolboxes.scss            | 49 +++++++++++++++++--
 2 files changed, 61 insertions(+), 4 deletions(-)

diff --git a/website/src/features/toolboxes/modules/TaskPlannerModule.jsx b/website/src/features/toolboxes/modules/TaskPlannerModule.jsx
index d6a7707..84f8f03 100644
--- a/website/src/features/toolboxes/modules/TaskPlannerModule.jsx
+++ b/website/src/features/toolboxes/modules/TaskPlannerModule.jsx
@@ -640,7 +640,21 @@ function TaskPlannerBranch({
     if (data.hideCompleted && task.checked) {
       if (!hasVisibleDescendants(task.id)) return null;
       return (
-        <li className="task-planner-hidden-parent-children" key={`${task.id}:visible-children`}>
+        <li className="task-planner-hidden-parent" key={`${task.id}:visible-children`}>
+          <div className="task-planner-hidden-parent-line">
+            <input
+              type="checkbox"
+              checked={task.checked}
+              onChange={(event) => onUpdateTask(task.id, (current) => ({
+                ...current,
+                checked: event.target.checked,
+                checkedAt: event.target.checked ? Date.now() : 0
+              }))}
+              aria-label={`${textContent.uncheckTitle || "Marquer non effectué"} ${task.title}`}
+            />
+            <span title={task.title}>{task.title}</span>
+            <small>{getTaskTypeLabel(task.type, textContent)}</small>
+          </div>
           <ul className="task-planner-list task-planner-child-list">{nestedBranch}</ul>
         </li>
       );
diff --git a/website/src/styles/_toolboxes.scss b/website/src/styles/_toolboxes.scss
index d576b60..1b6b54e 100644
--- a/website/src/styles/_toolboxes.scss
+++ b/website/src/styles/_toolboxes.scss
@@ -2020,18 +2020,25 @@ textarea:focus {
   position: relative;
 }
 
-.task-planner-hidden-parent-children {
+.task-planner-hidden-parent {
   position: relative;
   display: grid;
+  gap: 8px;
   min-width: 0;
+  padding: 10px;
+  border: 1px solid rgba(165, 180, 252, 0.1);
+  border-radius: var(--radius-md);
+  background:
+    linear-gradient(135deg, rgba(148, 163, 184, 0.035), transparent 56%),
+    rgba(5, 7, 17, 0.28);
 }
 
-.task-planner-hidden-parent-children > .task-planner-child-list {
+.task-planner-hidden-parent > .task-planner-child-list {
   margin-top: 0;
 }
 
 .task-planner-child-list > .task-planner-item::before,
-.task-planner-child-list > .task-planner-hidden-parent-children::before {
+.task-planner-child-list > .task-planner-hidden-parent::before {
   content: "";
   position: absolute;
   top: 25px;
@@ -2041,6 +2048,42 @@ textarea:focus {
   background: rgba(246, 196, 83, 0.46);
 }
 
+.task-planner-hidden-parent-line {
+  display: grid;
+  grid-template-columns: 24px minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+  min-height: 34px;
+  padding: 6px 10px;
+  border: 1px solid rgba(165, 180, 252, 0.08);
+  border-radius: var(--radius-md);
+  background:
+    linear-gradient(135deg, rgba(148, 163, 184, 0.04), transparent 58%),
+    rgba(5, 7, 17, 0.24);
+  opacity: 0.76;
+}
+
+.task-planner-hidden-parent-line > input[type="checkbox"] {
+  justify-self: center;
+}
+
+.task-planner-hidden-parent-line > span {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  font-weight: 800;
+  text-decoration: line-through;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.task-planner-hidden-parent-line > small {
+  color: rgba(180, 189, 211, 0.62);
+  font-size: var(--font-size-xs);
+  font-weight: 900;
+}
+
 .task-planner-empty {
   padding: var(--space-4);
   border: 1px dashed rgba(165, 180, 252, 0.18);