From 674fc2c4b81ae3f9fb97d677f26cc1609aa2811d Mon Sep 17 00:00:00 2001
From: Jake <jake@corbel.consulting>
Date: Sun, 19 Apr 2026 10:51:11 +0100
Subject: [PATCH] feat(ui): add MicroSteps expand/collapse to WipTaskList;
 exclude subtasks from WIP count

---
 src/lib/components/WipTaskList.svelte | 70 +++++++++++++++++++--------
 1 file changed, 51 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/WipTaskList.svelte b/src/lib/components/WipTaskList.svelte
index a6b08ae..aa403fc 100644
--- a/src/lib/components/WipTaskList.svelte
+++ b/src/lib/components/WipTaskList.svelte
@@ -1,13 +1,16 @@
 <script>
   import { tasks, addTask, completeTask, uncompleteTask, deleteTask } from '$lib/stores/page.svelte.js';
-  import { ChevronDown } from 'lucide-svelte';
+  import MicroSteps from '$lib/components/MicroSteps.svelte';
+  import { ChevronDown, ChevronRight } from 'lucide-svelte';
 
   let { wipLimit = 3 } = $props();
 
   let newTaskText = $state('');
   let showOverflow = $state(false);
+  let expandedTaskIds = $state(new Set());
 
-  let activeTasks = $derived(tasks.filter(t => !t.done));
+  // Exclude subtasks from WIP count — only top-level tasks count
+  let activeTasks = $derived(tasks.filter(t => !t.done && !t.parentTaskId));
   let visibleTasks = $derived(activeTasks.slice(0, wipLimit));
   let overflowTasks = $derived(activeTasks.slice(wipLimit));
   let hasOverflow = $derived(overflowTasks.length > 0);
@@ -22,6 +25,16 @@
   function handleKeydown(e) {
     if (e.key === 'Enter') handleAdd();
   }
+
+  function toggleExpand(taskId) {
+    const next = new Set(expandedTaskIds);
+    if (next.has(taskId)) {
+      next.delete(taskId);
+    } else {
+      next.add(taskId);
+    }
+    expandedTaskIds = next;
+  }
 </script>
 
 <div class="flex flex-col gap-3">
@@ -44,23 +57,42 @@
   {:else}
     <div class="flex flex-col gap-1">
       {#each visibleTasks as task (task.id)}
-        <div class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-hover group"
-          style="transition-duration: var(--duration-ui)">
-          <button
-            class="w-4 h-4 rounded border border-border-subtle flex items-center justify-center flex-shrink-0
-              hover:border-accent"
-            onclick={() => completeTask(task.id)}
-            aria-label="Complete task"
-          >
-          </button>
-          <span class="text-[13px] text-text flex-1 min-w-0 truncate">{task.text}</span>
-          <button
-            class="text-text-tertiary hover:text-danger opacity-0 group-hover:opacity-100 text-[11px]"
-            onclick={() => deleteTask(task.id)}
-            aria-label="Delete task"
-          >
-            &times;
-          </button>
+        <div>
+          <!-- Task row -->
+          <div class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-hover group"
+            style="transition-duration: var(--duration-ui)">
+            <button
+              class="w-4 h-4 rounded border border-border-subtle flex items-center justify-center flex-shrink-0
+                hover:border-accent"
+              onclick={() => completeTask(task.id)}
+              aria-label="Complete task"
+            ></button>
+            <span class="text-[13px] text-text flex-1 min-w-0 truncate">{task.text}</span>
+            <!-- Expand/collapse micro-steps toggle -->
+            <button
+              class="opacity-0 group-hover:opacity-100 text-text-tertiary hover:text-accent"
+              onclick={() => toggleExpand(task.id)}
+              aria-label={expandedTaskIds.has(task.id) ? 'Collapse steps' : 'Expand steps'}
+              style="transition: opacity var(--duration-ui)"
+            >
+              {#if expandedTaskIds.has(task.id)}
+                <ChevronDown size={12} aria-hidden="true" />
+              {:else}
+                <ChevronRight size={12} aria-hidden="true" />
+              {/if}
+            </button>
+            <button
+              class="text-text-tertiary hover:text-danger opacity-0 group-hover:opacity-100 text-[11px]"
+              onclick={() => deleteTask(task.id)}
+              aria-label="Delete task"
+            >
+              &times;
+            </button>
+          </div>
+          <!-- Micro-steps panel (expanded) -->
+          {#if expandedTaskIds.has(task.id)}
+            <MicroSteps parentTaskId={task.id} />
+          {/if}
         </div>
       {/each}
     </div>