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

settings: move the theme/motion panel into @hive/shared, add motion to agent

Browse source 
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.
This commit is contained in:
iris 2026-08-29 11:11:39 +02:00
commit 9720bdfad0
16 changed files with 230 additions and 487 deletions
Download patch file Download diff file Expand all files Collapse all files

40
frontend/packages/swarm-ui/src/lib/motion-apply.ts
View file

@ -1,40 +0,0 @@
// Applies the stored reduced-motion override (see `settings-storage.ts`)
// as a `data-motion="reduce"|"allow"` attribute on `<html>`, cleared
// when the override is "system" (letting `prefers-reduced-motion`
// alone decide, same as today).
//
// Built ahead of swarm-ui having any CSS animation to gate — the
// settings surface itself was scoped to cover theme *and* motion
// together (both named in the same go-ahead), and the marginal cost of
// the storage/attribute plumbing was near zero riding alongside the
// theme override's real wiring. `Shell`'s page-switch animation (the
// nav indicator's slide + the page-body pop) is the first real
// consumer — see `shell/Shell.css`'s file-top comment for the
// three-rule gate shape every animation here follows:
// @media (prefers-reduced-motion: reduce) { ... }
// :root[data-motion='reduce'] { ... same rule ... }
// :root[data-motion='allow'] { /* opt back in despite OS-level reduce */ }
import { useEffect } from 'preact/hooks';
import { useLocalSetting } from './settings-storage.js';
export type MotionOverride = 'system' | 'reduce' | 'allow';
export const MOTION_OVERRIDE_KEY = 'swarm-ui:motion-override';
export function useMotionOverride() {
return useLocalSetting<MotionOverride>(MOTION_OVERRIDE_KEY, 'system');
}
// Mounted once alongside `useApplyThemeOverride` — see that module's
// comment for why `Shell` is the right single mount point.
export function useApplyMotionOverride(): void {
const [override] = useMotionOverride();
useEffect(() => {
const root = document.documentElement;
if (override === 'system') {
delete root.dataset.motion;
} else {
root.dataset.motion = override;
}
}, [override]);
}

75
frontend/packages/swarm-ui/src/lib/settings-storage.ts
View file

@ -1,75 +0,0 @@
// Generic localStorage-backed setting — the shared plumbing the theme
// override and reduced-motion override both need ("read a stored value,
// react to it changing, write a new one") rather than each reinventing
// its own key handling. Not settings-page-specific: any future
// client-local preference reaches for `useLocalSetting` directly.
//
// `localStorage`'s own `storage` event only fires in *other* tabs, never
// the tab that made the write — so two components in the same tab both
// watching the same key (e.g. `SettingsMenu` writing, a top-level effect
// reading) need their own same-tab signal. The tiny module-level pub/sub
// below is that signal; it's deliberately not exported, callers only see
// the hook.
import { useEffect, useState } from 'preact/hooks';
const listeners = new Map<string, Set<() => void>>();
function subscribe(key: string, onChange: () => void): () => void {
let set = listeners.get(key);
if (!set) {
set = new Set();
listeners.set(key, set);
}
set.add(onChange);
return () => {
set!.delete(onChange);
if (set!.size === 0) listeners.delete(key);
};
}
function notify(key: string): void {
listeners.get(key)?.forEach((fn) => fn());
}
// Reads outside a component (e.g. an early top-level check) can call
// this directly; `useLocalSetting` builds on it rather than duplicating
// the try/catch.
export function readLocalSetting<T>(key: string, fallback: T): T {
try {
const raw = localStorage.getItem(key);
return raw === null ? fallback : (JSON.parse(raw) as T);
} catch {
// Private-browsing storage bans, a corrupted value, quota errors —
// all the same answer: behave as if nothing were stored.
return fallback;
}
}
function writeLocalSetting<T>(key: string, value: T): void {
try {
localStorage.setItem(key, JSON.stringify(value));
} catch {
// Best-effort: the setting just won't persist this time, not worth
// surfacing an error for a client-local preference.
}
notify(key);
}
// `[value, setValue]`, same shape as `useState` — deliberately, so a
// caller that later needs to swap a plain `useState` for a persisted
// setting (or vice versa) changes one line, not its whole call site.
//
// `setValue` only writes + notifies; it doesn't also call this
// component's own `setValue` state setter directly. The subscription
// below already fires for a same-instance write (it's in the same
// `listeners` set as every other subscriber), so a self-write reaches
// this component's state through the identical "react to a change"
// path every other subscriber uses — one path, not two that have to
// agree.
export function useLocalSetting<T>(key: string, fallback: T): [T, (value: T) => void] {
const [value, setValue] = useState<T>(() => readLocalSetting(key, fallback));
useEffect(() => subscribe(key, () => setValue(readLocalSetting(key, fallback))), [key]);
return [value, (next: T) => writeLocalSetting(key, next)];
}

