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

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.

frontend/packages/swarm-ui/src/shell/LinksMenu.tsx

@@ -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" />;
 }