swarm-ui: page shell + layout primitives
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
This commit is contained in:
parent
75f99ecafb
commit
67eb0c660d
10 changed files with 224 additions and 29 deletions
40
frontend/packages/swarm-ui/src/shell/Shell.css
Normal file
40
frontend/packages/swarm-ui/src/shell/Shell.css
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
/* <Shell> — header bar + nav row + the content column every route
|
||||
renders into. Colour vars come from ../theme.css (same base16 slots
|
||||
the per-hive dashboard uses, so this reads as recognizably
|
||||
hyperhive) — the layout itself is this package's own, not
|
||||
@hive/shared's chrome.css. */
|
||||
.shell-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5em;
|
||||
padding: 0.75em 1.25em;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-elev);
|
||||
}
|
||||
.shell-brand {
|
||||
font-weight: 600;
|
||||
color: var(--purple);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.shell-nav {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
}
|
||||
.shell-nav-link {
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
padding: 0.25em 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
.shell-nav-link:hover {
|
||||
color: var(--fg);
|
||||
}
|
||||
.shell-nav-link-active {
|
||||
color: var(--fg);
|
||||
border-bottom-color: var(--purple);
|
||||
}
|
||||
.shell-body {
|
||||
max-width: 60em;
|
||||
margin: 0 auto;
|
||||
padding: 1.5em 1.25em;
|
||||
}
|
||||
Loading…
Reference in a new issue