feat: top navbar (Build|Market|Assist) + persistent Assist chat in shell
- New top navbar in ProjectShell: logo + project name | Build | Market | Assist tabs | user avatar — replaces the left icon sidebar for project pages - CooChat extracted to components/layout/coo-chat.tsx and moved into the shell so it persists across Build/Market/Assist route changes - Build page inner layout simplified: inner nav (200px) + file viewer, no longer owns the chat column - Layout: [top nav 48px] / [Assist chat 320px | content flex] Made-with: Cursor
This commit is contained in:
@@ -2,7 +2,9 @@
|
||||
|
||||
import { usePathname } from "next/navigation";
|
||||
import { ReactNode } from "react";
|
||||
import { VIBNSidebar } from "./vibn-sidebar";
|
||||
import Link from "next/link";
|
||||
import { signOut, useSession } from "next-auth/react";
|
||||
import { CooChat } from "./coo-chat";
|
||||
import { Toaster } from "sonner";
|
||||
|
||||
interface ProjectShellProps {
|
||||
@@ -21,59 +23,136 @@ interface ProjectShellProps {
|
||||
creationMode?: "fresh" | "chat-import" | "code-import" | "migration";
|
||||
}
|
||||
|
||||
const ALL_TABS = [
|
||||
{ id: "overview", label: "Atlas", path: "overview" },
|
||||
{ id: "prd", label: "PRD", path: "prd" },
|
||||
{ id: "build", label: "Build", path: "build" },
|
||||
{ id: "growth", label: "Growth", path: "growth" },
|
||||
{ id: "assist", label: "Assist", path: "assist" },
|
||||
{ id: "analytics", label: "Analytics", path: "analytics" },
|
||||
];
|
||||
|
||||
function getTabsForMode(
|
||||
mode: "fresh" | "chat-import" | "code-import" | "migration" = "fresh"
|
||||
) {
|
||||
switch (mode) {
|
||||
case "code-import":
|
||||
return ALL_TABS.filter(t => t.id !== "prd");
|
||||
case "migration":
|
||||
return ALL_TABS
|
||||
.filter(t => t.id !== "prd")
|
||||
.map(t => t.id === "overview" ? { ...t, label: "Migration Plan" } : t);
|
||||
default:
|
||||
return ALL_TABS;
|
||||
}
|
||||
}
|
||||
const TOP_NAV = [
|
||||
{ id: "build", label: "Build", path: "build" },
|
||||
{ id: "market", label: "Market", path: "growth" },
|
||||
{ id: "assist", label: "Assist", path: "assist" },
|
||||
] as const;
|
||||
|
||||
export function ProjectShell({
|
||||
children,
|
||||
workspace,
|
||||
projectId,
|
||||
creationMode,
|
||||
projectName,
|
||||
}: ProjectShellProps) {
|
||||
const pathname = usePathname();
|
||||
const TABS = getTabsForMode(creationMode);
|
||||
const activeTab = TABS.find(t => pathname?.includes(`/${t.path}`))?.id ?? "overview";
|
||||
const { data: session } = useSession();
|
||||
|
||||
const activeSection =
|
||||
pathname?.includes("/build") ? "build" :
|
||||
pathname?.includes("/growth") ? "market" :
|
||||
pathname?.includes("/assist") ? "assist" :
|
||||
"build";
|
||||
|
||||
const userInitial = (session?.user?.name?.[0] ?? session?.user?.email?.[0] ?? "?").toUpperCase();
|
||||
|
||||
return (
|
||||
<>
|
||||
<style>{`
|
||||
@media (max-width: 768px) {
|
||||
.vibn-left-sidebar { display: none !important; }
|
||||
.vibn-page-content { padding-bottom: env(safe-area-inset-bottom); }
|
||||
}
|
||||
`}</style>
|
||||
<div style={{ display: "flex", flexDirection: "column", height: "100dvh", background: "#f6f4f0", overflow: "hidden", fontFamily: "Outfit, sans-serif" }}>
|
||||
|
||||
<div style={{ display: "flex", height: "100dvh", background: "#f6f4f0", overflow: "hidden" }}>
|
||||
{/* ── Top navbar ── */}
|
||||
<header style={{
|
||||
height: 48, flexShrink: 0,
|
||||
background: "#fff", borderBottom: "1px solid #e8e4dc",
|
||||
display: "flex", alignItems: "center",
|
||||
padding: "0 16px", gap: 0, zIndex: 10,
|
||||
}}>
|
||||
{/* Left: logo + project name */}
|
||||
<Link href={`/${workspace}/projects`} style={{ display: "flex", alignItems: "center", gap: 8, textDecoration: "none", flexShrink: 0, marginRight: 20 }}>
|
||||
<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>
|
||||
|
||||
{/* Left sidebar — includes project tabs */}
|
||||
<div className="vibn-left-sidebar" style={{ display: "flex" }}>
|
||||
<VIBNSidebar workspace={workspace} tabs={TABS} activeTab={activeTab} />
|
||||
</div>
|
||||
<div style={{ fontSize: "0.82rem", fontWeight: 600, color: "#1a1a1a", maxWidth: 180, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flexShrink: 0, marginRight: 24 }}>
|
||||
{projectName}
|
||||
</div>
|
||||
|
||||
{/* Page content — extends to the very top */}
|
||||
<div className="vibn-page-content" style={{ flex: 1, overflow: "auto", minWidth: 0 }}>
|
||||
{children}
|
||||
<div style={{ width: 1, height: 18, background: "#e8e4dc", flexShrink: 0, marginRight: 24 }} />
|
||||
|
||||
{/* Center: section tabs */}
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 2, flex: 1 }}>
|
||||
{TOP_NAV.map(item => {
|
||||
const isActive = activeSection === item.id;
|
||||
return (
|
||||
<Link
|
||||
key={item.id}
|
||||
href={`/${workspace}/project/${projectId}/${item.path}`}
|
||||
style={{
|
||||
padding: "5px 14px",
|
||||
borderRadius: 8,
|
||||
fontSize: "0.8rem",
|
||||
fontWeight: isActive ? 600 : 450,
|
||||
color: isActive ? "#1a1a1a" : "#8a8478",
|
||||
background: isActive ? "#f0ece4" : "transparent",
|
||||
textDecoration: "none",
|
||||
transition: "all 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}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Right: user avatar */}
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 10, flexShrink: 0 }}>
|
||||
<button
|
||||
onClick={() => signOut({ callbackUrl: "/auth" })}
|
||||
title="Sign out"
|
||||
style={{
|
||||
width: 30, height: 30, borderRadius: "50%",
|
||||
background: "#f0ece4", border: "none", cursor: "pointer",
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
fontSize: "0.68rem", fontWeight: 600, color: "#6b6560",
|
||||
}}
|
||||
>
|
||||
{userInitial}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* ── Main area ── */}
|
||||
<div style={{ flex: 1, display: "flex", overflow: "hidden" }}>
|
||||
|
||||
{/* Left: COO / Assist — persistent across all sections */}
|
||||
<div style={{
|
||||
width: 320, flexShrink: 0,
|
||||
borderRight: "1px solid #e8e4dc",
|
||||
background: "#fff",
|
||||
display: "flex", flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
}}>
|
||||
{/* Chat header */}
|
||||
<div style={{
|
||||
height: 44, flexShrink: 0,
|
||||
display: "flex", alignItems: "center",
|
||||
padding: "0 14px", gap: 8,
|
||||
borderBottom: "1px solid #e8e4dc",
|
||||
background: "#faf8f5",
|
||||
}}>
|
||||
<span style={{
|
||||
width: 22, height: 22, borderRadius: 6,
|
||||
background: "#1a1a1a", display: "flex",
|
||||
alignItems: "center", justifyContent: "center",
|
||||
fontSize: "0.55rem", 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>
|
||||
</div>
|
||||
|
||||
<CooChat projectId={projectId} />
|
||||
</div>
|
||||
|
||||
{/* Right: page content — changes with top nav */}
|
||||
<div style={{ flex: 1, overflow: "hidden", minWidth: 0 }}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user