From 4d762364d59ee76b997b8c6afc667b5698dfc391 Mon Sep 17 00:00:00 2001
From: Tristan Michael <steeldynamite@gmail.com>
Date: Mon, 30 Mar 2026 16:50:15 -0700
Subject: [PATCH] feat(gui): refine layout - compact headers, reorganize
 panels, improve task UX

- Standardize header height (h-11) across detail view and main panel
- Move kebab menu below header in task detail view
- Move workspace switcher to drawer header with window drag support
- Move settings button to drawer footer with label
- Add mark-as-completed/restore to kebab menu, remove bottom action bar
- Enlarge checkbox hit target without changing visual size
- Show checkmark animation before task collapse transition

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/lib/components/TaskDetailView.svelte  |  36 ++--
 apps/tauri/src/lib/components/TaskItem.svelte |  25 ++-
 apps/tauri/src/lib/screens/TasksScreen.svelte | 185 +++++++++---------
 3 files changed, 130 insertions(+), 116 deletions(-)

diff --git a/apps/tauri/src/lib/components/TaskDetailView.svelte b/apps/tauri/src/lib/components/TaskDetailView.svelte
index 259dccc..06863d9 100644
--- a/apps/tauri/src/lib/components/TaskDetailView.svelte
+++ b/apps/tauri/src/lib/components/TaskDetailView.svelte
@@ -87,7 +87,7 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <header
   onmousedown={handleHeaderMouseDown}
-  class="flex items-center justify-between border-b border-border-light px-4 py-3 dark:border-border-dark"
+  class="flex h-11 items-center border-b border-border-light px-4 dark:border-border-dark"
 >
   <button
     onclick={onback}
@@ -97,9 +97,12 @@
       <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" />
     </svg>
   </button>
+</header>
 
+<!-- Content -->
+<main class="relative flex-1 overflow-y-auto px-4 pt-4">
   <!-- Kebab menu -->
-  <div class="relative" bind:this={menuEl}>
+  <div class="absolute right-3 top-2" bind:this={menuEl}>
     <button
       onclick={() => (showMenu = !showMenu)}
       class="rounded-lg p-1.5 opacity-50 hover:bg-black/5 hover:opacity-80 dark:hover:bg-white/10"
