353 lines
15 KiB
TypeScript
353 lines
15 KiB
TypeScript
// <Shell> — page chrome every swarm-ui route mounts inside: a header
|
|
// bar (swarm branding) plus a nav row linking the app's real routes.
|
|
// Preact-native styling — `./Shell.css` imported right here, not
|
|
// wired centrally, so the component and its styles travel together
|
|
// (esbuild folds every imported `.css` reachable from `main.tsx` into
|
|
// one `main.css` companion output, see build.mjs) — deliberately not
|
|
// @hive/shared's chrome.css page-header pattern, which is the per-hive
|
|
// MPA dashboard's visual language. This package is a clean field, not
|
|
// an inheritor of that look.
|
|
//
|
|
// Route list lives here, not prop-drilled from App — one small SPA
|
|
// has exactly one place that needs to know its own nav, and this is
|
|
// it. Grows additively as real routes land (a swarm-wide agent roster
|
|
// is next); no speculative entries.
|
|
//
|
|
// Page-switch animation, two pieces (motion-guard rules live in
|
|
// Shell.css): `.shell-body` remounts on every navigation
|
|
// (`key={location}`) to replay a plain fade-in, and a single shared
|
|
// underline (`.shell-nav-indicator`) hops through every nav item it
|
|
// passes over on its way to the new active one, not just a straight
|
|
// two-point tween — a nav hives→components jump visibly touches "new
|
|
// agent" and "jobs" in between, position and colour together. Accent
|
|
// is a discrete cycle through the existing base16 chromatic slots
|
|
// (`NAV_ITEMS`' `accent` field), not a continuous hue rotation —
|
|
// everything here still derives from base16, same rule the rest of
|
|
// the palette follows. `.shell-brand` rides the identical accent value
|
|
// (`navAccent` below), so the header reads as one accent changing, not
|
|
// the underline alone.
|
|
import { useEffect, useRef, useState } from "preact/hooks";
|
|
import type { ComponentChildren } from "preact";
|
|
import { Link, useLocation } from "wouter-preact";
|
|
import { LinksMenu } from "./LinksMenu.js";
|
|
import { UserMenu } from "./UserMenu.js";
|
|
import { SettingsMenu } from "@hive/shared/settings-menu.js";
|
|
import { useApplyThemeOverride } from "@hive/shared/theme-apply.js";
|
|
import { useApplyMotionOverride } from "@hive/shared/motion-apply.js";
|
|
import "./Shell.css";
|
|
|
|
// Storage keys this app owns for `@hive/shared`'s settings mechanism —
|
|
// kept here, not derived, so the two mount points below (the
|
|
// `useApply*` effects and `<SettingsMenu>`) always agree on which
|
|
// browser-local key they're reading/writing. Theme defaults to `'dark'`,
|
|
// not `'system'` — see `@hive/shared/theme-apply.js`'s file comment.
|
|
const THEME_KEY = "swarm-ui:theme-override";
|
|
const MOTION_KEY = "swarm-ui:motion-override";
|
|
|
|
const NAV_ITEMS: { href: string; label: string; accent: string }[] = [
|
|
{ href: "/", label: "hives", accent: "var(--purple)" },
|
|
{ href: "/agents", label: "agents", accent: "var(--green)" },
|
|
{ href: "/jobs", label: "jobs", accent: "var(--pink)" },
|
|
{ href: "/issues", label: "issues", accent: "var(--yellow)" },
|
|
{ href: "/components", label: "components", accent: "var(--blue)" },
|
|
];
|
|
|
|
// Routes that opt out of `.shell-body`'s 60em readable-line-length cap
|
|
// — mara screenshotted the issue report's 8-column table getting
|
|
// clipped; that width is deliberate for the rest of the UI's cards/
|
|
// forms, but too narrow for a wide table. `.shell-body-wide` (Shell.css) is a
|
|
// modifier alongside the base class, not a replacement, so every other
|
|
// route's layout is untouched. `/agents` joined for the same reason —
|
|
// its own table view (plus the list+detail split) hits the same cap.
|
|
const WIDE_BODY_ROUTES = new Set(["/issues", "/agents"]);
|
|
|
|
// Static fallback — matches `index.html`'s `<title>` default, so a page
|
|
// never flashes something else before the fetch below resolves, and an
|
|
// operator who never set `services.hyperhive.swarm.name` sees the exact
|
|
// same generic label the pre-fetch page already showed, not a blank.
|
|
const DEFAULT_BRAND = "hyperhive swarm";
|
|
|
|
interface IndicatorRect {
|
|
left: number;
|
|
top: number;
|
|
width: number;
|
|
accent: string;
|
|
}
|
|
|
|
// One hop's travel time — also the interval between hops, so each leg
|
|
// finishes (per `.shell-nav-indicator`'s own CSS transition duration,
|
|
// kept equal to this) before the next one starts rather than the two
|
|
// blending into a single averaged easing curve.
|
|
const HOP_MS = 140;
|
|
|
|
// `data-motion`/`prefers-reduced-motion` gate for the JS-driven hop
|
|
// sequence — the CSS-only pieces (the fade, the indicator's own
|
|
// transition) gate via the three-rule pattern in Shell.css, but a
|
|
// multi-step `setTimeout` sequence has no CSS equivalent to hook, so it
|
|
// checks the same two sources directly. `data-motion` takes precedence
|
|
// over the OS preference either direction (reduce *or* allow), same
|
|
// override semantics `@hive/shared/motion-apply.js` establishes.
|
|
function prefersReducedMotion(): boolean {
|
|
const override = document.documentElement.dataset.motion;
|
|
if (override === "reduce") return true;
|
|
if (override === "allow") return false;
|
|
return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
}
|
|
|
|
function NavLink({
|
|
href,
|
|
label,
|
|
active,
|
|
accent,
|
|
textRef,
|
|
}: {
|
|
href: string;
|
|
label: string;
|
|
active: boolean;
|
|
accent: string;
|
|
textRef: (el: HTMLSpanElement | null) => void;
|
|
}) {
|
|
return (
|
|
<Link href={href} className="shell-nav-link">
|
|
{/* Touch target (min-height) lives on the <a> so the whole row is
|
|
tappable. The underline lives on the shared
|
|
`.shell-nav-indicator`, not here — this span is still what
|
|
gets measured to position it, so it hugs just the text rather
|
|
than the full-height tappable box. */}
|
|
<span
|
|
ref={textRef}
|
|
class={"shell-nav-link-text" + (active ? " shell-nav-link-active" : "")}
|
|
// Inline, not a CSS rule: the glow colour is this item's own
|
|
// `accent` (NAV_ITEMS), a different value per nav item, the
|
|
// same reason `.shell-nav-indicator`'s own colour is set this
|
|
// way rather than in Shell.css.
|
|
style={
|
|
active
|
|
? {
|
|
textShadow: `0 0 8px color-mix(in srgb, ${accent} 45%, transparent)`,
|
|
}
|
|
: undefined
|
|
}
|
|
>
|
|
{label}
|
|
</span>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
export function Shell({ children }: { children: ComponentChildren }) {
|
|
const [swarmName, setSwarmName] = useState<string | null>(null);
|
|
const [location] = useLocation();
|
|
const navRef = useRef<HTMLElement | null>(null);
|
|
const textRefs = useRef<Record<string, HTMLSpanElement | null>>({});
|
|
const [indicator, setIndicator] = useState<IndicatorRect | null>(null);
|
|
// The nav-item index the indicator is currently sitting at (or mid-hop
|
|
// from) — distinct from `location`'s own index, since the two only
|
|
// agree once every intermediate hop has landed. `-1` = not settled
|
|
// anywhere yet (first mount) or on a route with no nav item (404).
|
|
const settledIndexRef = useRef(-1);
|
|
// False until the indicator's very first real position has committed —
|
|
// gates `.shell-nav-indicator-instant` (see Shell.css) so that first
|
|
// placement snaps instead of *transitioning in* from the unmounted
|
|
// `left:0/width:0/transparent` fallback, which read as "no underline at
|
|
// all" on a fresh page load (reported live by mara, reproduced here with
|
|
// a zoomed pixel-level screenshot check — real, not a rendering fluke).
|
|
// Every subsequent change (a real navigation) still animates normally.
|
|
const [indicatorSettledOnce, setIndicatorSettledOnce] = useState(false);
|
|
|
|
// Applied once here, not inside `SettingsMenu` — every route mounts
|
|
// through this one `<Shell>`, so the override takes effect regardless
|
|
// of which page is showing or whether the menu's ever been opened,
|
|
// and `useLocalSetting`'s same-tab subscription
|
|
// (`@hive/shared/settings-storage.js`) means `SettingsMenu` changing
|
|
// the stored value re-runs these effects without either component
|
|
// needing a reference to the other.
|
|
useApplyThemeOverride(THEME_KEY);
|
|
useApplyMotionOverride(MOTION_KEY);
|
|
|
|
// Measures nav item `index`'s rect relative to `.shell-nav`.
|
|
// `getBoundingClientRect()` on both elements at the same tick keeps
|
|
// this scroll-position-agnostic — a difference of two
|
|
// viewport-relative rects is scroll-invariant, no separate
|
|
// scroll-offset bookkeeping needed.
|
|
function measureIndex(index: number): IndicatorRect | null {
|
|
const navEl = navRef.current;
|
|
const item = NAV_ITEMS[index];
|
|
const textEl = item ? textRefs.current[item.href] : null;
|
|
if (!navEl || !item || !textEl) return null;
|
|
const navRect = navEl.getBoundingClientRect();
|
|
const textRect = textEl.getBoundingClientRect();
|
|
return {
|
|
left: textRect.left - navRect.left,
|
|
top: textRect.bottom - navRect.top,
|
|
width: textRect.width,
|
|
accent: item.accent,
|
|
};
|
|
}
|
|
|
|
// Drives the indicator through every nav item between where it was
|
|
// and the new active one — see the file-top comment for why (mara:
|
|
// "navigating from a to c animates [a's colour] -> [b's colour] ->
|
|
// [c's colour]"). Re-runs on navigation; a separate resize listener
|
|
// below re-measures the already-settled position without re-hopping
|
|
// (a reflow isn't a navigation).
|
|
useEffect(() => {
|
|
const targetIndex = NAV_ITEMS.findIndex((item) => item.href === location);
|
|
if (targetIndex === -1) {
|
|
settledIndexRef.current = -1;
|
|
setIndicator(null);
|
|
return;
|
|
}
|
|
const fromIndex = settledIndexRef.current;
|
|
// First mount, a route with no nav item just left, or reduced
|
|
// motion: land directly, no intermediate hops to sweep through.
|
|
if (fromIndex === -1 || prefersReducedMotion()) {
|
|
settledIndexRef.current = targetIndex;
|
|
setIndicator(measureIndex(targetIndex));
|
|
return;
|
|
}
|
|
const step = targetIndex > fromIndex ? 1 : -1;
|
|
let cancelled = false;
|
|
let timeoutId: number | undefined;
|
|
function hop(current: number) {
|
|
const next = current + step;
|
|
setIndicator(measureIndex(next));
|
|
settledIndexRef.current = next;
|
|
if (next !== targetIndex) {
|
|
timeoutId = window.setTimeout(() => {
|
|
if (!cancelled) hop(next);
|
|
}, HOP_MS);
|
|
}
|
|
}
|
|
hop(fromIndex);
|
|
return () => {
|
|
cancelled = true;
|
|
if (timeoutId !== undefined) window.clearTimeout(timeoutId);
|
|
};
|
|
}, [location]);
|
|
|
|
// Fires the render *after* the indicator's first non-null commit —
|
|
// deliberately one tick behind, not folded into the effect above,
|
|
// because the instant/animated class has to still read "instant" on
|
|
// the very render where `indicator` itself first goes non-null (that's
|
|
// the snap this exists for); only from the render after that should
|
|
// transitions be armed.
|
|
useEffect(() => {
|
|
if (indicator && !indicatorSettledOnce) setIndicatorSettledOnce(true);
|
|
}, [indicator, indicatorSettledOnce]);
|
|
|
|
// Re-measures the current (already-settled) position on resize — the
|
|
// nav's own `flex-wrap` means a link's position genuinely changes at
|
|
// narrow widths, not just its route. Not part of the hop effect above
|
|
// since a reflow shouldn't restart the sweep animation.
|
|
useEffect(() => {
|
|
function onResize() {
|
|
if (settledIndexRef.current === -1) return;
|
|
setIndicator(measureIndex(settledIndexRef.current));
|
|
}
|
|
window.addEventListener("resize", onResize);
|
|
return () => window.removeEventListener("resize", onResize);
|
|
}, []);
|
|
|
|
// Fetched once here, not per-page: every route mounts inside one
|
|
// `<Shell>`, and the swarm's name doesn't change within a page
|
|
// visit. A fetch failure is silently ignored — `swarmName` just stays
|
|
// `null` and the header/title fall back to `DEFAULT_BRAND`, same as
|
|
// an operator who never configured a name; this label is cosmetic,
|
|
// not worth an `ApiErrorPanel`.
|
|
useEffect(() => {
|
|
(async () => {
|
|
const r = await fetch("/api/swarm");
|
|
if (!r.ok) return;
|
|
const data = (await r.json()) as { name: string | null };
|
|
if (data.name) setSwarmName(data.name);
|
|
})().catch(() => {
|
|
/* cosmetic only — see comment above */
|
|
});
|
|
}, []);
|
|
|
|
const brand = swarmName ?? DEFAULT_BRAND;
|
|
useEffect(() => {
|
|
document.title = brand;
|
|
}, [brand]);
|
|
|
|
// Same value the indicator itself is drawn with, including mid-sweep —
|
|
// the brand text rides the identical hop sequence rather than
|
|
// computing its own, so "the header's accent" reads as one thing
|
|
// changing, not two things that happen to agree at rest.
|
|
const navAccent = indicator?.accent ?? "var(--purple)";
|
|
|
|
return (
|
|
<div class="shell">
|
|
<header class="shell-header">
|
|
<span
|
|
class="shell-brand"
|
|
// Same glow recipe as the active nav tab / panel titles, riding
|
|
// `navAccent` — the same value `color` already uses here — so
|
|
// the brand's glow tracks the identical hop sequence as its own
|
|
// text colour instead of introducing a second, disagreeing
|
|
// accent source.
|
|
style={{
|
|
color: navAccent,
|
|
textShadow: `0 0 8px color-mix(in srgb, ${navAccent} 45%, transparent)`,
|
|
}}
|
|
>
|
|
{brand}
|
|
</span>
|
|
<nav class="shell-nav" ref={navRef}>
|
|
{NAV_ITEMS.map((item) => (
|
|
<NavLink
|
|
key={item.href}
|
|
href={item.href}
|
|
label={item.label}
|
|
active={item.href === location}
|
|
accent={item.accent}
|
|
textRef={(el) => {
|
|
textRefs.current[item.href] = el;
|
|
}}
|
|
/>
|
|
))}
|
|
{/* Shared sliding underline — see the file-top comment. Hidden
|
|
(zero width) rather than unmounted when there's no active
|
|
nav item (404), so it doesn't pop in with a stale position
|
|
the next time a real nav item becomes active. */}
|
|
<span
|
|
class={
|
|
"shell-nav-indicator" +
|
|
(indicatorSettledOnce ? "" : " shell-nav-indicator-instant")
|
|
}
|
|
style={{
|
|
left: `${indicator?.left ?? 0}px`,
|
|
top: `${indicator?.top ?? 0}px`,
|
|
width: `${indicator?.width ?? 0}px`,
|
|
backgroundColor: indicator?.accent ?? "transparent",
|
|
}}
|
|
/>
|
|
</nav>
|
|
{/* Single `margin-left: auto` on the wrapper, not on each menu
|
|
individually — two adjacent flex items both set to
|
|
`margin-left: auto` split the available space between them
|
|
instead of sitting flush together at the right edge. */}
|
|
<div class="shell-header-actions">
|
|
<SettingsMenu themeKey={THEME_KEY} motionKey={MOTION_KEY} />
|
|
<LinksMenu />
|
|
<UserMenu />
|
|
</div>
|
|
</header>
|
|
{/* Keyed by route so it remounts (and replays its entrance
|
|
animation) on every navigation — see the file-top comment.
|
|
`shell-body-wide` is additive (see `WIDE_BODY_ROUTES` above),
|
|
not a swap — `.shell-body`'s padding/animation rules still
|
|
apply, only the max-width cap changes. */}
|
|
<div
|
|
class={
|
|
"shell-body" +
|
|
(WIDE_BODY_ROUTES.has(location) ? " shell-body-wide" : "")
|
|
}
|
|
key={location}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|