feat: tool icons drive left nav section, remove inner pills

Made-with: Cursor

app/[workspace]/project/[projectId]/build/page.tsx

@@ -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" }}>

components/layout/project-shell.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { usePathname } from "next/navigation";
+import { usePathname, useSearchParams, useRouter } from "next/navigation";
-import { ReactNode, useState } from "react";
+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: "preview",  Icon: MonitorPlay, title: "Preview",     section: "preview" },
-  { id: "tasks",   Icon: ListChecks,  title: "Tasks" },
+  { id: "tasks",    Icon: ListChecks,  title: "Tasks",       section: "tasks" },
-  { id: "code",    Icon: Code2,       title: "Code" },
+  { id: "code",     Icon: Code2,       title: "Code",        section: "code" },
-  { id: "design",  Icon: Palette,     title: "Design" },
+  { id: "design",   Icon: Palette,     title: "Design",      section: "layouts" },
-  { id: "backend", Icon: Cloud,       title: "Backend" },
+  { 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 */}
+              {/* Tool icons — toggle the main content view */}
-              {TOOLS.map(({ id, Icon, title }) => {
+              {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>
+  );
+}