9720bdfad0
Review feedback on this PR (mara): "i think the component should be shared. motion setting is missing." Both addressed: - `settings-storage.ts` (generic localStorage hook), `theme-apply.ts`, `motion-apply.ts`, and `SettingsMenu.tsx`/`.css` all move from swarm-ui's `lib/`/`shell/` into `@hive/shared/src/settings/` — agent's previous local copies are deleted outright rather than kept as a second implementation. One component, `Badge` trigger everywhere (already used elsewhere in swarm-ui, so not a new visual language there either) — storage keys stay caller-owned (`themeKey`/ `motionKey` props + matching `useApplyThemeOverride`/ `useApplyMotionOverride` calls at each package's single mount point) so agent and swarm-ui keep fully independent, non-colliding persisted settings. - Agent's settings menu now includes the motion row, matching swarm-ui's. No animation in the agent package is gated behind `data-motion` yet — same as when swarm-ui first built this plumbing ahead of having a consumer — so it's currently inert there, ready for whenever agent grows a motion-guarded animation. - swarm-ui's own theme default flips to `'dark'` as part of this move (`theme-apply.ts`'s new default), superseding PR #3715 — that PR becomes redundant once this lands and will be closed rather than merged, to avoid the two colliding on the same file. Verified end-to-end with real screenshots on both pages: shared component renders identically (Badge trigger, theme+motion rows, dark default) on agent's mock server and a static rebuild of swarm-ui's dist.
46 lines
1.3 KiB
CSS
46 lines
1.3 KiB
CSS
/* <SettingsMenu> popover — matches `@hive/shared`'s `Dropdown`
|
|
(`../dropdown/Dropdown.css`, `.ui-dropdown`) values exactly
|
|
(background/border/radius/shadow), same "reuse the values, not the
|
|
component" call `MetaNav`/`.login-card` already made for their own
|
|
popovers: this one holds `<select>` rows, not `Dropdown`'s
|
|
command-dispatch `<button>`s. Right-anchored — this trigger lives at
|
|
the end of a header's icon-trigger cluster in every page that mounts
|
|
it, 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;
|
|
gap: 0.15em;
|
|
min-width: 12em;
|
|
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;
|
|
}
|