settings: move the theme/motion panel into @hive/shared, add motion to agent
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
parent
b28e8f1c4e
commit
9720bdfad0
16 changed files with 230 additions and 487 deletions
|
|
@ -6,9 +6,11 @@
|
|||
// optional polish.
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import type { BadgeTone } from '@hive/shared/badge.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 { Header } from './components/Header.js';
|
||||
import { MetaNav } from './components/MetaNav.js';
|
||||
import { SettingsMenu } from './components/SettingsMenu.js';
|
||||
import { StatusChips } from './components/StatusChips.js';
|
||||
import { LiveStream, type LiveStreamHandle } from './components/LiveStream.js';
|
||||
import { HeaderPill } from './components/HeaderPill.js';
|
||||
|
|
@ -23,11 +25,17 @@ import { fmtAge, fmtTokens } from './lib/format.js';
|
|||
import { resolveDashboardBase } from './lib/dashboardBase.js';
|
||||
import { submitPauseResume } from './lib/pauseAction.js';
|
||||
import { postModel, postEffort } from './lib/modelEffort.js';
|
||||
import { useApplyThemeOverride } from './lib/theme-apply.js';
|
||||
import type { TokenUsage } from './types.js';
|
||||
|
||||
type OpenPanel = 'inbox' | 'todos' | null;
|
||||
|
||||
// Storage keys this page owns for `@hive/shared`'s settings mechanism —
|
||||
// kept here, not derived, so `useApplyThemeOverride`/`useApplyMotionOverride`
|
||||
// (mounted once below) and `<SettingsMenu>` (in `pills`, further down)
|
||||
// always agree on which browser-local key they're reading/writing.
|
||||
const THEME_KEY = 'agent:theme-override';
|
||||
const MOTION_KEY = 'agent:motion-override';
|
||||
|
||||
const ALIVE_LABELS: Record<string, { glyph: string; text: string; tone: BadgeTone }> = {
|
||||
online: { glyph: '●', text: 'alive', tone: 'positive' },
|
||||
rate_limited: { glyph: '⊘', text: 'rate limited', tone: 'warning' },
|
||||
|
|
@ -55,7 +63,8 @@ function tokenTotal(u: TokenUsage | null): number | null {
|
|||
}
|
||||
|
||||
export function Root() {
|
||||
useApplyThemeOverride();
|
||||
useApplyThemeOverride(THEME_KEY);
|
||||
useApplyMotionOverride(MOTION_KEY);
|
||||
const { state, refresh } = useAgentState();
|
||||
const { todos, refresh: refreshTodos } = useTodos();
|
||||
const [openPanel, setOpenPanel] = useState<OpenPanel>(null);
|
||||
|
|
@ -103,7 +112,7 @@ export function Root() {
|
|||
dashboardBase={resolveDashboardBase(state.dashboard_port)}
|
||||
/>
|
||||
) : null}
|
||||
<SettingsMenu />
|
||||
<SettingsMenu themeKey={THEME_KEY} motionKey={MOTION_KEY} />
|
||||
</>
|
||||
);
|
||||
// Kept mounted regardless of `openPanel` (open/closed toggles just the
|
||||
|
|
|
|||
|
|
@ -1,66 +0,0 @@
|
|||
// <SettingsMenu> — the header's settings trigger: a single fixed-size
|
||||
// Badge ("⚙") in the pills cluster that opens a popover holding the
|
||||
// client-local theme override. Ported from swarm-ui's `SettingsMenu`
|
||||
// (mara: "agent terminal page should get the settings panel from swarm
|
||||
// ui as well"), same shape as `MetaNav` here — `Badge` icon-only
|
||||
// trigger, popover positioned/styled the same way, close on outside-
|
||||
// click/Escape.
|
||||
//
|
||||
// Motion deliberately NOT ported alongside theme: swarm-ui's motion
|
||||
// override exists to gate its own page-switch animation
|
||||
// (`data-motion`), and the agent page has no equivalent animation
|
||||
// wired to that attribute yet — porting the plumbing with nothing to
|
||||
// control would be dead weight. Revisit if/when agent grows an
|
||||
// animation worth gating.
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { Badge } from '@hive/shared/badge.js';
|
||||
import { useThemeOverride, type ThemeOverride } from '../lib/theme-apply.js';
|
||||
import './SettingsMenu.css';
|
||||
|
||||
const THEME_OPTIONS: ThemeOverride[] = ['system', 'light', 'dark'];
|
||||
|
||||
export function SettingsMenu() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
const [theme, setTheme] = useThemeOverride();
|
||||
|
||||
// Same "outside click or Escape closes" contract as MetaNav/Dropdown.
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function onPointerDown(e: PointerEvent) {
|
||||
if (rootRef.current && e.target instanceof Node && !rootRef.current.contains(e.target)) setOpen(false);
|
||||
}
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') setOpen(false);
|
||||
}
|
||||
document.addEventListener('pointerdown', onPointerDown, true);
|
||||
document.addEventListener('keydown', onKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener('pointerdown', onPointerDown, true);
|
||||
document.removeEventListener('keydown', onKeyDown);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<div class="settings-menu-anchor" ref={rootRef}>
|
||||
<Badge value="⚙" title="settings" onClick={() => setOpen((v) => !v)} expanded={open} />
|
||||
{open ? (
|
||||
<div class="settings-menu-popover" role="menu" aria-label="settings">
|
||||
<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>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
// Generic localStorage-backed setting — ported from swarm-ui's
|
||||
// `lib/settings-storage.ts` verbatim (mara: "agent terminal page should
|
||||
// get the settings panel from swarm ui as well"). Not merged into
|
||||
// `@hive/shared` for this pass — duplicating ~60 lines of already-
|
||||
// working, dependency-free plumbing is lower-risk than reworking
|
||||
// swarm-ui's own imports to point at a new shared module in the same
|
||||
// change; worth revisiting if a third package ever needs this too.
|
||||
//
|
||||
// `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)];
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
// Applies the stored theme override 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 (already
|
||||
// shipped, previously only reachable from swarm-ui) are what actually
|
||||
// apply the colours.
|
||||
//
|
||||
// Default 'dark', not 'system' — same reasoning as swarm-ui's own default
|
||||
// flip: `prefers-color-scheme` has no real "unset" value the way
|
||||
// `prefers-reduced-motion` does, so a browser with no explicit dark-mode
|
||||
// toggle reports `light`, and 'system' would silently read as light by
|
||||
// default for most first-time visitors (mara: "light mode seems to be
|
||||
// default"). Still fully overridable via the settings menu — this only
|
||||
// changes what a user with no *saved* preference sees.
|
||||
import { useEffect } from 'preact/hooks';
|
||||
import { useLocalSetting } from './settings-storage.js';
|
||||
|
||||
export type ThemeOverride = 'system' | 'light' | 'dark';
|
||||
|
||||
export const THEME_OVERRIDE_KEY = 'agent:theme-override';
|
||||
|
||||
export function useThemeOverride() {
|
||||
return useLocalSetting<ThemeOverride>(THEME_OVERRIDE_KEY, 'dark');
|
||||
}
|
||||
|
||||
// Mounted once, high in the tree (`Root`) — same rationale as swarm-ui's
|
||||
// `Shell`: one mount point applies the override regardless of what else
|
||||
// is rendering, 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]);
|
||||
}
|
||||
|
|
@ -40,7 +40,12 @@
|
|||
"./badge.js": "./src/badge/Badge.tsx",
|
||||
"./badge.css": "./src/badge/Badge.css",
|
||||
"./dropdown.js": "./src/dropdown/Dropdown.tsx",
|
||||
"./dropdown.css": "./src/dropdown/Dropdown.css"
|
||||
"./dropdown.css": "./src/dropdown/Dropdown.css",
|
||||
"./settings-storage.js": "./src/settings/settings-storage.ts",
|
||||
"./theme-apply.js": "./src/settings/theme-apply.ts",
|
||||
"./motion-apply.js": "./src/settings/motion-apply.ts",
|
||||
"./settings-menu.js": "./src/settings/SettingsMenu.tsx",
|
||||
"./settings-menu.css": "./src/settings/SettingsMenu.css"
|
||||
},
|
||||
"files": [
|
||||
"src/"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
/* <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. */
|
||||
/* <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;
|
||||
|
|
@ -17,7 +18,8 @@
|
|||
z-index: 20;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 10em;
|
||||
gap: 0.15em;
|
||||
min-width: 12em;
|
||||
padding: 0.5em;
|
||||
background: var(--bg-elev);
|
||||
border: 1px solid var(--border);
|
||||
95
frontend/packages/shared/src/settings/SettingsMenu.tsx
Normal file
95
frontend/packages/shared/src/settings/SettingsMenu.tsx
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
// <SettingsMenu> — a single header icon-button + popover holding the
|
||||
// client-local overrides a page has (theme, reduced motion). Originated
|
||||
// in swarm-ui (its own `shell/SettingsMenu.tsx`, trigger a raw SVG
|
||||
// gear icon); the agent terminal page needed the identical panel
|
||||
// (mara: "agent terminal page should get the settings panel from swarm
|
||||
// ui as well"). First pass duplicated it with an agent-specific trigger
|
||||
// (`Badge`, matching the rest of that page's header pills — `MetaNav`
|
||||
// already established `Badge` as the one interactive-chip language
|
||||
// there); mara's review on that PR: "i think the component should be
|
||||
// shared. motion setting is missing." — this is that: one component,
|
||||
// both pages import it, `Badge` trigger everywhere (already a
|
||||
// `@hive/shared` component itself, and already used elsewhere in
|
||||
// swarm-ui — `pages/ComponentsPage.tsx` etc. — so this isn't a new
|
||||
// visual language for that package either), motion included
|
||||
// unconditionally rather than agent-only.
|
||||
//
|
||||
// Storage keys are the caller's responsibility (`themeKey`/`motionKey`
|
||||
// props), not derived here — a page mounts `useApplyThemeOverride`/
|
||||
// `useApplyMotionOverride` (`./theme-apply.js`/`./motion-apply.js`)
|
||||
// once, high in its tree, with the SAME key strings passed to this
|
||||
// component, so the two stay in sync without this component owning any
|
||||
// page-specific naming decision.
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { Badge } from '../badge/Badge.js';
|
||||
import { useThemeOverride, type ThemeOverride } from './theme-apply.js';
|
||||
import { useMotionOverride, type MotionOverride } from './motion-apply.js';
|
||||
import './SettingsMenu.css';
|
||||
|
||||
const THEME_OPTIONS: ThemeOverride[] = ['system', 'light', 'dark'];
|
||||
const MOTION_OPTIONS: MotionOverride[] = ['system', 'allow', 'reduce'];
|
||||
|
||||
export interface SettingsMenuProps {
|
||||
themeKey: string;
|
||||
motionKey: string;
|
||||
}
|
||||
|
||||
export function SettingsMenu({ themeKey, motionKey }: SettingsMenuProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
const [theme, setTheme] = useThemeOverride(themeKey);
|
||||
const [motion, setMotion] = useMotionOverride(motionKey);
|
||||
|
||||
// Close on an outside click or Escape — only listens while open.
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function onPointerDown(e: PointerEvent) {
|
||||
if (rootRef.current && e.target instanceof Node && !rootRef.current.contains(e.target)) setOpen(false);
|
||||
}
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') setOpen(false);
|
||||
}
|
||||
document.addEventListener('pointerdown', onPointerDown, true);
|
||||
document.addEventListener('keydown', onKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener('pointerdown', onPointerDown, true);
|
||||
document.removeEventListener('keydown', onKeyDown);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<div class="settings-menu-anchor" ref={rootRef}>
|
||||
<Badge value="⚙" title="settings" onClick={() => setOpen((v) => !v)} expanded={open} />
|
||||
{open ? (
|
||||
<div class="settings-menu-popover" role="menu" aria-label="settings">
|
||||
<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>
|
||||
);
|
||||
}
|
||||
36
frontend/packages/shared/src/settings/motion-apply.ts
Normal file
36
frontend/packages/shared/src/settings/motion-apply.ts
Normal 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]);
|
||||
}
|
||||
|
|
@ -1,8 +1,12 @@
|
|||
// 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.
|
||||
// Generic localStorage-backed setting — the shared plumbing a theme
|
||||
// override and a reduced-motion override both need ("read a stored
|
||||
// value, react to it changing, write a new one") rather than each
|
||||
// caller reinventing its own key handling. Not settings-page-specific:
|
||||
// any client-local preference reaches for `useLocalSetting` directly.
|
||||
// Originated in swarm-ui's own `lib/settings-storage.ts`; moved here
|
||||
// once the per-agent page needed the identical mechanism (mara: "i
|
||||
// think the component should be shared" — see `SettingsMenu.tsx`'s
|
||||
// file comment for the full story).
|
||||
//
|
||||
// `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
|
||||
40
frontend/packages/shared/src/settings/theme-apply.ts
Normal file
40
frontend/packages/shared/src/settings/theme-apply.ts
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
// Applies a stored theme override by setting `data-theme="light"|"dark"`
|
||||
// on `<html>`, cleared when the override is "system" (letting the
|
||||
// `prefers-color-scheme` media query in `./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.
|
||||
//
|
||||
// Callers own their own storage key (kept in their own small constant,
|
||||
// not derived here) so two pages never silently share one browser-local
|
||||
// setting by accident. `fallback` defaults to `'dark'`: `prefers-color-
|
||||
// scheme` has no real "unset" value the way `prefers-reduced-motion`
|
||||
// does, so a browser with no explicit dark-mode toggle reports `light`
|
||||
// — `'system'` as a default silently reads as light-by-default for most
|
||||
// first-time visitors (mara: "light mode seems to be default"). Still
|
||||
// fully overridable per caller if a page ever wants a different default.
|
||||
import { useEffect } from 'preact/hooks';
|
||||
import { useLocalSetting } from './settings-storage.js';
|
||||
|
||||
export type ThemeOverride = 'system' | 'light' | 'dark';
|
||||
|
||||
export function useThemeOverride(key: string, fallback: ThemeOverride = 'dark') {
|
||||
return useLocalSetting<ThemeOverride>(key, fallback);
|
||||
}
|
||||
|
||||
// Mounted once, high in the tree — one mount point applies the override
|
||||
// regardless of what else is rendering, 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(key: string, fallback: ThemeOverride = 'dark'): void {
|
||||
const [override] = useThemeOverride(key, fallback);
|
||||
useEffect(() => {
|
||||
const root = document.documentElement;
|
||||
if (override === 'system') {
|
||||
delete root.dataset.theme;
|
||||
} else {
|
||||
root.dataset.theme = override;
|
||||
}
|
||||
}, [override]);
|
||||
}
|
||||
|
|
@ -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]);
|
||||
}
|
||||
|
|
@ -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]);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue