added task size management features and fixed trash recover feature

This commit is contained in:
2026-02-04 18:05:24 -06:00
parent 54a0da9896
commit fc3f1066e1
8 changed files with 343 additions and 73 deletions
+86 -15
View File
@@ -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)}