move project tabs to sidebar, remove top tab bar

Made-with: Cursor

components/layout/project-shell.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { ReactNode } from "react";
 import { VIBNSidebar } from "./vibn-sidebar";
@@ -61,61 +60,20 @@ export function ProjectShell({
       <style>{`
         @media (max-width: 768px) {
           .vibn-left-sidebar { display: none !important; }
-          .vibn-tab-bar      { overflow-x: auto; -webkit-overflow-scrolling: touch; }
-          .vibn-tab-bar a    { padding: 10px 14px !important; font-size: 0.75rem !important; }
           .vibn-page-content { padding-bottom: env(safe-area-inset-bottom); }
         }
-        @media (max-width: 480px) {
-          .vibn-tab-bar a    { padding: 10px 10px !important; }
-        }
       `}</style>
 
       <div style={{ display: "flex", height: "100dvh", background: "#f6f4f0", overflow: "hidden" }}>
 
-        {/* Left sidebar */}
+        {/* Left sidebar — includes project tabs */}
         <div className="vibn-left-sidebar" style={{ display: "flex" }}>
-          <VIBNSidebar workspace={workspace} />
+          <VIBNSidebar workspace={workspace} tabs={TABS} activeTab={activeTab} />
         </div>
 
-        {/* Main column — full width */}
-        <div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}>
-
-          {/* Tab bar — sits at the top, no header above it */}
-          <div className="vibn-tab-bar" style={{
-            padding: "0 24px",
-            borderBottom: "1px solid #e8e4dc",
-            display: "flex",
-            background: "#fff",
-            flexShrink: 0,
-          }}>
-            {TABS.map(t => (
-              <Link
-                key={t.id}
-                href={`/${workspace}/project/${projectId}/${t.path}`}
-                style={{
-                  padding: "13px 16px",
-                  fontSize: "0.8rem",
-                  fontWeight: 500,
-                  color: activeTab === t.id ? "#1a1a1a" : "#a09a90",
-                  borderBottom: activeTab === t.id ? "2px solid #1a1a1a" : "2px solid transparent",
-                  transition: "color 0.12s",
-                  fontFamily: "Outfit, sans-serif",
-                  textDecoration: "none",
-                  display: "block",
-                  whiteSpace: "nowrap",
-                }}
-                onMouseEnter={e => { if (activeTab !== t.id) (e.currentTarget as HTMLElement).style.color = "#6b6560"; }}
-                onMouseLeave={e => { if (activeTab !== t.id) (e.currentTarget as HTMLElement).style.color = "#a09a90"; }}
-              >
-                {t.label}
-              </Link>
-            ))}
-          </div>
-
-          {/* Page content — full width, each page manages its own layout */}
-          <div className="vibn-page-content" style={{ flex: 1, overflow: "auto" }}>
-            {children}
-          </div>
+        {/* Page content — extends to the very top */}
+        <div className="vibn-page-content" style={{ flex: 1, overflow: "auto", minWidth: 0 }}>
+          {children}
         </div>
       </div>