From aa23a552c47afbdfe763bb0a4ad2cc272f0ba577 Mon Sep 17 00:00:00 2001
From: Mark Henderson <mark@getacquired.com>
Date: Mon, 9 Mar 2026 16:28:19 -0700
Subject: [PATCH] feat: replace unicode tool icons with Lucide icons (Globe,
 Cloud, Palette, Code2, BarChart2)

Made-with: Cursor
---
 components/layout/project-shell.tsx | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/components/layout/project-shell.tsx b/components/layout/project-shell.tsx
index 71abb1c..ee41c46 100644
--- a/components/layout/project-shell.tsx
+++ b/components/layout/project-shell.tsx
@@ -6,6 +6,7 @@ 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";
 
 interface ProjectShellProps {
   children: ReactNode;
@@ -34,12 +35,13 @@ const SECTIONS = [
 
 // Tool icons shown to the right of section pills
 const TOOLS = [
-  { id: "preview",  icon: "↗",  label: "Preview",    title: "Open preview" },
-  { id: "tasks",    icon: "≡",  label: "Tasks",      title: "Agent tasks" },
-  { id: "code",     icon: "</>", label: "Code",      title: "Code" },
-  { id: "design",   icon: "◈",  label: "Design",     title: "Design" },
-  { id: "backend",  icon: "⬡",  label: "Backend",    title: "Backend / Infra" },
-] as const;
+  { id: "preview",  Icon: Globe,          label: "Preview",       title: "Open preview" },
+  { id: "backend",  Icon: Cloud,          label: "Backend",       title: "Backend / Infra" },
+  { id: "design",   Icon: Palette,        label: "Design",        title: "Design" },
+  { id: "code",     Icon: Code2,          label: "Code",          title: "Code" },
+  { id: "analytics",Icon: BarChart2,      label: "Analytics",     title: "Analytics" },
+  { id: "more",     Icon: MoreHorizontal, label: "More",          title: "More options" },
+];
 
 export function ProjectShell({
   children,
@@ -140,17 +142,15 @@ export function ProjectShell({
 
             {/* Tool icons */}
             <div style={{ display: "flex", alignItems: "center", gap: 2, marginRight: 12 }}>
-              {TOOLS.map(t => (
+              {TOOLS.map(({ id, Icon, title }) => (
                 <button
-                  key={t.id}
-                  title={t.title}
+                  key={id}
+                  title={title}
                   style={{
                     width: 32, height: 32, border: "none", borderRadius: 7,
                     background: "transparent", cursor: "pointer",
                     display: "flex", alignItems: "center", justifyContent: "center",
-                    fontSize: t.icon === "</>" ? "0.6rem" : "0.78rem",
-                    color: "#9a9490", fontFamily: "Outfit, sans-serif",
-                    fontWeight: 600, letterSpacing: t.icon === "</>" ? "-0.02em" : "normal",
+                    color: "#9a9490",
                     transition: "background 0.1s, color 0.1s",
                   }}
                   onMouseEnter={e => {
@@ -162,7 +162,7 @@ export function ProjectShell({
                     (e.currentTarget as HTMLElement).style.color = "#9a9490";
                   }}
                 >
-                  {t.icon}
+                  <Icon size={15} strokeWidth={1.75} />
                 </button>
               ))}
             </div>