feat: move tool icons adjacent to section pills, add active toggle state
Made-with: Cursor
This commit is contained in:
@@ -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: "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" },
|
||||
{ id: "preview", Icon: MonitorPlay, title: "Preview" },
|
||||
{ id: "tasks", Icon: ListChecks, title: "Tasks" },
|
||||
{ id: "code", Icon: Code2, title: "Code" },
|
||||
{ id: "design", Icon: Palette, title: "Design" },
|
||||
{ id: "backend", Icon: Cloud, title: "Backend" },
|
||||
];
|
||||
|
||||
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 */}
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 2, marginRight: "auto" }}>
|
||||
{/* Pills + tool icons — grouped together on the left of this section */}
|
||||
<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 */}
|
||||
<div style={{ width: 1, height: 18, background: "#e8e4dc", margin: "0 14px", flexShrink: 0 }} />
|
||||
|
||||
{/* 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>
|
||||
{/* Spacer pushes avatar to the right */}
|
||||
<div style={{ flex: 1 }} />
|
||||
|
||||
{/* 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>
|
||||
|
||||
Reference in New Issue
Block a user