From 93a2b4a0ac04c83e3f4bf3262d250a66e30817d7 Mon Sep 17 00:00:00 2001 From: Mark Henderson Date: Fri, 6 Mar 2026 17:36:31 -0800 Subject: [PATCH] refactor: strip sidebar down to project name + status only MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Removed all product layer sections (Build, Layouts, Infrastructure, Growth, Monetize, Support, Analytics) from the left sidebar — these are now handled by the in-page left nav inside each tab. Sidebar now shows: logo, Projects/Activity/Settings global nav, project name + colored status dot when inside a project, and the user avatar/sign out at the bottom. Nothing else. Cleaned up all dead code: SectionHeading, SectionRow, SectionDivider, SURFACE_LABELS, SURFACE_ICONS, AppEntry interface, apps state, apps fetch, surfaces/infraApps variables. Made-with: Cursor --- components/layout/vibn-sidebar.tsx | 235 ++--------------------------- 1 file changed, 14 insertions(+), 221 deletions(-) diff --git a/components/layout/vibn-sidebar.tsx b/components/layout/vibn-sidebar.tsx index 964bc43..9372f9e 100644 --- a/components/layout/vibn-sidebar.tsx +++ b/components/layout/vibn-sidebar.tsx @@ -14,104 +14,8 @@ interface ProjectData { productName?: string; name?: string; status?: string; - giteaRepo?: string; - giteaRepoUrl?: string; - surfaces?: string[]; - surfaceThemes?: Record; - apps?: Array<{ name: string; path: string; coolifyServiceUuid?: string | null; domain?: string | null }>; } -interface AppEntry { - name: string; - path: string; -} - -// ── Section helpers ───────────────────────────────────────────────────────── - -function SectionHeading({ label, collapsed }: { label: string; collapsed: boolean }) { - if (collapsed) return null; - return ( -
- {label} -
- ); -} - -function SectionRow({ - icon, label, href, dim, collapsed, -}: { - icon: string; - label: string; - href?: string; - dim?: boolean; - collapsed: boolean; -}) { - const style: React.CSSProperties = { - display: "flex", alignItems: "center", - justifyContent: collapsed ? "center" : "flex-start", - gap: 8, padding: collapsed ? "7px 0" : "5px 12px", - borderRadius: 5, textDecoration: "none", - color: dim ? "#c5c0b8" : "#4a4640", - fontSize: "0.78rem", fontWeight: 450, - transition: "background 0.1s", - width: "100%", boxSizing: "border-box" as const, - }; - - const inner = ( - <> - - {icon} - - {!collapsed && ( - - {label} - - )} - - ); - - if (href) { - return ( - { if (!dim) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }} - onMouseLeave={e => { (e.currentTarget as HTMLElement).style.background = "transparent"; }} - > - {inner} - - ); - } - return ( -
- {inner} -
- ); -} - -function SectionDivider() { - return
; -} - -// ── Surface label map ──────────────────────────────────────────────────────── -const SURFACE_LABELS: Record = { - "marketing": "Marketing site", - "web-app": "Web app", - "admin": "Admin panel", - "api": "API layer", -}; - -const SURFACE_ICONS: Record = { - "marketing": "◎", - "web-app": "⬡", - "admin": "◫", - "api": "⌁", -}; // ── Main sidebar ───────────────────────────────────────────────────────────── @@ -128,13 +32,11 @@ export function VIBNSidebar({ workspace }: VIBNSidebarProps) { // Project-specific data const [project, setProject] = useState(null); - const [apps, setApps] = useState([]); // Global projects list (used when NOT inside a project) const [projects, setProjects] = useState>([]); const activeProjectId = pathname?.match(/\/project\/([^/]+)/)?.[1] ?? null; - const activeTab = pathname?.match(/\/project\/[^/]+\/([^/]+)/)?.[1] ?? null; // Restore collapse state useEffect(() => { @@ -161,17 +63,12 @@ export function VIBNSidebar({ workspace }: VIBNSidebarProps) { // Fetch project-specific data when inside a project useEffect(() => { - if (!activeProjectId) { setProject(null); setApps([]); return; } + if (!activeProjectId) { setProject(null); return; } fetch(`/api/projects/${activeProjectId}`) .then(r => r.json()) .then(d => setProject(d.project ?? null)) .catch(() => {}); - - fetch(`/api/projects/${activeProjectId}/apps`) - .then(r => r.json()) - .then(d => setApps(d.apps ?? [])) - .catch(() => {}); }, [activeProjectId]); const isProjects = !activeProjectId && (pathname?.includes("/projects") || pathname?.includes("/project")); @@ -193,11 +90,6 @@ export function VIBNSidebar({ workspace }: VIBNSidebarProps) { const base = `/${workspace}/project/${activeProjectId}`; - // Surfaces locked in on design page - const surfaces = project?.surfaces ?? []; - // Coolify/monorepo apps - const infraApps = project?.apps ?? []; - return (