From b6c065ffd1c6fedb85ec93d46b954f5404155f01 Mon Sep 17 00:00:00 2001
From: Jake <jake@corbel.consulting>
Date: Fri, 15 May 2026 08:57:37 +0100
Subject: [PATCH] =?UTF-8?q?v0.2=20Phase=207.4:=20TasksPage=20=E2=80=94=20m?=
 =?UTF-8?q?inimal=20wrapper=20sweep?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Targeted migration per plan ("wrap, don't rewrite"). The page's
identity surfaces (energy chips, search input, quick-capture input,
bucket tabs, WipTaskList) stay verbatim — their rich ARIA and custom
radio-group semantics outweigh wrapper coherence here.

  - Dead Card import removed (never used in markup)
  - EmptyState → LumotiaEmptyState
  - "Pop out" toolbar button → LumotiaButton variant=tertiary

WipTaskList, CompletionSparkline, EnergyChip stay bespoke per
docs/release/v0.2-frontend-overhaul.md §6.3.

Per-page gate: npm run check (0/0/5704 files).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/pages/TasksPage.svelte | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/lib/pages/TasksPage.svelte b/src/lib/pages/TasksPage.svelte
index f175860..b8de465 100644
--- a/src/lib/pages/TasksPage.svelte
+++ b/src/lib/pages/TasksPage.svelte
@@ -10,11 +10,11 @@
   } from "$lib/stores/page.svelte.js";
   import { recentCompletions, todayCount } from "$lib/stores/completionStats.svelte";
   import WipTaskList from '$lib/components/WipTaskList.svelte';
-  import EmptyState from '$lib/components/EmptyState.svelte';
+  import LumotiaEmptyState from '$lib/ui/LumotiaEmptyState.svelte';
+  import LumotiaButton from '$lib/ui/LumotiaButton.svelte';
   import CompletionSparkline from "$lib/components/CompletionSparkline.svelte";
   import EnergyChip from '$lib/components/EnergyChip.svelte';
   import { SquareCheck, Search, ExternalLink, ChevronLeft, ArrowUpDown, Plus, X, ChevronRight, Zap } from 'lucide-svelte';
-  import Card from "$lib/components/Card.svelte";
   import { formatTimestamp } from "$lib/utils/time.js";
   import { BUCKET_COLORS, EFFORT_LABELS, EFFORT_ORDER } from "$lib/utils/constants.js";
 
@@ -360,15 +360,15 @@
       </button>
     </div>
 
-    <button
-      class="flex items-center gap-1.5 btn-md rounded-lg text-text-secondary hover:bg-hover hover:text-text"
-      style="transition-duration: var(--duration-ui)"
+    <LumotiaButton
+      variant="tertiary"
       onclick={popOutTasks}
-      aria-label="Pop out task window"
+      ariaLabel="Pop out task window"
+      classes="inline-flex items-center gap-1.5"
     >
       <ExternalLink size={14} aria-hidden="true" />
       Pop out
-    </button>
+    </LumotiaButton>
   </div>
 
   <!-- Search -->
@@ -576,7 +576,7 @@
     <!-- Task list -->
     <div class="flex-1 overflow-y-auto min-h-0">
       {#if filteredTasks.length === 0}
-        <EmptyState
+        <LumotiaEmptyState
           icon={SquareCheck}
           message={searchQuery
             ? "No matching tasks"