Adopt Stackless UI: warm palette, sidebar, project tab bar with Design tab

- Add Google Fonts (Newsreader/Outfit/IBM Plex Mono) + warm beige CSS palette
- New VIBNSidebar: Stackless-style 220px sidebar with project list + user footer
- New ProjectShell: project header with name/status/progress% + tab bar
- Tabs: Atlas → PRD → Design → Build → Deploy → Settings
- New /prd page: section-by-section progress view
- New /build page: locked until PRD complete
- Projects list page: Stackless-style row layout
- Simplify overview page to just render AtlasChat

Made-with: Cursor
This commit is contained in:
2026-03-02 16:01:33 -08:00
parent 7ba3b9563e
commit aaa3f51592
9 changed files with 1051 additions and 451 deletions

View File

@@ -1,9 +1,8 @@
"use client";
import { WorkspaceLeftRail } from "@/components/layout/workspace-left-rail";
import { RightPanel } from "@/components/layout/right-panel";
import { VIBNSidebar } from "@/components/layout/vibn-sidebar";
import { ProjectAssociationPrompt } from "@/components/project-association-prompt";
import { ReactNode, useState } from "react";
import { ReactNode } from "react";
import { useParams } from "next/navigation";
import { Toaster } from "sonner";
@@ -14,26 +13,16 @@ export default function ProjectsLayout({
}) {
const params = useParams();
const workspace = params.workspace as string;
const [activeSection, setActiveSection] = useState<string>("projects");
return (
<>
<div className="flex h-screen w-full overflow-hidden bg-background">
{/* Left Rail - Workspace Navigation */}
<WorkspaceLeftRail activeSection={activeSection} onSectionChange={setActiveSection} />
{/* Main Content Area */}
<main className="flex-1 flex flex-col overflow-hidden">
<div style={{ display: "flex", height: "100vh", background: "#f6f4f0", overflow: "hidden" }}>
<VIBNSidebar workspace={workspace} />
<main style={{ flex: 1, overflow: "auto" }}>
{children}
</main>
{/* Right Panel - AI Chat */}
<RightPanel />
</div>
{/* Project Association Prompt - Detects new workspaces */}
<ProjectAssociationPrompt workspace={workspace} />
<Toaster position="top-center" />
</>
);