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.
36 lines
1.6 KiB
TypeScript
36 lines
1.6 KiB
TypeScript
// 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]);
|
|
}
|