67eb0c660d
Structural foundation split out of hyperhive#3118 per mara's steer: structure first so the real overview page (hive roster) and later routes (swarm-wide agent roster) land as content changes rather than each reinventing chrome + nav + a table/panel/chip shape. - <Shell>: header bar (branding) + nav row, wraps every route. Route list lives in Shell itself (one small SPA, one place to know its own nav). - ui/Panel, ui/StatusChip, ui/Table: the three primitives the overview page's actual scope (hive roster: name/domain/status, linking out to each hive's own dashboard) calls for, nothing speculative beyond that. Preact-native styling (plain CSS files imported via swarm-ui.css, no shadow DOM — this package renders into light DOM) — not @hive/shared's chrome.css, which is the old MPA dashboard's visual language. Same base16/Catppuccin color tokens via theme.css/colors.css so it still reads as hyperhive. npm run build (whole frontend workspace) + npm run typecheck both clean. Verified with a real headless-chromium screenshot against the built dist, not just source-reading. Fixes hyperhive#3211
41 lines
1.5 KiB
TypeScript
41 lines
1.5 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/Shell.css, imported globally via
|
|
// ../swarm-ui.css) — 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';
|
|
|
|
const NAV_ITEMS: { href: string; label: string }[] = [{ href: '/', label: 'overview' }];
|
|
|
|
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>
|
|
</header>
|
|
<div class="shell-body">{children}</div>
|
|
</div>
|
|
);
|
|
}
|