swarm-ui, hive dashboard, agent page: one profile menu with the signed-in user, avatar and authelia links

The swarm UI's user menu moves to @hive/shared and takes the whoami URL and
authelia's URL as props; the swarm UI keeps a thin wrapper, and the hive
dashboard and the per-agent page mount the same component. The dashboard's
nginx vhost proxies /api/whoami to authelia (the agent page is served from
the same vhost), and hive-c0re's state carries authelia_public_url, set from
services.hyperhive.swarm.authelia.url. The agent page shows the menu only
behind the gateway.

frontend/packages/shared/src/user-menu/UserMenu.tsx

@@ -0,0 +1,122 @@
+// <UserMenu> — the profile affordance in a header's top-right corner: an
+// initials avatar button opening a popover with the signed-in name, a link
+// to authelia's own account settings, and a sign-out link. The swarm UI, the
+// hive dashboard and the per-agent page all mount this one, so they look and
+// behave the same. Same icon-button + popover chrome as `SettingsMenu`.
+//
+// Who: `auth_request` only answers yes or no, never *who*. The name comes from
+// authelia's `GET /api/user/info`, which each UI's nginx vhost proxies at
+// `/api/whoami` on its own origin, so the browser sends the session cookie
+// and no CORS is involved. A fetch that fails leaves the avatar as a "?".
+//
+// Avatar: authelia has no photo field, so it is generated from the initials
+// (no third-party call: gravatar would leak a hashed e-mail on every load).
+//
+// Styles live in `@hive/shared/user-menu.css`, which the mounting page
+// imports or `@import`s itself: the dashboard's JS bundle loads `.css`
+// imports as text, so a component that imported it would not style there.
+import { useEffect, useRef, useState } from "preact/hooks";
+import {
+  accountLinks,
+  initialOf,
+  labelOf,
+  parseWhoAmI,
+  pickAccent,
+  type WhoAmI,
+} from "./identity.js";
+
+export function UserMenu({
+  whoamiUrl,
+  autheliaUrl,
+}: {
+  // Where the signed-in user is asked for, on this page's own origin.
+  whoamiUrl: string;
+  // Authelia's base URL, for the settings and sign-out links; none when it
+  // is not known, and the menu then shows only the name.
+  autheliaUrl: string | null;
+}) {
+  const [who, setWho] = useState<WhoAmI | null>(null);
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch(whoamiUrl)
+      .then((r) =>
+        r.ok ? r.json() : Promise.reject(new Error(`http ${r.status}`)),
+      )
+      .then((body) => {
+        if (!cancelled) setWho(parseWhoAmI(body));
+      })
+      .catch(() => {
+        if (!cancelled) setWho(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [whoamiUrl]);
+
+  // Close on an outside click or Escape, as `SettingsMenu` does.
+  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]);
+
+  const label = labelOf(who);
+  const links = accountLinks(autheliaUrl);
+
+  return (
+    <div class="user-menu" ref={rootRef}>
+      <button
+        type="button"
+        class="user-menu-button"
+        style={{ background: pickAccent(label ?? "operator") }}
+        aria-haspopup="true"
+        aria-expanded={open}
+        aria-label={label ? `signed in as ${label}` : "account"}
+        onClick={() => setOpen((v) => !v)}
+      >
+        {initialOf(label)}
+      </button>
+      {open ? (
+        <div class="user-menu-popover" role="menu">
+          {label ? <div class="user-menu-name">{label}</div> : null}
+          {links ? (
+            <>
+              <a
+                class="user-menu-item"
+                href={links.settings}
+                target="_blank"
+                rel="noreferrer"
+                role="menuitem"
+                onClick={() => setOpen(false)}
+              >
+                authelia settings
+              </a>
+              <a
+                class="user-menu-item"
+                href={links.logout}
+                role="menuitem"
+                onClick={() => setOpen(false)}
+              >
+                log out
+              </a>
+            </>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}