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

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

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;
}