v0.2 Phase 7.4: TasksPage — minimal wrapper sweep

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>
This commit is contained in:
2026-05-15 08:57:37 +01:00
parent cb69772f4e
commit b6c065ffd1

View File

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