47e89c1c93
mara: the route should reflect creating an agent, and stay separate from a future agent list page. Renamed AgentsPage -> CreateAgentPage (file, component, css classes) and moved the route from /agents to /create-agent - flat, not /agents/new, since index.html's relative asset links only resolve correctly one path segment deep (filed separately as a real bug, not fixed here). Leaves the bare /agents path free for a future roster page.
51 lines
1.9 KiB
TypeScript
51 lines
1.9 KiB
TypeScript
// <Shell> — page chrome every swarm-ui route mounts inside: a header
|
|
// bar (swarm branding) plus a nav row linking the app's real routes.
|
|
// Preact-native styling — `./Shell.css` imported right here, not
|
|
// wired centrally, so the component and its styles travel together
|
|
// (esbuild folds every imported `.css` reachable from `main.tsx` into
|
|
// one `main.css` companion output, see build.mjs) — deliberately not
|
|
// @hive/shared's chrome.css page-header pattern, which is the per-hive
|
|
// MPA dashboard's visual language. This package is a clean field, not
|
|
// an inheritor of that look.
|
|
//
|
|
// Route list lives here, not prop-drilled from App — one small SPA
|
|
// has exactly one place that needs to know its own nav, and this is
|
|
// it. Grows additively as real routes land (a swarm-wide agent roster
|
|
// is next); no speculative entries.
|
|
import type { ComponentChildren } from 'preact';
|
|
import { Link, useRoute } from 'wouter-preact';
|
|
import { LinksMenu } from './LinksMenu.js';
|
|
import './Shell.css';
|
|
|
|
const NAV_ITEMS: { href: string; label: string }[] = [
|
|
{ href: '/', label: 'overview' },
|
|
{ href: '/create-agent', label: 'new agent' },
|
|
{ href: '/jobs', label: 'jobs' },
|
|
{ href: '/components', label: 'components' },
|
|
];
|
|
|
|
function NavLink({ href, label }: { href: string; label: string }) {
|
|
const [active] = useRoute(href);
|
|
return (
|
|
<Link href={href} className={'shell-nav-link' + (active ? ' shell-nav-link-active' : '')}>
|
|
{label}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
export function Shell({ children }: { children: ComponentChildren }) {
|
|
return (
|
|
<div class="shell">
|
|
<header class="shell-header">
|
|
<span class="shell-brand">hyperhive swarm</span>
|
|
<nav class="shell-nav">
|
|
{NAV_ITEMS.map((item) => (
|
|
<NavLink key={item.href} href={item.href} label={item.label} />
|
|
))}
|
|
</nav>
|
|
<LinksMenu />
|
|
</header>
|
|
<div class="shell-body">{children}</div>
|
|
</div>
|
|
);
|
|
}
|