feat: tool icons drive left nav section, remove inner pills
Made-with: Cursor
This commit is contained in:
@@ -978,39 +978,15 @@ function BuildHubInner() {
|
||||
router.push(`/${workspace}/project/${projectId}/build?${sp.toString()}`, { scroll: false });
|
||||
};
|
||||
|
||||
const setSection = (s: string) => router.push(`/${workspace}/project/${projectId}/build?section=${s}`, { scroll: false });
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", height: "100%", fontFamily: "Outfit, sans-serif", overflow: "hidden" }}>
|
||||
|
||||
{/* ── Build content ── */}
|
||||
<div style={{ flex: 1, display: "flex", overflow: "hidden", minWidth: 0 }}>
|
||||
|
||||
{/* Inner nav — Build section switcher + contextual items */}
|
||||
{/* Inner nav — contextual items driven by top-bar tool icon */}
|
||||
<div style={{ width: 200, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", flexDirection: "column", overflow: "hidden" }}>
|
||||
|
||||
{/* Build pills */}
|
||||
<div style={{ padding: "10px 12px 9px", flexShrink: 0, borderBottom: "1px solid #f0ece4" }}>
|
||||
<div style={{ fontSize: "0.57rem", fontWeight: 700, color: "#b5b0a6", letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 7, fontFamily: "Outfit, sans-serif" }}>Build</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
|
||||
{(["code", "layouts", "infrastructure"] as const).map(s => (
|
||||
<button key={s} onClick={() => setSection(s)} style={{
|
||||
display: "flex", alignItems: "center", gap: 8,
|
||||
padding: "6px 10px", border: "none", borderRadius: 7,
|
||||
fontSize: "0.76rem", fontWeight: section === s ? 600 : 440,
|
||||
cursor: "pointer", fontFamily: "Outfit, sans-serif", textAlign: "left",
|
||||
background: section === s ? "#f0ece4" : "transparent",
|
||||
color: section === s ? "#1a1a1a" : "#5a5550",
|
||||
}}>
|
||||
<span style={{ fontSize: "0.65rem", opacity: 0.6 }}>
|
||||
{s === "code" ? "<>" : s === "layouts" ? "▢" : "⬡"}
|
||||
</span>
|
||||
{s === "code" ? "Code" : s === "layouts" ? "Layouts" : "Infrastructure"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Code: app list + file tree */}
|
||||
{section === "code" && (
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { usePathname } from "next/navigation";
|
||||
import { ReactNode, useState } from "react";
|
||||
import { usePathname, useSearchParams, useRouter } 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";
|
||||
@@ -32,23 +32,34 @@ const SECTIONS = [
|
||||
{ id: "assist", label: "Assist", path: "assist" },
|
||||
] as const;
|
||||
|
||||
// Each tool maps to a section param on the build page
|
||||
const TOOLS = [
|
||||
{ id: "preview", Icon: MonitorPlay, title: "Preview" },
|
||||
{ id: "tasks", Icon: ListChecks, title: "Tasks" },
|
||||
{ id: "code", Icon: Code2, title: "Code" },
|
||||
{ id: "design", Icon: Palette, title: "Design" },
|
||||
{ id: "backend", Icon: Cloud, title: "Backend" },
|
||||
{ id: "preview", Icon: MonitorPlay, title: "Preview", section: "preview" },
|
||||
{ id: "tasks", Icon: ListChecks, title: "Tasks", section: "tasks" },
|
||||
{ id: "code", Icon: Code2, title: "Code", section: "code" },
|
||||
{ id: "design", Icon: Palette, title: "Design", section: "layouts" },
|
||||
{ id: "backend", Icon: Cloud, title: "Backend", section: "infrastructure" },
|
||||
];
|
||||
|
||||
export function ProjectShell({
|
||||
// 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,
|
||||
workspace,
|
||||
projectId,
|
||||
projectName,
|
||||
}: ProjectShellProps) {
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const { data: session } = useSession();
|
||||
const [activeTool, setActiveTool] = useState("preview");
|
||||
|
||||
const activeSection =
|
||||
pathname?.includes("/build") ? "build" :
|
||||
@@ -56,10 +67,18 @@ export function ProjectShell({
|
||||
pathname?.includes("/assist") ? "assist" :
|
||||
"build";
|
||||
|
||||
const urlSection = searchParams.get("section") ?? "code";
|
||||
const activeTool = SECTION_TO_TOOL[urlSection] ?? "code";
|
||||
|
||||
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={{
|
||||
@@ -106,10 +125,10 @@ export function ProjectShell({
|
||||
padding: "0 14px", gap: 0, minWidth: 0,
|
||||
}}>
|
||||
|
||||
{/* Pills + tool icons — grouped together on the left of this section */}
|
||||
{/* Pills + tool icons grouped together */}
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 2 }}>
|
||||
|
||||
{/* Section pills */}
|
||||
{/* Section pills: Build | Market | Assist */}
|
||||
{SECTIONS.map(s => {
|
||||
const isActive = activeSection === s.id;
|
||||
return (
|
||||
@@ -135,17 +154,17 @@ export function ProjectShell({
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Thin divider between pills and tool icons */}
|
||||
{/* Divider */}
|
||||
<div style={{ width: 1, height: 16, background: "#e8e4dc", margin: "0 6px", flexShrink: 0 }} />
|
||||
|
||||
{/* Tool icons */}
|
||||
{TOOLS.map(({ id, Icon, title }) => {
|
||||
{/* Tool icons — toggle the main content view */}
|
||||
{TOOLS.map(({ id, Icon, title, section }) => {
|
||||
const isActive = activeTool === id;
|
||||
return (
|
||||
<button
|
||||
key={id}
|
||||
title={title}
|
||||
onClick={() => setActiveTool(id)}
|
||||
onClick={() => handleToolClick(section)}
|
||||
style={{
|
||||
width: 32, height: 32,
|
||||
border: isActive ? "1.5px solid #d4cfc6" : "1.5px solid transparent",
|
||||
@@ -175,7 +194,7 @@ export function ProjectShell({
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Spacer pushes avatar to the right */}
|
||||
{/* Spacer */}
|
||||
<div style={{ flex: 1 }} />
|
||||
|
||||
{/* User avatar */}
|
||||
@@ -237,3 +256,12 @@ export function ProjectShell({
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Wrap in Suspense because useSearchParams requires it
|
||||
export function ProjectShell(props: ProjectShellProps) {
|
||||
return (
|
||||
<Suspense fallback={null}>
|
||||
<ProjectShellInner {...props} />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user