diff --git a/frontend/packages/agent/src/Root.tsx b/frontend/packages/agent/src/Root.tsx index 5b2dbeb4..d2124074 100644 --- a/frontend/packages/agent/src/Root.tsx +++ b/frontend/packages/agent/src/Root.tsx @@ -6,9 +6,6 @@ // 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 { StatusChips } from './components/StatusChips.js'; @@ -29,13 +26,6 @@ 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 `` (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 = { online: { glyph: '●', text: 'alive', tone: 'positive' }, rate_limited: { glyph: '⊘', text: 'rate limited', tone: 'warning' }, @@ -63,8 +53,6 @@ function tokenTotal(u: TokenUsage | null): number | null { } export function Root() { - useApplyThemeOverride(THEME_KEY); - useApplyMotionOverride(MOTION_KEY); const { state, refresh } = useAgentState(); const { todos, refresh: refreshTodos } = useTodos(); const [openPanel, setOpenPanel] = useState(null); @@ -112,7 +100,6 @@ export function Root() { dashboardBase={resolveDashboardBase(state.dashboard_port)} /> ) : null} - ); // Kept mounted regardless of `openPanel` (open/closed toggles just the diff --git a/frontend/packages/shared/package.json b/frontend/packages/shared/package.json index f238cf01..1815a756 100644 --- a/frontend/packages/shared/package.json +++ b/frontend/packages/shared/package.json @@ -40,12 +40,7 @@ "./badge.js": "./src/badge/Badge.tsx", "./badge.css": "./src/badge/Badge.css", "./dropdown.js": "./src/dropdown/Dropdown.tsx", - "./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" + "./dropdown.css": "./src/dropdown/Dropdown.css" }, "files": [ "src/" diff --git a/frontend/packages/shared/src/settings/SettingsMenu.css b/frontend/packages/shared/src/settings/SettingsMenu.css deleted file mode 100644 index 50e2f7dc..00000000 --- a/frontend/packages/shared/src/settings/SettingsMenu.css +++ /dev/null @@ -1,46 +0,0 @@ -/* 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 ` setTheme((e.target as HTMLSelectElement).value as ThemeOverride)} - > - {THEME_OPTIONS.map((o) => ( - - ))} - - - - - ) : null} - - ); -} diff --git a/frontend/packages/shared/src/settings/motion-apply.ts b/frontend/packages/shared/src/settings/motion-apply.ts deleted file mode 100644 index 9fe3a877..00000000 --- a/frontend/packages/shared/src/settings/motion-apply.ts +++ /dev/null @@ -1,36 +0,0 @@ -// Applies a stored reduced-motion override as a `data-motion="reduce"| -// "allow"` attribute on ``, 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(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]); -} diff --git a/frontend/packages/shared/src/settings/theme-apply.ts b/frontend/packages/shared/src/settings/theme-apply.ts deleted file mode 100644 index 61673cb8..00000000 --- a/frontend/packages/shared/src/settings/theme-apply.ts +++ /dev/null @@ -1,40 +0,0 @@ -// Applies a stored theme override by setting `data-theme="light"|"dark"` -// on ``, 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(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]); -} diff --git a/frontend/packages/swarm-ui/src/lib/motion-apply.ts b/frontend/packages/swarm-ui/src/lib/motion-apply.ts new file mode 100644 index 00000000..49717c7f --- /dev/null +++ b/frontend/packages/swarm-ui/src/lib/motion-apply.ts @@ -0,0 +1,40 @@ +// Applies the stored reduced-motion override (see `settings-storage.ts`) +// as a `data-motion="reduce"|"allow"` attribute on ``, 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(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]); +} diff --git a/frontend/packages/shared/src/settings/settings-storage.ts b/frontend/packages/swarm-ui/src/lib/settings-storage.ts similarity index 81% rename from frontend/packages/shared/src/settings/settings-storage.ts rename to frontend/packages/swarm-ui/src/lib/settings-storage.ts index 1c4dda95..e5b6beba 100644 --- a/frontend/packages/shared/src/settings/settings-storage.ts +++ b/frontend/packages/swarm-ui/src/lib/settings-storage.ts @@ -1,12 +1,8 @@ -// 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). +// 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 diff --git a/frontend/packages/swarm-ui/src/lib/theme-apply.ts b/frontend/packages/swarm-ui/src/lib/theme-apply.ts new file mode 100644 index 00000000..a18608e8 --- /dev/null +++ b/frontend/packages/swarm-ui/src/lib/theme-apply.ts @@ -0,0 +1,38 @@ +// Applies the stored theme override (see `settings-storage.ts`) by +// setting `data-theme="light"|"dark"` on ``, 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(THEME_OVERRIDE_KEY, 'system'); +} + +// Mounted once, high in the tree (`Shell`) — every route renders +// through one ``, 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]); +} diff --git a/frontend/packages/swarm-ui/src/shell/SettingsMenu.css b/frontend/packages/swarm-ui/src/shell/SettingsMenu.css new file mode 100644 index 00000000..ebc87b33 --- /dev/null +++ b/frontend/packages/swarm-ui/src/shell/SettingsMenu.css @@ -0,0 +1,86 @@ +/* — 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; +} diff --git a/frontend/packages/swarm-ui/src/shell/SettingsMenu.tsx b/frontend/packages/swarm-ui/src/shell/SettingsMenu.tsx new file mode 100644 index 00000000..18f884d9 --- /dev/null +++ b/frontend/packages/swarm-ui/src/shell/SettingsMenu.tsx @@ -0,0 +1,108 @@ +// — 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(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 ( +
+ + {open ? ( + + ) : null} +
+ ); +} diff --git a/frontend/packages/swarm-ui/src/shell/Shell.css b/frontend/packages/swarm-ui/src/shell/Shell.css index 1e265176..77e59c13 100644 --- a/frontend/packages/swarm-ui/src/shell/Shell.css +++ b/frontend/packages/swarm-ui/src/shell/Shell.css @@ -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 `@hive/shared/motion-apply.js`'s - own doc comment specifies — a base rule, + the same three-rule motion-guard shape `lib/motion-apply.ts`'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 diff --git a/frontend/packages/swarm-ui/src/shell/Shell.tsx b/frontend/packages/swarm-ui/src/shell/Shell.tsx index 8eb9d6cd..539471d2 100644 --- a/frontend/packages/swarm-ui/src/shell/Shell.tsx +++ b/frontend/packages/swarm-ui/src/shell/Shell.tsx @@ -30,20 +30,12 @@ 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 { SettingsMenu } from '@hive/shared/settings-menu.js'; -import { useApplyThemeOverride } from '@hive/shared/theme-apply.js'; -import { useApplyMotionOverride } from '@hive/shared/motion-apply.js'; +import { useApplyThemeOverride } from '../lib/theme-apply.js'; +import { useApplyMotionOverride } from '../lib/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 ``) 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)' }, @@ -76,7 +68,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 `@hive/shared/motion-apply.js` establishes. +// override semantics `lib/motion-apply.ts` establishes. function prefersReducedMotion(): boolean { const override = document.documentElement.dataset.motion; if (override === 'reduce') return true; @@ -135,12 +127,11 @@ export function Shell({ children }: { children: ComponentChildren }) { // Applied once here, not inside `SettingsMenu` — every route mounts // through this one ``, 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 - // (`@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); + // 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(); // Measures nav item `index`'s rect relative to `.shell-nav`. // `getBoundingClientRect()` on both elements at the same tick keeps @@ -291,7 +282,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. */}
- +