"use client"; import { useEffect, useState } from "react"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { signOut, useSession } from "next-auth/react"; interface Project { id: string; productName: string; status?: string; } interface VIBNSidebarProps { workspace: string; } function StatusDot({ status }: { status?: string }) { const color = status === "live" ? "#2e7d32" : status === "building" ? "#3d5afe" : "#d4a04a"; const anim = status === "building" ? "vibn-breathe 2.5s ease infinite" : "none"; return ( ); } const COLLAPSED_KEY = "vibn_sidebar_collapsed"; const COLLAPSED_W = 56; const EXPANDED_W = 220; export function VIBNSidebar({ workspace }: VIBNSidebarProps) { const pathname = usePathname(); const { data: session } = useSession(); const [projects, setProjects] = useState([]); const [collapsed, setCollapsed] = useState(false); const [mounted, setMounted] = useState(false); // Restore collapse state from localStorage useEffect(() => { const stored = localStorage.getItem(COLLAPSED_KEY); if (stored === "1") setCollapsed(true); setMounted(true); }, []); const toggle = () => { setCollapsed(prev => { localStorage.setItem(COLLAPSED_KEY, prev ? "0" : "1"); return !prev; }); }; useEffect(() => { fetch("/api/projects") .then((r) => r.json()) .then((d) => setProjects(d.projects ?? [])) .catch(() => {}); }, []); const activeProjectId = pathname?.match(/\/project\/([^/]+)/)?.[1] ?? null; const isProjects = !activeProjectId && (pathname?.includes("/projects") || pathname?.includes("/project")); const isActivity = !activeProjectId && pathname?.includes("/activity"); const isSettings = !activeProjectId && pathname?.includes("/settings"); const topNavItems = [ { id: "projects", label: "Projects", icon: "⌗", href: `/${workspace}/projects` }, { id: "activity", label: "Activity", icon: "↗", href: `/${workspace}/activity` }, { id: "settings", label: "Settings", icon: "⚙", href: `/${workspace}/settings` }, ]; const userInitial = session?.user?.name?.[0]?.toUpperCase() ?? session?.user?.email?.[0]?.toUpperCase() ?? "?"; const w = collapsed ? COLLAPSED_W : EXPANDED_W; // Don't animate on initial mount (avoid flash) const transition = mounted ? "width 0.2s cubic-bezier(0.4,0,0.2,1)" : "none"; return ( ); }