vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

the hive dashboard uses the swarm UI's links menu, beside the profile avatar

Browse source 
The links menu moves into @hive/shared and takes its links as a prop. The swarm
UI feeds it /api/links as before; the dashboard feeds it stats, API docs and the
swarm, and mounts it next to the profile menu in place of its own hamburger on
the left. A link opens in a new tab unless its entry says it is a page of the
same site.
This commit is contained in:
iris 2026-11-01 12:12:38 +01:00 • committed by mara
commit 464b52004b
3 changed files with 192 additions and 239 deletions
Download patch file Download diff file Expand all files Collapse all files

87
frontend/packages/swarm-ui/src/shell/LinksMenu.css
View file

@ -1,87 +0,0 @@
/* <LinksMenu> — a single header icon-button + popover. Kept visually
quiet (no border/fill until interacted with) so it reads as chrome,
not another nav item. Button is sized to the same touch-target floor
as the shared `ui/` kit (2.75em ≈ 44px, WCAG 2.5.5) even though it
isn't built from that kit — a bespoke icon trigger, not a form
control, but the floor applies regardless of which component drew
it. No `margin-left: auto` here — `Shell.tsx`'s `.shell-header-actions`
wrapper owns pushing the whole action group to the right edge now
that `SettingsMenu` sits alongside this one. */
.links-menu {
position: relative;
}
.links-menu-button {
display: flex;
align-items: center;
justify-content: center;
width: 2.75em;
height: 2.75em;
padding: 0;
border: 1px solid transparent;
border-radius: 0.4em;
background: none;
color: var(--fg);
font-size: 1em;
line-height: 1;
cursor: pointer;
}
.links-menu-button:hover,
.links-menu-button[aria-expanded="true"] {
border-color: var(--border);
background: var(--bg-elev);
}
.links-menu-popover {
position: absolute;
top: calc(100% + 0.4em);
right: 0;
z-index: 10;
display: flex;
flex-direction: column;
min-width: 10em;
padding: 0.4em;
border: 1px solid var(--border);
border-radius: 0.5em;
background: var(--bg-elev);
box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.3);
animation: links-menu-popover-enter 140ms ease;
}
/* Mount-triggered, not a state transition — the popover only exists in
the DOM while open (`{open ? <div> : null}`), so a keyframe animation
on entry is the right tool, same shape as `.shell-body`'s own
`shell-page-enter` (Shell.css) — that's the precedent every popover
in this issue's "menus should animate" ask follows. */
@keyframes links-menu-popover-enter {
from {
opacity: 0;
transform: translateY(-0.25em) scale(0.98);
}
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.links-menu-popover {
animation: none;
}
}
:root[data-motion="reduce"] .links-menu-popover {
animation: none;
}
:root[data-motion="allow"] .links-menu-popover {
animation: links-menu-popover-enter 140ms ease;
}
.links-menu-item {
display: flex;
align-items: center;
gap: 0.5em;
min-height: 2.75em;
padding: 0.4em 0.6em;
border-radius: 0.35em;
color: var(--fg);
text-decoration: none;
white-space: nowrap;
}
.links-menu-item:hover {
background: var(--bg);
}

99
frontend/packages/swarm-ui/src/shell/LinksMenu.tsx
View file