38
frontend/packages/swarm-ui/src/lib/theme-apply.ts
View file

@ -1,38 +0,0 @@
// Applies the stored theme override (see `settings-storage.ts`) by
// setting `data-theme="light"|"dark"` on `<html>`, cleared when the
// override is "system" (letting the `prefers-color-scheme` media
// query in `@hive/shared/colors.css` resume control). No palette
// values live here — `colors.css`'s own `:root[data-theme='light']` /
// `:root[data-theme='dark']` blocks are what actually apply the
// colours, by re-pointing at the same `--mocha-baseNN` /
// `--latte-baseNN` custom properties its media-query block already
// uses. This file only ever toggles the attribute; the values come
// from colors.css, not a duplicate copy here.
import { useEffect } from 'preact/hooks';
import { useLocalSetting } from './settings-storage.js';
export type ThemeOverride = 'system' | 'light' | 'dark';
export const THEME_OVERRIDE_KEY = 'swarm-ui:theme-override';
export function useThemeOverride() {
return useLocalSetting<ThemeOverride>(THEME_OVERRIDE_KEY, 'system');
}
// Mounted once, high in the tree (`Shell`) — every route renders
// through one `<Shell>`, so one mount point applies the override
// regardless of which page is showing, and `useLocalSetting`'s
// same-tab subscription means `SettingsMenu` changing the value
// re-runs this effect without either component needing to know about
// the other directly.
export function useApplyThemeOverride(): void {
const [override] = useThemeOverride();
useEffect(() => {
const root = document.documentElement;
if (override === 'system') {
delete root.dataset.theme;
} else {
root.dataset.theme = override;
}
}, [override]);
}

86
frontend/packages/swarm-ui/src/shell/SettingsMenu.css
View file

@ -1,86 +0,0 @@
/* <SettingsMenu> — same header icon-button + popover chrome as
`LinksMenu` (quiet until interacted with, 2.75em touch-target floor
on the trigger). Kept as its own stylesheet rather than sharing
`LinksMenu.css` classes — two small, independently-evolving popovers
that happen to look alike today, not one component with two skins. */
.settings-menu {
position: relative;
}
.settings-menu-button {
display: flex;
align-items: center;
justify-content: center;
width: 2.75em;
height: 2.75em;
padding: 0;
border: 1px solid transparent;
border-radius: 0.4em;
background: none;
color: var(--fg);
font-size: 1em;
line-height: 1;
cursor: pointer;
}
.settings-menu-button:hover,
.settings-menu-button[aria-expanded='true'] {
border-color: var(--border);
background: var(--bg-elev);
}
.settings-menu-popover {
position: absolute;
top: calc(100% + 0.4em);
right: 0;
z-index: 10;
display: flex;
flex-direction: column;
gap: 0.3em;
min-width: 12em;
padding: 0.5em;
border: 1px solid var(--border);
border-radius: 0.5em;
background: var(--bg-elev);
box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.3);
animation: settings-menu-popover-enter 140ms ease;
}
/* Mount-triggered, same shape as `LinksMenu.css`'s own version — see
its comment for why a keyframe (not a transition) is the right tool
here. */
@keyframes settings-menu-popover-enter {
from {
opacity: 0;
transform: translateY(-0.25em) scale(0.98);
}
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.settings-menu-popover {
animation: none;
}
}
:root[data-motion='reduce'] .settings-menu-popover {
animation: none;
}
:root[data-motion='allow'] .settings-menu-popover {
animation: settings-menu-popover-enter 140ms ease;
}
.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;
}

108
frontend/packages/swarm-ui/src/shell/SettingsMenu.tsx
View file

