TopherMayor/openclaw-taskboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[taskboard] refactor tasks into full-page workspace

Browse Source
This commit is contained in:
Christopher Mayor
2026-03-07 13:34:15 -08:00
parent 430dcd209b
commit 2bf137a437
11 changed files with 452 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
components/app-shell.tsx
View File

@@ -11,7 +11,6 @@ const navItems = [
{ href: "/agents", label: "Agents", icon: UsersRound },
{ href: "/openclaw", label: "OpenClaw", icon: ShieldEllipsis },
{ href: "/zeroclaw", label: "ZeroClaw", icon: Send },
{ href: "/dispatch", label: "Dispatch", icon: Send },
{ href: "/architecture", label: "Architecture", icon: Network },
{ href: "/wiki", label: "Wiki", icon: NotebookTabs },
{ href: "/usage", label: "Usage", icon: ScrollText },
@@ -27,8 +26,8 @@ export function AppShell({
return (
<div className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(34,211,238,0.18),_transparent_30%),radial-gradient(circle_at_top_right,_rgba(245,158,11,0.14),_transparent_28%),linear-gradient(180deg,#07111f_0%,#091321_44%,#0f172a_100%)] text-foreground">
<header className="border-b border-white/10 bg-slate-950/60 backdrop-blur-xl">
<div className="mx-auto flex w-full max-w-[1760px] items-center justify-between px-6 py-6">
<header className="sticky top-0 z-40 border-b border-white/10 bg-slate-950/75 backdrop-blur-xl">
<div className="mx-auto flex w-full max-w-[1760px] flex-col gap-5 px-6 py-5">
<div>
<p className="font-mono text-xs uppercase tracking-[0.3em] text-cyan-300/80">
OpenClaw Taskboard
@@ -40,33 +39,35 @@ export function AppShell({
Unified operations view for OpenClaw orchestration, ZeroClaw host runtimes, and deployed architecture.
</p>
</div>
<nav className="flex flex-wrap gap-2">
{navItems.map((item) => {
const Icon = item.icon;
const isActive =
pathname === item.href ||
pathname.startsWith(`${item.href}/`) ||
(item.href === "/tasks" && pathname.startsWith("/tasks"));
return (
<Link
className={cn(
"inline-flex items-center gap-2 rounded-full border px-4 py-2.5 text-sm transition",
isActive
? "border-cyan-300/30 bg-cyan-300/10 text-cyan-100 shadow-panel"
: "border-white/10 bg-slate-950/35 text-slate-300 hover:border-white/20 hover:bg-white/5 hover:text-white",
)}
href={item.href}
key={item.href}
>
<Icon className="h-4 w-4" />
<span>{item.label}</span>
</Link>
);
})}
</nav>
</div>
</header>
<div className="mx-auto grid w-full max-w-[1760px] gap-6 px-6 py-8 lg:grid-cols-[240px_minmax(0,1fr)] xl:grid-cols-[252px_minmax(0,1fr)]">
<nav className="space-y-2 lg:sticky lg:top-8 lg:self-start">
{navItems.map((item) => {
const Icon = item.icon;
const isActive =
pathname === item.href || (item.href !== "/tasks" && pathname.startsWith(`${item.href}/`));
return (
<Link
className={cn(
"flex items-center gap-3 rounded-xl border px-4 py-3 text-sm transition",
isActive
? "border-cyan-300/30 bg-cyan-300/10 text-cyan-100 shadow-panel"
: "border-white/10 bg-slate-950/35 text-slate-300 hover:border-white/20 hover:bg-white/5 hover:text-white",
)}
href={item.href}
key={item.href}
>
<Icon className="h-4 w-4" />
<span>{item.label}</span>
</Link>
);
})}
</nav>
<div className="mx-auto w-full max-w-[1760px] px-6 py-8">
<main className="min-w-0">{children}</main>
</div>
</div>