@ -1,98 +1,27 @@
// <LinksMenu> — the "accessible from every screen" affordance for
// swarm-wide services (authelia, matrix, forge, this UI's own API
// docs, …): one fixed header button that never grows the header
// itself as the list grows, opening a popover with everything
// `GET /api/links` returns. Lives in `Shell` (not `ui/`) because it
// owns its own fetch — every other `ui/` primitive is presentational
// only, this one genuinely isn't reusable outside this one job.
//
// The list is entirely server-driven (see swarm-controller's
// `services.hyperhive.swarm.controller.links` option) — 0 entries
// hides the button rather than showing an empty popover, same "don't
// render a dead affordance" rule the dashboard's pages menu follows for
// its swarm entry.
import { useEffect, useRef, useState } from "preact/hooks";
import { LinkIcon } from "@hive/shared/icons.js";
import "./LinksMenu.css";
interface ServiceLink {
label: string;
icon: string;
url: string;
}
// <LinksMenu> — the swarm UI's links menu: `@hive/shared`'s, fed the swarm's
// service list from `GET /api/links` (the services behind the swarm's vhosts,
// each with its glyph). A failed fetch leaves the list empty, and an empty
// menu draws nothing: no button beats a broken one.
import { useEffect, useState } from "preact/hooks";
import {
LinksMenu as SharedLinksMenu,
type MenuLink,
} from "@hive/shared/links-menu.js";
import "@hive/shared/links-menu.css";
export function LinksMenu() {
const [links, setLinks] = useState<ServiceLink[] | null>(null);
const [open, setOpen] = useState(false);
const rootRef = useRef<HTMLDivElement>(null);
const [links, setLinks] = useState<MenuLink[]>([]);
useEffect(() => {
fetch("/api/links")
.then((r) =>
r.ok
? (r.json() as Promise<ServiceLink[]>)
? (r.json() as Promise<MenuLink[]>)
: Promise.reject(new Error(`http ${r.status}`)),
)
.then(setLinks)
.catch(() => setLinks([])); // best-effort: no button beats a broken one
.catch(() => setLinks([]));
}, []);
// Close on an outside click or Escape — only listens while open, so
// this costs nothing on every other render.
useEffect(() => {
if (!open) return;
function onPointerDown(e: MouseEvent) {
if (rootRef.current && !rootRef.current.contains(e.target as Node))
setOpen(false);
}
function onKeyDown(e: KeyboardEvent) {
if (e.key === "Escape") setOpen(false);
}
document.addEventListener("pointerdown", onPointerDown);
document.addEventListener("keydown", onKeyDown);
return () => {
document.removeEventListener("pointerdown", onPointerDown);
document.removeEventListener("keydown", onKeyDown);
};
}, [open]);
if (!links || links.length === 0) return null;
return (
<div class="links-menu" ref={rootRef}>
<button
type="button"
class="links-menu-button"
aria-haspopup="true"
aria-expanded={open}
aria-label="swarm services"
onClick={() => setOpen((v) => !v)}
>
{/* `@hive/shared/icons.js`'s `LinkIcon` — reported live by mara:
"links and settings icon styles different / all different
sizes". Now shared with `SettingsMenu`'s `GearIcon` and
agent's own `MetaNav` trigger, one rendering path instead of
three separate inline copies — see that file's comment. */}
<LinkIcon />
</button>
{open ? (
<div class="links-menu-popover" role="menu">
{links.map((link) => (
<a
key={link.url}
class="links-menu-item"
href={link.url}
target="_blank"
rel="noreferrer"
role="menuitem"
onClick={() => setOpen(false)}
>
{link.icon ? <span aria-hidden="true">{link.icon}</span> : null}
{link.label}
</a>
))}
</div>
) : null}
</div>
);
return <SharedLinksMenu links={links} label="swarm services" />;
}

23
frontend/packages/swarm-ui/test/links-menu.test.mjs Normal file
View file

@ -0,0 +1,23 @@
// How a link in the links menu opens. Run by `npm test`, which Node runs with
// its built-in test runner and type stripping.
import assert from "node:assert/strict";
import { test } from "node:test";
import { linkAttrs } from "../../shared/src/links-menu/links.ts";
test("a link the menu was handed opens in a new tab, without a referrer", () => {
assert.deepEqual(linkAttrs({ label: "forge", url: "https://forge.x" }), {
target: "_blank",
rel: "noreferrer",
});
assert.deepEqual(
linkAttrs({ label: "forge", url: "https://forge.x", external: true }),
{ target: "_blank", rel: "noreferrer" },
);
});
test("a page of the same site opens in place", () => {
assert.deepEqual(
linkAttrs({ label: "stats", url: "/stats.html", external: false }),
{},
);
});