revert: restore Atlas|PRD|Build|Growth|Assist|Analytics tab nav, remove COO sidebar
- SECTIONS back to 6 tabs: Atlas → /overview, PRD, Build, Growth, Assist, Analytics - Remove persistent CooChat left panel and drag-resize handle - Content area is now full-width again (no 320px sidebar eating space) - Clean up unused imports (useSearchParams, useRouter, CooChat, Lucide icons, TOOLS constant) Made-with: Cursor
This commit is contained in:
@@ -1,12 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { usePathname, useSearchParams, useRouter } from "next/navigation";
|
||||
import { ReactNode, Suspense, useRef, useState, useCallback } from "react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { ReactNode, Suspense } from "react";
|
||||
import Link from "next/link";
|
||||
import { signOut, useSession } from "next-auth/react";
|
||||
import { CooChat } from "./coo-chat";
|
||||
import { Toaster } from "sonner";
|
||||
import { MonitorPlay, ListChecks, Code2, Palette, Cloud } from "lucide-react";
|
||||
|
||||
interface ProjectShellProps {
|
||||
children: ReactNode;
|
||||
@@ -24,33 +22,15 @@ interface ProjectShellProps {
|
||||
creationMode?: "fresh" | "chat-import" | "code-import" | "migration";
|
||||
}
|
||||
|
||||
const CHAT_W_DEFAULT = 320;
|
||||
const CHAT_W_MIN = 200;
|
||||
const CHAT_W_MAX = 560;
|
||||
|
||||
const SECTIONS = [
|
||||
{ id: "build", label: "Build", path: "build" },
|
||||
{ id: "market", label: "Market", path: "growth" },
|
||||
{ id: "assist", label: "Assist", path: "assist" },
|
||||
{ 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" },
|
||||
] as const;
|
||||
|
||||
// Each tool maps to a section param on the build page
|
||||
const TOOLS = [
|
||||
{ id: "tasks", Icon: ListChecks, title: "Tasks", section: "tasks" },
|
||||
{ id: "preview", Icon: MonitorPlay, title: "Preview", section: "preview" },
|
||||
{ id: "code", Icon: Code2, title: "Code", section: "code" },
|
||||
{ id: "design", Icon: Palette, title: "Design", section: "layouts" },
|
||||
{ id: "backend", Icon: Cloud, title: "Backend", section: "infrastructure" },
|
||||
];
|
||||
|
||||
// Maps URL section → tool id (for active highlight)
|
||||
const SECTION_TO_TOOL: Record<string, string> = {
|
||||
preview: "preview",
|
||||
tasks: "tasks",
|
||||
code: "code",
|
||||
layouts: "design",
|
||||
infrastructure: "backend",
|
||||
};
|
||||
|
||||
function ProjectShellInner({
|
||||
children,
|
||||
@@ -59,56 +39,21 @@ function ProjectShellInner({
|
||||
projectName,
|
||||
}: ProjectShellProps) {
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const { data: session } = useSession();
|
||||
|
||||
const [chatWidth, setChatWidth] = useState(CHAT_W_DEFAULT);
|
||||
const dragging = useRef(false);
|
||||
const startX = useRef(0);
|
||||
const startW = useRef(0);
|
||||
|
||||
const onDragStart = useCallback((e: React.MouseEvent) => {
|
||||
dragging.current = true;
|
||||
startX.current = e.clientX;
|
||||
startW.current = chatWidth;
|
||||
document.body.style.cursor = "col-resize";
|
||||
document.body.style.userSelect = "none";
|
||||
|
||||
const onMove = (e: MouseEvent) => {
|
||||
if (!dragging.current) return;
|
||||
const delta = e.clientX - startX.current;
|
||||
setChatWidth(Math.min(CHAT_W_MAX, Math.max(CHAT_W_MIN, startW.current + delta)));
|
||||
};
|
||||
const onUp = () => {
|
||||
dragging.current = false;
|
||||
document.body.style.cursor = "";
|
||||
document.body.style.userSelect = "";
|
||||
document.removeEventListener("mousemove", onMove);
|
||||
document.removeEventListener("mouseup", onUp);
|
||||
};
|
||||
document.addEventListener("mousemove", onMove);
|
||||
document.addEventListener("mouseup", onUp);
|
||||
}, [chatWidth]);
|
||||
|
||||
const activeSection =
|
||||
pathname?.includes("/build") ? "build" :
|
||||
pathname?.includes("/growth") ? "market" :
|
||||
pathname?.includes("/assist") ? "assist" :
|
||||
"build";
|
||||
|
||||
const urlSection = searchParams.get("section") ?? "code";
|
||||
const activeTool = SECTION_TO_TOOL[urlSection] ?? "code";
|
||||
pathname?.includes("/overview") ? "overview" :
|
||||
pathname?.includes("/prd") ? "prd" :
|
||||
pathname?.includes("/build") ? "build" :
|
||||
pathname?.includes("/growth") ? "growth" :
|
||||
pathname?.includes("/assist") ? "assist" :
|
||||
pathname?.includes("/analytics") ? "analytics" :
|
||||
"overview";
|
||||
|
||||
const userInitial = (
|
||||
session?.user?.name?.[0] ?? session?.user?.email?.[0] ?? "?"
|
||||
).toUpperCase();
|
||||
|
||||
const handleToolClick = (toolSection: string) => {
|
||||
// Always navigate to the build page with the appropriate section
|
||||
router.push(`/${workspace}/project/${projectId}/build?section=${toolSection}`, { scroll: false });
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{
|
||||
@@ -126,11 +71,10 @@ function ProjectShellInner({
|
||||
zIndex: 10,
|
||||
}}>
|
||||
|
||||
{/* Left — aligns with chat panel */}
|
||||
{/* Logo + project name */}
|
||||
<div style={{
|
||||
width: chatWidth, flexShrink: 0,
|
||||
display: "flex", alignItems: "center",
|
||||
padding: "0 14px", gap: 9,
|
||||
padding: "0 16px", gap: 9, flexShrink: 0,
|
||||
borderRight: "1px solid #e8e4dc",
|
||||
}}>
|
||||
<Link
|
||||
@@ -143,86 +87,37 @@ function ProjectShellInner({
|
||||
</Link>
|
||||
<span style={{
|
||||
fontSize: "0.82rem", fontWeight: 600, color: "#1a1a1a",
|
||||
overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1,
|
||||
maxWidth: 160, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
|
||||
}}>
|
||||
{projectName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Right — aligns with content panel */}
|
||||
<div style={{
|
||||
flex: 1, display: "flex", alignItems: "center",
|
||||
padding: "0 14px", gap: 0, minWidth: 0,
|
||||
}}>
|
||||
|
||||
{/* Pills + tool icons grouped together */}
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 2 }}>
|
||||
|
||||
{/* Section pills: Build | Market | Assist */}
|
||||
{SECTIONS.map(s => {
|
||||
const isActive = activeSection === s.id;
|
||||
return (
|
||||
<Link
|
||||
key={s.id}
|
||||
href={`/${workspace}/project/${projectId}/${s.path}`}
|
||||
style={{
|
||||
padding: "5px 12px",
|
||||
borderRadius: 8,
|
||||
fontSize: "0.8rem",
|
||||
fontWeight: isActive ? 600 : 440,
|
||||
color: isActive ? "#1a1a1a" : "#8a8478",
|
||||
background: isActive ? "#f0ece4" : "transparent",
|
||||
textDecoration: "none",
|
||||
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"; }}
|
||||
>
|
||||
{s.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Divider */}
|
||||
<div style={{ width: 1, height: 16, background: "#e8e4dc", margin: "0 6px", flexShrink: 0 }} />
|
||||
|
||||
{/* Tool icons — toggle the main content view */}
|
||||
{TOOLS.map(({ id, Icon, title, section }) => {
|
||||
const isActive = activeTool === id;
|
||||
return (
|
||||
<button
|
||||
key={id}
|
||||
title={title}
|
||||
onClick={() => handleToolClick(section)}
|
||||
style={{
|
||||
width: 32, height: 32,
|
||||
border: isActive ? "1.5px solid #d4cfc6" : "1.5px solid transparent",
|
||||
borderRadius: 8,
|
||||
background: isActive ? "#f0ece4" : "transparent",
|
||||
cursor: "pointer",
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
color: isActive ? "#1a1a1a" : "#9a9490",
|
||||
transition: "all 0.1s",
|
||||
}}
|
||||
onMouseEnter={e => {
|
||||
if (!isActive) {
|
||||
(e.currentTarget as HTMLElement).style.background = "#f6f4f0";
|
||||
(e.currentTarget as HTMLElement).style.color = "#1a1a1a";
|
||||
}
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
if (!isActive) {
|
||||
(e.currentTarget as HTMLElement).style.background = "transparent";
|
||||
(e.currentTarget as HTMLElement).style.color = "#9a9490";
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon size={15} strokeWidth={isActive ? 2 : 1.75} />
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{/* Tab nav */}
|
||||
<div style={{ flex: 1, display: "flex", alignItems: "center", padding: "0 12px", gap: 2 }}>
|
||||
{SECTIONS.map(s => {
|
||||
const isActive = activeSection === s.id;
|
||||
return (
|
||||
<Link
|
||||
key={s.id}
|
||||
href={`/${workspace}/project/${projectId}/${s.path}`}
|
||||
style={{
|
||||
padding: "5px 12px", borderRadius: 8,
|
||||
fontSize: "0.8rem",
|
||||
fontWeight: isActive ? 600 : 440,
|
||||
color: isActive ? "#1a1a1a" : "#8a8478",
|
||||
background: isActive ? "#f0ece4" : "transparent",
|
||||
textDecoration: "none",
|
||||
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"; }}
|
||||
>
|
||||
{s.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Spacer */}
|
||||
<div style={{ flex: 1 }} />
|
||||
@@ -243,56 +138,9 @@ function ProjectShellInner({
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* ── Main area ── */}
|
||||
<div style={{ flex: 1, display: "flex", overflow: "hidden" }}>
|
||||
|
||||
{/* Left: Assist chat — persistent */}
|
||||
<div style={{
|
||||
width: chatWidth, flexShrink: 0,
|
||||
background: "#fff",
|
||||
display: "flex", flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
position: "relative",
|
||||
}}>
|
||||
<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.52rem", color: "#fff", flexShrink: 0,
|
||||
}}>◈</span>
|
||||
<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>
|
||||
|
||||
{/* Drag handle */}
|
||||
<div
|
||||
onMouseDown={onDragStart}
|
||||
style={{
|
||||
width: 5, flexShrink: 0, cursor: "col-resize",
|
||||
background: "transparent",
|
||||
borderLeft: "1px solid #e8e4dc",
|
||||
transition: "background 0.15s",
|
||||
zIndex: 5,
|
||||
}}
|
||||
onMouseEnter={e => (e.currentTarget.style.background = "#e8e4dc")}
|
||||
onMouseLeave={e => (e.currentTarget.style.background = "transparent")}
|
||||
/>
|
||||
|
||||
{/* Right: content */}
|
||||
<div style={{ flex: 1, overflow: "hidden", minWidth: 0 }}>
|
||||
{children}
|
||||
</div>
|
||||
{/* ── Full-width content ── */}
|
||||
<div style={{ flex: 1, overflow: "hidden" }}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user