@ -1,108 +0,0 @@
// <SettingsMenu> — a single header icon-button + popover holding the
// client-local overrides swarm-ui currently has (theme, reduced
// motion). Mirrors `LinksMenu`'s shape (icon button, popover, close on
// outside-click/Escape) — same "quiet chrome, not another nav item"
// affordance, not a coincidence: the operator, when asked how big this
// settings surface should be, said "small thing somewhere" since there
// are only two overrides right now — a full `/settings` route + nav
// entry would be over-building for two selects. Grows into a real page
// only if the setting count outgrows a popover; nothing here assumes
// it can't.
import { useEffect, useRef, useState } from 'preact/hooks';
import { useThemeOverride, type ThemeOverride } from '../lib/theme-apply.js';
import { useMotionOverride, type MotionOverride } from '../lib/motion-apply.js';
import './SettingsMenu.css';
const THEME_OPTIONS: ThemeOverride[] = ['system', 'light', 'dark'];
const MOTION_OPTIONS: MotionOverride[] = ['system', 'allow', 'reduce'];
export function SettingsMenu() {
const [open, setOpen] = useState(false);
const rootRef = useRef<HTMLDivElement>(null);
const [theme, setTheme] = useThemeOverride();
const [motion, setMotion] = useMotionOverride();
// Close on an outside click or Escape — only listens while open, same
// pattern (and same rationale) as `LinksMenu`.
useEffect(() => {
if (!open) return;
function onPointerDown(e: MouseEvent) {
if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
}
function onKeyDown(e: KeyboardEvent) {
if (e.key === 'Escape') setOpen(false);
}
document.addEventListener('pointerdown', onPointerDown);
document.addEventListener('keydown', onKeyDown);
return () => {
document.removeEventListener('pointerdown', onPointerDown);
document.removeEventListener('keydown', onKeyDown);
};
}, [open]);
return (
<div class="settings-menu" ref={rootRef}>
<button
type="button"
class="settings-menu-button"
aria-haspopup="true"
aria-expanded={open}
aria-label="settings"
onClick={() => setOpen((v) => !v)}
>
{/* Feather/lucide "settings" glyph, not the bare `⚙` character —
reported live by mara: icon styles/sizes inconsistent between
this button and LinksMenu's. `⚙` is a plain text glyph so it does
scale with `font-size`/`color`, but its exact shape and
optical weight are down to whatever font the browser
substitutes for that one codepoint — not guaranteed to match
an SVG icon at all, which is what LinksMenu's link glyph is
now built from too. One shared rendering path for both. */}
<svg
width="1.3em"
height="1.3em"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="3" />
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
</svg>
</button>
{open ? (
<div class="settings-menu-popover" role="menu">
<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>
<label class="settings-menu-row">
<span>motion</span>
<select
value={motion}
onChange={(e) => setMotion((e.target as HTMLSelectElement).value as MotionOverride)}
>
{MOTION_OPTIONS.map((o) => (
<option key={o} value={o}>
{o}
</option>
))}
</select>
</label>
</div>
) : null}
</div>
);
}

4
frontend/packages/swarm-ui/src/shell/Shell.css
View file

@ -12,8 +12,8 @@
Page-switch animation (see Shell.tsx's file-top comment for the JS
half): both the nav indicator's slide and the page-body pop follow
the same three-rule motion-guard shape `lib/motion-apply.ts`'s own
doc comment specifies — a base rule,
the same three-rule motion-guard shape `@hive/shared/motion-apply.js`'s
own doc comment specifies — a base rule,
`@media (prefers-reduced-motion: reduce)` to respect the OS default,
`:root[data-motion='reduce']` as the explicit override (same
specificity as the media rule, so source order after it wins), then

29
frontend/packages/swarm-ui/src/shell/Shell.tsx
View file

@ -30,12 +30,20 @@ import { useEffect, useRef, useState } from 'preact/hooks';
import type { ComponentChildren } from 'preact';
import { Link, useLocation } from 'wouter-preact';
import { LinksMenu } from './LinksMenu.js';
import { SettingsMenu } from './SettingsMenu.js';
import { UserMenu } from './UserMenu.js';
import { useApplyThemeOverride } from '../lib/theme-apply.js';
import { useApplyMotionOverride } from '../lib/motion-apply.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)' },
@ -68,7 +76,7 @@ const HOP_MS = 140;
// 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 `lib/motion-apply.ts` establishes.
// override semantics `@hive/shared/motion-apply.js` establishes.
function prefersReducedMotion(): boolean {
const override = document.documentElement.dataset.motion;
if (override === 'reduce') return true;
@ -127,11 +135,12 @@ export function Shell({ children }: { children: ComponentChildren }) {
// 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 (settings-storage.ts)
// means `SettingsMenu` changing the stored value re-runs these
// effects without either component needing a reference to the other.
useApplyThemeOverride();
useApplyMotionOverride();
// 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
@ -282,7 +291,7 @@ export function Shell({ children }: { children: ComponentChildren }) {
`margin-left: auto` split the available space between them
instead of sitting flush together at the right edge. */}
<div class="shell-header-actions">
<SettingsMenu />
<SettingsMenu themeKey={THEME_KEY} motionKey={MOTION_KEY} />
<LinksMenu />
<UserMenu />
</div>