Lumotia/src/lib/components/WipTaskList.svelte

<script lang="ts">
  import { tasks, addTask, completeTask, uncompleteTask, deleteTask } from '$lib/stores/page.svelte.js';
  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<string>());

  // 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);

  function handleAdd() {
    const text = newTaskText.trim();
    if (!text) return;
    addTask({ text, bucket: 'inbox' });
    newTaskText = '';
  }

  function handleKeydown(e: KeyboardEvent) {
    if (e.key === 'Enter') handleAdd();
  }

  function toggleExpand(taskId: string) {
    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">
  <!-- Add task input -->
  <div class="flex gap-2">
    <input
      type="text"
      bind:value={newTaskText}
      onkeydown={handleKeydown}
      placeholder="Add a task…"
      class="flex-1 px-3 py-2 rounded-lg bg-bg-input border border-border-subtle text-text text-[13px]
        placeholder:text-text-tertiary focus:border-accent focus:outline-none"
      data-no-transition
    />
  </div>

  <!-- Active tasks (WIP-limited) -->
  {#if visibleTasks.length === 0}
    <p class="text-[12px] text-text-tertiary text-center py-4">No active tasks</p>
  {:else}
    <div class="flex flex-col gap-1">
      {#each visibleTasks as task (task.id)}
        <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>
  {/if}

  <!-- Overflow -->
  {#if hasOverflow}
    <button
      class="flex items-center gap-1.5 text-[11px] text-text-tertiary hover:text-text-secondary px-3"
      onclick={() => showOverflow = !showOverflow}
    >
      <ChevronDown size={12} class="transform {showOverflow ? 'rotate-180' : ''}" aria-hidden="true"
        style="transition: transform var(--duration-ui)" />
      {overflowTasks.length} more in your list
    </button>

    {#if showOverflow}
      <div class="flex flex-col gap-1 opacity-60">
        {#each overflowTasks as task (task.id)}
          <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg">
            <div class="w-3 h-3 rounded border border-border-subtle flex-shrink-0"></div>
            <span class="text-[12px] text-text-secondary truncate">{task.text}</span>
          </div>
        {/each}
      </div>
    {/if}
  {/if}

  <!-- WIP indicator -->
  {#if activeTasks.length > 0}
    <p class="text-[10px] text-text-tertiary text-right">
      {Math.min(activeTasks.length, wipLimit)}/{wipLimit} active
    </p>
  {/if}
</div>