Fix #533: toggle restyle + Tailwind rule #535

Merged

crueber merged 2 commits from fix/issue-533 into main

2026-09-14 20:33:39 +00:00

crueber commented

2026-09-14 20:24:10 +00:00

Owner

Fixes #533 — the six #522 feature toggles (Settings → General → Features) rendered as a scattered column because each checkbox wore the text-field input utility (w-full + padding + border on a checkbox). Now six aligned flex rows with a shared toggle-switch.

What changed (client-only; no backend, SDK, or API change; no new deps; no ui.css change):

NEW web/src/components/ToggleSwitch.jsx (VisSelect precedent — one shared control): real <input type=checkbox> (peer sr-only, keyboard-operable) with role=switch + aria-checked, w-9 h-5 rounded-full track (zinc off / emerald on, both themes, theme-derived only) + h-4 w-4 knob sliding via peer-checked:translate-x-4, peer-focus-visible ring. Root is a span, never a label (no nested-label markup).
web/src/pages/Settings.jsx Features section: each row is one <label class="flex items-center justify-between gap-4"> — title + muted block text-xs hint left (min-w-0), switch shrink-0 right — inside the untouched grid gap-2 list. The input class is gone from every checkbox. flagsDirty() + the withFeatures settings-PUT save path (invalidations, 403-in-note, reseed-from-truth) byte-identical.
AGENTS.md §2: new Tailwind-compose rule (only styling language — no text-field utilities on non-text controls; no one-off CSS without shared-pattern justification; aligned both themes at desktop + ~390px) + rendered-verification mandate for layout changes.
docs/go/12_web_ui.md: law-12 FIXED (#533) decision entry.

Acceptance: six aligned flex rows; toggle-slider emerald/zinc both themes; role=switch + aria-checked + focus ring, row-label click toggles natively; no input class on any checkbox; save behavior unchanged; verification mandate — see below.

Tests: node --test web/test/unit/*.test.js → 1218 total / 1217 pass / 1 fail — the 1 failure is the pre-existing live-server smoke subtest (/setup 403s on the standing live instance, documented as pre-existing on pristine origin/main). New settings-features-533.test.js (6 tests) + #533-scoped pin update in settings-features-522.test.js. vite build + esbuild green.

Browser proof OPEN: no rendered verification was possible here (shared-daemon loopback guard blocks loopback targets — no private daemon per workspace rules). Orchestrator to screenshot-verify the branch with the independent rig pre-merge (six rows aligned, switches right column, desktop + ~390px, both themes). Do NOT merge on code reading alone.

Fixes #533 — the six #522 feature toggles (Settings → General → Features) rendered as a scattered column because each checkbox wore the text-field `input` utility (w-full + padding + border on a checkbox). Now six aligned flex rows with a shared toggle-switch. What changed (client-only; no backend, SDK, or API change; no new deps; no ui.css change): - NEW `web/src/components/ToggleSwitch.jsx` (VisSelect precedent — one shared control): real `<input type=checkbox>` (`peer sr-only`, keyboard-operable) with `role=switch` + `aria-checked`, w-9 h-5 rounded-full track (zinc off / emerald on, both themes, theme-derived only) + h-4 w-4 knob sliding via `peer-checked:translate-x-4`, `peer-focus-visible` ring. Root is a span, never a label (no nested-label markup). - `web/src/pages/Settings.jsx` Features section: each row is one `<label class="flex items-center justify-between gap-4">` — title + muted `block text-xs` hint left (`min-w-0`), switch `shrink-0` right — inside the untouched `grid gap-2` list. The `input` class is gone from every checkbox. `flagsDirty()` + the `withFeatures` settings-PUT save path (invalidations, 403-in-note, reseed-from-truth) byte-identical. - AGENTS.md §2: new Tailwind-compose rule (only styling language — no text-field utilities on non-text controls; no one-off CSS without shared-pattern justification; aligned both themes at desktop + ~390px) + rendered-verification mandate for layout changes. - `docs/go/12_web_ui.md`: law-12 FIXED (#533) decision entry. Acceptance: six aligned flex rows; toggle-slider emerald/zinc both themes; role=switch + aria-checked + focus ring, row-label click toggles natively; no `input` class on any checkbox; save behavior unchanged; verification mandate — see below. Tests: `node --test web/test/unit/*.test.js` → 1218 total / 1217 pass / 1 fail — the 1 failure is the pre-existing live-server smoke subtest (/setup 403s on the standing live instance, documented as pre-existing on pristine origin/main). New `settings-features-533.test.js` (6 tests) + #533-scoped pin update in `settings-features-522.test.js`. `vite build` + `esbuild` green. Browser proof OPEN: no rendered verification was possible here (shared-daemon loopback guard blocks loopback targets — no private daemon per workspace rules). Orchestrator to screenshot-verify the branch with the independent rig pre-merge (six rows aligned, switches right column, desktop + ~390px, both themes). Do NOT merge on code reading alone.

crueber added 1 commit

2026-09-14 20:24:11 +00:00

Fix #533 : feature toggles as flex rows + shared ToggleSwitch (12_web_ui.md decision; AGENTS.md Tailwind-compose rule) 413bdf7286

crueber referenced this pull request

2026-09-14 20:24:14 +00:00

Settings General: #522 feature toggles render scattered — proper flex rows + toggle-switch controls #533

crueber added 1 commit

2026-09-14 20:32:26 +00:00