// Shared shell: Navbar (top) + Sidebar (left, collapsible, past reports)
const { useState } = React;
function StatusChip({ status }) {
const styles = {
generating: "bg-teal-500/15 text-teal-300 ring-1 ring-inset ring-teal-500/30",
complete: "bg-emerald-500/10 text-emerald-300 ring-1 ring-inset ring-emerald-500/25",
draft: "bg-white/5 text-ink-300 ring-1 ring-inset ring-white/10",
};
const labels = { generating: "Generating", complete: "Complete", draft: "Draft" };
return (
{status === "generating" && }
{status === "complete" && }
{status === "draft" && }
{labels[status]}
);
}
function Navbar({ onNewReport, currentTopic, step }) {
const stepLabels = ["Topic", "Title", "Index", "Generation"];
return (
);
}
function Sidebar({ reports, onPick, onNew, activeId, view, onChangeView }) {
const [filter, setFilter] = useState("all");
const [query, setQuery] = useState("");
const counts = {
all: reports.length,
generating: reports.filter(r => r.status === "generating").length,
complete: reports.filter(r => r.status === "complete").length,
draft: reports.filter(r => r.status === "draft").length,
};
const filtered = reports
.filter(r => filter === "all" || r.status === filter)
.filter(r => r.title.toLowerCase().includes(query.toLowerCase()));
return (
);
}
// Stepper across the top of the canvas
function Stepper({ step }) {
const steps = [
{ label: "Enter Topic", sub: "Describe market" },
{ label: "Select Title", sub: "Pick angle" },
{ label: "Review Index", sub: "Confirm scope" },
{ label: "Generation", sub: "Live progress" },
];
return (
{steps.map((s, i) => {
const state = i < step ? "done" : i === step ? "active" : "todo";
return (
{state === "done" ? : (i + 1)}
{i < steps.length - 1 && (
)}
);
})}