feat: move tool icons adjacent to section pills, add active toggle state

Made-with: Cursor

components/layout/project-shell.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { usePathname } from "next/navigation";
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
 import Link from "next/link";
 import { signOut, useSession } from "next-auth/react";
 import { CooChat } from "./coo-chat";
 import { Toaster } from "sonner";
-import { Globe, Cloud, Palette, Code2, BarChart2, MoreHorizontal } from "lucide-react";
+import { MonitorPlay, ListChecks, Code2, Palette, Cloud } from "lucide-react";
 
 interface ProjectShellProps {
   children: ReactNode;
@@ -24,7 +24,6 @@ interface ProjectShellProps {
   creationMode?: "fresh" | "chat-import" | "code-import" | "migration";
 }
 
-// Width of the left chat panel — must match in both the header and the body
 const CHAT_W = 320;
 
 const SECTIONS = [
@@ -33,14 +32,12 @@ const SECTIONS = [
   { id: "assist", label: "Assist", path: "assist" },
 ] as const;
 
-// Tool icons shown to the right of section pills
 const TOOLS = [
-  { id: "preview",  Icon: Globe,          label: "Preview",       title: "Open preview" },
+  { id: "preview", Icon: MonitorPlay, title: "Preview" },
-  { id: "backend",  Icon: Cloud,          label: "Backend",       title: "Backend / Infra" },
+  { id: "tasks",   Icon: ListChecks,  title: "Tasks" },
-  { id: "design",   Icon: Palette,        label: "Design",        title: "Design" },
+  { id: "code",    Icon: Code2,       title: "Code" },
-  { id: "code",     Icon: Code2,          label: "Code",          title: "Code" },
+  { id: "design",  Icon: Palette,     title: "Design" },
-  { id: "analytics",Icon: BarChart2,      label: "Analytics",     title: "Analytics" },
+  { id: "backend", Icon: Cloud,       title: "Backend" },
-  { id: "more",     Icon: MoreHorizontal, label: "More",          title: "More options" },
 ];
 
 export function ProjectShell({
@@ -51,6 +48,7 @@ export function ProjectShell({
 }: ProjectShellProps) {
   const pathname = usePathname();
   const { data: session } = useSession();
+  const [activeTool, setActiveTool] = useState("preview");
 
   const activeSection =
     pathname?.includes("/build")  ? "build"  :
@@ -71,7 +69,7 @@ export function ProjectShell({
         background: "#f6f4f0",
       }}>
 
-        {/* ── Top bar — split to align with panels below ── */}
+        {/* ── Top bar ── */}
         <header style={{
           height: 48, flexShrink: 0,
           display: "flex", alignItems: "stretch",
@@ -79,7 +77,7 @@ export function ProjectShell({
           zIndex: 10,
         }}>
 
-          {/* Left section — aligns with chat panel */}
+          {/* Left — aligns with chat panel */}
           <div style={{
             width: CHAT_W, flexShrink: 0,
             display: "flex", alignItems: "center",
@@ -88,13 +86,12 @@ export function ProjectShell({
           }}>
             <Link
               href={`/${workspace}/projects`}
-              style={{ display: "flex", alignItems: "center", gap: 8, textDecoration: "none", flexShrink: 0 }}
+              style={{ display: "flex", alignItems: "center", textDecoration: "none", flexShrink: 0 }}
             >
-              <div style={{ width: 22, height: 22, borderRadius: 6, overflow: "hidden", flexShrink: 0 }}>
+              <div style={{ width: 22, height: 22, borderRadius: 6, overflow: "hidden" }}>
                 <img src="/vibn-black-circle-logo.png" alt="VIBN" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
               </div>
             </Link>
-
             <span style={{
               fontSize: "0.82rem", fontWeight: 600, color: "#1a1a1a",
               overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1,
@@ -103,14 +100,16 @@ export function ProjectShell({
             </span>
           </div>
 
-          {/* Right section — aligns with content panel */}
+          {/* Right — aligns with content panel */}
           <div style={{
             flex: 1, display: "flex", alignItems: "center",
-            padding: "0 16px", gap: 0, minWidth: 0,
+            padding: "0 14px", gap: 0, minWidth: 0,
           }}>
 
-            {/* Section pills: Build | Market | Assist */}
+            {/* Pills + tool icons — grouped together on the left of this section */}
-            <div style={{ display: "flex", alignItems: "center", gap: 2, marginRight: "auto" }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 2 }}>
+
+              {/* Section pills */}
               {SECTIONS.map(s => {
                 const isActive = activeSection === s.id;
                 return (
@@ -118,7 +117,7 @@ export function ProjectShell({
                     key={s.id}
                     href={`/${workspace}/project/${projectId}/${s.path}`}
                     style={{
-                      padding: "5px 13px",
+                      padding: "5px 12px",
                       borderRadius: 8,
                       fontSize: "0.8rem",
                       fontWeight: isActive ? 600 : 440,
@@ -135,37 +134,49 @@ export function ProjectShell({
                   </Link>
                 );
               })}
+
+              {/* Thin divider between pills and tool icons */}
+              <div style={{ width: 1, height: 16, background: "#e8e4dc", margin: "0 6px", flexShrink: 0 }} />
+
+              {/* Tool icons */}
+              {TOOLS.map(({ id, Icon, title }) => {
+                const isActive = activeTool === id;
+                return (
+                  <button
+                    key={id}
+                    title={title}
+                    onClick={() => setActiveTool(id)}
+                    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>
 
-            {/* Divider */}
+            {/* Spacer pushes avatar to the right */}
-            <div style={{ width: 1, height: 18, background: "#e8e4dc", margin: "0 14px", flexShrink: 0 }} />
+            <div style={{ flex: 1 }} />
-
-            {/* Tool icons */}
-            <div style={{ display: "flex", alignItems: "center", gap: 2, marginRight: 12 }}>
-              {TOOLS.map(({ id, Icon, title }) => (
-                <button
-                  key={id}
-                  title={title}
-                  style={{
-                    width: 32, height: 32, border: "none", borderRadius: 7,
-                    background: "transparent", cursor: "pointer",
-                    display: "flex", alignItems: "center", justifyContent: "center",
-                    color: "#9a9490",
-                    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";
-                  }}
-                >
-                  <Icon size={15} strokeWidth={1.75} />
-                </button>
-              ))}
-            </div>
 
             {/* User avatar */}
             <button
@@ -194,7 +205,6 @@ export function ProjectShell({
             display: "flex", flexDirection: "column",
             overflow: "hidden",
           }}>
-            {/* Chat header */}
             <div style={{
               height: 44, flexShrink: 0,
               display: "flex", alignItems: "center",
@@ -213,11 +223,10 @@ export function ProjectShell({
                 <div style={{ fontSize: "0.57rem", color: "#a09a90", letterSpacing: "0.03em" }}>Your product COO</div>
               </div>
             </div>
-
             <CooChat projectId={projectId} />
           </div>
 
-          {/* Right: content — changes per section */}
+          {/* Right: content */}
           <div style={{ flex: 1, overflow: "hidden", minWidth: 0 }}>
             {children}
           </div>