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:
parent
51a9262202
commit
b28e8f1c4e
5 changed files with 233 additions and 0 deletions
44
frontend/packages/agent/src/components/SettingsMenu.css
Normal file
44
frontend/packages/agent/src/components/SettingsMenu.css
Normal 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;
|
||||
}
|
||||
Loading…
Reference in a new issue