T1/Phase 1: scaffold Vite SPA + Hono API + Bun worker
- apps/web: Vite + React 19 + TanStack Router/Query + shadcn/ui - apps/api: Hono + Bun on :3001 with /api/health, /api/auth/*, /mcp stubs - apps/worker: Bun worker stub, DB connection, graceful SIGTERM - apps/web-legacy/: old Next.js code moved aside (preserved for T2-T8 reference) - Dockerfiles: api (Bun), worker (Bun), spa (multi-stage Caddy) - Caddyfile: serves dist + reverse-proxies /api/* + /mcp to api - docker-compose.yml: 4-service target (api, spa, db, worker) - packages/db/src/client.ts: shared Drizzle client for api + worker - db/client.ts: root-level alias for convenience Parent: t_e1cbd87d -> t_24c9c3fd (T0)
This commit is contained in:
Hermes
@@ -0,0 +1,182 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useSidebarStore } from '@/lib/stores/use-sidebar-store';
|
||||
import {
|
||||
LayoutDashboard,
|
||||
ListTodo,
|
||||
Flame,
|
||||
FolderKanban,
|
||||
NotebookPen,
|
||||
BookOpen,
|
||||
Share2,
|
||||
LayoutGrid,
|
||||
CalendarDays,
|
||||
Search,
|
||||
Bot,
|
||||
Settings,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip';
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from '@/components/ui/sheet';
|
||||
|
||||
const navItems = [
|
||||
{ href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
|
||||
{ href: '/tasks', label: 'Tasks', icon: ListTodo },
|
||||
{ href: '/habits', label: 'Habits', icon: Flame },
|
||||
{ href: '/projects', label: 'Projects', icon: FolderKanban },
|
||||
{ href: '/notes', label: 'Notes', icon: NotebookPen },
|
||||
{ href: '/daily-notes', label: 'Daily Note', icon: BookOpen },
|
||||
{ href: '/graph', label: 'Graph', icon: Share2 },
|
||||
{ href: '/canvas', label: 'Canvas', icon: LayoutGrid },
|
||||
{ href: '/calendar', label: 'Calendar', icon: CalendarDays },
|
||||
{ href: '/search', label: 'Search', icon: Search },
|
||||
];
|
||||
|
||||
const workspaceItems = [
|
||||
{ href: '/agents', label: 'Agent Activity', icon: Bot },
|
||||
{ href: '/settings', label: 'Settings', icon: Settings },
|
||||
];
|
||||
|
||||
export function Sidebar() {
|
||||
const pathname = usePathname();
|
||||
const { collapsed, toggle, mobileOpen, setMobileOpen } = useSidebarStore();
|
||||
|
||||
const navigation = (isCollapsed: boolean, onNavigate?: () => void) => (
|
||||
<ScrollArea className="flex-1 py-2">
|
||||
<nav className="flex flex-col gap-1 px-2" aria-label="Primary">
|
||||
{navItems.map((item) => {
|
||||
const isActive = pathname === item.href || pathname.startsWith(item.href + '/');
|
||||
const link = (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={onNavigate}
|
||||
className={cn(
|
||||
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
||||
isActive
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
||||
)}
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
>
|
||||
<item.icon className="h-4 w-4 shrink-0" aria-hidden="true" />
|
||||
{!isCollapsed && <span>{item.label}</span>}
|
||||
</Link>
|
||||
);
|
||||
if (isCollapsed) {
|
||||
return (
|
||||
<Tooltip key={item.href}>
|
||||
<TooltipTrigger asChild>{link}</TooltipTrigger>
|
||||
<TooltipContent side="right">{item.label}</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
return link;
|
||||
})}
|
||||
</nav>
|
||||
<Separator className="my-3" />
|
||||
<nav className="flex flex-col gap-1 px-2" aria-label="Workspace">
|
||||
{!isCollapsed && (
|
||||
<p className="px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
Workspace
|
||||
</p>
|
||||
)}
|
||||
{workspaceItems.map((item) => {
|
||||
const isActive = pathname === item.href || pathname.startsWith(item.href + '/');
|
||||
const link = (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={onNavigate}
|
||||
className={cn(
|
||||
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
||||
isActive
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
||||
)}
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
>
|
||||
<item.icon className="h-4 w-4 shrink-0" aria-hidden="true" />
|
||||
{!isCollapsed && <span>{item.label}</span>}
|
||||
</Link>
|
||||
);
|
||||
if (isCollapsed) {
|
||||
return (
|
||||
<Tooltip key={item.href}>
|
||||
<TooltipTrigger asChild>{link}</TooltipTrigger>
|
||||
<TooltipContent side="right">{item.label}</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
return link;
|
||||
})}
|
||||
</nav>
|
||||
</ScrollArea>
|
||||
);
|
||||
|
||||
return (
|
||||
<TooltipProvider delayDuration={0}>
|
||||
<aside
|
||||
className={cn(
|
||||
'hidden flex-col border-r bg-card transition-all duration-200 md:flex',
|
||||
collapsed ? 'w-16' : 'w-60'
|
||||
)}
|
||||
aria-label="Main navigation"
|
||||
>
|
||||
{/* Logo */}
|
||||
<div className="flex h-14 items-center justify-between px-4">
|
||||
{!collapsed && (
|
||||
<Link href="/dashboard" className="flex items-center gap-2 font-semibold">
|
||||
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary text-primary-foreground text-sm font-bold">
|
||||
E
|
||||
</span>
|
||||
Project E
|
||||
</Link>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-11 w-11 shrink-0"
|
||||
onClick={toggle}
|
||||
aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
|
||||
>
|
||||
{collapsed ? <ChevronRight className="h-4 w-4" aria-hidden="true" /> : <ChevronLeft className="h-4 w-4" aria-hidden="true" />}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{navigation(collapsed)}
|
||||
</aside>
|
||||
<Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
|
||||
<SheetContent side="left" className="flex w-72 flex-col p-0 md:hidden">
|
||||
<SheetHeader className="border-b px-4 py-4 pr-12">
|
||||
<SheetTitle>Project E</SheetTitle>
|
||||
<SheetDescription>Navigate your workspace.</SheetDescription>
|
||||
</SheetHeader>
|
||||
{navigation(false, () => setMobileOpen(false))}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user