44 lines
1.8 KiB
TypeScript
44 lines
1.8 KiB
TypeScript
import { type Component, For, createMemo } from "solid-js";
|
||
import { store, getCombinedScore, matchesFilter } from "@/store";
|
||
import { TaskCard } from "@/components/TaskCard";
|
||
|
||
export const SnowballView: Component = () => {
|
||
const sortedTasks = createMemo(() => {
|
||
return [...store.tasks]
|
||
.filter(t => !t.deletedAt && matchesFilter(t))
|
||
.sort((a, b) => {
|
||
if (a.completed !== b.completed) return a.completed ? 1 : -1;
|
||
// Primary: Size ascending (smallest first)
|
||
const sizeA = a.size ?? 5;
|
||
const sizeB = b.size ?? 5;
|
||
if (sizeA !== sizeB) return sizeA - sizeB;
|
||
// Secondary: Combined score descending (higher focus first)
|
||
return getCombinedScore(b) - getCombinedScore(a);
|
||
});
|
||
});
|
||
|
||
return (
|
||
<div class="space-y-6">
|
||
<header>
|
||
<h2 class="text-3xl font-bold tracking-tight">Snowball</h2>
|
||
<p class="text-muted-foreground mt-1 text-lg">Smallest tasks first. Build momentum with quick wins.</p>
|
||
</header>
|
||
|
||
<div class="grid gap-3">
|
||
<For each={sortedTasks()}>
|
||
{(task) => <TaskCard task={task} />}
|
||
</For>
|
||
</div>
|
||
|
||
{sortedTasks().length === 0 && (
|
||
<div class="flex flex-col items-center justify-center py-20 text-center">
|
||
<div class="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
|
||
<span class="text-2xl">❄️</span>
|
||
</div>
|
||
<p class="text-muted-foreground">Nothing here. Add some tasks to start your snowball!</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|