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:
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user