feat: split top navbar to align with chat/content panels, fix Gemini API key

- Top bar left section (320px) = logo + project name, aligns with chat panel - Top bar right section = Build|Market|Assist pills + tool icons (Preview, Tasks, Code, Design, Backend) + avatar - Read GOOGLE_API_KEY inside POST handler (not top-level) to ensure env is resolved at request time Made-with: Cursor
2026-03-09 16:17:31 -07:00
parent 1ef3f9baa3
commit 853e41705f
2 changed files with 125 additions and 56 deletions
--- a/app/api/projects/[projectId]/advisor/route.ts
+++ b/app/api/projects/[projectId]/advisor/route.ts
@@ -3,9 +3,7 @@ import { getServerSession } from 'next-auth';
 import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';

-const GOOGLE_API_KEY = process.env.GOOGLE_API_KEY ?? '';
-const MODEL = process.env.GEMINI_MODEL ?? 'gemini-2.0-flash-exp';
-const STREAM_URL = `https://generativelanguage.googleapis.com/v1beta/models/${MODEL}:streamGenerateContent?key=${GOOGLE_API_KEY}&alt=sse`;
+const MODEL = process.env.GEMINI_MODEL ?? 'gemini-2.0-flash';

 function buildSystemPrompt(projectData: Record<string, unknown>): string {
  const name = (projectData.name as string) ?? 'this project';
@@ -57,6 +55,9 @@ export async function POST(
    return new Response('Unauthorized', { status: 401 });
  }

+  const GOOGLE_API_KEY = process.env.GOOGLE_API_KEY ?? '';
+  const STREAM_URL = `https://generativelanguage.googleapis.com/v1beta/models/${MODEL}:streamGenerateContent?key=${GOOGLE_API_KEY}&alt=sse`;
+
  if (!GOOGLE_API_KEY) {
    return new Response('GOOGLE_API_KEY not configured', { status: 500 });
  }
--- a/components/layout/project-shell.tsx
+++ b/components/layout/project-shell.tsx
@@ -23,12 +23,24 @@ interface ProjectShellProps {
  creationMode?: "fresh" | "chat-import" | "code-import" | "migration";
 }

-const TOP_NAV = [
+// Width of the left chat panel — must match in both the header and the body
+const CHAT_W = 320;
+
+const SECTIONS = [
  { id: "build",  label: "Build",  path: "build" },
  { id: "market", label: "Market", path: "growth" },
  { id: "assist", label: "Assist", path: "assist" },
 ] as const;

+// Tool icons shown to the right of section pills
+const TOOLS = [
+  { id: "preview",  icon: "↗",  label: "Preview",    title: "Open preview" },
+  { id: "tasks",    icon: "≡",  label: "Tasks",      title: "Agent tasks" },
+  { id: "code",     icon: "</>", label: "Code",      title: "Code" },
+  { id: "design",   icon: "◈",  label: "Design",     title: "Design" },
+  { id: "backend",  icon: "⬡",  label: "Backend",    title: "Backend / Infra" },
+] as const;
+
 export function ProjectShell({
  children,
  workspace,
@@ -44,70 +56,126 @@ export function ProjectShell({
    pathname?.includes("/assist") ? "assist" :
    "build";

-  const userInitial = (session?.user?.name?.[0] ?? session?.user?.email?.[0] ?? "?").toUpperCase();
+  const userInitial = (
+    session?.user?.name?.[0] ?? session?.user?.email?.[0] ?? "?"
+  ).toUpperCase();

  return (
    <>
-      <div style={{ display: "flex", flexDirection: "column", height: "100dvh", background: "#f6f4f0", overflow: "hidden", fontFamily: "Outfit, sans-serif" }}>
+      <div style={{
+        display: "flex", flexDirection: "column",
+        height: "100dvh", overflow: "hidden",
+        fontFamily: "Outfit, sans-serif",
+        background: "#f6f4f0",
+      }}>

-        {/* ── Top navbar ── */}
+        {/* ── Top bar — split to align with panels below ── */}
        <header style={{
          height: 48, flexShrink: 0,
+          display: "flex", alignItems: "stretch",
          background: "#fff", borderBottom: "1px solid #e8e4dc",
-          display: "flex", alignItems: "center",
-          padding: "0 16px", gap: 0, zIndex: 10,
+          zIndex: 10,
        }}>
-          {/* Left: logo + project name */}
-          <Link href={`/${workspace}/projects`} style={{ display: "flex", alignItems: "center", gap: 8, textDecoration: "none", flexShrink: 0, marginRight: 20 }}>
+
+          {/* Left section — aligns with chat panel */}
+          <div style={{
+            width: CHAT_W, flexShrink: 0,
+            display: "flex", alignItems: "center",
+            padding: "0 14px", gap: 9,
+            borderRight: "1px solid #e8e4dc",
+          }}>
+            <Link
+              href={`/${workspace}/projects`}
+              style={{ display: "flex", alignItems: "center", gap: 8, textDecoration: "none", flexShrink: 0 }}
+            >
              <div style={{ width: 22, height: 22, borderRadius: 6, overflow: "hidden", flexShrink: 0 }}>
                <img src="/vibn-black-circle-logo.png" alt="VIBN" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
            </Link>

-          <div style={{ fontSize: "0.82rem", fontWeight: 600, color: "#1a1a1a", maxWidth: 180, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flexShrink: 0, marginRight: 24 }}>
+            <span style={{
+              fontSize: "0.82rem", fontWeight: 600, color: "#1a1a1a",
+              overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1,
+            }}>
              {projectName}
+            </span>
          </div>

-          <div style={{ width: 1, height: 18, background: "#e8e4dc", flexShrink: 0, marginRight: 24 }} />
+          {/* Right section — aligns with content panel */}
+          <div style={{
+            flex: 1, display: "flex", alignItems: "center",
+            padding: "0 16px", gap: 0, minWidth: 0,
+          }}>

-          {/* Center: section tabs */}
-          <div style={{ display: "flex", alignItems: "center", gap: 2, flex: 1 }}>
-            {TOP_NAV.map(item => {
-              const isActive = activeSection === item.id;
+            {/* Section pills: Build | Market | Assist */}
+            <div style={{ display: "flex", alignItems: "center", gap: 2, marginRight: "auto" }}>
+              {SECTIONS.map(s => {
+                const isActive = activeSection === s.id;
                return (
                  <Link
-                  key={item.id}
-                  href={`/${workspace}/project/${projectId}/${item.path}`}
+                    key={s.id}
+                    href={`/${workspace}/project/${projectId}/${s.path}`}
                    style={{
-                    padding: "5px 14px",
+                      padding: "5px 13px",
                      borderRadius: 8,
                      fontSize: "0.8rem",
-                    fontWeight: isActive ? 600 : 450,
+                      fontWeight: isActive ? 600 : 440,
                      color: isActive ? "#1a1a1a" : "#8a8478",
                      background: isActive ? "#f0ece4" : "transparent",
                      textDecoration: "none",
-                    transition: "all 0.1s",
+                      transition: "background 0.1s, color 0.1s",
                      whiteSpace: "nowrap",
                    }}
                    onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
                    onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
                  >
-                  {item.label}
+                    {s.label}
                  </Link>
                );
              })}
            </div>

-          {/* Right: user avatar */}
-          <div style={{ display: "flex", alignItems: "center", gap: 10, flexShrink: 0 }}>
+            {/* Divider */}
+            <div style={{ width: 1, height: 18, background: "#e8e4dc", margin: "0 14px", flexShrink: 0 }} />
+
+            {/* Tool icons */}
+            <div style={{ display: "flex", alignItems: "center", gap: 2, marginRight: 12 }}>
+              {TOOLS.map(t => (
+                <button
+                  key={t.id}
+                  title={t.title}
+                  style={{
+                    width: 32, height: 32, border: "none", borderRadius: 7,
+                    background: "transparent", cursor: "pointer",
+                    display: "flex", alignItems: "center", justifyContent: "center",
+                    fontSize: t.icon === "</>" ? "0.6rem" : "0.78rem",
+                    color: "#9a9490", fontFamily: "Outfit, sans-serif",
+                    fontWeight: 600, letterSpacing: t.icon === "</>" ? "-0.02em" : "normal",
+                    transition: "background 0.1s, color 0.1s",
+                  }}
+                  onMouseEnter={e => {
+                    (e.currentTarget as HTMLElement).style.background = "#f0ece4";
+                    (e.currentTarget as HTMLElement).style.color = "#1a1a1a";
+                  }}
+                  onMouseLeave={e => {
+                    (e.currentTarget as HTMLElement).style.background = "transparent";
+                    (e.currentTarget as HTMLElement).style.color = "#9a9490";
+                  }}
+                >
+                  {t.icon}
+                </button>
+              ))}
+            </div>
+
+            {/* User avatar */}
            <button
              onClick={() => signOut({ callbackUrl: "/auth" })}
-              title="Sign out"
+              title={`${session?.user?.name ?? session?.user?.email ?? "Account"} — Sign out`}
              style={{
-                width: 30, height: 30, borderRadius: "50%",
+                width: 28, height: 28, borderRadius: "50%",
                background: "#f0ece4", border: "none", cursor: "pointer",
                display: "flex", alignItems: "center", justifyContent: "center",
-                fontSize: "0.68rem", fontWeight: 600, color: "#6b6560",
+                fontSize: "0.65rem", fontWeight: 700, color: "#6b6560", flexShrink: 0,
              }}
            >
              {userInitial}
@@ -118,9 +186,9 @@ export function ProjectShell({
        {/* ── Main area ── */}
        <div style={{ flex: 1, display: "flex", overflow: "hidden" }}>

-          {/* Left: COO / Assist — persistent across all sections */}
+          {/* Left: Assist chat — persistent */}
          <div style={{
-            width: 320, flexShrink: 0,
+            width: CHAT_W, flexShrink: 0,
            borderRight: "1px solid #e8e4dc",
            background: "#fff",
            display: "flex", flexDirection: "column",
@@ -136,20 +204,20 @@ export function ProjectShell({
            }}>
              <span style={{
                width: 22, height: 22, borderRadius: 6,
-                background: "#1a1a1a", display: "flex",
-                alignItems: "center", justifyContent: "center",
-                fontSize: "0.55rem", color: "#fff", flexShrink: 0,
+                background: "#1a1a1a",
+                display: "flex", alignItems: "center", justifyContent: "center",
+                fontSize: "0.52rem", color: "#fff", flexShrink: 0,
              }}>◈</span>
              <div>
-                <div style={{ fontSize: "0.75rem", fontWeight: 600, color: "#1a1a1a" }}>Assist</div>
-                <div style={{ fontSize: "0.58rem", color: "#a09a90", letterSpacing: "0.03em" }}>Your product COO</div>
+                <div style={{ fontSize: "0.74rem", fontWeight: 600, color: "#1a1a1a" }}>Assist</div>
+                <div style={{ fontSize: "0.57rem", color: "#a09a90", letterSpacing: "0.03em" }}>Your product COO</div>
              </div>
            </div>

            <CooChat projectId={projectId} />
          </div>

-          {/* Right: page content — changes with top nav */}
+          {/* Right: content — changes per section */}
          <div style={{ flex: 1, overflow: "hidden", minWidth: 0 }}>
            {children}
          </div>