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

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

36
frontend/packages/shared/src/settings/motion-apply.ts Normal file
View file

@ -0,0 +1,36 @@
// Applies a stored reduced-motion override as a `data-motion="reduce"|
// "allow"` attribute on `<html>`, cleared when the override is "system"
// (letting `prefers-reduced-motion` alone decide). Ported from swarm-ui
// verbatim, only the storage key is now caller-supplied instead of a
// module constant — see `theme-apply.ts`'s file comment for why.
//
// A consumer's CSS gates an animation with the three-rule shape this
// was built for:
// @media (prefers-reduced-motion: reduce) { ... }
// :root[data-motion='reduce'] { ... same rule ... }
// :root[data-motion='allow'] { /* opt back in despite OS-level reduce */ }
// (see swarm-ui's `shell/Shell.css` file-top comment for a worked
// example). A page with no motion-gated animation yet can still mount
// this — the attribute is simply inert until something reads it.
import { useEffect } from 'preact/hooks';
import { useLocalSetting } from './settings-storage.js';
export type MotionOverride = 'system' | 'reduce' | 'allow';
export function useMotionOverride(key: string, fallback: MotionOverride = 'system') {
return useLocalSetting<MotionOverride>(key, fallback);
}
// Mounted once alongside `useApplyThemeOverride` — same single-mount-
// point rationale.
export function useApplyMotionOverride(key: string, fallback: MotionOverride = 'system'): void {
const [override] = useMotionOverride(key, fallback);
useEffect(() => {
const root = document.documentElement;
if (override === 'system') {
delete root.dataset.motion;
} else {
root.dataset.motion = override;
}
}, [override]);
}