added task size management features and fixed trash recover feature
This commit is contained in:
@@ -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)}
|
||||
|
||||
Reference in New Issue
Block a user