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:
176
app/[workspace]/project/[projectId]/build/page.tsx
Normal file
176
app/[workspace]/project/[projectId]/build/page.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
|
||||
interface Project {
|
||||
id: string;
|
||||
status?: string;
|
||||
prd?: string;
|
||||
giteaRepoUrl?: string;
|
||||
}
|
||||
|
||||
const BUILD_FEATURES = [
|
||||
"Authentication system",
|
||||
"Database schema",
|
||||
"API endpoints",
|
||||
"Core UI",
|
||||
"Business logic",
|
||||
"Tests",
|
||||
];
|
||||
|
||||
export default function BuildPage() {
|
||||
const params = useParams();
|
||||
const projectId = params.projectId as string;
|
||||
const workspace = params.workspace as string;
|
||||
const [project, setProject] = useState<Project | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`/api/projects/${projectId}`)
|
||||
.then((r) => r.json())
|
||||
.then((d) => {
|
||||
setProject(d.project);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => setLoading(false));
|
||||
}, [projectId]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "Outfit, sans-serif", color: "#a09a90" }}>
|
||||
Loading…
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const hasRepo = Boolean(project?.giteaRepoUrl);
|
||||
const hasPRD = Boolean(project?.prd);
|
||||
|
||||
if (!hasPRD) {
|
||||
return (
|
||||
<div
|
||||
className="vibn-enter"
|
||||
style={{
|
||||
flex: 1, display: "flex", alignItems: "center", justifyContent: "center",
|
||||
padding: 40, fontFamily: "Outfit, sans-serif",
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: "center", maxWidth: 360 }}>
|
||||
<div style={{
|
||||
width: 56, height: 56, borderRadius: 14,
|
||||
background: "#fff", border: "1px solid #e8e4dc",
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
fontSize: "1.4rem", margin: "0 auto 18px",
|
||||
boxShadow: "0 2px 8px #1a1a1a08",
|
||||
}}>
|
||||
🔒
|
||||
</div>
|
||||
<h3 style={{
|
||||
fontFamily: "Newsreader, serif", fontSize: "1.3rem",
|
||||
fontWeight: 400, color: "#1a1a1a", marginBottom: 8,
|
||||
}}>
|
||||
Complete your PRD first
|
||||
</h3>
|
||||
<p style={{ fontSize: "0.82rem", color: "#a09a90", lineHeight: 1.6, marginBottom: 20 }}>
|
||||
Finish your discovery with Atlas, then the builder unlocks automatically.
|
||||
</p>
|
||||
<Link
|
||||
href={`/${workspace}/project/${projectId}/overview`}
|
||||
style={{
|
||||
display: "inline-block",
|
||||
padding: "9px 20px", borderRadius: 7,
|
||||
background: "#1a1a1a", color: "#fff",
|
||||
fontSize: "0.78rem", fontWeight: 600,
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
textDecoration: "none",
|
||||
}}
|
||||
>
|
||||
Continue with Atlas →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!hasRepo) {
|
||||
return (
|
||||
<div
|
||||
className="vibn-enter"
|
||||
style={{
|
||||
flex: 1, display: "flex", alignItems: "center", justifyContent: "center",
|
||||
padding: 40, fontFamily: "Outfit, sans-serif",
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: "center", maxWidth: 360 }}>
|
||||
<div style={{
|
||||
width: 56, height: 56, borderRadius: 14,
|
||||
background: "#fff", border: "1px solid #e8e4dc",
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
fontSize: "1.4rem", margin: "0 auto 18px",
|
||||
boxShadow: "0 2px 8px #1a1a1a08",
|
||||
}}>
|
||||
⚡
|
||||
</div>
|
||||
<h3 style={{
|
||||
fontFamily: "Newsreader, serif", fontSize: "1.3rem",
|
||||
fontWeight: 400, color: "#1a1a1a", marginBottom: 8,
|
||||
}}>
|
||||
PRD ready — build coming soon
|
||||
</h3>
|
||||
<p style={{ fontSize: "0.82rem", color: "#a09a90", lineHeight: 1.6 }}>
|
||||
The Architect agent will generate your project structure and kick off the build pipeline.
|
||||
This feature is in active development.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="vibn-enter"
|
||||
style={{
|
||||
flex: 1, display: "flex", alignItems: "center", justifyContent: "center",
|
||||
padding: 40, fontFamily: "Outfit, sans-serif",
|
||||
}}
|
||||
>
|
||||
<div style={{ width: "100%", maxWidth: 500 }}>
|
||||
<h3 style={{
|
||||
fontFamily: "Newsreader, serif", fontSize: "1.2rem",
|
||||
fontWeight: 400, color: "#1a1a1a", marginBottom: 18,
|
||||
}}>
|
||||
Build progress
|
||||
</h3>
|
||||
{BUILD_FEATURES.map((f, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="vibn-enter"
|
||||
style={{
|
||||
display: "flex", alignItems: "center", gap: 12,
|
||||
padding: "12px 16px", marginBottom: 4, borderRadius: 8,
|
||||
background: "#fff", border: "1px solid #e8e4dc",
|
||||
animationDelay: `${i * 0.05}s`,
|
||||
}}
|
||||
>
|
||||
<span style={{
|
||||
width: 7, height: 7, borderRadius: "50%",
|
||||
background: "#d4a04a", display: "inline-block", flexShrink: 0,
|
||||
}} />
|
||||
<span style={{ flex: 1, fontSize: "0.84rem", color: "#1a1a1a" }}>{f}</span>
|
||||
<div style={{ width: 80, height: 3, borderRadius: 2, background: "#eae6de" }}>
|
||||
<div style={{ height: "100%", width: "0%", borderRadius: 2, background: "#3d5afe" }} />
|
||||
</div>
|
||||
<span style={{
|
||||
fontFamily: "IBM Plex Mono, monospace",
|
||||
fontSize: "0.7rem", color: "#a09a90", minWidth: 28, textAlign: "right",
|
||||
}}>
|
||||
0%
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,13 @@
|
||||
import { AppShell } from "@/components/layout/app-shell";
|
||||
import { ProjectShell } from "@/components/layout/project-shell";
|
||||
import { query } from "@/lib/db-postgres";
|
||||
|
||||
async function getProjectName(projectId: string): Promise<string> {
|
||||
interface ProjectData {
|
||||
name: string;
|
||||
status?: string;
|
||||
progress?: number;
|
||||
}
|
||||
|
||||
async function getProjectData(projectId: string): Promise<ProjectData> {
|
||||
try {
|
||||
const rows = await query<{ data: any }>(
|
||||
`SELECT data FROM fs_projects WHERE id = $1 LIMIT 1`,
|
||||
@@ -9,12 +15,16 @@ async function getProjectName(projectId: string): Promise<string> {
|
||||
);
|
||||
if (rows.length > 0) {
|
||||
const data = rows[0].data;
|
||||
return data?.productName || data?.name || "Project";
|
||||
return {
|
||||
name: data?.productName || data?.name || "Project",
|
||||
status: data?.status,
|
||||
progress: data?.progress ?? 0,
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching project name:", error);
|
||||
console.error("Error fetching project:", error);
|
||||
}
|
||||
return "Project";
|
||||
return { name: "Project" };
|
||||
}
|
||||
|
||||
export default async function ProjectLayout({
|
||||
@@ -25,11 +35,17 @@ export default async function ProjectLayout({
|
||||
params: Promise<{ workspace: string; projectId: string }>;
|
||||
}) {
|
||||
const { workspace, projectId } = await params;
|
||||
const projectName = await getProjectName(projectId);
|
||||
const project = await getProjectData(projectId);
|
||||
|
||||
return (
|
||||
<AppShell workspace={workspace} projectId={projectId} projectName={projectName}>
|
||||
<ProjectShell
|
||||
workspace={workspace}
|
||||
projectId={projectId}
|
||||
projectName={project.name}
|
||||
projectStatus={project.status}
|
||||
projectProgress={project.progress}
|
||||
>
|
||||
{children}
|
||||
</AppShell>
|
||||
</ProjectShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,149 +3,54 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { OrchestratorChat } from "@/components/OrchestratorChat";
|
||||
import { AtlasChat } from "@/components/AtlasChat";
|
||||
import {
|
||||
Terminal,
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
} from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { OrchestratorChat } from "@/components/OrchestratorChat";
|
||||
import { Loader2 } from "lucide-react";
|
||||
|
||||
interface Project {
|
||||
id: string;
|
||||
name: string;
|
||||
productName: string;
|
||||
productVision?: string;
|
||||
status?: string;
|
||||
currentPhase?: string;
|
||||
theiaWorkspaceUrl?: string;
|
||||
stage?: 'discovery' | 'architecture' | 'building' | 'active';
|
||||
prd?: string;
|
||||
stage?: "discovery" | "architecture" | "building" | "active";
|
||||
}
|
||||
|
||||
|
||||
export default function ProjectOverviewPage() {
|
||||
const params = useParams();
|
||||
const projectId = params.projectId as string;
|
||||
const { status: authStatus } = useSession();
|
||||
|
||||
const [project, setProject] = useState<Project | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [provisioning, setProvisioning] = useState(false);
|
||||
|
||||
const fetchProject = async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/projects/${projectId}`);
|
||||
if (!res.ok) {
|
||||
const err = await res.json();
|
||||
throw new Error(err.error || "Failed to load project");
|
||||
}
|
||||
const data = await res.json();
|
||||
setProject(data.project);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Unknown error");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setRefreshing(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (authStatus === "authenticated") fetchProject();
|
||||
else if (authStatus === "unauthenticated") setLoading(false);
|
||||
}, [authStatus, projectId]);
|
||||
|
||||
const handleRefresh = () => {
|
||||
setRefreshing(true);
|
||||
fetchProject();
|
||||
};
|
||||
|
||||
const handleProvisionWorkspace = async () => {
|
||||
setProvisioning(true);
|
||||
try {
|
||||
const res = await fetch(`/api/projects/${projectId}/workspace`, { method: 'POST' });
|
||||
const data = await res.json();
|
||||
if (res.ok && data.workspaceUrl) {
|
||||
toast.success('Workspace provisioned — starting up…');
|
||||
await fetchProject();
|
||||
} else {
|
||||
toast.error(data.error || 'Failed to provision workspace');
|
||||
}
|
||||
} catch {
|
||||
toast.error('An error occurred');
|
||||
} finally {
|
||||
setProvisioning(false);
|
||||
if (authStatus !== "authenticated") {
|
||||
if (authStatus === "unauthenticated") setLoading(false);
|
||||
return;
|
||||
}
|
||||
};
|
||||
fetch(`/api/projects/${projectId}`)
|
||||
.then((r) => r.json())
|
||||
.then((d) => setProject(d.project))
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false));
|
||||
}, [authStatus, projectId]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-32">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "Outfit, sans-serif" }}>
|
||||
<Loader2 style={{ width: 24, height: 24, color: "#a09a90" }} className="animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !project) {
|
||||
if (!project) {
|
||||
return (
|
||||
<div className="container mx-auto py-8 px-6 max-w-5xl">
|
||||
<div className="rounded-xl border border-red-500/30 bg-red-500/5 py-8 text-center">
|
||||
<p className="text-sm text-red-600">{error ?? "Project not found"}</p>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "Outfit, sans-serif", color: "#a09a90", fontSize: "0.88rem" }}>
|
||||
Project not found.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-8 px-6 max-w-5xl space-y-6">
|
||||
|
||||
{/* ── Header ── */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">{project.productName}</h1>
|
||||
{project.productVision && (
|
||||
<p className="text-muted-foreground text-sm mt-1 max-w-xl">{project.productVision}</p>
|
||||
)}
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<Badge variant={project.status === "active" ? "default" : "secondary"}>
|
||||
{project.status ?? "active"}
|
||||
</Badge>
|
||||
{project.currentPhase && (
|
||||
<Badge variant="outline">{project.currentPhase}</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleRefresh} disabled={refreshing}>
|
||||
<RefreshCw className={`h-4 w-4 mr-1.5 ${refreshing ? "animate-spin" : ""}`} />
|
||||
Refresh
|
||||
</Button>
|
||||
{project.theiaWorkspaceUrl ? (
|
||||
<Button size="sm" asChild>
|
||||
<a href={project.theiaWorkspaceUrl} target="_blank" rel="noopener noreferrer">
|
||||
<Terminal className="h-4 w-4 mr-1.5" />
|
||||
Open IDE
|
||||
</a>
|
||||
</Button>
|
||||
) : (
|
||||
<Button size="sm" onClick={handleProvisionWorkspace} disabled={provisioning}>
|
||||
{provisioning
|
||||
? <><Loader2 className="h-4 w-4 mr-1.5 animate-spin" />Provisioning…</>
|
||||
: <><Terminal className="h-4 w-4 mr-1.5" />Provision IDE</>
|
||||
}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Agent Panel — Atlas for discovery, Orchestrator once PRD is done ── */}
|
||||
{(!project.stage || project.stage === 'discovery') ? (
|
||||
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
|
||||
{(!project.stage || project.stage === "discovery") ? (
|
||||
<AtlasChat
|
||||
projectId={projectId}
|
||||
projectName={project.productName}
|
||||
@@ -156,7 +61,6 @@ export default function ProjectOverviewPage() {
|
||||
projectName={project.productName}
|
||||
/>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
191
app/[workspace]/project/[projectId]/prd/page.tsx
Normal file
191
app/[workspace]/project/[projectId]/prd/page.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
|
||||
const PRD_SECTIONS = [
|
||||
{ id: "executive_summary", label: "Executive Summary" },
|
||||
{ id: "problem_statement", label: "Problem Statement" },
|
||||
{ id: "users_personas", label: "Users & Personas" },
|
||||
{ id: "user_flows", label: "User Flows" },
|
||||
{ id: "feature_requirements", label: "Feature Requirements" },
|
||||
{ id: "screen_specs", label: "Screen Specs" },
|
||||
{ id: "business_model", label: "Business Model" },
|
||||
{ id: "non_functional", label: "Non-Functional Reqs" },
|
||||
{ id: "risks", label: "Risks" },
|
||||
];
|
||||
|
||||
interface PRDSection {
|
||||
id: string;
|
||||
label: string;
|
||||
status: "done" | "active" | "pending";
|
||||
pct: number;
|
||||
content?: string;
|
||||
}
|
||||
|
||||
interface Project {
|
||||
id: string;
|
||||
prd?: string;
|
||||
prdSections?: Record<string, { status: string; pct: number; content?: string }>;
|
||||
}
|
||||
|
||||
export default function PRDPage() {
|
||||
const params = useParams();
|
||||
const projectId = params.projectId as string;
|
||||
const [project, setProject] = useState<Project | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`/api/projects/${projectId}`)
|
||||
.then((r) => r.json())
|
||||
.then((d) => {
|
||||
setProject(d.project);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => setLoading(false));
|
||||
}, [projectId]);
|
||||
|
||||
// Build sections with real status if available
|
||||
const sections: PRDSection[] = PRD_SECTIONS.map((s) => {
|
||||
const saved = project?.prdSections?.[s.id];
|
||||
return {
|
||||
...s,
|
||||
status: (saved?.status as PRDSection["status"]) ?? "pending",
|
||||
pct: saved?.pct ?? 0,
|
||||
content: saved?.content,
|
||||
};
|
||||
});
|
||||
|
||||
// If we have a raw PRD markdown, show that instead of the section list
|
||||
const hasPRD = Boolean(project?.prd);
|
||||
|
||||
const totalPct = Math.round(sections.reduce((a, s) => a + s.pct, 0) / sections.length);
|
||||
const doneCount = sections.filter((s) => s.status === "done").length;
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "Outfit, sans-serif", color: "#a09a90" }}>
|
||||
Loading…
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="vibn-enter"
|
||||
style={{ padding: "28px 32px", flex: 1, overflow: "auto", fontFamily: "Outfit, sans-serif" }}
|
||||
>
|
||||
{hasPRD ? (
|
||||
/* ── Raw PRD view ── */
|
||||
<div style={{ maxWidth: 760 }}>
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 20 }}>
|
||||
<h3 style={{ fontFamily: "Newsreader, serif", fontSize: "1.2rem", fontWeight: 400, color: "#1a1a1a", margin: 0 }}>
|
||||
Product Requirements
|
||||
</h3>
|
||||
<span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.72rem", color: "#6b6560", background: "#f0ece4", padding: "4px 10px", borderRadius: 5 }}>
|
||||
PRD approved
|
||||
</span>
|
||||
</div>
|
||||
<div style={{
|
||||
background: "#fff", borderRadius: 10, border: "1px solid #e8e4dc",
|
||||
padding: "28px 32px", lineHeight: 1.8,
|
||||
fontSize: "0.88rem", color: "#2a2824",
|
||||
whiteSpace: "pre-wrap", fontFamily: "Outfit, sans-serif",
|
||||
}}>
|
||||
{project?.prd}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* ── Section progress view ── */
|
||||
<div style={{ maxWidth: 640 }}>
|
||||
{/* Progress bar */}
|
||||
<div style={{
|
||||
display: "flex", alignItems: "center", gap: 16,
|
||||
padding: "16px 20px", background: "#fff",
|
||||
border: "1px solid #e8e4dc", borderRadius: 10,
|
||||
marginBottom: 20, boxShadow: "0 1px 2px #1a1a1a05",
|
||||
}}>
|
||||
<div style={{
|
||||
fontFamily: "IBM Plex Mono, monospace",
|
||||
fontSize: "1.4rem", fontWeight: 500, color: "#1a1a1a", minWidth: 48,
|
||||
}}>
|
||||
{totalPct}%
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ height: 4, borderRadius: 2, background: "#eae6de" }}>
|
||||
<div style={{
|
||||
height: "100%", borderRadius: 2,
|
||||
width: `${totalPct}%`, background: "#1a1a1a",
|
||||
transition: "width 0.6s ease",
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
<span style={{ fontSize: "0.75rem", color: "#a09a90" }}>
|
||||
{doneCount}/{sections.length} approved
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Sections */}
|
||||
{sections.map((s, i) => (
|
||||
<div
|
||||
key={s.id}
|
||||
style={{
|
||||
display: "flex", alignItems: "center", gap: 12,
|
||||
padding: "14px 18px", marginBottom: 4,
|
||||
background: "#fff", borderRadius: 8,
|
||||
border: "1px solid #e8e4dc",
|
||||
cursor: "pointer", transition: "border-color 0.12s",
|
||||
animationDelay: `${i * 0.04}s`,
|
||||
}}
|
||||
className="vibn-enter"
|
||||
onMouseEnter={(e) => (e.currentTarget.style.borderColor = "#d0ccc4")}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.borderColor = "#e8e4dc")}
|
||||
>
|
||||
{/* Status icon */}
|
||||
<div style={{
|
||||
width: 24, height: 24, borderRadius: 6, flexShrink: 0,
|
||||
background: s.status === "done" ? "#2e7d3210"
|
||||
: s.status === "active" ? "#d4a04a12"
|
||||
: "#f6f4f0",
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
fontSize: "0.65rem", fontWeight: 700,
|
||||
color: s.status === "done" ? "#2e7d32"
|
||||
: s.status === "active" ? "#9a7b3a"
|
||||
: "#c5c0b8",
|
||||
}}>
|
||||
{s.status === "done" ? "✓" : s.status === "active" ? "◐" : "○"}
|
||||
</div>
|
||||
|
||||
<span style={{ flex: 1, fontSize: "0.84rem", color: "#1a1a1a", fontWeight: 450 }}>
|
||||
{s.label}
|
||||
</span>
|
||||
|
||||
{/* Mini progress bar */}
|
||||
<div style={{ width: 60, height: 3, borderRadius: 2, background: "#eae6de" }}>
|
||||
<div style={{
|
||||
height: "100%", borderRadius: 2, width: `${s.pct}%`,
|
||||
background: s.status === "done" ? "#2e7d32"
|
||||
: s.status === "active" ? "#d4a04a"
|
||||
: "#d0ccc4",
|
||||
}} />
|
||||
</div>
|
||||
|
||||
<span style={{
|
||||
fontSize: "0.68rem", fontFamily: "IBM Plex Mono, monospace",
|
||||
color: s.status === "done" ? "#2e7d32" : "#a09a90",
|
||||
fontWeight: 500, minWidth: 28, textAlign: "right",
|
||||
}}>
|
||||
{s.pct}%
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Hint */}
|
||||
<p style={{ fontSize: "0.78rem", color: "#b5b0a6", marginTop: 20, textAlign: "center" }}>
|
||||
Continue chatting with Atlas to complete your PRD
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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" />
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -2,38 +2,9 @@
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Plus,
|
||||
Sparkles,
|
||||
Loader2,
|
||||
MoreVertical,
|
||||
Trash2,
|
||||
GitBranch,
|
||||
GitCommit,
|
||||
Rocket,
|
||||
Terminal,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Clock,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { ProjectCreationModal } from "@/components/project-creation-modal";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
@@ -44,34 +15,16 @@ import {
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { Loader2, Trash2 } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface ContextSnapshot {
|
||||
lastCommit?: { sha: string; message: string; author?: string; timestamp?: string };
|
||||
currentBranch?: string;
|
||||
openPRs?: { number: number; title: string }[];
|
||||
openIssues?: { number: number; title: string }[];
|
||||
lastDeployment?: { status: string; url?: string };
|
||||
}
|
||||
|
||||
interface ProjectWithStats {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
productName: string;
|
||||
productVision?: string;
|
||||
workspacePath?: string;
|
||||
status?: string;
|
||||
createdAt: string | null;
|
||||
updatedAt: string | null;
|
||||
giteaRepo?: string;
|
||||
giteaRepoUrl?: string;
|
||||
theiaWorkspaceUrl?: string;
|
||||
contextSnapshot?: ContextSnapshot;
|
||||
stats: {
|
||||
sessions: number;
|
||||
costs: number;
|
||||
};
|
||||
stats: { sessions: number; costs: number };
|
||||
}
|
||||
|
||||
function timeAgo(dateStr?: string | null): string {
|
||||
@@ -89,19 +42,27 @@ function timeAgo(dateStr?: string | null): string {
|
||||
return `${Math.floor(days / 30)}mo ago`;
|
||||
}
|
||||
|
||||
function DeployDot({ status }: { status?: string }) {
|
||||
if (!status) return null;
|
||||
const map: Record<string, string> = {
|
||||
finished: "bg-green-500",
|
||||
in_progress: "bg-blue-500 animate-pulse",
|
||||
queued: "bg-yellow-400",
|
||||
failed: "bg-red-500",
|
||||
};
|
||||
function StatusDot({ status }: { status?: string }) {
|
||||
const color = status === "live" ? "#2e7d32" : status === "building" ? "#3d5afe" : "#d4a04a";
|
||||
const anim = status === "building" ? "vibn-breathe 2.5s ease infinite" : "none";
|
||||
return (
|
||||
<span
|
||||
className={`inline-block h-2 w-2 rounded-full ${map[status] ?? "bg-gray-400"}`}
|
||||
title={status}
|
||||
/>
|
||||
<span style={{ width: 7, height: 7, borderRadius: "50%", background: color, display: "inline-block", flexShrink: 0, animation: anim }} />
|
||||
);
|
||||
}
|
||||
|
||||
function StatusTag({ status }: { status?: string }) {
|
||||
const label = status === "live" ? "Live" : status === "building" ? "Building" : "Defining";
|
||||
const color = status === "live" ? "#2e7d32" : status === "building" ? "#3d5afe" : "#9a7b3a";
|
||||
const bg = status === "live" ? "#2e7d3210" : status === "building" ? "#3d5afe10" : "#d4a04a12";
|
||||
return (
|
||||
<span style={{
|
||||
display: "inline-flex", alignItems: "center", gap: 5,
|
||||
padding: "3px 9px", borderRadius: 4,
|
||||
fontSize: "0.68rem", fontWeight: 600, letterSpacing: "0.02em",
|
||||
color, background: bg, fontFamily: "Outfit, sans-serif",
|
||||
}}>
|
||||
<StatusDot status={status} /> {label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -112,8 +73,7 @@ export default function ProjectsPage() {
|
||||
|
||||
const [projects, setProjects] = useState<ProjectWithStats[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [showCreationModal, setShowCreationModal] = useState(false);
|
||||
const [showNew, setShowNew] = useState(false);
|
||||
const [projectToDelete, setProjectToDelete] = useState<ProjectWithStats | null>(null);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
|
||||
@@ -121,29 +81,11 @@ export default function ProjectsPage() {
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await fetch("/api/projects");
|
||||
if (!res.ok) {
|
||||
const err = await res.json();
|
||||
throw new Error(err.error || "Failed to fetch projects");
|
||||
}
|
||||
if (!res.ok) throw new Error("Failed to fetch projects");
|
||||
const data = await res.json();
|
||||
const loaded: ProjectWithStats[] = data.projects || [];
|
||||
setProjects(loaded);
|
||||
setError(null);
|
||||
|
||||
// Fire-and-forget: prewarm all provisioned IDE workspaces so containers
|
||||
// are already running by the time the user clicks "Open IDE"
|
||||
const warmUrls = loaded
|
||||
.map((p) => p.theiaWorkspaceUrl)
|
||||
.filter((u): u is string => Boolean(u));
|
||||
if (warmUrls.length > 0) {
|
||||
fetch("/api/projects/prewarm", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ urls: warmUrls }),
|
||||
}).catch(() => {}); // ignore errors — this is best-effort
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : "Unknown error");
|
||||
setProjects(data.projects ?? []);
|
||||
} catch {
|
||||
/* silent */
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -154,7 +96,7 @@ export default function ProjectsPage() {
|
||||
else if (status === "unauthenticated") setLoading(false);
|
||||
}, [status]);
|
||||
|
||||
const handleDeleteProject = async () => {
|
||||
const handleDelete = async () => {
|
||||
if (!projectToDelete) return;
|
||||
setIsDeleting(true);
|
||||
try {
|
||||
@@ -178,204 +120,201 @@ export default function ProjectsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
if (status === "loading") {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-16">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const statusSummary = () => {
|
||||
const live = projects.filter((p) => p.status === "live").length;
|
||||
const building = projects.filter((p) => p.status === "building").length;
|
||||
const defining = projects.filter((p) => !p.status || p.status === "defining").length;
|
||||
const parts = [];
|
||||
if (defining) parts.push(`${defining} defining`);
|
||||
if (building) parts.push(`${building} building`);
|
||||
if (live) parts.push(`${live} live`);
|
||||
return `${projects.length} total · ${parts.join(" · ")}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="container mx-auto py-8 px-4 max-w-6xl">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Projects</h1>
|
||||
<p className="text-muted-foreground text-sm mt-1">{session?.user?.email}</p>
|
||||
</div>
|
||||
<Button onClick={() => setShowCreationModal(true)}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
New Project
|
||||
</Button>
|
||||
<div
|
||||
className="vibn-enter"
|
||||
style={{ padding: "44px 52px", maxWidth: 900, fontFamily: "Outfit, sans-serif" }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 36 }}>
|
||||
<div>
|
||||
<h1 style={{
|
||||
fontFamily: "Newsreader, serif", fontSize: "1.9rem",
|
||||
fontWeight: 400, color: "#1a1a1a", letterSpacing: "-0.03em",
|
||||
lineHeight: 1.15, marginBottom: 4,
|
||||
}}>
|
||||
Projects
|
||||
</h1>
|
||||
{!loading && (
|
||||
<p style={{ fontSize: "0.82rem", color: "#a09a90" }}>{statusSummary()}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* States */}
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center py-16">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Card className="border-red-500/30 bg-red-500/5">
|
||||
<CardContent className="py-6">
|
||||
<p className="text-sm text-red-600">Error: {error}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Projects Grid */}
|
||||
{!loading && !error && projects.length > 0 && (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{projects.map((project) => {
|
||||
const href = `/${workspace}/project/${project.id}/overview`;
|
||||
const snap = project.contextSnapshot;
|
||||
const deployStatus = snap?.lastDeployment?.status;
|
||||
|
||||
return (
|
||||
<div key={project.id} className="relative group">
|
||||
<Link href={href}>
|
||||
<Card className="hover:border-primary/50 hover:shadow-sm transition-all cursor-pointer h-full">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<CardTitle className="text-base truncate">{project.productName}</CardTitle>
|
||||
<CardDescription className="text-xs mt-0.5">
|
||||
{timeAgo(project.updatedAt)}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 shrink-0">
|
||||
<Badge
|
||||
variant={project.status === "active" ? "default" : "secondary"}
|
||||
className="text-[10px] px-1.5 py-0"
|
||||
>
|
||||
{project.status ?? "active"}
|
||||
</Badge>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild onClick={(e: React.MouseEvent) => e.preventDefault()}>
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<MoreVertical className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
className="text-red-600 focus:text-red-600"
|
||||
onClick={(e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
setProjectToDelete(project);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-3">
|
||||
{/* Vision */}
|
||||
{project.productVision && (
|
||||
<p className="text-xs text-muted-foreground line-clamp-2">
|
||||
{project.productVision}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Gitea repo + last commit */}
|
||||
{project.giteaRepo && (
|
||||
<div className="rounded-md border bg-muted/20 p-2 space-y-1">
|
||||
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<GitBranch className="h-3 w-3" />
|
||||
<span className="font-mono truncate">{project.giteaRepo}</span>
|
||||
{snap?.currentBranch && (
|
||||
<span className="text-[10px] px-1.5 py-0 bg-muted rounded-full shrink-0">
|
||||
{snap.currentBranch}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{snap?.lastCommit ? (
|
||||
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<GitCommit className="h-3 w-3 shrink-0" />
|
||||
<span className="font-mono text-[10px]">{snap.lastCommit.sha.slice(0, 7)}</span>
|
||||
<span className="truncate flex-1">{snap.lastCommit.message}</span>
|
||||
<span className="shrink-0">{timeAgo(snap.lastCommit.timestamp)}</span>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-[10px] text-muted-foreground">No commits yet</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer row: deploy + stats + IDE */}
|
||||
<div className="flex items-center justify-between pt-1 border-t">
|
||||
<div className="flex items-center gap-3 text-xs text-muted-foreground">
|
||||
{deployStatus && (
|
||||
<span className="flex items-center gap-1">
|
||||
<DeployDot status={deployStatus} />
|
||||
{deployStatus === "finished" ? "Live" : deployStatus}
|
||||
</span>
|
||||
)}
|
||||
<span>{project.stats.sessions} sessions</span>
|
||||
<span>${project.stats.costs.toFixed(2)}</span>
|
||||
</div>
|
||||
{project.theiaWorkspaceUrl && (
|
||||
<a
|
||||
href={project.theiaWorkspaceUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="flex items-center gap-1 text-[10px] text-primary hover:underline"
|
||||
>
|
||||
<Terminal className="h-3 w-3" />
|
||||
IDE
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Create card */}
|
||||
<Card
|
||||
className="hover:border-primary/50 transition-all cursor-pointer border-dashed"
|
||||
onClick={() => setShowCreationModal(true)}
|
||||
>
|
||||
<CardContent className="flex flex-col items-center justify-center h-full min-h-[220px] p-6">
|
||||
<div className="rounded-full bg-muted p-4 mb-3">
|
||||
<Plus className="h-6 w-6 text-muted-foreground" />
|
||||
</div>
|
||||
<h3 className="font-semibold mb-1 text-sm">New Project</h3>
|
||||
<p className="text-xs text-muted-foreground text-center">
|
||||
Auto-provisions a Gitea repo and workspace
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{!loading && !error && projects.length === 0 && (
|
||||
<Card className="border-dashed">
|
||||
<CardContent className="flex flex-col items-center justify-center py-16">
|
||||
<div className="rounded-full bg-muted p-6 mb-4">
|
||||
<Sparkles className="h-12 w-12 text-muted-foreground" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">No projects yet</h3>
|
||||
<p className="text-sm text-muted-foreground text-center max-w-md mb-6">
|
||||
Create your first project. Vibn will automatically provision a Gitea repo,
|
||||
register webhooks, and prepare your IDE workspace.
|
||||
</p>
|
||||
<Button size="lg" onClick={() => setShowCreationModal(true)}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Create Your First Project
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setShowNew(true)}
|
||||
style={{
|
||||
display: "flex", alignItems: "center", gap: 6,
|
||||
padding: "8px 16px", borderRadius: 7,
|
||||
background: "#1a1a1a", color: "#fff",
|
||||
border: "1px solid #1a1a1a",
|
||||
fontSize: "0.78rem", fontWeight: 600,
|
||||
fontFamily: "Outfit, sans-serif", cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: "1rem", lineHeight: 1, fontWeight: 300 }}>+</span>
|
||||
New project
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Loading */}
|
||||
{loading && (
|
||||
<div style={{ display: "flex", justifyContent: "center", paddingTop: 64 }}>
|
||||
<Loader2 style={{ width: 28, height: 28, color: "#b5b0a6" }} className="animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Project list */}
|
||||
{!loading && (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
||||
{projects.map((p, i) => (
|
||||
<div
|
||||
key={p.id}
|
||||
className="vibn-enter"
|
||||
style={{ position: "relative", animationDelay: `${i * 0.05}s` }}
|
||||
>
|
||||
<Link
|
||||
href={`/${workspace}/project/${p.id}/overview`}
|
||||
style={{
|
||||
width: "100%", display: "flex", alignItems: "center",
|
||||
padding: "18px 22px", borderRadius: 10,
|
||||
background: "#fff", border: "1px solid #e8e4dc",
|
||||
cursor: "pointer", fontFamily: "Outfit, sans-serif",
|
||||
textDecoration: "none", boxShadow: "0 1px 2px #1a1a1a05",
|
||||
transition: "all 0.15s",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = "#d0ccc4";
|
||||
e.currentTarget.style.boxShadow = "0 2px 8px #1a1a1a0a";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = "#e8e4dc";
|
||||
e.currentTarget.style.boxShadow = "0 1px 2px #1a1a1a05";
|
||||
}}
|
||||
>
|
||||
{/* Project initial */}
|
||||
<div style={{
|
||||
width: 36, height: 36, borderRadius: 9, marginRight: 16,
|
||||
background: "#1a1a1a12",
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
flexShrink: 0,
|
||||
}}>
|
||||
<span style={{
|
||||
fontFamily: "Newsreader, serif",
|
||||
fontSize: "1.05rem", fontWeight: 500, color: "#1a1a1a",
|
||||
}}>
|
||||
{p.productName[0]?.toUpperCase() ?? "P"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Name + vision */}
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 2 }}>
|
||||
<span style={{ fontSize: "0.9rem", fontWeight: 600, color: "#1a1a1a" }}>
|
||||
{p.productName}
|
||||
</span>
|
||||
<StatusTag status={p.status} />
|
||||
</div>
|
||||
{p.productVision && (
|
||||
<span style={{ fontSize: "0.78rem", color: "#a09a90", display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
|
||||
{p.productVision}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Meta */}
|
||||
<div style={{ display: "flex", gap: 28, alignItems: "center", flexShrink: 0 }}>
|
||||
<div style={{ textAlign: "right" }}>
|
||||
<div style={{ fontSize: "0.62rem", color: "#b5b0a6", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 2 }}>
|
||||
Last active
|
||||
</div>
|
||||
<div style={{ fontSize: "0.78rem", color: "#6b6560" }}>{timeAgo(p.updatedAt)}</div>
|
||||
</div>
|
||||
<div style={{ textAlign: "right" }}>
|
||||
<div style={{ fontSize: "0.62rem", color: "#b5b0a6", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 2 }}>
|
||||
Sessions
|
||||
</div>
|
||||
<div style={{ fontSize: "0.78rem", color: "#6b6560" }}>{p.stats.sessions}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Delete (hover) */}
|
||||
<button
|
||||
onClick={(e) => { e.preventDefault(); setProjectToDelete(p); }}
|
||||
style={{
|
||||
marginLeft: 16, padding: "5px 8px", borderRadius: 6,
|
||||
border: "none", background: "transparent",
|
||||
color: "#b5b0a6", cursor: "pointer",
|
||||
opacity: 0, transition: "opacity 0.15s",
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
}}
|
||||
className="delete-btn"
|
||||
onMouseEnter={(e) => e.currentTarget.style.color = "#d32f2f"}
|
||||
onMouseLeave={(e) => e.currentTarget.style.color = "#b5b0a6"}
|
||||
title="Delete project"
|
||||
>
|
||||
<Trash2 style={{ width: 14, height: 14 }} />
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* New project card */}
|
||||
<button
|
||||
onClick={() => setShowNew(true)}
|
||||
style={{
|
||||
width: "100%", display: "flex", alignItems: "center", justifyContent: "center",
|
||||
padding: "22px", borderRadius: 10,
|
||||
background: "transparent", border: "1px dashed #d0ccc4",
|
||||
cursor: "pointer", fontFamily: "Outfit, sans-serif",
|
||||
color: "#b5b0a6", fontSize: "0.84rem", fontWeight: 500,
|
||||
transition: "all 0.15s",
|
||||
animationDelay: `${projects.length * 0.05}s`,
|
||||
}}
|
||||
className="vibn-enter"
|
||||
onMouseEnter={(e) => { e.currentTarget.style.borderColor = "#8a8478"; e.currentTarget.style.color = "#6b6560"; }}
|
||||
onMouseLeave={(e) => { e.currentTarget.style.borderColor = "#d0ccc4"; e.currentTarget.style.color = "#b5b0a6"; }}
|
||||
>
|
||||
+ New project
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{!loading && projects.length === 0 && (
|
||||
<div style={{ textAlign: "center", paddingTop: 64 }}>
|
||||
<h3 style={{ fontFamily: "Newsreader, serif", fontSize: "1.3rem", fontWeight: 400, color: "#1a1a1a", marginBottom: 8 }}>
|
||||
No projects yet
|
||||
</h3>
|
||||
<p style={{ fontSize: "0.82rem", color: "#a09a90", lineHeight: 1.6, marginBottom: 24 }}>
|
||||
Tell Atlas what you want to build and it will figure out the rest.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setShowNew(true)}
|
||||
style={{
|
||||
padding: "10px 22px", borderRadius: 7,
|
||||
background: "#1a1a1a", color: "#fff",
|
||||
border: "none", fontSize: "0.84rem", fontWeight: 600,
|
||||
fontFamily: "Outfit, sans-serif", cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
Create your first project
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ProjectCreationModal
|
||||
open={showCreationModal}
|
||||
onOpenChange={(open) => {
|
||||
setShowCreationModal(open);
|
||||
if (!open) fetchProjects();
|
||||
}}
|
||||
open={showNew}
|
||||
onOpenChange={(open) => { setShowNew(open); if (!open) fetchProjects(); }}
|
||||
workspace={workspace}
|
||||
/>
|
||||
|
||||
@@ -391,20 +330,16 @@ export default function ProjectsPage() {
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleDeleteProject}
|
||||
onClick={handleDelete}
|
||||
disabled={isDeleting}
|
||||
className="bg-red-600 hover:bg-red-700"
|
||||
>
|
||||
{isDeleting ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
{isDeleting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Trash2 className="mr-2 h-4 w-4" />}
|
||||
Delete Project
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user