swarm-ui: header links menu for swarm-wide services (hyperhive#3289)

Single 🔗 button in the Shell header (direction 1 of 3 proposed on the
issue) — one fixed element regardless of link count, so it can't
clutter as the list grows, and visible on every route since Shell
wraps all of them. Opens a popover listing whatever GET /api/links
returns (icon + label, opens in a new tab); hidden entirely when the
list is empty, same "don't render a dead affordance" rule the old
dashboard's H0M3 tiles follow for Forge/Matrix.

Docs: docs/swarm/ui.md gets a short section on the feature + the
contribute-your-own-entry idiom.

Verified: npm run build + npm run typecheck clean, headless-chromium
screenshots of both the closed and (temporarily forced open for the
screenshot only) open states, pixel-sampled to confirm the popover is
actually using the dark theme vars and not just looking that way in a
downscaled preview.
This commit is contained in:
iris 2026-08-15 13:47:31 +02:00 committed by mara
commit 8542f2ca42
4 changed files with 161 additions and 0 deletions

View file

@ -14,6 +14,7 @@
// 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 }[] = [
@ -40,6 +41,7 @@ export function Shell({ children }: { children: ComponentChildren }) {
<NavLink key={item.href} href={item.href} label={item.label} />
))}
</nav>
<LinksMenu />
</header>
<div class="shell-body">{children}</div>
</div>