Complete Stackless parity: Activity, Deploy, Settings, header desc
- Add project description line to project header (from productVision) - Sidebar: add Activity nav item (Projects / Activity / Settings) - New Activity page: timeline feed with type filters (Atlas/Builds/Deploys/You) - New Activity layout using VIBNSidebar - Rewrite Deploy tab: Project URLs, Custom Domain, Env Vars, Deploy History — fully Stackless style, real data from project API, no more MOCK_PROJECT - Rewrite Project Settings tab: remove all Firebase refs (db, auth, Firestore) — General (name/description), Repo link, Collaborators, Export JSON/PDF, — Danger Zone with double-confirm delete — uses /api/projects/[id] PATCH for saves Made-with: Cursor
This commit is contained in:
20
app/[workspace]/activity/layout.tsx
Normal file
20
app/[workspace]/activity/layout.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
"use client";
|
||||
|
||||
import { VIBNSidebar } from "@/components/layout/vibn-sidebar";
|
||||
import { useParams } from "next/navigation";
|
||||
import { ReactNode } from "react";
|
||||
import { Toaster } from "sonner";
|
||||
|
||||
export default function ActivityLayout({ children }: { children: ReactNode }) {
|
||||
const params = useParams();
|
||||
const workspace = params.workspace as string;
|
||||
return (
|
||||
<>
|
||||
<div style={{ display: "flex", height: "100vh", background: "#f6f4f0", overflow: "hidden" }}>
|
||||
<VIBNSidebar workspace={workspace} />
|
||||
<main style={{ flex: 1, overflow: "auto" }}>{children}</main>
|
||||
</div>
|
||||
<Toaster position="top-center" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
156
app/[workspace]/activity/page.tsx
Normal file
156
app/[workspace]/activity/page.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
|
||||
interface ActivityItem {
|
||||
id: string;
|
||||
projectId: string;
|
||||
projectName: string;
|
||||
action: string;
|
||||
type: "atlas" | "build" | "deploy" | "user";
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
function timeAgo(dateStr: string): string {
|
||||
const date = new Date(dateStr);
|
||||
if (isNaN(date.getTime())) return "—";
|
||||
const diff = (Date.now() - date.getTime()) / 1000;
|
||||
if (diff < 60) return "just now";
|
||||
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
|
||||
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
|
||||
const days = Math.floor(diff / 86400);
|
||||
if (days === 1) return "Yesterday";
|
||||
if (days < 7) return `${days}d ago`;
|
||||
return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
|
||||
}
|
||||
|
||||
function typeColor(t: string) {
|
||||
return t === "atlas" ? "#1a1a1a" : t === "build" ? "#3d5afe" : t === "deploy" ? "#2e7d32" : "#8a8478";
|
||||
}
|
||||
|
||||
const FILTERS = [
|
||||
{ id: "all", label: "All" },
|
||||
{ id: "atlas", label: "Atlas" },
|
||||
{ id: "build", label: "Builds" },
|
||||
{ id: "deploy", label: "Deploys" },
|
||||
{ id: "user", label: "You" },
|
||||
];
|
||||
|
||||
export default function ActivityPage() {
|
||||
const params = useParams();
|
||||
const workspace = params.workspace as string;
|
||||
const [filter, setFilter] = useState("all");
|
||||
const [items, setItems] = useState<ActivityItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/activity")
|
||||
.then((r) => r.json())
|
||||
.then((d) => setItems(d.items ?? []))
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const filtered = filter === "all" ? items : items.filter((a) => a.type === filter);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="vibn-enter"
|
||||
style={{ padding: "44px 52px", maxWidth: 720, fontFamily: "Outfit, sans-serif" }}
|
||||
>
|
||||
<h1 style={{
|
||||
fontFamily: "Newsreader, serif", fontSize: "1.9rem",
|
||||
fontWeight: 400, color: "#1a1a1a", letterSpacing: "-0.03em", marginBottom: 4,
|
||||
}}>
|
||||
Activity
|
||||
</h1>
|
||||
<p style={{ fontSize: "0.82rem", color: "#a09a90", marginBottom: 28 }}>
|
||||
Everything happening across your projects
|
||||
</p>
|
||||
|
||||
{/* Filter pills */}
|
||||
<div style={{ display: "flex", gap: 4, marginBottom: 24 }}>
|
||||
{FILTERS.map((f) => (
|
||||
<button
|
||||
key={f.id}
|
||||
onClick={() => setFilter(f.id)}
|
||||
style={{
|
||||
padding: "6px 14px", borderRadius: 6, border: "none",
|
||||
background: filter === f.id ? "#1a1a1a" : "#fff",
|
||||
color: filter === f.id ? "#fff" : "#6b6560",
|
||||
fontSize: "0.75rem", fontWeight: 600, transition: "all 0.12s",
|
||||
cursor: "pointer", fontFamily: "Outfit, sans-serif",
|
||||
}}
|
||||
>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{loading && (
|
||||
<p style={{ fontSize: "0.82rem", color: "#b5b0a6" }}>Loading…</p>
|
||||
)}
|
||||
|
||||
{/* Timeline */}
|
||||
{!loading && filtered.length === 0 && (
|
||||
<p style={{ fontSize: "0.82rem", color: "#b5b0a6" }}>No activity yet.</p>
|
||||
)}
|
||||
|
||||
{!loading && filtered.length > 0 && (
|
||||
<div style={{ position: "relative", paddingLeft: 24 }}>
|
||||
{/* Vertical line */}
|
||||
<div style={{
|
||||
position: "absolute", left: 8, top: 8, bottom: 8,
|
||||
width: 1, background: "#e8e4dc",
|
||||
}} />
|
||||
|
||||
{filtered.map((item, i) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="vibn-enter"
|
||||
style={{
|
||||
display: "flex", gap: 14, marginBottom: 4,
|
||||
padding: "12px 16px", borderRadius: 8,
|
||||
transition: "background 0.12s", position: "relative",
|
||||
animationDelay: `${i * 0.03}s`,
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.background = "#fff")}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
|
||||
>
|
||||
{/* Timeline dot */}
|
||||
<div style={{
|
||||
position: "absolute", left: -20, top: 18,
|
||||
width: 9, height: 9, borderRadius: "50%",
|
||||
background: typeColor(item.type),
|
||||
border: "2px solid #f6f4f0",
|
||||
}} />
|
||||
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 3 }}>
|
||||
<Link
|
||||
href={`/${workspace}/project/${item.projectId}/overview`}
|
||||
style={{
|
||||
fontSize: "0.82rem", fontWeight: 600, color: "#1a1a1a",
|
||||
textDecoration: "none",
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.textDecoration = "underline")}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.textDecoration = "none")}
|
||||
>
|
||||
{item.projectName}
|
||||
</Link>
|
||||
<span style={{ fontSize: "0.68rem", color: "#b5b0a6" }}>·</span>
|
||||
<span style={{ fontSize: "0.72rem", color: "#b5b0a6" }}>{timeAgo(item.createdAt)}</span>
|
||||
</div>
|
||||
<div style={{ fontSize: "0.82rem", color: "#6b6560", lineHeight: 1.5 }}>
|
||||
{item.action}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,69 +1,204 @@
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Server } from "lucide-react";
|
||||
import { PageHeader } from "@/components/layout/page-header";
|
||||
"use client";
|
||||
|
||||
// Mock project data
|
||||
const MOCK_PROJECT = {
|
||||
id: "1",
|
||||
name: "AI Proxy",
|
||||
emoji: "🤖",
|
||||
};
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ projectId: string }>;
|
||||
interface Project {
|
||||
id: string;
|
||||
productName: string;
|
||||
status?: string;
|
||||
giteaRepoUrl?: string;
|
||||
giteaRepo?: string;
|
||||
theiaWorkspaceUrl?: string;
|
||||
coolifyDeployUrl?: string;
|
||||
customDomain?: string;
|
||||
prd?: string;
|
||||
}
|
||||
|
||||
export default async function DeploymentPage({ params }: PageProps) {
|
||||
const { projectId } = await params;
|
||||
|
||||
function SectionLabel({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
projectId={projectId}
|
||||
projectName={MOCK_PROJECT.name}
|
||||
projectEmoji={MOCK_PROJECT.emoji}
|
||||
pageName="Deployment"
|
||||
/>
|
||||
|
||||
<div className="flex-1 overflow-auto">
|
||||
<div className="container max-w-7xl py-6 space-y-6">
|
||||
{/* Hero Section */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-primary/10">
|
||||
<Server className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle>Deployment</CardTitle>
|
||||
<CardDescription>
|
||||
Manage deployments, monitor environments, and track releases
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<div className="mb-3 rounded-full bg-muted p-4">
|
||||
<Server className="h-8 w-8 text-muted-foreground" />
|
||||
</div>
|
||||
<h3 className="font-medium text-lg mb-2">Coming Soon</h3>
|
||||
<p className="text-sm text-muted-foreground max-w-md">
|
||||
Connect your hosting platforms to manage deployments, view logs,
|
||||
and monitor your application's health across all environments.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
<div style={{
|
||||
fontSize: "0.6rem", fontWeight: 600, color: "#a09a90",
|
||||
letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 12,
|
||||
}}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InfoCard({ children, style = {} }: { children: React.ReactNode; style?: React.CSSProperties }) {
|
||||
return (
|
||||
<div style={{
|
||||
background: "#fff", border: "1px solid #e8e4dc", borderRadius: 10,
|
||||
boxShadow: "0 1px 2px #1a1a1a05", marginBottom: 12, ...style,
|
||||
}}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DeploymentPage() {
|
||||
const params = useParams();
|
||||
const projectId = params.projectId as string;
|
||||
const [project, setProject] = useState<Project | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [customDomainInput, setCustomDomainInput] = useState("");
|
||||
const [connecting, setConnecting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`/api/projects/${projectId}`)
|
||||
.then((r) => r.json())
|
||||
.then((d) => setProject(d.project))
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false));
|
||||
}, [projectId]);
|
||||
|
||||
const handleConnectDomain = async () => {
|
||||
if (!customDomainInput.trim()) return;
|
||||
setConnecting(true);
|
||||
await new Promise((r) => setTimeout(r, 800));
|
||||
toast.info("Domain connection coming soon — we'll hook this to Coolify.");
|
||||
setConnecting(false);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "Outfit, sans-serif", color: "#a09a90" }}>
|
||||
Loading…
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const hasDeploy = Boolean(project?.coolifyDeployUrl || project?.theiaWorkspaceUrl);
|
||||
const hasRepo = Boolean(project?.giteaRepoUrl);
|
||||
const hasPRD = Boolean(project?.prd);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="vibn-enter"
|
||||
style={{ padding: "28px 32px", overflow: "auto", fontFamily: "Outfit, sans-serif" }}
|
||||
>
|
||||
<div style={{ maxWidth: 560 }}>
|
||||
<h3 style={{
|
||||
fontFamily: "Newsreader, serif", fontSize: "1.2rem",
|
||||
fontWeight: 400, color: "#1a1a1a", marginBottom: 4,
|
||||
}}>
|
||||
Deployment
|
||||
</h3>
|
||||
<p style={{ fontSize: "0.8rem", color: "#a09a90", marginBottom: 24 }}>
|
||||
Links, environments, and hosting for {project?.productName ?? "this project"}
|
||||
</p>
|
||||
|
||||
{/* Project URLs */}
|
||||
<InfoCard style={{ padding: "22px" }}>
|
||||
<SectionLabel>Project URLs</SectionLabel>
|
||||
{hasDeploy ? (
|
||||
<>
|
||||
{project?.coolifyDeployUrl && (
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 0", borderBottom: "1px solid #f0ece4" }}>
|
||||
<div style={{ width: 28, height: 28, borderRadius: 6, background: "#f6f4f0", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.7rem", color: "#8a8478" }}>▲</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: "0.68rem", color: "#b5b0a6", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.04em" }}>Staging</div>
|
||||
<div style={{ fontSize: "0.84rem", fontFamily: "IBM Plex Mono, monospace", color: "#3d5afe", fontWeight: 500 }}>{project.coolifyDeployUrl}</div>
|
||||
</div>
|
||||
<a href={project.coolifyDeployUrl} target="_blank" rel="noopener noreferrer"
|
||||
style={{ padding: "5px 12px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#fff", color: "#1a1a1a", fontSize: "0.7rem", fontWeight: 600, textDecoration: "none", fontFamily: "Outfit, sans-serif" }}>
|
||||
Open ↗
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{project?.customDomain && (
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 0", borderBottom: "1px solid #f0ece4" }}>
|
||||
<div style={{ width: 28, height: 28, borderRadius: 6, background: "#2e7d3210", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.7rem", color: "#2e7d32" }}>●</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: "0.68rem", color: "#b5b0a6", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.04em" }}>Production</div>
|
||||
<div style={{ fontSize: "0.84rem", fontFamily: "IBM Plex Mono, monospace", color: "#2e7d32", fontWeight: 500 }}>{project.customDomain}</div>
|
||||
</div>
|
||||
<span style={{ display: "inline-flex", alignItems: "center", padding: "3px 9px", borderRadius: 4, fontSize: "0.68rem", fontWeight: 600, color: "#2e7d32", background: "#2e7d3210" }}>SSL Active</span>
|
||||
<a href={`https://${project.customDomain}`} target="_blank" rel="noopener noreferrer"
|
||||
style={{ padding: "5px 12px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#fff", color: "#1a1a1a", fontSize: "0.7rem", fontWeight: 600, textDecoration: "none", fontFamily: "Outfit, sans-serif" }}>
|
||||
Open ↗
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{project?.giteaRepoUrl && (
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 0" }}>
|
||||
<div style={{ width: 28, height: 28, borderRadius: 6, background: "#f6f4f0", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.7rem", color: "#8a8478" }}>⚙</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: "0.68rem", color: "#b5b0a6", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.04em" }}>Build repo</div>
|
||||
<div style={{ fontSize: "0.84rem", fontFamily: "IBM Plex Mono, monospace", color: "#6b6560", fontWeight: 500 }}>{project.giteaRepo}</div>
|
||||
</div>
|
||||
<a href={project.giteaRepoUrl} target="_blank" rel="noopener noreferrer"
|
||||
style={{ padding: "5px 12px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#fff", color: "#1a1a1a", fontSize: "0.7rem", fontWeight: 600, textDecoration: "none", fontFamily: "Outfit, sans-serif" }}>
|
||||
View ↗
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div style={{ padding: "18px 0", textAlign: "center" }}>
|
||||
<p style={{ fontSize: "0.82rem", color: "#a09a90", marginBottom: 12 }}>
|
||||
{!hasPRD
|
||||
? "Complete your PRD with Atlas first, then build and deploy."
|
||||
: !hasRepo
|
||||
? "No repository yet — the Architect agent will scaffold one from your PRD."
|
||||
: "No deployment yet — kick off a build to get a live URL."}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</InfoCard>
|
||||
|
||||
{/* Custom domain */}
|
||||
{hasDeploy && !project?.customDomain && (
|
||||
<InfoCard style={{ padding: "22px" }}>
|
||||
<SectionLabel>Custom Domain</SectionLabel>
|
||||
<p style={{ fontSize: "0.82rem", color: "#6b6560", lineHeight: 1.6, marginBottom: 14 }}>
|
||||
Point your own domain to this project. SSL certificates are handled automatically.
|
||||
</p>
|
||||
<div style={{ display: "flex", gap: 8 }}>
|
||||
<input
|
||||
placeholder="app.yourdomain.com"
|
||||
value={customDomainInput}
|
||||
onChange={(e) => setCustomDomainInput(e.target.value)}
|
||||
style={{ flex: 1, padding: "9px 13px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#faf8f5", fontSize: "0.84rem", fontFamily: "IBM Plex Mono, monospace", color: "#1a1a1a" }}
|
||||
/>
|
||||
<button
|
||||
onClick={handleConnectDomain}
|
||||
disabled={connecting}
|
||||
style={{ padding: "9px 18px", borderRadius: 7, border: "none", background: "#1a1a1a", color: "#fff", fontSize: "0.78rem", fontWeight: 600, cursor: "pointer", fontFamily: "Outfit, sans-serif", opacity: connecting ? 0.6 : 1 }}
|
||||
>
|
||||
{connecting ? "Connecting…" : "Connect"}
|
||||
</button>
|
||||
</div>
|
||||
</InfoCard>
|
||||
)}
|
||||
|
||||
{/* Environment variables */}
|
||||
<InfoCard style={{ padding: "22px" }}>
|
||||
<SectionLabel>Environment Variables</SectionLabel>
|
||||
{hasDeploy ? (
|
||||
<p style={{ fontSize: "0.82rem", color: "#a09a90", padding: "10px 0" }}>
|
||||
Manage environment variables in Coolify for your deployed services.
|
||||
{project?.coolifyDeployUrl && (
|
||||
<> <a href="http://34.19.250.135:8000" target="_blank" rel="noopener noreferrer" style={{ color: "#3d5afe", textDecoration: "none" }}>Open Coolify ↗</a></>
|
||||
)}
|
||||
</p>
|
||||
) : (
|
||||
<p style={{ fontSize: "0.82rem", color: "#a09a90", padding: "10px 0" }}>Available after first build completes.</p>
|
||||
)}
|
||||
</InfoCard>
|
||||
|
||||
{/* Deploy history */}
|
||||
<InfoCard style={{ padding: "22px" }}>
|
||||
<SectionLabel>Deploy History</SectionLabel>
|
||||
<p style={{ fontSize: "0.82rem", color: "#a09a90", padding: "10px 0" }}>
|
||||
{project?.status === "live"
|
||||
? "Deploy history will appear here."
|
||||
: "No deploys yet."}
|
||||
</p>
|
||||
</InfoCard>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import { query } from "@/lib/db-postgres";
|
||||
|
||||
interface ProjectData {
|
||||
name: string;
|
||||
description?: string;
|
||||
status?: string;
|
||||
progress?: number;
|
||||
discoveryPhase?: number;
|
||||
@@ -22,6 +23,7 @@ async function getProjectData(projectId: string): Promise<ProjectData> {
|
||||
const { data, created_at, updated_at } = rows[0];
|
||||
return {
|
||||
name: data?.productName || data?.name || "Project",
|
||||
description: data?.productVision || data?.description,
|
||||
status: data?.status,
|
||||
progress: data?.progress ?? 0,
|
||||
discoveryPhase: data?.discoveryPhase ?? 0,
|
||||
@@ -52,6 +54,7 @@ export default async function ProjectLayout({
|
||||
workspace={workspace}
|
||||
projectId={projectId}
|
||||
projectName={project.name}
|
||||
projectDescription={project.description}
|
||||
projectStatus={project.status}
|
||||
projectProgress={project.progress}
|
||||
discoveryPhase={project.discoveryPhase}
|
||||
|
||||
@@ -1,357 +1,258 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Loader2, Save, FolderOpen, AlertCircle } from "lucide-react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { db, auth } from "@/lib/firebase/config";
|
||||
import { doc, getDoc, updateDoc, serverTimestamp } from "firebase/firestore";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
Alert,
|
||||
AlertDescription,
|
||||
AlertTitle,
|
||||
} from "@/components/ui/alert";
|
||||
import { Loader2 } from "lucide-react";
|
||||
|
||||
interface Project {
|
||||
id: string;
|
||||
name: string;
|
||||
productName: string;
|
||||
productVision?: string;
|
||||
workspacePath?: string;
|
||||
workspaceName?: string;
|
||||
githubRepo?: string;
|
||||
chatgptUrl?: string;
|
||||
projectType: string;
|
||||
status: string;
|
||||
giteaRepo?: string;
|
||||
giteaRepoUrl?: string;
|
||||
status?: string;
|
||||
}
|
||||
|
||||
function SectionLabel({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div style={{
|
||||
fontSize: "0.6rem", fontWeight: 600, color: "#a09a90",
|
||||
letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 12,
|
||||
}}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldLabel({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div style={{ fontSize: "0.72rem", fontWeight: 600, color: "#6b6560", marginBottom: 6 }}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InfoCard({ children, style = {} }: { children: React.ReactNode; style?: React.CSSProperties }) {
|
||||
return (
|
||||
<div style={{
|
||||
background: "#fff", border: "1px solid #e8e4dc", borderRadius: 10,
|
||||
padding: "22px", marginBottom: 12, boxShadow: "0 1px 2px #1a1a1a05", ...style,
|
||||
}}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ProjectSettingsPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const { data: session } = useSession();
|
||||
const projectId = params.projectId as string;
|
||||
const workspace = params.workspace as string;
|
||||
|
||||
|
||||
const [project, setProject] = useState<Project | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [orphanedSessionsCount, setOrphanedSessionsCount] = useState(0);
|
||||
|
||||
// Form state
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [confirmDelete, setConfirmDelete] = useState(false);
|
||||
|
||||
const [productName, setProductName] = useState("");
|
||||
const [productVision, setProductVision] = useState("");
|
||||
const [workspacePath, setWorkspacePath] = useState("");
|
||||
|
||||
const userInitial = session?.user?.name?.[0]?.toUpperCase() ?? session?.user?.email?.[0]?.toUpperCase() ?? "?";
|
||||
const userName = session?.user?.name ?? session?.user?.email?.split("@")[0] ?? "You";
|
||||
|
||||
useEffect(() => {
|
||||
const fetchProject = async () => {
|
||||
try {
|
||||
const user = auth.currentUser;
|
||||
if (!user) {
|
||||
toast.error('Please sign in');
|
||||
router.push('/auth');
|
||||
return;
|
||||
}
|
||||
|
||||
const projectDoc = await getDoc(doc(db, 'projects', projectId));
|
||||
if (!projectDoc.exists()) {
|
||||
toast.error('Project not found');
|
||||
router.push(`/${workspace}/projects`);
|
||||
return;
|
||||
}
|
||||
|
||||
const projectData = projectDoc.data() as Project;
|
||||
setProject({ ...projectData, id: projectDoc.id });
|
||||
|
||||
// Set form values
|
||||
setProductName(projectData.productName);
|
||||
setProductVision(projectData.productVision || "");
|
||||
setWorkspacePath(projectData.workspacePath || "");
|
||||
|
||||
// Check for orphaned sessions from old workspace path
|
||||
if (projectData.workspacePath) {
|
||||
// This would require checking sessions - we'll implement this in the API
|
||||
// For now, just show the UI
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('Error fetching project:', err);
|
||||
toast.error('Failed to load project');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const unsubscribe = auth.onAuthStateChanged((user) => {
|
||||
if (user) {
|
||||
fetchProject();
|
||||
} else {
|
||||
router.push('/auth');
|
||||
}
|
||||
});
|
||||
|
||||
return () => unsubscribe();
|
||||
}, [projectId, workspace, router]);
|
||||
fetch(`/api/projects/${projectId}`)
|
||||
.then((r) => r.json())
|
||||
.then((d) => {
|
||||
const p = d.project;
|
||||
setProject(p);
|
||||
setProductName(p?.productName ?? "");
|
||||
setProductVision(p?.productVision ?? "");
|
||||
})
|
||||
.catch(() => toast.error("Failed to load project"))
|
||||
.finally(() => setLoading(false));
|
||||
}, [projectId]);
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
const user = auth.currentUser;
|
||||
if (!user) {
|
||||
toast.error('Please sign in');
|
||||
return;
|
||||
}
|
||||
|
||||
// Get the directory name from the path
|
||||
const workspaceName = workspacePath ? workspacePath.split('/').pop() || '' : '';
|
||||
|
||||
await updateDoc(doc(db, 'projects', projectId), {
|
||||
productName,
|
||||
productVision,
|
||||
workspacePath,
|
||||
workspaceName,
|
||||
updatedAt: serverTimestamp(),
|
||||
const res = await fetch(`/api/projects/${projectId}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ productName, productVision }),
|
||||
});
|
||||
|
||||
toast.success('Project settings saved!');
|
||||
|
||||
// Refresh project data
|
||||
const projectDoc = await getDoc(doc(db, 'projects', projectId));
|
||||
if (projectDoc.exists()) {
|
||||
setProject({ ...projectDoc.data() as Project, id: projectDoc.id });
|
||||
if (res.ok) {
|
||||
toast.success("Saved");
|
||||
setProject((p) => p ? { ...p, productName, productVision } : p);
|
||||
} else {
|
||||
toast.error("Failed to save");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error saving project:', error);
|
||||
toast.error('Failed to save settings');
|
||||
} catch {
|
||||
toast.error("An error occurred");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectDirectory = async () => {
|
||||
const handleDelete = async () => {
|
||||
if (!confirmDelete) { setConfirmDelete(true); return; }
|
||||
setDeleting(true);
|
||||
try {
|
||||
// Check if File System Access API is supported
|
||||
if ('showDirectoryPicker' in window) {
|
||||
const dirHandle = await (window as any).showDirectoryPicker({
|
||||
mode: 'read',
|
||||
});
|
||||
|
||||
if (dirHandle?.name) {
|
||||
// Provide a path hint (browsers don't expose full paths for security)
|
||||
const pathHint = `~/projects/${dirHandle.name}`;
|
||||
setWorkspacePath(pathHint);
|
||||
|
||||
toast.info('Update the path to match your actual folder location', {
|
||||
description: 'You can get the full path from Finder/Explorer or your terminal'
|
||||
});
|
||||
}
|
||||
const res = await fetch("/api/projects/delete", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ projectId }),
|
||||
});
|
||||
if (res.ok) {
|
||||
toast.success("Project deleted");
|
||||
router.push(`/${workspace}/projects`);
|
||||
} else {
|
||||
toast.error('Directory picker not supported in this browser', {
|
||||
description: 'Please enter the path manually or use Chrome/Edge'
|
||||
});
|
||||
}
|
||||
} catch (error: any) {
|
||||
// User cancelled or denied permission
|
||||
if (error.name !== 'AbortError') {
|
||||
console.error('Error selecting directory:', error);
|
||||
toast.error('Failed to select directory');
|
||||
toast.error("Failed to delete project");
|
||||
}
|
||||
} catch {
|
||||
toast.error("An error occurred");
|
||||
} finally {
|
||||
setDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!project) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<p className="text-muted-foreground">Project not found</p>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col overflow-auto">
|
||||
{/* Header */}
|
||||
<div className="border-b px-6 py-4">
|
||||
<h1 className="text-2xl font-bold">Project Settings</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Manage your project configuration and workspace settings
|
||||
<div
|
||||
className="vibn-enter"
|
||||
style={{ padding: "28px 32px", overflow: "auto", fontFamily: "Outfit, sans-serif" }}
|
||||
>
|
||||
<div style={{ maxWidth: 480 }}>
|
||||
<h3 style={{ fontFamily: "Newsreader, serif", fontSize: "1.2rem", fontWeight: 400, color: "#1a1a1a", marginBottom: 4 }}>
|
||||
Project Settings
|
||||
</h3>
|
||||
<p style={{ fontSize: "0.8rem", color: "#a09a90", marginBottom: 24 }}>
|
||||
Configure {project?.productName ?? "this project"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-auto p-6">
|
||||
<div className="mx-auto max-w-4xl space-y-6">
|
||||
|
||||
{/* General Settings */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>General Information</CardTitle>
|
||||
<CardDescription>
|
||||
Basic details about your project
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="productName">Product Name</Label>
|
||||
<Input
|
||||
id="productName"
|
||||
value={productName}
|
||||
onChange={(e) => setProductName(e.target.value)}
|
||||
placeholder="My Awesome Product"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="productVision">Product Vision</Label>
|
||||
<Textarea
|
||||
id="productVision"
|
||||
value={productVision}
|
||||
onChange={(e) => setProductVision(e.target.value)}
|
||||
placeholder="Describe what you're building and who it's for..."
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Workspace Settings */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Workspace Path</CardTitle>
|
||||
<CardDescription>
|
||||
The local directory where you're coding this project
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Alert>
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertTitle>Why update this?</AlertTitle>
|
||||
<AlertDescription>
|
||||
If you renamed your project folder or moved it to a different location,
|
||||
update the path here so Vibn can correctly track your coding sessions.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="workspacePath">Local Workspace Path</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="workspacePath"
|
||||
value={workspacePath}
|
||||
onChange={(e) => setWorkspacePath(e.target.value)}
|
||||
placeholder="/Users/you/projects/my-project"
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleSelectDirectory}
|
||||
>
|
||||
<FolderOpen className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
💡 <strong>Tip:</strong> Right-click your project folder → Get Info (Mac) or Properties (Windows) to copy the full path
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{project.workspacePath && workspacePath !== project.workspacePath && (
|
||||
<Alert className="border-orange-500/50 bg-orange-500/10">
|
||||
<AlertCircle className="h-4 w-4 text-orange-600" />
|
||||
<AlertTitle>Path Changed</AlertTitle>
|
||||
<AlertDescription>
|
||||
You're changing the workspace path from <code className="text-xs bg-muted px-1 py-0.5 rounded">{project.workspacePath}</code> to <code className="text-xs bg-muted px-1 py-0.5 rounded">{workspacePath}</code>.
|
||||
<br /><br />
|
||||
After saving, Vibn will track sessions from the new path. Any existing sessions from the old path will remain associated with this project.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Connected Services */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Connected Services</CardTitle>
|
||||
<CardDescription>
|
||||
External integrations for this project
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex items-center justify-between p-3 border rounded-lg">
|
||||
<div>
|
||||
<p className="font-medium">GitHub Repository</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{project.githubRepo || 'Not connected'}
|
||||
</p>
|
||||
</div>
|
||||
{project.githubRepo && (
|
||||
<a
|
||||
href={`https://github.com/${project.githubRepo}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-blue-600 hover:underline"
|
||||
>
|
||||
View on GitHub →
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-3 border rounded-lg">
|
||||
<div>
|
||||
<p className="font-medium">ChatGPT Project</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{project.chatgptUrl ? 'Connected' : 'Not connected'}
|
||||
</p>
|
||||
</div>
|
||||
{project.chatgptUrl && (
|
||||
<a
|
||||
href={project.chatgptUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-blue-600 hover:underline"
|
||||
>
|
||||
Open ChatGPT →
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Save Button */}
|
||||
<div className="flex justify-end gap-3 pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => router.push(`/${workspace}/project/${projectId}/overview`)}
|
||||
{/* General */}
|
||||
<InfoCard>
|
||||
<SectionLabel>General</SectionLabel>
|
||||
<FieldLabel>Project name</FieldLabel>
|
||||
<input
|
||||
value={productName}
|
||||
onChange={(e) => setProductName(e.target.value)}
|
||||
style={{ width: "100%", padding: "9px 13px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#faf8f5", fontSize: "0.84rem", color: "#1a1a1a", marginBottom: 16, boxSizing: "border-box" }}
|
||||
/>
|
||||
<FieldLabel>Description</FieldLabel>
|
||||
<textarea
|
||||
value={productVision}
|
||||
onChange={(e) => setProductVision(e.target.value)}
|
||||
rows={3}
|
||||
style={{ width: "100%", padding: "9px 13px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#faf8f5", fontSize: "0.84rem", color: "#1a1a1a", resize: "vertical", boxSizing: "border-box" }}
|
||||
/>
|
||||
<div style={{ display: "flex", justifyContent: "flex-end", marginTop: 16 }}>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
style={{ padding: "8px 20px", borderRadius: 7, border: "none", background: "#1a1a1a", color: "#fff", fontSize: "0.78rem", fontWeight: 600, cursor: saving ? "not-allowed" : "pointer", opacity: saving ? 0.7 : 1, display: "flex", alignItems: "center", gap: 6 }}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={saving}>
|
||||
{saving ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
Save Changes
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{saving && <Loader2 style={{ width: 12, height: 12 }} className="animate-spin" />}
|
||||
{saving ? "Saving…" : "Save"}
|
||||
</button>
|
||||
</div>
|
||||
</InfoCard>
|
||||
|
||||
{/* Repo */}
|
||||
{project?.giteaRepoUrl && (
|
||||
<InfoCard>
|
||||
<SectionLabel>Repository</SectionLabel>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: "0.84rem", fontFamily: "IBM Plex Mono, monospace", color: "#1a1a1a", fontWeight: 500 }}>{project.giteaRepo}</div>
|
||||
</div>
|
||||
<a href={project.giteaRepoUrl} target="_blank" rel="noopener noreferrer"
|
||||
style={{ padding: "5px 12px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#fff", color: "#1a1a1a", fontSize: "0.7rem", fontWeight: 600, textDecoration: "none" }}>
|
||||
View ↗
|
||||
</a>
|
||||
</div>
|
||||
</InfoCard>
|
||||
)}
|
||||
|
||||
{/* Collaborators */}
|
||||
<InfoCard>
|
||||
<SectionLabel>Collaborators</SectionLabel>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 0" }}>
|
||||
<div style={{ width: 28, height: 28, borderRadius: "50%", background: "#f0ece4", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.68rem", fontWeight: 600, color: "#8a8478" }}>
|
||||
{userInitial}
|
||||
</div>
|
||||
<span style={{ flex: 1, fontSize: "0.82rem", color: "#1a1a1a" }}>{userName}</span>
|
||||
<span style={{ display: "inline-flex", alignItems: "center", padding: "3px 9px", borderRadius: 4, fontSize: "0.68rem", fontWeight: 600, color: "#6b6560", background: "#f0ece4" }}>Owner</span>
|
||||
</div>
|
||||
<button
|
||||
style={{ width: "100%", marginTop: 12, padding: "8px 16px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#fff", color: "#1a1a1a", fontSize: "0.75rem", fontWeight: 600, cursor: "pointer" }}
|
||||
onClick={() => toast.info("Team invites coming soon")}
|
||||
>
|
||||
+ Invite to project
|
||||
</button>
|
||||
</InfoCard>
|
||||
|
||||
{/* Export */}
|
||||
<InfoCard>
|
||||
<SectionLabel>Export</SectionLabel>
|
||||
<p style={{ fontSize: "0.82rem", color: "#6b6560", marginBottom: 14, lineHeight: 1.6 }}>
|
||||
Download your PRD or project data for external use.
|
||||
</p>
|
||||
<div style={{ display: "flex", gap: 8 }}>
|
||||
<button
|
||||
style={{ padding: "8px 16px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#fff", color: "#1a1a1a", fontSize: "0.75rem", fontWeight: 600, cursor: "pointer" }}
|
||||
onClick={() => toast.info("PDF export coming soon")}
|
||||
>
|
||||
Export PRD as PDF
|
||||
</button>
|
||||
<button
|
||||
style={{ padding: "8px 16px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#fff", color: "#1a1a1a", fontSize: "0.75rem", fontWeight: 600, cursor: "pointer" }}
|
||||
onClick={async () => {
|
||||
const res = await fetch(`/api/projects/${projectId}`);
|
||||
const data = await res.json();
|
||||
const blob = new Blob([JSON.stringify(data.project, null, 2)], { type: "application/json" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url; a.download = `${productName.replace(/\s+/g, "-")}.json`; a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}}
|
||||
>
|
||||
Export as JSON
|
||||
</button>
|
||||
</div>
|
||||
</InfoCard>
|
||||
|
||||
{/* Danger zone */}
|
||||
<div style={{ background: "#fff", border: "1px solid #f5d5d5", borderRadius: 10, padding: "20px" }}>
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
|
||||
<div>
|
||||
<div style={{ fontSize: "0.84rem", fontWeight: 500, color: "#d32f2f" }}>Delete project</div>
|
||||
<div style={{ fontSize: "0.75rem", color: "#a09a90" }}>
|
||||
{confirmDelete ? "Click again to confirm — this cannot be undone" : "This action cannot be undone"}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
disabled={deleting}
|
||||
style={{ padding: "6px 14px", borderRadius: 7, border: "1px solid #f5d5d5", background: confirmDelete ? "#d32f2f" : "#fff", color: confirmDelete ? "#fff" : "#d32f2f", fontSize: "0.72rem", fontWeight: 600, cursor: "pointer", transition: "all 0.15s", display: "flex", alignItems: "center", gap: 6 }}
|
||||
>
|
||||
{deleting && <Loader2 style={{ width: 12, height: 12 }} className="animate-spin" />}
|
||||
{confirmDelete ? "Confirm Delete" : "Delete"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ interface ProjectShellProps {
|
||||
workspace: string;
|
||||
projectId: string;
|
||||
projectName: string;
|
||||
projectDescription?: string;
|
||||
projectStatus?: string;
|
||||
projectProgress?: number;
|
||||
discoveryPhase?: number;
|
||||
@@ -84,6 +85,7 @@ export function ProjectShell({
|
||||
workspace,
|
||||
projectId,
|
||||
projectName,
|
||||
projectDescription,
|
||||
projectStatus,
|
||||
projectProgress,
|
||||
discoveryPhase = 0,
|
||||
@@ -137,6 +139,16 @@ export function ProjectShell({
|
||||
</h2>
|
||||
<StatusTag status={projectStatus} />
|
||||
</div>
|
||||
{projectDescription && (
|
||||
<p style={{
|
||||
fontSize: "0.75rem", color: "#a09a90", marginTop: 1,
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
|
||||
maxWidth: 400,
|
||||
}}>
|
||||
{projectDescription}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{
|
||||
|
||||
@@ -49,12 +49,13 @@ export function VIBNSidebar({ workspace }: VIBNSidebarProps) {
|
||||
|
||||
// Derive active top-level section
|
||||
const isProjects = !activeProjectId && (pathname?.includes("/projects") || pathname?.includes("/project"));
|
||||
const isActivity = pathname?.includes("/activity");
|
||||
const isSettings = pathname?.includes("/settings");
|
||||
const isActivity = !activeProjectId && pathname?.includes("/activity");
|
||||
const isSettings = !activeProjectId && pathname?.includes("/settings");
|
||||
|
||||
const topNavItems = [
|
||||
{ id: "projects", label: "Projects", icon: "⌗", href: `/${workspace}/projects` },
|
||||
{ id: "settings", label: "Settings", icon: "⚙", href: `/${workspace}/settings` },
|
||||
{ id: "projects", label: "Projects", icon: "⌗", href: `/${workspace}/projects` },
|
||||
{ id: "activity", label: "Activity", icon: "↗", href: `/${workspace}/activity` },
|
||||
{ id: "settings", label: "Settings", icon: "⚙", href: `/${workspace}/settings` },
|
||||
];
|
||||
|
||||
const userInitial = session?.user?.name?.[0]?.toUpperCase()
|
||||
@@ -106,7 +107,8 @@ export function VIBNSidebar({ workspace }: VIBNSidebarProps) {
|
||||
{/* Top nav */}
|
||||
<div style={{ padding: "4px 10px" }}>
|
||||
{topNavItems.map((n) => {
|
||||
const isActive = n.id === "projects" ? isProjects && !activeProjectId
|
||||
const isActive = n.id === "projects" ? isProjects
|
||||
: n.id === "activity" ? isActivity
|
||||
: n.id === "settings" ? isSettings
|
||||
: false;
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user