@@ -109,7 +112,20 @@
       </svg>
     </button>
     {#if showMenu}
-      <div class="absolute right-0 top-full z-40 mt-1 min-w-[140px] rounded-lg border border-border-light bg-surface-light py-1 shadow-lg dark:border-border-dark dark:bg-surface-dark">
+      <div class="absolute right-0 top-full z-40 mt-1 min-w-[200px] rounded-lg border border-border-light bg-surface-light py-1 shadow-lg dark:border-border-dark dark:bg-surface-dark">
+        <button
+          onclick={handleToggle}
+          class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-black/5 dark:hover:bg-white/10"
+        >
+          <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+            {#if isCompleted}
+              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+            {:else}
+              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+            {/if}
+          </svg>
+          {isCompleted ? "Restore task" : "Mark as completed"}
+        </button>
         <button
           onclick={handleDelete}
           class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-danger hover:bg-black/5 dark:hover:bg-white/10"
@@ -122,10 +138,6 @@
       </div>
     {/if}
   </div>
-</header>
-
-<!-- Content -->
-<main class="flex-1 overflow-y-auto px-4 pt-4">
   <!-- Title -->
   <input
     type="text"
@@ -176,16 +188,6 @@
   </div>
 </main>
 
-<!-- Bottom action -->
-<div class="border-t border-border-light px-4 py-3 dark:border-border-dark">
-  <button
-    onclick={handleToggle}
-    class="w-full text-center text-sm font-medium text-primary hover:opacity-70"
-  >
-    {isCompleted ? "Restore task" : "Mark as completed"}
-  </button>
-</div>
-
 <!-- Date picker overlay -->
 {#if showDatePicker}
   <DateTimePicker
diff --git a/apps/tauri/src/lib/components/TaskItem.svelte b/apps/tauri/src/lib/components/TaskItem.svelte
index c2e23e7..3a5ab5c 100644
--- a/apps/tauri/src/lib/components/TaskItem.svelte
+++ b/apps/tauri/src/lib/components/TaskItem.svelte
@@ -15,6 +15,7 @@
   let animatingIn = $state(false);
 
   let isCompleted = $derived(task.status === "completed");
+  let justChecked = $state(false);
 
   $effect(() => {
     const _ = task.status;
@@ -31,9 +32,12 @@
 
   async function handleToggle(e: MouseEvent) {
     e.stopPropagation();
+    justChecked = true;
+    await new Promise((r) => setTimeout(r, 300));
     transitioning = true;
     animateInIds.add(task.id);
     await new Promise((r) => setTimeout(r, 200));
+    justChecked = false;
     await app.toggleTask(task.id);
   }
 
@@ -53,9 +57,12 @@
     if (Math.abs(swipeX) > 100) {
       swipeX = 0;
       swiping = false;
-      transitioning = true;
-      animateInIds.add(task.id);
-      setTimeout(() => app.toggleTask(task.id), 200);
+      justChecked = true;
+      setTimeout(() => {
+        transitioning = true;
+        animateInIds.add(task.id);
+        setTimeout(() => { justChecked = false; app.toggleTask(task.id); }, 200);
+      }, 300);
       return;
     }
     swipeX = 0;
@@ -105,11 +112,14 @@
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
       onclick={handleToggle}
-      class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors {isCompleted
-        ? 'border-primary bg-primary'
-        : 'border-gray-400 dark:border-gray-500'}"
+      class="-m-2 flex shrink-0 items-center justify-center p-2"
     >
-      {#if isCompleted}
+      <div
+        class="flex h-5 w-5 items-center justify-center rounded-full border-2 transition-colors duration-150 {isCompleted || justChecked
+          ? 'border-primary bg-primary'
+          : 'border-gray-400 dark:border-gray-500'}"
+      >
+      {#if isCompleted || justChecked}
         <svg class="h-3 w-3 text-white" viewBox="0 0 20 20" fill="currentColor">
           <path
             fill-rule="evenodd"
@@ -117,6 +127,7 @@
           />
         </svg>
       {/if}
+      </div>
     </div>
 
     <!-- Content -->
diff --git a/apps/tauri/src/lib/screens/TasksScreen.svelte b/apps/tauri/src/lib/screens/TasksScreen.svelte
index 9f8396e..11c9e68 100644
--- a/apps/tauri/src/lib/screens/TasksScreen.svelte
+++ b/apps/tauri/src/lib/screens/TasksScreen.svelte
@@ -157,6 +157,83 @@
 >
   <!-- Drawer panel -->
   <div class="flex h-full shrink-0 flex-col bg-surface-light dark:bg-surface-dark" style="width: 80cqi">
+    <!-- Drawer header: workspace switcher + settings -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      onmousedown={handleHeaderMouseDown}
+      class="flex h-11 shrink-0 items-center justify-between border-b border-border-light px-3 dark:border-border-dark"
+    >
+      <div class="relative min-w-0 flex-1" bind:this={workspacePickerEl}>
+        <button
+          onclick={() => (showWorkspacePicker = !showWorkspacePicker)}
+          class="flex items-center gap-1.5 rounded-lg px-2 py-1 text-sm font-semibold hover:bg-black/5 dark:hover:bg-white/10"
+        >
+          <span class="truncate">{app.config?.current_workspace ?? "Workspace"}</span>
+          <svg class="h-3.5 w-3.5 shrink-0 transition-transform {showWorkspacePicker ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" />
+          </svg>
+        </button>
+        {#if showWorkspacePicker}
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div
+            class="absolute left-0 top-full z-40 mt-1 w-full rounded-lg border border-border-light bg-surface-light py-1 shadow-lg dark:border-border-dark dark:bg-surface-dark"
+          >
+            {#each workspaceNames as name}
+              {@const ws = app.config?.workspaces[name]}
+              <div class="group flex items-center px-1 hover:bg-black/5 dark:hover:bg-white/10">
+                <button
+                  onclick={() => { app.switchWorkspace(name); showWorkspacePicker = false; }}
+                  class="flex min-w-0 flex-1 items-center gap-2 px-2 py-1.5 text-left {name === app.config?.current_workspace ? 'font-bold' : ''}"
+                >
+                  {#if name === app.config?.current_workspace}
+                    <svg class="h-4 w-4 shrink-0 opacity-50" viewBox="0 0 20 20" fill="currentColor">
+                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" />
+                    </svg>
+                  {/if}
+                  <div class="min-w-0 flex-1">
+                    <p class="truncate text-sm">{name}</p>
+                    <p class="truncate text-xs opacity-40">{ws?.path ?? ""}</p>
+                  </div>
+                </button>
+                <div class="relative shrink-0" data-ws-menu>
+                  <button
+                    onclick={(e) => { e.stopPropagation(); wsMenuName = wsMenuName === name ? null : name; }}
+                    class="rounded p-1 opacity-0 transition-opacity group-hover:opacity-40 hover:!opacity-80 {wsMenuName === name ? '!opacity-80' : ''}"
+                  >
+                    <svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
+                      <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
+                    </svg>
+                  </button>
+                  {#if wsMenuName === name}
+                    <div class="absolute right-0 top-full z-40 mt-1 min-w-[140px] rounded-lg border border-border-light bg-surface-light py-1 shadow-lg dark:border-border-dark dark:bg-surface-dark">
+                      <button
+                        onclick={() => { wsMenuName = null; if (confirm(`Remove workspace "${name}"? (Files remain on disk)`)) app.removeWorkspace(name); }}
+                        class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-danger hover:bg-black/5 dark:hover:bg-white/10"
+                      >
+                        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                          <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
+                        </svg>
+                        Delete
+                      </button>
+                    </div>
+                  {/if}
+                </div>
+              </div>
+            {/each}
+            <div class="mt-1 border-t border-border-light px-1 pt-1 dark:border-border-dark">
+              <button
+                onclick={() => { showWorkspacePicker = false; app.setScreen("setup"); }}
+                class="w-full rounded-md px-2 py-1.5 text-left text-sm text-primary hover:bg-primary/5"
+              >
+                + Add workspace
+              </button>
+            </div>
+          </div>
+        {/if}
+      </div>
+
+    </div>
+
     <!-- List items + new list button -->
     <div class="flex-1 overflow-y-auto py-2">
       {#each app.lists as list (list.id)}
@@ -228,93 +305,20 @@
       </div>
     </div>
 
-    <!-- Footer: workspace switcher (left) + settings gear (right) -->
-    <div class="flex items-center justify-between border-t border-border-light px-3 py-2 dark:border-border-dark">
-      <!-- Workspace switcher (custom drop-up) -->
-      <div class="relative min-w-0 flex-1" bind:this={workspacePickerEl}>
-        <button
-          onclick={() => (showWorkspacePicker = !showWorkspacePicker)}
-          class="flex w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-sm opacity-60 hover:bg-black/5 hover:opacity-100 dark:hover:bg-white/10"
-        >
-          <svg class="h-3.5 w-3.5 shrink-0 transition-transform {showWorkspacePicker ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor">
-            <path fill-rule="evenodd" d="M14.77 12.79a.75.75 0 01-1.06-.02L10 8.832 6.29 12.77a.75.75 0 11-1.08-1.04l4.25-4.5a.75.75 0 011.08 0l4.25 4.5a.75.75 0 01-.02 1.06z" />
-          </svg>
-          <span class="truncate">{app.config?.current_workspace ?? "Workspace"}</span>
-        </button>
-        {#if showWorkspacePicker}
-          <!-- svelte-ignore a11y_no_static_element_interactions -->
-          <div
-            class="absolute bottom-full left-0 mb-1 w-full rounded-lg border border-border-light bg-surface-light py-1 shadow-lg dark:border-border-dark dark:bg-surface-dark"
-          >
-            {#each workspaceNames as name}
-              {@const ws = app.config?.workspaces[name]}
-              <div class="group flex items-center px-1 hover:bg-black/5 dark:hover:bg-white/10">
-                <button
-                  onclick={() => { app.switchWorkspace(name); showWorkspacePicker = false; }}
-                  class="flex min-w-0 flex-1 items-center gap-2 px-2 py-1.5 text-left {name === app.config?.current_workspace ? 'font-bold' : ''}"
-                >
-                  {#if name === app.config?.current_workspace}
-                    <svg class="h-4 w-4 shrink-0 opacity-50" viewBox="0 0 20 20" fill="currentColor">
-                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" />
-                    </svg>
-                  {/if}
-                  <div class="min-w-0 flex-1">
-                    <p class="truncate text-sm">{name}</p>
-                    <p class="truncate text-xs opacity-40">{ws?.path ?? ""}</p>
-                  </div>
-                </button>
-                <div class="relative shrink-0" data-ws-menu>
-                  <button
-                    onclick={(e) => { e.stopPropagation(); wsMenuName = wsMenuName === name ? null : name; }}
-                    class="rounded p-1 opacity-0 transition-opacity group-hover:opacity-40 hover:!opacity-80 {wsMenuName === name ? '!opacity-80' : ''}"
-                  >
-                    <svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
-                      <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
-                    </svg>
-                  </button>
-                  {#if wsMenuName === name}
-                    <div class="absolute right-0 top-full z-40 mt-1 min-w-[140px] rounded-lg border border-border-light bg-surface-light py-1 shadow-lg dark:border-border-dark dark:bg-surface-dark">
-                      <button
-                        onclick={() => { wsMenuName = null; if (confirm(`Remove workspace "${name}"? (Files remain on disk)`)) app.removeWorkspace(name); }}
-                        class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-danger hover:bg-black/5 dark:hover:bg-white/10"
-                      >
-                        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
-                          <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
-                        </svg>
-                        Delete
-                      </button>
-                    </div>
-                  {/if}
-                </div>
-              </div>
-            {/each}
-            <div class="mt-1 border-t border-border-light px-1 pt-1 dark:border-border-dark">
-              <button
-                onclick={() => { showWorkspacePicker = false; app.setScreen("setup"); }}
-                class="w-full rounded-md px-2 py-1.5 text-left text-sm text-primary hover:bg-primary/5"
-              >
-                + Add workspace
-              </button>
-            </div>
-          </div>
-        {/if}
-      </div>
-
-      <!-- Settings gear -->
-      <button
-        onclick={openSettings}
-        class="rounded-lg p-2 hover:bg-black/5 dark:hover:bg-white/10"
-        title="Settings"
-      >
-        <svg class="h-5 w-5 opacity-50 hover:opacity-80" viewBox="0 0 20 20" fill="currentColor">
-          <path
-            fill-rule="evenodd"
-            d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
-            clip-rule="evenodd"
-          />
-        </svg>
-      </button>
-    </div>
+    <!-- Settings -->
+    <button
+      onclick={openSettings}
+      class="flex shrink-0 items-center gap-2 border-t border-border-light px-5 py-3 text-sm opacity-50 hover:bg-black/5 hover:opacity-80 dark:border-border-dark dark:hover:bg-white/10"
+    >
+      <svg class="h-4.5 w-4.5" viewBox="0 0 20 20" fill="currentColor">
+        <path
+          fill-rule="evenodd"
+          d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
+          clip-rule="evenodd"
+        />
+      </svg>
+      Settings
+    </button>
   </div>
 
   <!-- Main content panel -->
@@ -339,7 +343,7 @@
         <!-- svelte-ignore a11y_no_static_element_interactions -->
         <header
           onmousedown={handleHeaderMouseDown}
-          class="relative flex items-center border-b border-border-light px-4 py-3 dark:border-border-dark"
+          class="relative flex h-11 items-center border-b border-border-light px-4 dark:border-border-dark"
         >
           <!-- Drawer toggle (left) -->
           <button
@@ -353,10 +357,7 @@
 
           <!-- Centered title -->
           <div class="flex-1 text-center">
-            <p class="text-xs text-text-secondary-light dark:text-text-secondary-dark">
-              {app.config?.current_workspace ?? ""}
-            </p>
-            <p class="text-lg font-bold">{app.activeList?.title ?? "Tasks"}</p>
+            <p class="text-sm font-semibold leading-tight">{app.activeList?.title ?? "Tasks"}</p>
           </div>
 
           <!-- Window controls (right) -->