feat: restructure project nav to Atlas | PRD | Build | Growth | Assist | Analytics
Tab bar: - Removed: Design, Launch, Grow, Insights, Settings tabs - Added: Growth, Assist, Analytics as top-level tabs - Build remains, now a full hub Build hub (/build): - Left sub-nav groups: Code (apps), Layouts (surfaces), Infrastructure (6 items) - Code section: scoped file browser per selected app - Layouts section: surface overview cards with Edit link to /design - Infrastructure section: summary panel linking to /infrastructure?tab= Growth (/growth): - Left nav: Marketing Site, Communications, Channels, Pages - Each section: description + feature item grid + feedback CTA Assist (/assist): - Left nav: Emails, Chat Support, Support Site, Communications - Each section: description + feature item grid + feedback CTA Analytics (/analytics): - Left nav: Customers, Usage, Events, Reports - Each section: description + feature item grid + feedback CTA Made-with: Cursor
This commit is contained in:
133
app/[workspace]/project/[projectId]/analytics/page.tsx
Normal file
133
app/[workspace]/project/[projectId]/analytics/page.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense } from "react";
|
||||
import { useParams, useSearchParams, useRouter } from "next/navigation";
|
||||
|
||||
const SECTIONS = [
|
||||
{
|
||||
id: "customers",
|
||||
label: "Customers",
|
||||
icon: "◉",
|
||||
title: "Customer List",
|
||||
desc: "Every user who has signed up, their plan, usage, last seen, and lifecycle stage. Filter, search, and act on any segment.",
|
||||
items: ["User Directory", "Lifecycle Stages", "Plan & Billing", "Activity Timeline", "Segment Builder"],
|
||||
},
|
||||
{
|
||||
id: "usage",
|
||||
label: "Usage",
|
||||
icon: "∿",
|
||||
title: "Usage & Activity",
|
||||
desc: "How users interact with your product — feature adoption, session frequency, retention curves, and activation funnels.",
|
||||
items: ["Feature Adoption", "Session Metrics", "Retention Curves", "Activation Funnel", "Power Users"],
|
||||
},
|
||||
{
|
||||
id: "events",
|
||||
label: "Events",
|
||||
icon: "◬",
|
||||
title: "Events & Tracking",
|
||||
desc: "Every event your product fires — page views, clicks, conversions, and custom events — all tagged and queryable.",
|
||||
items: ["Event Stream", "Custom Events", "Page Views", "Conversion Events", "Tag Manager"],
|
||||
},
|
||||
{
|
||||
id: "reports",
|
||||
label: "Reports",
|
||||
icon: "▭",
|
||||
title: "Reports",
|
||||
desc: "MRR, churn, DAU/MAU, cohort analysis, and revenue reports. Export or share with your team on a schedule.",
|
||||
items: ["Revenue (MRR/ARR)", "Churn Report", "DAU / MAU", "Cohort Analysis", "Custom Reports", "Scheduled Exports"],
|
||||
},
|
||||
] as const;
|
||||
|
||||
type SectionId = typeof SECTIONS[number]["id"];
|
||||
|
||||
const NAV_GROUP: React.CSSProperties = {
|
||||
fontSize: "0.6rem", fontWeight: 700, color: "#b5b0a6",
|
||||
letterSpacing: "0.09em", textTransform: "uppercase",
|
||||
padding: "14px 12px 6px", fontFamily: "Outfit, sans-serif",
|
||||
};
|
||||
|
||||
function AnalyticsInner() {
|
||||
const params = useParams();
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const workspace = params.workspace as string;
|
||||
const projectId = params.projectId as string;
|
||||
|
||||
const activeId = (searchParams.get("section") ?? "customers") as SectionId;
|
||||
const active = SECTIONS.find(s => s.id === activeId) ?? SECTIONS[0];
|
||||
|
||||
const setSection = (id: string) =>
|
||||
router.push(`/${workspace}/project/${projectId}/analytics?section=${id}`, { scroll: false });
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", height: "100%", fontFamily: "Outfit, sans-serif", overflow: "hidden" }}>
|
||||
|
||||
{/* Left nav */}
|
||||
<div style={{ width: 200, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", flexDirection: "column", overflow: "auto" }}>
|
||||
<div style={NAV_GROUP}>Analytics</div>
|
||||
{SECTIONS.map(s => {
|
||||
const isActive = activeId === s.id;
|
||||
return (
|
||||
<button key={s.id} onClick={() => setSection(s.id)} style={{
|
||||
display: "flex", alignItems: "center", gap: 8, width: "100%", textAlign: "left",
|
||||
background: isActive ? "#f0ece4" : "transparent", border: "none", cursor: "pointer",
|
||||
padding: "6px 12px", borderRadius: 5,
|
||||
fontSize: "0.78rem", fontWeight: isActive ? 600 : 440,
|
||||
color: isActive ? "#1a1a1a" : "#5a5550",
|
||||
}}
|
||||
onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
|
||||
onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
|
||||
>
|
||||
<span style={{ fontSize: "0.65rem", opacity: 0.55, width: 14, textAlign: "center" }}>{s.icon}</span>
|
||||
{s.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div style={{ flex: 1, overflow: "auto", display: "flex", flexDirection: "column" }}>
|
||||
<div style={{ padding: "28px 32px", maxWidth: 800 }}>
|
||||
<div style={{ marginBottom: 24 }}>
|
||||
<div style={{ fontSize: "1.1rem", fontWeight: 700, color: "#1a1a1a", marginBottom: 6 }}>{active.title}</div>
|
||||
<div style={{ fontSize: "0.82rem", color: "#6b6560", lineHeight: 1.65, maxWidth: 520 }}>{active.desc}</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 12, marginBottom: 32 }}>
|
||||
{active.items.map(item => (
|
||||
<div key={item} style={{
|
||||
background: "#fff", border: "1px solid #e8e4dc", borderRadius: 9,
|
||||
padding: "14px 16px", display: "flex", alignItems: "center", justifyContent: "space-between",
|
||||
}}>
|
||||
<span style={{ fontSize: "0.8rem", fontWeight: 500, color: "#1a1a1a" }}>{item}</span>
|
||||
<span style={{ fontSize: "0.65rem", color: "#c5c0b8", background: "#f6f4f0", padding: "2px 7px", borderRadius: 4 }}>Soon</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
background: "linear-gradient(135deg, #1a1a1a 0%, #2d2820 100%)",
|
||||
borderRadius: 12, padding: "24px 28px",
|
||||
display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20,
|
||||
}}>
|
||||
<div>
|
||||
<div style={{ fontSize: "0.85rem", fontWeight: 600, color: "#fff", marginBottom: 4 }}>{active.title} is coming to VIBN</div>
|
||||
<div style={{ fontSize: "0.75rem", color: "#8a8478", lineHeight: 1.5 }}>We're building this section next. Shape it by telling us what you need.</div>
|
||||
</div>
|
||||
<button style={{ background: "#d4a04a", color: "#fff", border: "none", borderRadius: 8, padding: "9px 20px", fontSize: "0.78rem", fontWeight: 600, cursor: "pointer", whiteSpace: "nowrap", flexShrink: 0 }}>
|
||||
Give feedback
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AnalyticsPage() {
|
||||
return (
|
||||
<Suspense fallback={<div style={{ display: "flex", height: "100%", alignItems: "center", justifyContent: "center", color: "#a09a90", fontFamily: "Outfit, sans-serif", fontSize: "0.85rem" }}>Loading…</div>}>
|
||||
<AnalyticsInner />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
133
app/[workspace]/project/[projectId]/assist/page.tsx
Normal file
133
app/[workspace]/project/[projectId]/assist/page.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense } from "react";
|
||||
import { useParams, useSearchParams, useRouter } from "next/navigation";
|
||||
|
||||
const SECTIONS = [
|
||||
{
|
||||
id: "emails",
|
||||
label: "Emails",
|
||||
icon: "◈",
|
||||
title: "Email",
|
||||
desc: "Transactional and support emails — onboarding sequences, password resets, billing receipts, and support replies — all in one place.",
|
||||
items: ["Onboarding Sequence", "Transactional Emails", "Support Replies", "Billing Notices", "Digests & Summaries"],
|
||||
},
|
||||
{
|
||||
id: "chat",
|
||||
label: "Chat Support",
|
||||
icon: "◎",
|
||||
title: "Chat Support",
|
||||
desc: "Live chat and AI-powered support widget embedded in your product. Routes to human agents when needed, logs every conversation.",
|
||||
items: ["Live Chat Widget", "AI First Response", "Agent Handoff", "Conversation History", "Canned Responses"],
|
||||
},
|
||||
{
|
||||
id: "support-site",
|
||||
label: "Support Site",
|
||||
icon: "▭",
|
||||
title: "Support Site",
|
||||
desc: "Your public help centre — searchable docs, FAQs, guides, and tutorials. Deflects support tickets before they're created.",
|
||||
items: ["Help Articles", "FAQs", "Video Guides", "Release Notes", "Status Page"],
|
||||
},
|
||||
{
|
||||
id: "communications",
|
||||
label: "Communications",
|
||||
icon: "↗",
|
||||
title: "In-App Communications",
|
||||
desc: "Announcements, tooltips, banners, and nudges shown directly inside your product to guide and inform users.",
|
||||
items: ["In-App Banners", "Tooltips & Tours", "Feature Announcements", "NPS Surveys", "Feedback Prompts"],
|
||||
},
|
||||
] as const;
|
||||
|
||||
type SectionId = typeof SECTIONS[number]["id"];
|
||||
|
||||
const NAV_GROUP: React.CSSProperties = {
|
||||
fontSize: "0.6rem", fontWeight: 700, color: "#b5b0a6",
|
||||
letterSpacing: "0.09em", textTransform: "uppercase",
|
||||
padding: "14px 12px 6px", fontFamily: "Outfit, sans-serif",
|
||||
};
|
||||
|
||||
function AssistInner() {
|
||||
const params = useParams();
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const workspace = params.workspace as string;
|
||||
const projectId = params.projectId as string;
|
||||
|
||||
const activeId = (searchParams.get("section") ?? "emails") as SectionId;
|
||||
const active = SECTIONS.find(s => s.id === activeId) ?? SECTIONS[0];
|
||||
|
||||
const setSection = (id: string) =>
|
||||
router.push(`/${workspace}/project/${projectId}/assist?section=${id}`, { scroll: false });
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", height: "100%", fontFamily: "Outfit, sans-serif", overflow: "hidden" }}>
|
||||
|
||||
{/* Left nav */}
|
||||
<div style={{ width: 200, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", flexDirection: "column", overflow: "auto" }}>
|
||||
<div style={NAV_GROUP}>Assist</div>
|
||||
{SECTIONS.map(s => {
|
||||
const isActive = activeId === s.id;
|
||||
return (
|
||||
<button key={s.id} onClick={() => setSection(s.id)} style={{
|
||||
display: "flex", alignItems: "center", gap: 8, width: "100%", textAlign: "left",
|
||||
background: isActive ? "#f0ece4" : "transparent", border: "none", cursor: "pointer",
|
||||
padding: "6px 12px", borderRadius: 5,
|
||||
fontSize: "0.78rem", fontWeight: isActive ? 600 : 440,
|
||||
color: isActive ? "#1a1a1a" : "#5a5550",
|
||||
}}
|
||||
onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
|
||||
onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
|
||||
>
|
||||
<span style={{ fontSize: "0.65rem", opacity: 0.55, width: 14, textAlign: "center" }}>{s.icon}</span>
|
||||
{s.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div style={{ flex: 1, overflow: "auto", display: "flex", flexDirection: "column" }}>
|
||||
<div style={{ padding: "28px 32px", maxWidth: 800 }}>
|
||||
<div style={{ marginBottom: 24 }}>
|
||||
<div style={{ fontSize: "1.1rem", fontWeight: 700, color: "#1a1a1a", marginBottom: 6 }}>{active.title}</div>
|
||||
<div style={{ fontSize: "0.82rem", color: "#6b6560", lineHeight: 1.65, maxWidth: 520 }}>{active.desc}</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 12, marginBottom: 32 }}>
|
||||
{active.items.map(item => (
|
||||
<div key={item} style={{
|
||||
background: "#fff", border: "1px solid #e8e4dc", borderRadius: 9,
|
||||
padding: "14px 16px", display: "flex", alignItems: "center", justifyContent: "space-between",
|
||||
}}>
|
||||
<span style={{ fontSize: "0.8rem", fontWeight: 500, color: "#1a1a1a" }}>{item}</span>
|
||||
<span style={{ fontSize: "0.65rem", color: "#c5c0b8", background: "#f6f4f0", padding: "2px 7px", borderRadius: 4 }}>Soon</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
background: "linear-gradient(135deg, #1a1a1a 0%, #2d2820 100%)",
|
||||
borderRadius: 12, padding: "24px 28px",
|
||||
display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20,
|
||||
}}>
|
||||
<div>
|
||||
<div style={{ fontSize: "0.85rem", fontWeight: 600, color: "#fff", marginBottom: 4 }}>{active.title} is coming to VIBN</div>
|
||||
<div style={{ fontSize: "0.75rem", color: "#8a8478", lineHeight: 1.5 }}>We're building this section next. Shape it by telling us what you need.</div>
|
||||
</div>
|
||||
<button style={{ background: "#d4a04a", color: "#fff", border: "none", borderRadius: 8, padding: "9px 20px", fontSize: "0.78rem", fontWeight: 600, cursor: "pointer", whiteSpace: "nowrap", flexShrink: 0 }}>
|
||||
Give feedback
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AssistPage() {
|
||||
return (
|
||||
<Suspense fallback={<div style={{ display: "flex", height: "100%", alignItems: "center", justifyContent: "center", color: "#a09a90", fontFamily: "Outfit, sans-serif", fontSize: "0.85rem" }}>Loading…</div>}>
|
||||
<AssistInner />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -1,175 +1,220 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback, Suspense } from "react";
|
||||
import { useParams, useSearchParams } from "next/navigation";
|
||||
import { Suspense, useState, useEffect, useCallback } from "react";
|
||||
import { useParams, useSearchParams, useRouter } from "next/navigation";
|
||||
import { useSession } from "next-auth/react";
|
||||
import Link from "next/link";
|
||||
|
||||
// ── Types ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
interface FileItem {
|
||||
name: string;
|
||||
path: string;
|
||||
type: "file" | "dir" | "symlink";
|
||||
size?: number;
|
||||
}
|
||||
|
||||
interface AppEntry { name: string; path: string; }
|
||||
interface SurfaceEntry { id: string; label: string; lockedTheme?: string; }
|
||||
interface FileItem { name: string; path: string; type: "file" | "dir" | "symlink"; }
|
||||
interface TreeNode {
|
||||
name: string;
|
||||
path: string;
|
||||
type: "file" | "dir";
|
||||
children?: TreeNode[];
|
||||
expanded?: boolean;
|
||||
loaded?: boolean;
|
||||
name: string; path: string; type: "file" | "dir";
|
||||
children?: TreeNode[]; expanded?: boolean; loaded?: boolean;
|
||||
}
|
||||
|
||||
// ── Language detection ────────────────────────────────────────────────────────
|
||||
// ── Constants ─────────────────────────────────────────────────────────────────
|
||||
|
||||
const INFRA_ITEMS = [
|
||||
{ id: "builds", label: "Builds", icon: "⬡" },
|
||||
{ id: "databases", label: "Databases", icon: "◫" },
|
||||
{ id: "services", label: "Services", icon: "◎" },
|
||||
{ id: "environment", label: "Environment", icon: "≡" },
|
||||
{ id: "domains", label: "Domains", icon: "◬" },
|
||||
{ id: "logs", label: "Logs", icon: "≈" },
|
||||
];
|
||||
|
||||
const SURFACE_LABELS: Record<string, string> = {
|
||||
webapp: "Web App", marketing: "Marketing Site", admin: "Admin Panel",
|
||||
};
|
||||
const SURFACE_ICONS: Record<string, string> = {
|
||||
webapp: "◈", marketing: "◌", admin: "◫",
|
||||
};
|
||||
|
||||
// ── Language / syntax helpers ─────────────────────────────────────────────────
|
||||
|
||||
function langFromName(name: string): string {
|
||||
const ext = name.split(".").pop()?.toLowerCase() ?? "";
|
||||
const map: Record<string, string> = {
|
||||
ts: "typescript", tsx: "typescript", js: "javascript", jsx: "javascript",
|
||||
json: "json", md: "markdown", mdx: "markdown",
|
||||
css: "css", scss: "css", html: "html",
|
||||
json: "json", md: "markdown", css: "css", scss: "css", html: "html",
|
||||
py: "python", sh: "shell", yaml: "yaml", yml: "yaml",
|
||||
toml: "toml", prisma: "prisma", sql: "sql",
|
||||
env: "dotenv", gitignore: "shell", dockerfile: "dockerfile",
|
||||
};
|
||||
return map[ext] ?? "text";
|
||||
}
|
||||
|
||||
// ── Simple token highlighter ──────────────────────────────────────────────────
|
||||
|
||||
function highlightCode(code: string, lang: string): React.ReactNode[] {
|
||||
return code.split("\n").map((line, i) => {
|
||||
if (lang === "text" || lang === "dotenv" || lang === "dockerfile") {
|
||||
return <div key={i}>{line || "\u00a0"}</div>;
|
||||
}
|
||||
const commentPrefixes = ["//", "#", "--"];
|
||||
if (commentPrefixes.some(p => line.trimStart().startsWith(p))) {
|
||||
return <div key={i}><span style={{ color: "#6a9955" }}>{line}</span></div>;
|
||||
}
|
||||
const kwRe = /\b(import|export|from|const|let|var|function|return|if|else|async|await|type|interface|class|extends|implements|new|default|null|undefined|true|false|void|string|number|boolean|object|Promise|React)\b/g;
|
||||
const kwRe = /\b(import|export|from|const|let|var|function|return|if|else|async|await|type|interface|class|extends|new|default|null|undefined|true|false|void|string|number|boolean|React)\b/g;
|
||||
const parts = line.split(kwRe);
|
||||
const tokens = parts.map((part, j) => {
|
||||
if (!part) return null;
|
||||
if (/^(import|export|from|const|let|var|function|return|if|else|async|await|type|interface|class|extends|implements|new|default|null|undefined|true|false|void|string|number|boolean|object|Promise|React)$/.test(part)) {
|
||||
return <span key={j} style={{ color: "#569cd6" }}>{part}</span>;
|
||||
}
|
||||
if (/^(['"`]).*\1$/.test(part.trim())) {
|
||||
return <span key={j} style={{ color: "#ce9178" }}>{part}</span>;
|
||||
}
|
||||
return <span key={j}>{part}</span>;
|
||||
const tokens = parts.map((p, j) => {
|
||||
if (!p) return null;
|
||||
if (/^(import|export|from|const|let|var|function|return|if|else|async|await|type|interface|class|extends|new|default|null|undefined|true|false|void|string|number|boolean|React)$/.test(p))
|
||||
return <span key={j} style={{ color: "#569cd6" }}>{p}</span>;
|
||||
return <span key={j}>{p}</span>;
|
||||
});
|
||||
return <div key={i} style={{ minHeight: "1.4em" }}>{tokens.length ? tokens : "\u00a0"}</div>;
|
||||
});
|
||||
}
|
||||
|
||||
// ── Tree row ──────────────────────────────────────────────────────────────────
|
||||
// ── File tree row ─────────────────────────────────────────────────────────────
|
||||
|
||||
function TreeRow({
|
||||
node, depth, selectedPath, onSelect, onToggle,
|
||||
}: {
|
||||
node: TreeNode;
|
||||
depth: number;
|
||||
selectedPath: string | null;
|
||||
onSelect: (path: string) => void;
|
||||
onToggle: (path: string) => void;
|
||||
function TreeRow({ node, depth, selectedPath, onSelect, onToggle }: {
|
||||
node: TreeNode; depth: number; selectedPath: string | null;
|
||||
onSelect: (p: string) => void; onToggle: (p: string) => void;
|
||||
}) {
|
||||
const isSelected = selectedPath === node.path;
|
||||
const active = selectedPath === node.path;
|
||||
const isDir = node.type === "dir";
|
||||
const ext = node.name.split(".").pop()?.toLowerCase() ?? "";
|
||||
const fileColor =
|
||||
ext === "tsx" || ext === "ts" ? "#3178c6"
|
||||
: ext === "jsx" || ext === "js" ? "#f0db4f"
|
||||
: ext === "css" || ext === "scss" ? "#e879f9"
|
||||
: ext === "json" ? "#a09a90"
|
||||
: ext === "md" || ext === "mdx" ? "#6b6560"
|
||||
: "#b5b0a6";
|
||||
const fileColor = ext === "tsx" || ext === "ts" ? "#3178c6" : ext === "jsx" || ext === "js" ? "#f0db4f"
|
||||
: ext === "css" || ext === "scss" ? "#e879f9" : "#b5b0a6";
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => isDir ? onToggle(node.path) : onSelect(node.path)}
|
||||
style={{
|
||||
display: "flex", alignItems: "center", gap: 6,
|
||||
width: "100%", textAlign: "left",
|
||||
background: isSelected ? "#f0ece4" : "transparent",
|
||||
border: "none", cursor: "pointer",
|
||||
padding: `5px 10px 5px ${14 + depth * 14}px`,
|
||||
borderRadius: 4, transition: "background 0.1s",
|
||||
fontFamily: "IBM Plex Mono, monospace", fontSize: "0.75rem",
|
||||
color: isSelected ? "#1a1a1a" : "#4a4640",
|
||||
}}
|
||||
onMouseEnter={e => { if (!isSelected) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
|
||||
onMouseLeave={e => { if (!isSelected) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
|
||||
<button onClick={() => isDir ? onToggle(node.path) : onSelect(node.path)} style={{
|
||||
display: "flex", alignItems: "center", gap: 5, width: "100%", textAlign: "left",
|
||||
background: active ? "#eceae5" : "transparent", border: "none", cursor: "pointer",
|
||||
padding: `4px 8px 4px ${10 + depth * 12}px`, borderRadius: 4,
|
||||
fontFamily: "IBM Plex Mono, monospace", fontSize: "0.72rem",
|
||||
color: active ? "#1a1a1a" : "#4a4640",
|
||||
}}
|
||||
onMouseEnter={e => { if (!active) (e.currentTarget as HTMLElement).style.background = "#f0ece4"; }}
|
||||
onMouseLeave={e => { if (!active) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
|
||||
>
|
||||
{isDir ? (
|
||||
<span style={{
|
||||
fontSize: "0.52rem", color: "#a09a90", flexShrink: 0,
|
||||
display: "inline-block", transition: "transform 0.12s",
|
||||
transform: node.expanded ? "rotate(90deg)" : "none",
|
||||
}}>▶</span>
|
||||
) : (
|
||||
<span style={{ color: fileColor, fontSize: "0.7rem", flexShrink: 0 }}>◌</span>
|
||||
)}
|
||||
<span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
|
||||
{node.name}
|
||||
</span>
|
||||
{isDir
|
||||
? <span style={{ fontSize: "0.48rem", color: "#a09a90", display: "inline-block", transition: "transform 0.1s", transform: node.expanded ? "rotate(90deg)" : "none" }}>▶</span>
|
||||
: <span style={{ color: fileColor, fontSize: "0.65rem" }}>◌</span>}
|
||||
<span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{node.name}</span>
|
||||
</button>
|
||||
{isDir && node.expanded && node.children?.map(child => (
|
||||
<TreeRow
|
||||
key={child.path}
|
||||
node={child}
|
||||
depth={depth + 1}
|
||||
selectedPath={selectedPath}
|
||||
onSelect={onSelect}
|
||||
onToggle={onToggle}
|
||||
/>
|
||||
))}
|
||||
{isDir && node.expanded && node.children?.map(c =>
|
||||
<TreeRow key={c.path} node={c} depth={depth + 1} selectedPath={selectedPath} onSelect={onSelect} onToggle={onToggle} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Empty state ───────────────────────────────────────────────────────────────
|
||||
// ── Left nav shared styles ────────────────────────────────────────────────────
|
||||
|
||||
function EmptyState() {
|
||||
const NAV_GROUP_LABEL: React.CSSProperties = {
|
||||
fontSize: "0.6rem", fontWeight: 700, color: "#b5b0a6",
|
||||
letterSpacing: "0.09em", textTransform: "uppercase",
|
||||
padding: "12px 12px 5px", fontFamily: "Outfit, sans-serif",
|
||||
};
|
||||
|
||||
function NavItem({ label, active, onClick, indent = false }: { label: string; active: boolean; onClick: () => void; indent?: boolean }) {
|
||||
return (
|
||||
<div style={{
|
||||
display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
|
||||
height: "100%", gap: 12, padding: 40,
|
||||
}}>
|
||||
<div style={{
|
||||
width: 48, height: 48, borderRadius: 12, background: "#f0ece4",
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
fontSize: "1.4rem", color: "#b5b0a6",
|
||||
}}>▢</div>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<div style={{ fontSize: "0.88rem", fontWeight: 600, color: "#1a1a1a", marginBottom: 6 }}>
|
||||
Select an app to browse
|
||||
</div>
|
||||
<div style={{ fontSize: "0.78rem", color: "#a09a90", maxWidth: 260, lineHeight: 1.5 }}>
|
||||
Choose one of your apps from the Build section in the left sidebar to explore its files.
|
||||
</div>
|
||||
<button onClick={onClick} style={{
|
||||
display: "flex", alignItems: "center", gap: 7, width: "100%", textAlign: "left",
|
||||
background: active ? "#f0ece4" : "transparent", border: "none", cursor: "pointer",
|
||||
padding: `5px 12px 5px ${indent ? 22 : 12}px`, borderRadius: 5,
|
||||
fontSize: "0.78rem", fontWeight: active ? 600 : 440,
|
||||
color: active ? "#1a1a1a" : "#5a5550", fontFamily: "Outfit, sans-serif",
|
||||
}}
|
||||
onMouseEnter={e => { if (!active) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
|
||||
onMouseLeave={e => { if (!active) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Placeholder panel ─────────────────────────────────────────────────────────
|
||||
|
||||
function Placeholder({ icon, title, desc }: { icon: string; title: string; desc: string }) {
|
||||
return (
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 14, padding: 60, textAlign: "center" }}>
|
||||
<div style={{ width: 52, height: 52, borderRadius: 13, background: "#f0ece4", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "1.4rem", color: "#b5b0a6" }}>{icon}</div>
|
||||
<div>
|
||||
<div style={{ fontSize: "0.9rem", fontWeight: 600, color: "#1a1a1a", marginBottom: 6 }}>{title}</div>
|
||||
<div style={{ fontSize: "0.8rem", color: "#a09a90", maxWidth: 320, lineHeight: 1.6 }}>{desc}</div>
|
||||
</div>
|
||||
<div style={{ marginTop: 4, padding: "7px 18px", background: "#1a1a1a", color: "#fff", borderRadius: 7, fontSize: "0.77rem", fontWeight: 500, opacity: 0.35 }}>Coming soon</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Infra content ─────────────────────────────────────────────────────────────
|
||||
|
||||
function InfraContent({ tab, projectId, workspace }: { tab: string; projectId: string; workspace: string }) {
|
||||
const base = `/${workspace}/project/${projectId}/infrastructure`;
|
||||
const descriptions: Record<string, { icon: string; title: string; desc: string }> = {
|
||||
databases: { icon: "◫", title: "Databases", desc: "PostgreSQL, Redis, and other databases — provisioned and managed with connection strings auto-injected." },
|
||||
services: { icon: "◎", title: "Services", desc: "Background workers, queues, email delivery, file storage, and third-party integrations." },
|
||||
environment: { icon: "≡", title: "Environment", desc: "Environment variables and secrets, encrypted at rest and auto-injected into your containers." },
|
||||
domains: { icon: "◬", title: "Domains", desc: "Custom domains and SSL certificates for all your deployed services." },
|
||||
logs: { icon: "≈", title: "Logs", desc: "Runtime logs, request traces, and error reports streaming from deployed services." },
|
||||
builds: { icon: "⬡", title: "Builds", desc: "Deployment history, build logs, and rollback controls for all your apps." },
|
||||
};
|
||||
const d = descriptions[tab];
|
||||
return (
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
|
||||
<div style={{ padding: "20px 28px 0", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
|
||||
<div style={{ fontSize: "0.68rem", fontWeight: 700, color: "#a09a90", letterSpacing: "0.08em", textTransform: "uppercase", fontFamily: "Outfit, sans-serif" }}>{tab}</div>
|
||||
<Link href={`${base}?tab=${tab}`} style={{ fontSize: "0.72rem", color: "#a09a90", textDecoration: "none", fontFamily: "Outfit, sans-serif" }}>Open full view →</Link>
|
||||
</div>
|
||||
{d && <Placeholder icon={d.icon} title={d.title} desc={d.desc} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Layouts content ───────────────────────────────────────────────────────────
|
||||
|
||||
function LayoutsContent({ surfaces, projectId, workspace, activeSurfaceId, onSelectSurface }: {
|
||||
surfaces: SurfaceEntry[]; projectId: string; workspace: string;
|
||||
activeSurfaceId: string | null; onSelectSurface: (id: string) => void;
|
||||
}) {
|
||||
if (surfaces.length === 0) {
|
||||
return (
|
||||
<Placeholder icon="◌" title="No design surfaces yet" desc="Add design surfaces from the Design page to configure your web app, marketing site, or admin panel." />
|
||||
);
|
||||
}
|
||||
const active = surfaces.find(s => s.id === activeSurfaceId) ?? surfaces[0];
|
||||
return (
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", padding: "24px 28px", gap: 20 }}>
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
|
||||
<div style={{ fontSize: "0.68rem", fontWeight: 700, color: "#a09a90", letterSpacing: "0.08em", textTransform: "uppercase", fontFamily: "Outfit, sans-serif" }}>Layouts</div>
|
||||
<Link href={`/${workspace}/project/${projectId}/design?surface=${active?.id ?? ""}`} style={{ fontSize: "0.72rem", color: "#a09a90", textDecoration: "none", fontFamily: "Outfit, sans-serif" }}>Edit in Design →</Link>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
|
||||
{surfaces.map(s => (
|
||||
<div key={s.id} onClick={() => onSelectSurface(s.id)} style={{
|
||||
background: active?.id === s.id ? "#fff" : "#faf8f5",
|
||||
border: `1px solid ${active?.id === s.id ? "#1a1a1a" : "#e8e4dc"}`,
|
||||
borderRadius: 10, padding: "16px 20px", cursor: "pointer",
|
||||
minWidth: 180, flex: "1 1 180px", maxWidth: 240,
|
||||
transition: "border-color 0.1s",
|
||||
}}>
|
||||
<div style={{ fontSize: "0.85rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "Outfit, sans-serif", marginBottom: 4 }}>
|
||||
{SURFACE_LABELS[s.id] ?? s.id}
|
||||
</div>
|
||||
{s.lockedTheme ? (
|
||||
<div style={{ fontSize: "0.72rem", color: "#6b6560", fontFamily: "Outfit, sans-serif" }}>Theme: {s.lockedTheme}</div>
|
||||
) : (
|
||||
<div style={{ fontSize: "0.72rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif", fontStyle: "italic" }}>Not configured</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ fontSize: "0.75rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>
|
||||
Click a surface to select it, then open the Design editor to configure themes, fonts, and components.
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Inner page (needs useSearchParams) ───────────────────────────────────────
|
||||
|
||||
function BuildPageInner() {
|
||||
const params = useParams();
|
||||
const searchParams = useSearchParams();
|
||||
const projectId = params.projectId as string;
|
||||
const { status: authStatus } = useSession();
|
||||
|
||||
// Which app the user clicked (from sidebar link)
|
||||
const appName = searchParams.get("app") ?? "";
|
||||
const rootPath = searchParams.get("root") ?? "";
|
||||
// ── Code content (file browser) ───────────────────────────────────────────────
|
||||
|
||||
function CodeContent({ projectId, appName, rootPath }: { projectId: string; appName: string; rootPath: string }) {
|
||||
const { status } = useSession();
|
||||
const [tree, setTree] = useState<TreeNode[]>([]);
|
||||
const [treeLoading, setTreeLoading] = useState(false);
|
||||
const [treeError, setTreeError] = useState<string | null>(null);
|
||||
const [selectedPath, setSelectedPath] = useState<string | null>(null);
|
||||
const [fileContent, setFileContent] = useState<string | null>(null);
|
||||
const [fileLoading, setFileLoading] = useState(false);
|
||||
@@ -178,219 +223,93 @@ function BuildPageInner() {
|
||||
const fetchDir = useCallback(async (path: string): Promise<TreeNode[]> => {
|
||||
const res = await fetch(`/api/projects/${projectId}/file?path=${encodeURIComponent(path)}`);
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.error ?? "Failed to load");
|
||||
if (!res.ok) throw new Error(data.error);
|
||||
const items: FileItem[] = data.items ?? [];
|
||||
return items
|
||||
.filter(item => item.type !== "symlink")
|
||||
.sort((a, b) => {
|
||||
if (a.type === "dir" && b.type !== "dir") return -1;
|
||||
if (a.type !== "dir" && b.type === "dir") return 1;
|
||||
return a.name.localeCompare(b.name);
|
||||
})
|
||||
.map(item => ({
|
||||
name: item.name,
|
||||
path: item.path,
|
||||
type: item.type === "dir" ? "dir" : "file",
|
||||
expanded: false,
|
||||
loaded: item.type !== "dir",
|
||||
children: item.type === "dir" ? [] : undefined,
|
||||
}));
|
||||
return items.filter(i => i.type !== "symlink")
|
||||
.sort((a, b) => a.type === "dir" && b.type !== "dir" ? -1 : a.type !== "dir" && b.type === "dir" ? 1 : a.name.localeCompare(b.name))
|
||||
.map(i => ({ name: i.name, path: i.path, type: i.type === "dir" ? "dir" : "file", expanded: false, loaded: i.type !== "dir", children: i.type === "dir" ? [] : undefined }));
|
||||
}, [projectId]);
|
||||
|
||||
// Load the app's root dir whenever app changes
|
||||
useEffect(() => {
|
||||
if (!rootPath || authStatus !== "authenticated") return;
|
||||
setTree([]);
|
||||
setSelectedPath(null);
|
||||
setFileContent(null);
|
||||
setTreeError(null);
|
||||
setTreeLoading(true);
|
||||
fetchDir(rootPath)
|
||||
.then(nodes => { setTree(nodes); setTreeLoading(false); })
|
||||
.catch(e => { setTreeError(e.message); setTreeLoading(false); });
|
||||
}, [rootPath, authStatus, fetchDir]);
|
||||
if (!rootPath || status !== "authenticated") return;
|
||||
setTree([]); setSelectedPath(null); setFileContent(null); setTreeLoading(true);
|
||||
fetchDir(rootPath).then(nodes => { setTree(nodes); setTreeLoading(false); }).catch(() => setTreeLoading(false));
|
||||
}, [rootPath, status, fetchDir]);
|
||||
|
||||
// Toggle dir expand/collapse with lazy-load
|
||||
const handleToggle = useCallback(async (path: string) => {
|
||||
setTree(prev => {
|
||||
const toggle = (nodes: TreeNode[]): TreeNode[] =>
|
||||
nodes.map(n => {
|
||||
if (n.path === path) return { ...n, expanded: !n.expanded };
|
||||
if (n.children) return { ...n, children: toggle(n.children) };
|
||||
return n;
|
||||
});
|
||||
const toggle = (nodes: TreeNode[]): TreeNode[] => nodes.map(n => n.path === path ? { ...n, expanded: !n.expanded } : n.children ? { ...n, children: toggle(n.children) } : n);
|
||||
return toggle(prev);
|
||||
});
|
||||
|
||||
const findNode = (nodes: TreeNode[], p: string): TreeNode | null => {
|
||||
for (const n of nodes) {
|
||||
if (n.path === p) return n;
|
||||
if (n.children) { const f = findNode(n.children, p); if (f) return f; }
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const findNode = (nodes: TreeNode[], p: string): TreeNode | null => { for (const n of nodes) { if (n.path === p) return n; if (n.children) { const f = findNode(n.children, p); if (f) return f; } } return null; };
|
||||
const node = findNode(tree, path);
|
||||
if (node && !node.loaded) {
|
||||
try {
|
||||
const children = await fetchDir(path);
|
||||
setTree(prev => {
|
||||
const update = (nodes: TreeNode[]): TreeNode[] =>
|
||||
nodes.map(n => {
|
||||
if (n.path === path) return { ...n, children, loaded: true };
|
||||
if (n.children) return { ...n, children: update(n.children) };
|
||||
return n;
|
||||
});
|
||||
return update(prev);
|
||||
});
|
||||
} catch { /* silently fail */ }
|
||||
const children = await fetchDir(path).catch(() => []);
|
||||
setTree(prev => {
|
||||
const update = (nodes: TreeNode[]): TreeNode[] => nodes.map(n => n.path === path ? { ...n, children, loaded: true } : n.children ? { ...n, children: update(n.children) } : n);
|
||||
return update(prev);
|
||||
});
|
||||
}
|
||||
}, [tree, fetchDir]);
|
||||
|
||||
// Select a file and load its content
|
||||
const handleSelectFile = useCallback(async (path: string) => {
|
||||
setSelectedPath(path);
|
||||
setFileContent(null);
|
||||
setFileName(path.split("/").pop() ?? null);
|
||||
setFileLoading(true);
|
||||
setSelectedPath(path); setFileContent(null); setFileName(path.split("/").pop() ?? null); setFileLoading(true);
|
||||
try {
|
||||
const res = await fetch(`/api/projects/${projectId}/file?path=${encodeURIComponent(path)}`);
|
||||
const data = await res.json();
|
||||
setFileContent(data.content ?? "");
|
||||
} catch {
|
||||
setFileContent("// Failed to load file content");
|
||||
} finally {
|
||||
setFileLoading(false);
|
||||
}
|
||||
} catch { setFileContent("// Failed to load"); }
|
||||
finally { setFileLoading(false); }
|
||||
}, [projectId]);
|
||||
|
||||
const lang = fileName ? langFromName(fileName) : "text";
|
||||
const lines = (fileContent ?? "").split("\n");
|
||||
|
||||
if (!appName || !rootPath) {
|
||||
return <EmptyState />;
|
||||
if (!appName) {
|
||||
return (
|
||||
<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 12, padding: 40, textAlign: "center" }}>
|
||||
<div style={{ width: 48, height: 48, borderRadius: 12, background: "#f0ece4", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "1.3rem", color: "#b5b0a6" }}>▢</div>
|
||||
<div>
|
||||
<div style={{ fontSize: "0.88rem", fontWeight: 600, color: "#1a1a1a", marginBottom: 6, fontFamily: "Outfit, sans-serif" }}>Select an app</div>
|
||||
<div style={{ fontSize: "0.78rem", color: "#a09a90", maxWidth: 240, lineHeight: 1.5, fontFamily: "Outfit, sans-serif" }}>Choose an app from the left to browse its source files.</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", height: "100%", overflow: "hidden" }}>
|
||||
|
||||
{/* ── File tree ── */}
|
||||
<div style={{
|
||||
width: 230, flexShrink: 0,
|
||||
borderRight: "1px solid #e8e4dc",
|
||||
background: "#faf8f5",
|
||||
display: "flex", flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
}}>
|
||||
{/* App name header */}
|
||||
<div style={{
|
||||
padding: "11px 14px 10px",
|
||||
borderBottom: "1px solid #e8e4dc",
|
||||
display: "flex", alignItems: "center", gap: 8, flexShrink: 0,
|
||||
}}>
|
||||
<span style={{ fontSize: "0.72rem", color: "#a09a90" }}>▢</span>
|
||||
<span style={{ fontSize: "0.78rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "Outfit, sans-serif" }}>
|
||||
{appName}
|
||||
</span>
|
||||
<div style={{ flex: 1, display: "flex", overflow: "hidden" }}>
|
||||
{/* File tree */}
|
||||
<div style={{ width: 200, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", flexDirection: "column", overflow: "hidden" }}>
|
||||
<div style={{ padding: "10px 12px 8px", borderBottom: "1px solid #e8e4dc", display: "flex", alignItems: "center", gap: 6, flexShrink: 0 }}>
|
||||
<span style={{ fontSize: "0.7rem", color: "#a09a90" }}>▢</span>
|
||||
<span style={{ fontSize: "0.76rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "Outfit, sans-serif" }}>{appName}</span>
|
||||
</div>
|
||||
|
||||
{/* Tree */}
|
||||
<div style={{ flex: 1, overflow: "auto", padding: "6px 4px" }}>
|
||||
{treeLoading && (
|
||||
<div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>Loading…</div>
|
||||
)}
|
||||
{treeError && (
|
||||
<div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#e53e3e", fontFamily: "Outfit, sans-serif" }}>{treeError}</div>
|
||||
)}
|
||||
{!treeLoading && !treeError && tree.length === 0 && (
|
||||
<div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>Empty folder.</div>
|
||||
)}
|
||||
{tree.map(node => (
|
||||
<TreeRow
|
||||
key={node.path}
|
||||
node={node}
|
||||
depth={0}
|
||||
selectedPath={selectedPath}
|
||||
onSelect={handleSelectFile}
|
||||
onToggle={handleToggle}
|
||||
/>
|
||||
))}
|
||||
<div style={{ flex: 1, overflow: "auto", padding: "4px" }}>
|
||||
{treeLoading && <div style={{ padding: "12px", fontSize: "0.72rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>Loading…</div>}
|
||||
{!treeLoading && tree.length === 0 && <div style={{ padding: "12px", fontSize: "0.72rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>Empty.</div>}
|
||||
{tree.map(n => <TreeRow key={n.path} node={n} depth={0} selectedPath={selectedPath} onSelect={handleSelectFile} onToggle={handleToggle} />)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Code preview ── */}
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0, background: "#1e1e1e", overflow: "hidden" }}>
|
||||
|
||||
{/* Breadcrumb bar */}
|
||||
<div style={{
|
||||
padding: "10px 20px",
|
||||
borderBottom: "1px solid #2d2d2d",
|
||||
background: "#252526",
|
||||
display: "flex", alignItems: "center", gap: 8, flexShrink: 0,
|
||||
}}>
|
||||
{/* Code viewer */}
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", background: "#1e1e1e", overflow: "hidden" }}>
|
||||
<div style={{ padding: "9px 18px", borderBottom: "1px solid #2d2d2d", background: "#252526", display: "flex", alignItems: "center", gap: 8, flexShrink: 0 }}>
|
||||
{selectedPath ? (
|
||||
<span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem", color: "#a09a90" }}>
|
||||
{/* Show path relative to rootPath */}
|
||||
{(() => {
|
||||
const rel = selectedPath.startsWith(rootPath + "/")
|
||||
? selectedPath.slice(rootPath.length + 1)
|
||||
: selectedPath;
|
||||
return rel.split("/").map((seg, i, arr) => (
|
||||
<span key={i}>
|
||||
{i > 0 && <span style={{ color: "#555", margin: "0 4px" }}>/</span>}
|
||||
<span style={{ color: i === arr.length - 1 ? "#d4d4d4" : "#888" }}>{seg}</span>
|
||||
</span>
|
||||
));
|
||||
})()}
|
||||
<span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.71rem", color: "#a09a90" }}>
|
||||
{(() => { const rel = selectedPath.startsWith(rootPath + "/") ? selectedPath.slice(rootPath.length + 1) : selectedPath; return rel.split("/").map((s, i, a) => <span key={i}>{i > 0 && <span style={{ color: "#555", margin: "0 3px" }}>/</span>}<span style={{ color: i === a.length - 1 ? "#d4d4d4" : "#888" }}>{s}</span></span>); })()}
|
||||
</span>
|
||||
) : (
|
||||
<span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem", color: "#555" }}>
|
||||
Select a file to view
|
||||
</span>
|
||||
)}
|
||||
{fileName && (
|
||||
<span style={{ marginLeft: "auto", fontFamily: "IBM Plex Mono, monospace", fontSize: "0.63rem", color: "#555", textTransform: "uppercase" }}>
|
||||
{lang}
|
||||
</span>
|
||||
)}
|
||||
) : <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.71rem", color: "#555" }}>Select a file</span>}
|
||||
{fileName && <span style={{ marginLeft: "auto", fontFamily: "IBM Plex Mono, monospace", fontSize: "0.62rem", color: "#555", textTransform: "uppercase" }}>{lang}</span>}
|
||||
</div>
|
||||
|
||||
{/* Code area */}
|
||||
<div style={{ flex: 1, overflow: "auto", display: "flex" }}>
|
||||
{!selectedPath && !fileLoading && (
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", color: "#555", fontSize: "0.8rem", fontFamily: "IBM Plex Mono, monospace" }}>
|
||||
Select a file from the tree
|
||||
</div>
|
||||
)}
|
||||
{fileLoading && (
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", color: "#555", fontSize: "0.8rem", fontFamily: "IBM Plex Mono, monospace" }}>
|
||||
Loading…
|
||||
</div>
|
||||
)}
|
||||
{!selectedPath && !fileLoading && <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", color: "#555", fontSize: "0.78rem", fontFamily: "IBM Plex Mono, monospace" }}>Select a file to view</div>}
|
||||
{fileLoading && <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", color: "#555", fontSize: "0.78rem", fontFamily: "IBM Plex Mono, monospace" }}>Loading…</div>}
|
||||
{!fileLoading && fileContent !== null && (
|
||||
<div style={{ display: "flex", width: "100%", overflow: "auto" }}>
|
||||
{/* Line numbers */}
|
||||
<div style={{
|
||||
padding: "16px 0", background: "#1e1e1e",
|
||||
borderRight: "1px solid #2d2d2d",
|
||||
textAlign: "right", userSelect: "none", flexShrink: 0, minWidth: 44,
|
||||
}}>
|
||||
{lines.map((_, i) => (
|
||||
<div key={i} style={{
|
||||
fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem",
|
||||
lineHeight: "1.4em", color: "#555", padding: "0 12px 0 8px",
|
||||
}}>
|
||||
{i + 1}
|
||||
</div>
|
||||
))}
|
||||
<div style={{ display: "flex", width: "100%" }}>
|
||||
<div style={{ padding: "14px 0", background: "#1e1e1e", borderRight: "1px solid #2d2d2d", textAlign: "right", userSelect: "none", flexShrink: 0, minWidth: 40 }}>
|
||||
{lines.map((_, i) => <div key={i} style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.71rem", lineHeight: "1.4em", color: "#555", padding: "0 10px 0 6px" }}>{i + 1}</div>)}
|
||||
</div>
|
||||
{/* Code */}
|
||||
<div style={{
|
||||
padding: "16px 24px",
|
||||
fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem",
|
||||
lineHeight: "1.4em", color: "#d4d4d4",
|
||||
flex: 1, whiteSpace: "pre", overflow: "auto",
|
||||
}}>
|
||||
<div style={{ padding: "14px 22px", fontFamily: "IBM Plex Mono, monospace", fontSize: "0.71rem", lineHeight: "1.4em", color: "#d4d4d4", flex: 1, whiteSpace: "pre", overflow: "auto" }}>
|
||||
{highlightCode(fileContent, lang)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -401,12 +320,100 @@ function BuildPageInner() {
|
||||
);
|
||||
}
|
||||
|
||||
// ── Page export (Suspense wraps useSearchParams) ──────────────────────────────
|
||||
// ── Main Build hub ────────────────────────────────────────────────────────────
|
||||
|
||||
function BuildHubInner() {
|
||||
const params = useParams();
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const projectId = params.projectId as string;
|
||||
const workspace = params.workspace as string;
|
||||
|
||||
const section = searchParams.get("section") ?? "code";
|
||||
const activeApp = searchParams.get("app") ?? "";
|
||||
const activeRoot = searchParams.get("root") ?? "";
|
||||
const activeInfra = searchParams.get("tab") ?? "builds";
|
||||
const activeSurfaceParam = searchParams.get("surface") ?? "";
|
||||
|
||||
const [apps, setApps] = useState<AppEntry[]>([]);
|
||||
const [surfaces, setSurfaces] = useState<SurfaceEntry[]>([]);
|
||||
const [activeSurfaceId, setActiveSurfaceId] = useState<string>(activeSurfaceParam);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`/api/projects/${projectId}/apps`).then(r => r.json()).then(d => setApps(d.apps ?? [])).catch(() => {});
|
||||
fetch(`/api/projects/${projectId}/design-surfaces`).then(r => r.json()).then(d => {
|
||||
const ids: string[] = d.surfaces ?? [];
|
||||
const themes: Record<string, string> = d.surfaceThemes ?? {};
|
||||
setSurfaces(ids.map(id => ({ id, label: SURFACE_LABELS[id] ?? id, lockedTheme: themes[id] })));
|
||||
if (!activeSurfaceId && ids.length > 0) setActiveSurfaceId(ids[0]);
|
||||
}).catch(() => {});
|
||||
}, [projectId]);
|
||||
|
||||
const navigate = (params: Record<string, string>) => {
|
||||
const sp = new URLSearchParams({ section, ...params });
|
||||
router.push(`/${workspace}/project/${projectId}/build?${sp.toString()}`, { scroll: false });
|
||||
};
|
||||
|
||||
const setSection = (s: string) => router.push(`/${workspace}/project/${projectId}/build?section=${s}`, { scroll: false });
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", height: "100%", fontFamily: "Outfit, sans-serif", overflow: "hidden" }}>
|
||||
|
||||
{/* ── Left nav ── */}
|
||||
<div style={{ width: 200, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", flexDirection: "column", overflow: "auto" }}>
|
||||
|
||||
{/* Code group */}
|
||||
<div style={NAV_GROUP_LABEL}>Code</div>
|
||||
{apps.length > 0 ? apps.map(app => (
|
||||
<NavItem key={app.name} label={app.name} indent
|
||||
active={section === "code" && activeApp === app.name}
|
||||
onClick={() => navigate({ section: "code", app: app.name, root: app.path })}
|
||||
/>
|
||||
)) : (
|
||||
<NavItem label="No apps yet" indent active={section === "code" && !activeApp} onClick={() => setSection("code")} />
|
||||
)}
|
||||
|
||||
{/* Layouts group */}
|
||||
<div style={{ ...NAV_GROUP_LABEL, marginTop: 8 }}>Layouts</div>
|
||||
{surfaces.length > 0 ? surfaces.map(s => (
|
||||
<NavItem key={s.id} label={SURFACE_LABELS[s.id] ?? s.id} indent
|
||||
active={section === "layouts" && activeSurfaceId === s.id}
|
||||
onClick={() => { setActiveSurfaceId(s.id); navigate({ section: "layouts", surface: s.id }); }}
|
||||
/>
|
||||
)) : (
|
||||
<NavItem label="Not configured" indent active={section === "layouts"} onClick={() => setSection("layouts")} />
|
||||
)}
|
||||
|
||||
{/* Infrastructure group */}
|
||||
<div style={{ ...NAV_GROUP_LABEL, marginTop: 8 }}>Infrastructure</div>
|
||||
{INFRA_ITEMS.map(item => (
|
||||
<NavItem key={item.id} label={item.label} indent
|
||||
active={section === "infrastructure" && activeInfra === item.id}
|
||||
onClick={() => navigate({ section: "infrastructure", tab: item.id })}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* ── Content ── */}
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", minWidth: 0 }}>
|
||||
{section === "code" && (
|
||||
<CodeContent projectId={projectId} appName={activeApp} rootPath={activeRoot} />
|
||||
)}
|
||||
{section === "layouts" && (
|
||||
<LayoutsContent surfaces={surfaces} projectId={projectId} workspace={workspace} activeSurfaceId={activeSurfaceId} onSelectSurface={id => { setActiveSurfaceId(id); navigate({ section: "layouts", surface: id }); }} />
|
||||
)}
|
||||
{section === "infrastructure" && (
|
||||
<InfraContent tab={activeInfra} projectId={projectId} workspace={workspace} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function BuildPage() {
|
||||
return (
|
||||
<Suspense fallback={<div style={{ display: "flex", height: "100%", alignItems: "center", justifyContent: "center", color: "#a09a90", fontFamily: "Outfit, sans-serif", fontSize: "0.85rem" }}>Loading…</div>}>
|
||||
<BuildPageInner />
|
||||
<BuildHubInner />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
144
app/[workspace]/project/[projectId]/growth/page.tsx
Normal file
144
app/[workspace]/project/[projectId]/growth/page.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense } from "react";
|
||||
import { useParams, useSearchParams, useRouter } from "next/navigation";
|
||||
|
||||
const SECTIONS = [
|
||||
{
|
||||
id: "marketing-site",
|
||||
label: "Marketing Site",
|
||||
icon: "◌",
|
||||
title: "Marketing Site",
|
||||
desc: "Your public-facing website — hero, features, pricing, blog, and landing pages. Connected to your design surface and deployed via your infrastructure.",
|
||||
items: ["Hero & Landing", "Features", "Pricing Page", "Blog", "Case Studies", "About"],
|
||||
},
|
||||
{
|
||||
id: "communications",
|
||||
label: "Communications",
|
||||
icon: "◈",
|
||||
title: "Communications",
|
||||
desc: "Outbound messaging — product announcements, newsletters, launch emails, and drip campaigns sent to your audience.",
|
||||
items: ["Announcements", "Newsletter", "Launch Sequence", "Drip Campaigns"],
|
||||
},
|
||||
{
|
||||
id: "channels",
|
||||
label: "Channels",
|
||||
icon: "↗",
|
||||
title: "Distribution Channels",
|
||||
desc: "Where your product gets discovered — SEO, social, Product Hunt, app stores, partnerships, and paid acquisition.",
|
||||
items: ["SEO & Search", "Social Media", "Product Hunt", "App Stores", "Partnerships", "Paid Ads"],
|
||||
},
|
||||
{
|
||||
id: "pages",
|
||||
label: "Pages",
|
||||
icon: "▭",
|
||||
title: "Pages",
|
||||
desc: "Individual landing pages for campaigns, experiments, and specific audience segments. Build, publish, and A/B test.",
|
||||
items: ["Campaign Pages", "A/B Tests", "Event Pages", "Partner Pages", "Waitlist"],
|
||||
},
|
||||
] as const;
|
||||
|
||||
type SectionId = typeof SECTIONS[number]["id"];
|
||||
|
||||
const NAV_GROUP: React.CSSProperties = {
|
||||
fontSize: "0.6rem", fontWeight: 700, color: "#b5b0a6",
|
||||
letterSpacing: "0.09em", textTransform: "uppercase",
|
||||
padding: "14px 12px 6px", fontFamily: "Outfit, sans-serif",
|
||||
};
|
||||
|
||||
function GrowthInner() {
|
||||
const params = useParams();
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const workspace = params.workspace as string;
|
||||
const projectId = params.projectId as string;
|
||||
|
||||
const activeId = (searchParams.get("section") ?? "marketing-site") as SectionId;
|
||||
const active = SECTIONS.find(s => s.id === activeId) ?? SECTIONS[0];
|
||||
|
||||
const setSection = (id: string) =>
|
||||
router.push(`/${workspace}/project/${projectId}/growth?section=${id}`, { scroll: false });
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", height: "100%", fontFamily: "Outfit, sans-serif", overflow: "hidden" }}>
|
||||
|
||||
{/* Left nav */}
|
||||
<div style={{ width: 200, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", flexDirection: "column", overflow: "auto" }}>
|
||||
<div style={NAV_GROUP}>Growth</div>
|
||||
{SECTIONS.map(s => {
|
||||
const isActive = activeId === s.id;
|
||||
return (
|
||||
<button key={s.id} onClick={() => setSection(s.id)} style={{
|
||||
display: "flex", alignItems: "center", gap: 8, width: "100%", textAlign: "left",
|
||||
background: isActive ? "#f0ece4" : "transparent", border: "none", cursor: "pointer",
|
||||
padding: "6px 12px", borderRadius: 5,
|
||||
fontSize: "0.78rem", fontWeight: isActive ? 600 : 440,
|
||||
color: isActive ? "#1a1a1a" : "#5a5550",
|
||||
}}
|
||||
onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
|
||||
onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
|
||||
>
|
||||
<span style={{ fontSize: "0.65rem", opacity: 0.55, width: 14, textAlign: "center" }}>{s.icon}</span>
|
||||
{s.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div style={{ flex: 1, overflow: "auto", display: "flex", flexDirection: "column" }}>
|
||||
<div style={{ padding: "28px 32px", maxWidth: 800 }}>
|
||||
<div style={{ marginBottom: 24 }}>
|
||||
<div style={{ fontSize: "1.1rem", fontWeight: 700, color: "#1a1a1a", marginBottom: 6 }}>{active.title}</div>
|
||||
<div style={{ fontSize: "0.82rem", color: "#6b6560", lineHeight: 1.65, maxWidth: 520 }}>{active.desc}</div>
|
||||
</div>
|
||||
|
||||
{/* Feature items */}
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 12, marginBottom: 32 }}>
|
||||
{active.items.map(item => (
|
||||
<div key={item} style={{
|
||||
background: "#fff", border: "1px solid #e8e4dc", borderRadius: 9,
|
||||
padding: "14px 16px", display: "flex", alignItems: "center", justifyContent: "space-between",
|
||||
}}>
|
||||
<span style={{ fontSize: "0.8rem", fontWeight: 500, color: "#1a1a1a" }}>{item}</span>
|
||||
<span style={{ fontSize: "0.65rem", color: "#c5c0b8", background: "#f6f4f0", padding: "2px 7px", borderRadius: 4 }}>Soon</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<div style={{
|
||||
background: "linear-gradient(135deg, #1a1a1a 0%, #2d2820 100%)",
|
||||
borderRadius: 12, padding: "24px 28px",
|
||||
display: "flex", alignItems: "center", justifyContent: "space-between",
|
||||
gap: 20,
|
||||
}}>
|
||||
<div>
|
||||
<div style={{ fontSize: "0.85rem", fontWeight: 600, color: "#fff", marginBottom: 4 }}>
|
||||
{active.title} is coming to VIBN
|
||||
</div>
|
||||
<div style={{ fontSize: "0.75rem", color: "#8a8478", lineHeight: 1.5 }}>
|
||||
We're building this section next. Shape it by telling us what you need.
|
||||
</div>
|
||||
</div>
|
||||
<button style={{
|
||||
background: "#d4a04a", color: "#fff", border: "none", borderRadius: 8,
|
||||
padding: "9px 20px", fontSize: "0.78rem", fontWeight: 600,
|
||||
cursor: "pointer", whiteSpace: "nowrap", flexShrink: 0,
|
||||
}}>
|
||||
Give feedback
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function GrowthPage() {
|
||||
return (
|
||||
<Suspense fallback={<div style={{ display: "flex", height: "100%", alignItems: "center", justifyContent: "center", color: "#a09a90", fontFamily: "Outfit, sans-serif", fontSize: "0.85rem" }}>Loading…</div>}>
|
||||
<GrowthInner />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -23,14 +23,12 @@ interface ProjectShellProps {
|
||||
}
|
||||
|
||||
const ALL_TABS = [
|
||||
{ id: "overview", label: "Atlas", path: "overview" },
|
||||
{ id: "prd", label: "PRD", path: "prd" },
|
||||
{ id: "design", label: "Design", path: "design" },
|
||||
{ id: "build", label: "Build", path: "build" },
|
||||
{ id: "deployment", label: "Launch", path: "deployment" },
|
||||
{ id: "grow", label: "Grow", path: "grow" },
|
||||
{ id: "insights", label: "Insights", path: "insights" },
|
||||
{ id: "settings", label: "Settings", path: "settings" },
|
||||
{ id: "overview", label: "Atlas", path: "overview" },
|
||||
{ id: "prd", label: "PRD", path: "prd" },
|
||||
{ id: "build", label: "Build", path: "build" },
|
||||
{ id: "growth", label: "Growth", path: "growth" },
|
||||
{ id: "assist", label: "Assist", path: "assist" },
|
||||
{ id: "analytics", label: "Analytics", path: "analytics" },
|
||||
];
|
||||
|
||||
function getTabsForMode(
|
||||
@@ -41,7 +39,7 @@ function getTabsForMode(
|
||||
return ALL_TABS.filter(t => t.id !== "prd");
|
||||
case "migration":
|
||||
return ALL_TABS
|
||||
.filter(t => !["prd", "grow", "insights"].includes(t.id))
|
||||
.filter(t => t.id !== "prd")
|
||||
.map(t => t.id === "overview" ? { ...t, label: "Migration Plan" } : t);
|
||||
default:
|
||||
return ALL_TABS;
|
||||
|
||||
Reference in New Issue
Block a user