fix(dashboard): apply PageHeaders to correspond with new sidebar names
This commit is contained in:
@@ -61,7 +61,7 @@ export default function DataTablesPage() {
|
||||
>
|
||||
<div style={{ maxWidth: 1400, margin: "0 auto" }}>
|
||||
<PageHeader
|
||||
title="Data / Tables"
|
||||
title="Databases"
|
||||
subtitle="Explore the raw schema and rows in your project databases."
|
||||
/>
|
||||
|
||||
|
||||
@@ -45,7 +45,7 @@ export default function DomainsPage() {
|
||||
>
|
||||
<div style={{ maxWidth: 860, margin: "0 auto" }}>
|
||||
<PageHeader
|
||||
title="Domains"
|
||||
title="Custom Domains"
|
||||
subtitle="Public URLs for your deployed apps. To add a custom domain, ask the AI in chat — DNS + TLS are wired automatically."
|
||||
/>
|
||||
|
||||
|
||||
@@ -82,7 +82,7 @@ export default function LogsPage() {
|
||||
}}
|
||||
>
|
||||
<PageHeader
|
||||
title="Runtime Logs"
|
||||
title="Server Logs"
|
||||
subtitle="Container stdout/stderr for your deployed apps."
|
||||
/>
|
||||
|
||||
|
||||
@@ -108,7 +108,7 @@ export default function PlanTab() {
|
||||
>
|
||||
<div style={{ maxWidth: 1400, margin: "0 auto" }}>
|
||||
<PageHeader
|
||||
title="Plan & Specs"
|
||||
title="AI Blueprint"
|
||||
subtitle="Your product brief, execution plan, and AI instructions."
|
||||
/>
|
||||
|
||||
|
||||
@@ -17,6 +17,13 @@ import {
|
||||
Server,
|
||||
} from "lucide-react";
|
||||
import { useAnatomy, type Anatomy } from "@/components/project/use-anatomy";
|
||||
import {
|
||||
THEME,
|
||||
PageHeader,
|
||||
Card,
|
||||
SectionHeader,
|
||||
EmptyState,
|
||||
} from "@/components/project/dashboard-ui";
|
||||
|
||||
/**
|
||||
* Hosting tab — user-facing: "Is my thing live? How do I reach it?"
|
||||
@@ -51,67 +58,96 @@ export default function ServicesPage() {
|
||||
const showLoading = loading && !anatomy;
|
||||
|
||||
return (
|
||||
<div style={pageWrap}>
|
||||
{showLoading && (
|
||||
<div style={centeredMsg}>
|
||||
<Loader2
|
||||
size={16}
|
||||
className="animate-spin"
|
||||
style={{ color: INK.muted }}
|
||||
/>
|
||||
<span style={{ color: INK.muted, fontSize: "0.85rem" }}>
|
||||
Loading…
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{error && !showLoading && (
|
||||
<div style={centeredMsg}>
|
||||
<AlertCircle size={15} style={{ color: DANGER }} />
|
||||
<span style={{ fontSize: "0.85rem", color: DANGER }}>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
minHeight: "100vh",
|
||||
background: THEME.canvasGradient,
|
||||
fontFamily: THEME.font,
|
||||
padding: "36px 48px",
|
||||
}}
|
||||
>
|
||||
<div style={{ maxWidth: 860, margin: "0 auto" }}>
|
||||
<PageHeader
|
||||
title="Live Servers"
|
||||
subtitle="Your live deployments and development previews."
|
||||
/>
|
||||
|
||||
{anatomy && (
|
||||
<>
|
||||
{/* ── Live endpoints ── */}
|
||||
<section>
|
||||
<SectionHeader title="Live" count={anatomy.hosting.live.length} />
|
||||
{anatomy.hosting.live.length === 0 ? (
|
||||
<EmptySection
|
||||
icon={<Server size={20} style={{ color: INK.muted }} />}
|
||||
title="Nothing deployed yet"
|
||||
hint="Ask the AI to deploy your app and it will appear here."
|
||||
promptSuggestion="Deploy my app to production"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{ display: "flex", flexDirection: "column", gap: 16 }}
|
||||
>
|
||||
{anatomy.hosting.live.map((item) => (
|
||||
<LiveCard key={item.uuid} item={item} projectId={projectId} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
{showLoading && (
|
||||
<Card>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
color: THEME.mid,
|
||||
fontSize: "0.875rem",
|
||||
}}
|
||||
>
|
||||
<Loader2 size={15} className="animate-spin" /> Loading…
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
{error && !showLoading && (
|
||||
<Card>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
color: THEME.danger,
|
||||
fontSize: "0.875rem",
|
||||
}}
|
||||
>
|
||||
<AlertCircle size={15} /> {error}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* ── Previews ── */}
|
||||
{anatomy.hosting.previews.length > 0 && (
|
||||
<section style={{ marginTop: 40 }}>
|
||||
<SectionHeader
|
||||
title="Dev Previews"
|
||||
count={anatomy.hosting.previews.length}
|
||||
/>
|
||||
<div
|
||||
style={{ display: "flex", flexDirection: "column", gap: 10 }}
|
||||
>
|
||||
{anatomy.hosting.previews.map((p) => (
|
||||
<PreviewRow key={p.id} preview={p} />
|
||||
))}
|
||||
</div>
|
||||
{anatomy && (
|
||||
<>
|
||||
{/* ── Live endpoints ── */}
|
||||
<section>
|
||||
<SectionHeader title="Live" count={anatomy.hosting.live.length} />
|
||||
{anatomy.hosting.live.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={<Server size={22} />}
|
||||
title="Nothing deployed yet"
|
||||
hint="Ask the AI to deploy your app and it will appear here."
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{ display: "flex", flexDirection: "column", gap: 16 }}
|
||||
>
|
||||
{anatomy.hosting.live.map((item) => (
|
||||
<LiveCard
|
||||
key={item.uuid}
|
||||
item={item}
|
||||
projectId={projectId}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* ── Previews ── */}
|
||||
{anatomy.hosting.previews.length > 0 && (
|
||||
<section style={{ marginTop: 40 }}>
|
||||
<SectionHeader
|
||||
title="Dev Previews"
|
||||
count={anatomy.hosting.previews.length}
|
||||
/>
|
||||
<div
|
||||
style={{ display: "flex", flexDirection: "column", gap: 10 }}
|
||||
>
|
||||
{anatomy.hosting.previews.map((p) => (
|
||||
<PreviewRow key={p.id} preview={p} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user