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

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

Browse Source 
Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-03-09 16:31:38 -07:00
parent aa23a552c4
commit 57c0744b56
1 changed files with 61 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,12 @@
"use client"; "use client";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { ReactNode } from "react"; import { ReactNode, useState } from "react";
import Link from "next/link"; 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"; import { MonitorPlay, ListChecks, Code2, Palette, Cloud } from "lucide-react";
interface ProjectShellProps { interface ProjectShellProps {
children: ReactNode; children: ReactNode;
@@ -24,7 +24,6 @@ interface ProjectShellProps {
creationMode?: "fresh" | "chat-import" | "code-import" | "migration"; 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 CHAT_W = 320;
const SECTIONS = [ const SECTIONS = [
@@ -33,14 +32,12 @@ const SECTIONS = [
{ id: "assist", label: "Assist", path: "assist" }, { id: "assist", label: "Assist", path: "assist" },
] as const; ] as const;
// Tool icons shown to the right of section pills
const TOOLS = [ 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({ export function ProjectShell({
@@ -51,6 +48,7 @@ export function ProjectShell({
}: ProjectShellProps) { }: ProjectShellProps) {
const pathname = usePathname(); const pathname = usePathname();
const { data: session } = useSession(); const { data: session } = useSession();
const [activeTool, setActiveTool] = useState("preview");
const activeSection = const activeSection =
pathname?.includes("/build") ? "build" : pathname?.includes("/build") ? "build" :
@@ -71,7 +69,7 @@ export function ProjectShell({
background: "#f6f4f0", background: "#f6f4f0",
}}> }}>
{/* ── Top bar — split to align with panels below ── */} {/* ── Top bar ── */}
<header style={{ <header style={{
height: 48, flexShrink: 0, height: 48, flexShrink: 0,
display: "flex", alignItems: "stretch", display: "flex", alignItems: "stretch",
@@ -79,7 +77,7 @@ export function ProjectShell({
zIndex: 10, zIndex: 10,
}}> }}>
{/* Left section — aligns with chat panel */} {/* Left — aligns with chat panel */}
<div style={{ <div style={{
width: CHAT_W, flexShrink: 0, width: CHAT_W, flexShrink: 0,
display: "flex", alignItems: "center", display: "flex", alignItems: "center",
@@ -88,13 +86,12 @@ export function ProjectShell({
}}> }}>
<Link <Link
href={`/${workspace}/projects`} 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" }} /> <img src="/vibn-black-circle-logo.png" alt="VIBN" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
</div> </div>
</Link> </Link>
<span style={{ <span style={{
fontSize: "0.82rem", fontWeight: 600, color: "#1a1a1a", fontSize: "0.82rem", fontWeight: 600, color: "#1a1a1a",
overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1,
@@ -103,14 +100,16 @@ export function ProjectShell({
</span> </span>
</div> </div>
{/* Right section — aligns with content panel */} {/* Right — aligns with content panel */}
<div style={{ <div style={{
flex: 1, display: "flex", alignItems: "center", 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 => { {SECTIONS.map(s => {
const isActive = activeSection === s.id; const isActive = activeSection === s.id;
return ( return (
@@ -118,7 +117,7 @@ export function ProjectShell({
key={s.id} key={s.id}
href={`/${workspace}/project/${projectId}/${s.path}`} href={`/${workspace}/project/${projectId}/${s.path}`}
style={{ style={{
padding: "5px 13px", padding: "5px 12px",
borderRadius: 8, borderRadius: 8,
fontSize: "0.8rem", fontSize: "0.8rem",
fontWeight: isActive ? 600 : 440, fontWeight: isActive ? 600 : 440,
@@ -135,38 +134,50 @@ export function ProjectShell({
</Link> </Link>
); );
})} })}
</div>
{/* Divider */} {/* Thin divider between pills and tool icons */}
<div style={{ width: 1, height: 18, background: "#e8e4dc", margin: "0 14px", flexShrink: 0 }} /> <div style={{ width: 1, height: 16, background: "#e8e4dc", margin: "0 6px", flexShrink: 0 }} />
{/* Tool icons */} {/* Tool icons */}
<div style={{ display: "flex", alignItems: "center", gap: 2, marginRight: 12 }}> {TOOLS.map(({ id, Icon, title }) => {
{TOOLS.map(({ id, Icon, title }) => ( const isActive = activeTool === id;
return (
<button <button
key={id} key={id}
title={title} title={title}
onClick={() => setActiveTool(id)}
style={{ style={{
width: 32, height: 32, border: "none", borderRadius: 7, width: 32, height: 32,
background: "transparent", cursor: "pointer", border: isActive ? "1.5px solid #d4cfc6" : "1.5px solid transparent",
borderRadius: 8,
background: isActive ? "#f0ece4" : "transparent",
cursor: "pointer",
display: "flex", alignItems: "center", justifyContent: "center", display: "flex", alignItems: "center", justifyContent: "center",
color: "#9a9490", color: isActive ? "#1a1a1a" : "#9a9490",
transition: "background 0.1s, color 0.1s", transition: "all 0.1s",
}} }}
onMouseEnter={e => { onMouseEnter={e => {
(e.currentTarget as HTMLElement).style.background = "#f0ece4"; if (!isActive) {
(e.currentTarget as HTMLElement).style.background = "#f6f4f0";
(e.currentTarget as HTMLElement).style.color = "#1a1a1a"; (e.currentTarget as HTMLElement).style.color = "#1a1a1a";
}
}} }}
onMouseLeave={e => { onMouseLeave={e => {
if (!isActive) {
(e.currentTarget as HTMLElement).style.background = "transparent"; (e.currentTarget as HTMLElement).style.background = "transparent";
(e.currentTarget as HTMLElement).style.color = "#9a9490"; (e.currentTarget as HTMLElement).style.color = "#9a9490";
}
}} }}
> >
<Icon size={15} strokeWidth={1.75} /> <Icon size={15} strokeWidth={isActive ? 2 : 1.75} />
</button> </button>
))} );
})}
</div> </div>
{/* Spacer pushes avatar to the right */}
<div style={{ flex: 1 }} />
{/* User avatar */} {/* User avatar */}
<button <button
onClick={() => signOut({ callbackUrl: "/auth" })} onClick={() => signOut({ callbackUrl: "/auth" })}
@@ -194,7 +205,6 @@ export function ProjectShell({
display: "flex", flexDirection: "column", display: "flex", flexDirection: "column",
overflow: "hidden", overflow: "hidden",
}}> }}>
{/* Chat header */}
<div style={{ <div style={{
height: 44, flexShrink: 0, height: 44, flexShrink: 0,
display: "flex", alignItems: "center", 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 style={{ fontSize: "0.57rem", color: "#a09a90", letterSpacing: "0.03em" }}>Your product COO</div>
</div> </div>
</div> </div>
<CooChat projectId={projectId} /> <CooChat projectId={projectId} />
</div> </div>
{/* Right: content — changes per section */} {/* Right: content */}
<div style={{ flex: 1, overflow: "hidden", minWidth: 0 }}> <div style={{ flex: 1, overflow: "hidden", minWidth: 0 }}>
{children} {children}
</div> </div>