added task size management features and fixed trash recover feature
This commit is contained in:
@@ -10,6 +10,8 @@ const UrgencyView = lazy(() => import('./views/UrgencyView').then(m => ({ defaul
|
||||
const PriorityView = lazy(() => import('./views/PriorityView').then(m => ({ default: m.PriorityView })));
|
||||
const MatrixView = lazy(() => import('./views/MatrixView').then(m => ({ default: m.MatrixView })));
|
||||
const SettingsView = lazy(() => import('./views/SettingsView').then(m => ({ default: m.SettingsView })));
|
||||
const SnowballView = lazy(() => import('./views/SnowballView').then(m => ({ default: m.SnowballView })));
|
||||
const DigInView = lazy(() => import('./views/DigInView').then(m => ({ default: m.DigInView })));
|
||||
|
||||
const App: Component = () => {
|
||||
// Basic routing state
|
||||
@@ -34,6 +36,8 @@ const App: Component = () => {
|
||||
import('./views/PriorityView');
|
||||
import('./views/MatrixView');
|
||||
import('./views/SettingsView');
|
||||
import('./views/SnowballView');
|
||||
import('./views/DigInView');
|
||||
|
||||
// Remove splash screen after high priority work is done
|
||||
const splash = document.getElementById('splash');
|
||||
@@ -52,6 +56,8 @@ const App: Component = () => {
|
||||
<Show when={currentView() === "urgency"}><UrgencyView /></Show>
|
||||
<Show when={currentView() === "priority"}><PriorityView /></Show>
|
||||
<Show when={currentView() === "matrix"}><MatrixView /></Show>
|
||||
<Show when={currentView() === "snowball"}><SnowballView /></Show>
|
||||
<Show when={currentView() === "dig_in"}><DigInView /></Show>
|
||||
<Show when={currentView() === "settings"}><SettingsView /></Show>
|
||||
</Suspense>
|
||||
</Layout>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { type Component, For, Show } from "solid-js";
|
||||
import { LayoutDashboard, ListTodo, Settings, Clock, ArrowUpCircle, PanelLeftClose } from "lucide-solid";
|
||||
import { LayoutDashboard, ListTodo, Settings, Clock, ArrowUpCircle, PanelLeftClose, Snowflake, Pickaxe, ChevronDown, Gauge, TrendingUp } from "lucide-solid";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "./ui/button";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
|
||||
interface NavItem {
|
||||
icon: any;
|
||||
@@ -9,29 +10,99 @@ interface NavItem {
|
||||
view: string;
|
||||
}
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
// Desktop nav items (all)
|
||||
const desktopNavItems: NavItem[] = [
|
||||
{ icon: ListTodo, label: "Focus", view: "critical" },
|
||||
{ icon: Clock, label: "Time", view: "urgency" },
|
||||
{ icon: ArrowUpCircle, label: "Priority", view: "priority" },
|
||||
{ icon: LayoutDashboard, label: "Matrix", view: "matrix" },
|
||||
{ icon: Snowflake, label: "Snowball", view: "snowball" },
|
||||
{ icon: Pickaxe, label: "Dig In", view: "dig_in" },
|
||||
];
|
||||
|
||||
// Mobile nav groups
|
||||
interface MobileNavGroup {
|
||||
icon: any;
|
||||
label: string;
|
||||
items?: NavItem[];
|
||||
view?: string; // Direct navigation (no sub-items)
|
||||
}
|
||||
|
||||
const mobileNavGroups: MobileNavGroup[] = [
|
||||
{ icon: ListTodo, label: "Focus", view: "critical" },
|
||||
{ icon: LayoutDashboard, label: "Matrix", view: "matrix" },
|
||||
{
|
||||
icon: TrendingUp, label: "Value", items: [
|
||||
{ icon: ArrowUpCircle, label: "Priority", view: "priority" },
|
||||
{ icon: Clock, label: "Time", view: "urgency" },
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: Gauge, label: "Flow", items: [
|
||||
{ icon: Snowflake, label: "Snowball", view: "snowball" },
|
||||
{ icon: Pickaxe, label: "Dig In", view: "dig_in" },
|
||||
]
|
||||
},
|
||||
{ icon: Settings, label: "Settings", view: "settings" },
|
||||
];
|
||||
|
||||
export const BottomNav: Component<{ currentView: string; setView: (v: string) => void }> = (props) => {
|
||||
const isGroupActive = (group: MobileNavGroup) => {
|
||||
if (group.view) return props.currentView === group.view;
|
||||
return group.items?.some(item => props.currentView === item.view) ?? false;
|
||||
};
|
||||
|
||||
return (
|
||||
<nav class="fixed bottom-0 left-0 right-0 bg-background border-t border-border flex justify-around items-center h-16 md:hidden z-50">
|
||||
<For each={navItems}>
|
||||
{(item) => (
|
||||
<button
|
||||
onClick={() => props.setView(item.view)}
|
||||
class={cn(
|
||||
"flex flex-col items-center justify-center w-full h-full space-y-1 transition-colors",
|
||||
props.currentView === item.view ? "text-primary" : "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<item.icon size={20} />
|
||||
<span class="text-[10px] font-medium uppercase tracking-wider">{item.label}</span>
|
||||
</button>
|
||||
<For each={mobileNavGroups}>
|
||||
{(group) => (
|
||||
<Show when={group.items} fallback={
|
||||
<button
|
||||
onClick={() => group.view && props.setView(group.view)}
|
||||
class={cn(
|
||||
"flex flex-col items-center justify-center w-full h-full space-y-1 transition-colors",
|
||||
isGroupActive(group) ? "text-primary" : "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<group.icon size={20} />
|
||||
<span class="text-[10px] font-medium uppercase tracking-wider">{group.label}</span>
|
||||
</button>
|
||||
}>
|
||||
<Popover>
|
||||
<PopoverTrigger
|
||||
class={cn(
|
||||
"flex flex-col items-center justify-center w-full h-full space-y-1 transition-colors",
|
||||
isGroupActive(group) ? "text-primary" : "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<div class="relative">
|
||||
<group.icon size={20} />
|
||||
<ChevronDown size={10} class="absolute -right-2 -bottom-0.5 opacity-60" />
|
||||
</div>
|
||||
<span class="text-[10px] font-medium uppercase tracking-wider">{group.label}</span>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-40 p-1 bg-card border-border shadow-xl mb-2">
|
||||
<div class="space-y-0.5">
|
||||
<For each={group.items}>
|
||||
{(item) => (
|
||||
<button
|
||||
class={cn(
|
||||
"w-full flex items-center gap-3 p-2.5 rounded-lg transition-colors text-left group",
|
||||
props.currentView === item.view
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "hover:bg-muted text-foreground"
|
||||
)}
|
||||
onClick={() => props.setView(item.view)}
|
||||
>
|
||||
<item.icon size={16} />
|
||||
<span class="text-sm font-medium">{item.label}</span>
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</Show>
|
||||
)}
|
||||
</For>
|
||||
</nav>
|
||||
@@ -81,7 +152,7 @@ export const Sidebar: Component<{
|
||||
</Show>
|
||||
</div>
|
||||
<nav class="flex-1 px-3 space-y-1 mt-2">
|
||||
<For each={navItems.filter(i => i.view !== "settings")}>
|
||||
<For each={desktopNavItems}>
|
||||
{(item) => (
|
||||
<button
|
||||
onClick={() => props.setView(item.view)}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { type Component, createSignal, createEffect, onCleanup, onMount, For, Show } from "solid-js";
|
||||
import { addTask, calculateDateFromUrgency, calculateUrgencyFromDate, store, upsertTagDefinition, type TaskTemplate } from "@/store";
|
||||
import { Search, Command, Clock, ArrowUpCircle, Plus, Copy, ChevronDown } from "lucide-solid";
|
||||
import { Search, Command, Clock, ArrowUpCircle, Plus, Copy, ChevronDown, Gauge } from "lucide-solid";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { TextField, TextFieldInput } from "@/components/ui/textfield";
|
||||
@@ -11,7 +11,7 @@ import { getThemeAdjustedColor } from "@/lib/colors";
|
||||
import { lazy, Suspense } from "solid-js";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { toast } from "solid-sonner";
|
||||
import { PRIORITY_OPTIONS, URGENCY_OPTIONS } from "@/lib/constants";
|
||||
import { PRIORITY_OPTIONS, URGENCY_OPTIONS, SIZE_OPTIONS } from "@/lib/constants";
|
||||
|
||||
const TaskEditor = lazy(() => import("./TaskEditor").then(m => ({ default: m.TaskEditor })));
|
||||
|
||||
@@ -28,6 +28,7 @@ export const QuickEntry: Component = () => {
|
||||
const [tags, setTags] = createSignal<string[]>([]);
|
||||
const [description, setDescription] = createSignal("");
|
||||
const [editorInstance, setEditorInstance] = createSignal<any>(null);
|
||||
const [size, setSize] = createSignal<string>("5");
|
||||
|
||||
// Reactive shorthand parsing
|
||||
createEffect(() => {
|
||||
@@ -205,7 +206,8 @@ export const QuickEntry: Component = () => {
|
||||
priority: finalPriority,
|
||||
dueDate: finalDueDate || undefined,
|
||||
tags: finalTags,
|
||||
content: description()
|
||||
content: description(),
|
||||
size: parseInt(size())
|
||||
});
|
||||
|
||||
setInput("");
|
||||
@@ -213,6 +215,7 @@ export const QuickEntry: Component = () => {
|
||||
setUrgency("5");
|
||||
setTags([]);
|
||||
setDescription("");
|
||||
setSize("5");
|
||||
lastParsedTags = [];
|
||||
setDateString("");
|
||||
setIsOpen(false);
|
||||
@@ -275,6 +278,7 @@ export const QuickEntry: Component = () => {
|
||||
</TextField>
|
||||
</div>
|
||||
|
||||
{/* Row 1: Priority, Size, Urgency */}
|
||||
<div class="flex flex-col md:flex-row items-stretch md:items-center p-4 gap-4 border-b border-border bg-muted/10">
|
||||
<div class="flex-1 space-y-1.5">
|
||||
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Priority</label>
|
||||
@@ -306,6 +310,36 @@ export const QuickEntry: Component = () => {
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 space-y-1.5">
|
||||
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Size</label>
|
||||
<Select<any>
|
||||
value={size()}
|
||||
onChange={(val) => {
|
||||
const v = typeof val === 'object' ? val.value : val;
|
||||
if (v) setSize(v);
|
||||
}}
|
||||
options={SIZE_OPTIONS}
|
||||
optionValue="value"
|
||||
optionTextValue="label"
|
||||
placeholder="Size"
|
||||
itemComponent={(props) => (
|
||||
<SelectItem item={props.item}>
|
||||
{props.item.rawValue.label}
|
||||
</SelectItem>
|
||||
)}
|
||||
>
|
||||
<SelectTrigger class="w-full bg-background border-none shadow-sm h-10 px-3 overflow-hidden">
|
||||
<div class="flex items-center gap-2 truncate">
|
||||
<Gauge size={14} class="text-primary shrink-0" />
|
||||
<span class="text-sm font-medium truncate">
|
||||
{SIZE_OPTIONS.find(o => o.value === size())?.label || size()}
|
||||
</span>
|
||||
</div>
|
||||
</SelectTrigger>
|
||||
<SelectContent />
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 space-y-1.5">
|
||||
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Urgency (Time)</label>
|
||||
<Select<any>
|
||||
@@ -332,8 +366,48 @@ export const QuickEntry: Component = () => {
|
||||
<SelectContent />
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 space-y-1.5">
|
||||
{/* Row 2: Tags + Due Date */}
|
||||
<div class="flex flex-col md:flex-row items-stretch md:items-center px-4 py-3 gap-4 bg-muted/10 border-b border-border">
|
||||
<div class="flex-1 flex flex-wrap gap-2 items-center">
|
||||
<TagPicker selectedTags={tags()} onTagsChange={setTags} />
|
||||
<For each={tags()}>
|
||||
{(tag) => (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
class="h-7 px-2 text-xs gap-1 bg-background border border-border/50 cursor-pointer hover:bg-destructive/10 hover:border-destructive/30 group/tag transition-all"
|
||||
style={{
|
||||
"background-color": (() => {
|
||||
const def = store.tagDefinitions.find(d => d.name === tag);
|
||||
const color = getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme());
|
||||
return color ? `${color}15` : undefined;
|
||||
})(),
|
||||
"border-color": (() => {
|
||||
const def = store.tagDefinitions.find(d => d.name === tag);
|
||||
const color = getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme());
|
||||
return color ? `${color}30` : undefined;
|
||||
})(),
|
||||
"color": (() => {
|
||||
const def = store.tagDefinitions.find(d => d.name === tag);
|
||||
return getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme()) || "inherit";
|
||||
})()
|
||||
}}
|
||||
onClick={() => setTags(tags().filter(t => t !== tag))}
|
||||
>
|
||||
<div
|
||||
class="w-1.5 h-1.5 rounded-full transition-colors group-hover/tag:bg-destructive"
|
||||
style={{
|
||||
"background-color": (store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) > 5 ? "#22c55e" : (store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) < 5 ? "#ef4444" : "#94a3b8"
|
||||
}}
|
||||
/>
|
||||
{tag}
|
||||
</Badge>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-auto md:min-w-[200px] space-y-1.5">
|
||||
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Due Date</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
@@ -353,43 +427,6 @@ export const QuickEntry: Component = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4 pb-4 bg-muted/10 border-b border-border flex flex-wrap gap-2 items-center">
|
||||
<TagPicker selectedTags={tags()} onTagsChange={setTags} />
|
||||
<For each={tags()}>
|
||||
{(tag) => (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
class="h-7 px-2 text-xs gap-1 bg-background border border-border/50 cursor-pointer hover:bg-destructive/10 hover:border-destructive/30 group/tag transition-all"
|
||||
style={{
|
||||
"background-color": (() => {
|
||||
const def = store.tagDefinitions.find(d => d.name === tag);
|
||||
const color = getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme());
|
||||
return color ? `${color}15` : undefined;
|
||||
})(),
|
||||
"border-color": (() => {
|
||||
const def = store.tagDefinitions.find(d => d.name === tag);
|
||||
const color = getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme());
|
||||
return color ? `${color}30` : undefined;
|
||||
})(),
|
||||
"color": (() => {
|
||||
const def = store.tagDefinitions.find(d => d.name === tag);
|
||||
return getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme()) || "inherit";
|
||||
})()
|
||||
}}
|
||||
onClick={() => setTags(tags().filter(t => t !== tag))}
|
||||
>
|
||||
<div
|
||||
class="w-1.5 h-1.5 rounded-full transition-colors group-hover/tag:bg-destructive"
|
||||
style={{
|
||||
"background-color": (store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) > 5 ? "#22c55e" : (store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) < 5 ? "#ef4444" : "#94a3b8"
|
||||
}}
|
||||
/>
|
||||
{tag}
|
||||
</Badge>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-3 bg-card border-b border-border min-h-[120px] max-h-[300px] overflow-y-auto">
|
||||
<Suspense fallback={<div class="h-20 animate-pulse bg-muted/20 rounded-lg" />}>
|
||||
<TaskEditor
|
||||
|
||||
@@ -3,12 +3,12 @@ import { Sheet, SheetContent } from "@/components/ui/sheet";
|
||||
import { type Task, removeTask, restoreTask, updateTask, saveTaskAsTemplate } from "@/store";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { ArrowUpCircle, Clock, Calendar, Type, Trash2, X, Copy, MoreHorizontal } from "lucide-solid";
|
||||
import { ArrowUpCircle, Clock, Calendar, Type, Trash2, X, Copy, MoreHorizontal, Gauge } from "lucide-solid";
|
||||
import { calculateDateFromUrgency, calculateUrgencyFromDate } from "@/store";
|
||||
import { Button } from "./ui/button";
|
||||
import { TagPicker } from "./TagPicker";
|
||||
import { Badge } from "./ui/badge";
|
||||
import { PRIORITY_OPTIONS, URGENCY_OPTIONS } from "@/lib/constants";
|
||||
import { PRIORITY_OPTIONS, URGENCY_OPTIONS, SIZE_OPTIONS } from "@/lib/constants";
|
||||
import { store } from "@/store";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { toast } from "solid-sonner";
|
||||
@@ -189,6 +189,36 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Size */}
|
||||
<div class="flex items-center gap-1 group shrink-0">
|
||||
<span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Size</span>
|
||||
<Select<any>
|
||||
value={(props.task.size ?? 5).toString()}
|
||||
onChange={(val: any) => {
|
||||
const value = typeof val === 'object' ? val?.value : val;
|
||||
if (value) {
|
||||
const s = parseInt(value);
|
||||
if (!isNaN(s)) updateTask(props.task.id, { size: s });
|
||||
}
|
||||
}}
|
||||
options={SIZE_OPTIONS}
|
||||
optionValue="value"
|
||||
optionTextValue="label"
|
||||
placeholder="Size"
|
||||
itemComponent={(props: any) => <SelectItem item={props.item}>{props.item.rawValue.label}</SelectItem>}
|
||||
>
|
||||
<SelectTrigger class="h-8 min-w-[40px] max-w-[180px] bg-transparent border-transparent hover:bg-muted/50 px-1 sm:px-2 shadow-none focus:ring-0 shrink-0 overflow-hidden">
|
||||
<div class="flex items-center gap-1 sm:gap-1.5 text-foreground font-medium truncate">
|
||||
<Gauge size={14} class="text-primary opacity-70 group-hover:opacity-100 transition-opacity shrink-0" />
|
||||
<span class="text-xs sm:text-sm truncate">
|
||||
{SIZE_OPTIONS.find(o => o.value === (props.task.size ?? 5).toString())?.label || props.task.size}
|
||||
</span>
|
||||
</div>
|
||||
</SelectTrigger>
|
||||
<SelectContent />
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Commands Shortcut */}
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
<Button
|
||||
|
||||
@@ -35,3 +35,17 @@ export const URGENCY_HOURS: Record<number, number> = {
|
||||
2: 2160,
|
||||
1: 4320
|
||||
};
|
||||
|
||||
export const SIZE_OPTIONS = [
|
||||
{ value: "10", label: "10 - Huge" },
|
||||
{ value: "9", label: "9" },
|
||||
{ value: "8", label: "8" },
|
||||
{ value: "7", label: "7" },
|
||||
{ value: "6", label: "6" },
|
||||
{ value: "5", label: "5" },
|
||||
{ value: "4", label: "4" },
|
||||
{ value: "3", label: "3" },
|
||||
{ value: "2", label: "2" },
|
||||
{ value: "1", label: "1" },
|
||||
{ value: "0", label: "0 - Tiny" }
|
||||
];
|
||||
|
||||
+41
-15
@@ -32,6 +32,7 @@ export interface Task {
|
||||
dayOfMonth?: number; // For monthly (1-31)
|
||||
lastUncompleted?: string; // ISO date of last automatic reset
|
||||
};
|
||||
size?: number; // 0-10, task complexity/size
|
||||
}
|
||||
|
||||
export const checkRecurringTasks = () => {
|
||||
@@ -280,6 +281,11 @@ export const getCombinedScore = (task: Task): number => {
|
||||
});
|
||||
}
|
||||
|
||||
// Size adjustment: (size - 5) * -0.4
|
||||
// Small tasks (0-4) get a slight boost, large tasks (6-10) get a slight penalty
|
||||
const sizeScore = ((task.size ?? 5) - 5) * -0.4;
|
||||
baseScore += sizeScore;
|
||||
|
||||
return baseScore;
|
||||
};
|
||||
|
||||
@@ -303,7 +309,8 @@ const mapRecordToTask = (r: any): Task => {
|
||||
deletedAt: r.deletedAt ? new Date(r.deletedAt).getTime() : undefined,
|
||||
created: r.created,
|
||||
updated: r.updated,
|
||||
recurrence: r.recurrence
|
||||
recurrence: r.recurrence,
|
||||
size: (r.size === null || r.size === undefined) ? undefined : r.size
|
||||
};
|
||||
};
|
||||
|
||||
@@ -362,9 +369,24 @@ export const subscribeToRealtime = async () => {
|
||||
return;
|
||||
}
|
||||
|
||||
// Normal Task
|
||||
const updatedTask = mapRecordToTask(e.record);
|
||||
setStore("tasks", t => t.id === e.record.id, updatedTask);
|
||||
// Normal Task - only apply if incoming record is newer or equal
|
||||
const existingTask = store.tasks.find(t => t.id === e.record.id);
|
||||
if (existingTask) {
|
||||
const incomingUpdated = new Date(e.record.updated).getTime();
|
||||
const localUpdated = new Date(existingTask.updated).getTime();
|
||||
|
||||
// Only apply update if incoming is newer (or we don't have a timestamp)
|
||||
if (!existingTask.updated || incomingUpdated >= localUpdated) {
|
||||
const updatedTask = mapRecordToTask(e.record);
|
||||
setStore("tasks", t => t.id === e.record.id, updatedTask);
|
||||
} else {
|
||||
console.log("Skipping stale realtime update for task:", e.record.id);
|
||||
}
|
||||
} else {
|
||||
// Task doesn't exist locally, add it
|
||||
const updatedTask = mapRecordToTask(e.record);
|
||||
setStore("tasks", t => [updatedTask, ...t]);
|
||||
}
|
||||
}
|
||||
|
||||
if (e.action === 'delete') {
|
||||
@@ -496,7 +518,7 @@ export const initStore = async () => {
|
||||
|
||||
// -- Actions --
|
||||
|
||||
export const addTask = async (title: string, options?: { dueDate?: Date | string, priority?: number, tags?: string[], content?: string }) => {
|
||||
export const addTask = async (title: string, options?: { dueDate?: Date | string, priority?: number, tags?: string[], content?: string, size?: number }) => {
|
||||
if (!pb.authStore.isValid) return;
|
||||
|
||||
// Default to ~24h from now if no date provided
|
||||
@@ -509,6 +531,7 @@ export const addTask = async (title: string, options?: { dueDate?: Date | string
|
||||
const priority = options?.priority ?? 5;
|
||||
const tags = options?.tags ?? ["work"];
|
||||
const content = options?.content ?? "";
|
||||
const size = options?.size ?? 5;
|
||||
|
||||
const tempId = "temp-" + Date.now();
|
||||
const newTask: Task = {
|
||||
@@ -520,6 +543,7 @@ export const addTask = async (title: string, options?: { dueDate?: Date | string
|
||||
completed: false,
|
||||
tags,
|
||||
content,
|
||||
size,
|
||||
created: new Date().toISOString(),
|
||||
updated: new Date().toISOString()
|
||||
};
|
||||
@@ -536,7 +560,8 @@ export const addTask = async (title: string, options?: { dueDate?: Date | string
|
||||
priority,
|
||||
completed: false,
|
||||
tags,
|
||||
content
|
||||
content,
|
||||
size
|
||||
});
|
||||
|
||||
// Replace temp task with real record (merging server fields like id, created, updated)
|
||||
@@ -572,7 +597,8 @@ export const copyTask = async (id: string) => {
|
||||
priority: original.priority,
|
||||
dueDate: original.dueDate,
|
||||
tags: [...(original.tags || [])],
|
||||
content: original.content
|
||||
content: original.content,
|
||||
size: original.size
|
||||
});
|
||||
|
||||
toast.success("Task duplicated");
|
||||
@@ -581,8 +607,12 @@ export const copyTask = async (id: string) => {
|
||||
export const updateTask = async (id: string, updates: Partial<Task>) => {
|
||||
if (!pb.authStore.isValid) return;
|
||||
|
||||
// Optimistic
|
||||
setStore("tasks", (t) => t.id === id, updates);
|
||||
// Optimistic update with timestamp to prevent stale realtime events
|
||||
const optimisticUpdates = {
|
||||
...updates,
|
||||
updated: new Date().toISOString()
|
||||
};
|
||||
setStore("tasks", (t) => t.id === id, optimisticUpdates);
|
||||
|
||||
try {
|
||||
// Map Task fields to PB fields if needed (dates are ISO strings, so should matches)
|
||||
@@ -674,12 +704,8 @@ export const removeTask = (id: string) => {
|
||||
};
|
||||
|
||||
export const restoreTask = (id: string) => {
|
||||
// This requires passing undefined or null to updateTask
|
||||
// createStore handles undefined ok.
|
||||
setStore("tasks", (t) => t.id === id, "deletedAt", undefined);
|
||||
|
||||
// For PB, we need to send null explicitly for date clear?
|
||||
// updateTask handles this check.
|
||||
// updateTask handles both optimistic update and PB sync
|
||||
// Pass undefined for deletedAt, updateTask will convert to null for PB
|
||||
updateTask(id, { deletedAt: undefined });
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
import { type Component, For, createMemo } from "solid-js";
|
||||
import { store, getCombinedScore, matchesFilter } from "@/store";
|
||||
import { TaskCard } from "@/components/TaskCard";
|
||||
|
||||
export const DigInView: 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 descending (largest first)
|
||||
const sizeA = a.size ?? 5;
|
||||
const sizeB = b.size ?? 5;
|
||||
if (sizeA !== sizeB) return sizeB - sizeA;
|
||||
// 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">Dig In</h2>
|
||||
<p class="text-muted-foreground mt-1 text-lg">Largest tasks first. Tackle big projects head-on.</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 dig into!</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,43 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user