vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

agent: add a settings menu with a theme override, defaulted to dark

Browse source 
Ports swarm-ui's `SettingsMenu` (mara: "agent terminal page should get
the settings panel from swarm ui as well") — same shape as `MetaNav`
already in this header: a `Badge` icon trigger ("⚙"), popover, close on
outside-click/Escape.

`theme-apply.ts` + `settings-storage.ts` are near-verbatim ports of
swarm-ui's own (duplicated rather than moved into `@hive/shared` for
this pass — lower risk than reworking swarm-ui's imports in the same
change). Defaults the stored override to 'dark', not 'system', for the
same reason as swarm-ui's own default flip: `prefers-color-scheme` has
no real "unset" value, so 'system' silently reads as light for anyone
who's never touched an OS dark-mode toggle.

Motion NOT ported — agent has no animation gated behind `data-motion`
yet, so that plumbing would have nothing to control.

Verified end-to-end: default dark on a fresh load, and an explicit
localStorage override to 'light' correctly re-themes the whole page via
the existing `colors.css` `:root[data-theme='light']` block (already
shipped, previously only reachable from swarm-ui).
This commit is contained in:
iris 2026-08-29 11:00:11 +02:00
commit b28e8f1c4e
5 changed files with 233 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

44
frontend/packages/agent/src/components/SettingsMenu.css Normal file
View file

@ -0,0 +1,44 @@
/* <SettingsMenu> popover — matches `MetaNav`'s popover values exactly
(`../components/MetaNav.css`), which in turn match `@hive/shared`'s
`Dropdown` (`.ui-dropdown`) — same "reuse the values, not the
component" call, this popover holds a `<select>` row, not
`Dropdown`'s command-dispatch `<button>`s or `MetaNav`'s `<a>`s.
Right-anchored — sits in the header's right-hand pills cluster next
to `MetaNav`, so a left anchor would push it off-screen. */
.settings-menu-anchor {
position: relative;
display: inline-block;
}
.settings-menu-popover {
position: absolute;
top: calc(100% + 0.25em);
right: 0;
left: auto;
z-index: 20;
display: flex;
flex-direction: column;
min-width: 10em;
padding: 0.5em;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 0.5em;
box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.35);
}
.settings-menu-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75em;
min-height: 2.75em;
padding: 0 0.3em;
color: var(--fg);
}
.settings-menu-row select {
min-height: 2.75em;
padding: 0 0.4em;
border: 1px solid var(--border);
border-radius: 0.35em;
background: var(--bg);
color: var(--fg);
font: inherit;
}

66
frontend/packages/agent/src/components/SettingsMenu.tsx Normal file
View file

@ -0,0 +1,66 @@
// <SettingsMenu> — the header's settings trigger: a single fixed-size
// Badge ("⚙") in the pills cluster that opens a popover holding the
// client-local theme override. Ported from swarm-ui's `SettingsMenu`
// (mara: "agent terminal page should get the settings panel from swarm
// ui as well"), same shape as `MetaNav` here — `Badge` icon-only
// trigger, popover positioned/styled the same way, close on outside-
// click/Escape.
//
// Motion deliberately NOT ported alongside theme: swarm-ui's motion
// override exists to gate its own page-switch animation
// (`data-motion`), and the agent page has no equivalent animation
// wired to that attribute yet — porting the plumbing with nothing to
// control would be dead weight. Revisit if/when agent grows an
// animation worth gating.
import { useEffect, useRef, useState } from 'preact/hooks';
import { Badge } from '@hive/shared/badge.js';
import { useThemeOverride, type ThemeOverride } from '../lib/theme-apply.js';
import './SettingsMenu.css';
const THEME_OPTIONS: ThemeOverride[] = ['system', 'light', 'dark'];
export function SettingsMenu() {
const [open, setOpen] = useState(false);
const rootRef = useRef<HTMLDivElement>(null);
const [theme, setTheme] = useThemeOverride();
// Same "outside click or Escape closes" contract as MetaNav/Dropdown.
useEffect(() => {
if (!open) return;
function onPointerDown(e: PointerEvent) {
if (rootRef.current && e.target instanceof Node && !rootRef.current.contains(e.target)) setOpen(false);
}
function onKeyDown(e: KeyboardEvent) {
if (e.key === 'Escape') setOpen(false);
}
document.addEventListener('pointerdown', onPointerDown, true);
document.addEventListener('keydown', onKeyDown);
return () => {
document.removeEventListener('pointerdown', onPointerDown, true);
document.removeEventListener('keydown', onKeyDown);
};
}, [open]);
return (
<div class="settings-menu-anchor" ref={rootRef}>
<Badge value="⚙" title="settings" onClick={() => setOpen((v) => !v)} expanded={open} />
{open ? (
<div class="settings-menu-popover" role="menu" aria-label="settings">
<label class="settings-menu-row">
<span>theme</span>
<select
value={theme}
onChange={(e) => setTheme((e.target as HTMLSelectElement).value as ThemeOverride)}
>
{THEME_OPTIONS.map((o) => (
<option key={o} value={o}>
{o}
</option>
))}
</select>
</label>
</div>
) : null}
</div>
);
}