mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace unicode tool icons with Lucide icons (Globe, Cloud, Palette, Code2, BarChart2)

Browse Source 
Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-03-09 16:28:19 -07:00
parent 853e41705f
commit aa23a552c4
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/layout/project-shell.tsx
View File

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