VIBN Frontend for Coolify deployment

components/sidebar/project-sidebar.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import {
+  LayoutDashboard,
+  Activity,
+  Box,
+  Map,
+  FileCode,
+  BarChart3,
+  Settings,
+  HelpCircle,
+} from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { Button } from "@/components/ui/button";
+
+interface ProjectSidebarProps {
+  projectId: string;
+}
+
+const menuItems = [
+  {
+    title: "Overview",
+    icon: LayoutDashboard,
+    href: "/overview",
+    description: "Project dashboard and stats",
+  },
+  {
+    title: "Sessions",
+    icon: Activity,
+    href: "/sessions",
+    description: "AI coding sessions",
+  },
+  {
+    title: "Features",
+    icon: Box,
+    href: "/features",
+    description: "Feature planning and tracking",
+  },
+  {
+    title: "API Map",
+    icon: Map,
+    href: "/api-map",
+    description: "Auto-generated API docs",
+  },
+  {
+    title: "Architecture",
+    icon: FileCode,
+    href: "/architecture",
+    description: "Living architecture docs",
+  },
+  {
+    title: "Analytics",
+    icon: BarChart3,
+    href: "/analytics",
+    description: "Costs and metrics",
+  },
+];
+
+export function ProjectSidebar({ projectId }: ProjectSidebarProps) {
+  const pathname = usePathname();
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Project Header */}
+      <div className="flex h-14 items-center justify-between border-b px-4">
+        <div>
+          <h2 className="text-lg font-semibold">AI Proxy</h2>
+          <p className="text-xs text-muted-foreground">Project Dashboard</p>
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <ScrollArea className="flex-1 px-3 py-4">
+        <div className="space-y-1">
+          {menuItems.map((item) => {
+            const href = `/${projectId}${item.href}`;
+            const isActive = pathname === href;
+
+            return (
+              <Link
+                key={item.href}
+                href={href}
+                className={cn(
+                  "group flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-all hover:bg-accent",
+                  isActive
+                    ? "bg-accent text-accent-foreground font-medium"
+                    : "text-muted-foreground hover:text-accent-foreground"
+                )}
+                title={item.description}
+              >
+                <item.icon className="h-4 w-4 shrink-0" />
+                <span className="truncate">{item.title}</span>
+              </Link>
+            );
+          })}
+        </div>
+
+        <Separator className="my-4" />
+
+        {/* Settings Section */}
+        <div className="space-y-1">
+          <Link
+            href={`/${projectId}/settings`}
+            className="flex items-center gap-3 rounded-md px-3 py-2 text-sm text-muted-foreground transition-all hover:bg-accent hover:text-accent-foreground"
+          >
+            <Settings className="h-4 w-4" />
+            <span>Settings</span>
+          </Link>
+        </div>
+      </ScrollArea>
+
+      {/* Footer */}
+      <div className="flex h-14 items-center justify-between border-t px-4">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <span>v1.0.0</span>
+          <Separator orientation="vertical" className="h-4" />
+          <span>Powered by AI</span>
+        </div>
+        <Button variant="ghost" size="icon" className="h-8 w-8">
+          <HelpCircle className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+