feat(settings): SettingsSaveBar primitive; migrate Appearance and Voice to sticky bar #853

Merged

dev merged 4 commits from feat/settings-save-bar/836 into main

2026-05-04 21:45:47 +00:00

dev commented

2026-05-04 21:03:57 +00:00

Collaborator

Adds <SettingsSaveBar> — a sticky bottom action bar for multi-field settings forms.

apps/web/src/components/settings-save-bar.tsx: new primitive (dirtyCount, onSave, onDiscard, saving; hidden when dirtyCount === 0; slides up on enter; sticky inside the scroll pane)
CSS keyframes ch-save-bar-in / ch-save-bar-out in styles/index.css (collapsed to 0.01 ms under prefers-reduced-motion)
Appearance: drops the Apply button; sticky bar commits via setMode/setDarkPack/setLightPack; Discard reverts staged state
Voice input: drops inline Save/Discard row; replaced by sticky bar
All affected tests updated; 7 new unit tests for the primitive

Closes #836

Test plan

bun x vitest run src/components/settings-save-bar.test.tsx — 7 tests pass
bun x vitest run src/routes/settings.appearance.test.tsx — 16 tests pass
bun x vitest run src/routes/settings.voice-input.test.tsx — 4 tests pass

Adds `<SettingsSaveBar>` — a sticky bottom action bar for multi-field settings forms. - `apps/web/src/components/settings-save-bar.tsx`: new primitive (`dirtyCount`, `onSave`, `onDiscard`, `saving`; hidden when `dirtyCount === 0`; slides up on enter; sticky inside the scroll pane) - CSS keyframes `ch-save-bar-in` / `ch-save-bar-out` in `styles/index.css` (collapsed to 0.01 ms under `prefers-reduced-motion`) - Appearance: drops the Apply button; sticky bar commits via `setMode`/`setDarkPack`/`setLightPack`; Discard reverts staged state - Voice input: drops inline Save/Discard row; replaced by sticky bar - All affected tests updated; 7 new unit tests for the primitive Closes #836 ## Test plan - `bun x vitest run src/components/settings-save-bar.test.tsx` — 7 tests pass - `bun x vitest run src/routes/settings.appearance.test.tsx` — 16 tests pass - `bun x vitest run src/routes/settings.voice-input.test.tsx` — 4 tests pass

dev self-assigned this

2026-05-04 21:03:57 +00:00

dev added 2 commits

2026-05-04 21:03:57 +00:00

feat(settings): add SettingsSaveBar primitive; migrate Appearance and Voice to sticky bar 27b5d6d161

Closes #836

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

test(settings): update appearance + voice-input tests for save-bar migration

qa / dockerfile (pull_request) Successful in 22s

Details

qa / qa-1 (pull_request) Successful in 10m20s

Details

qa / qa (pull_request) Successful in 0s

Details

3130095ebe

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dev requested review from reviewer

2026-05-04 21:14:22 +00:00

reviewer approved these changes

2026-05-04 21:18:54 +00:00

reviewer left a comment

Primitive is clean, sticky placement correct, reduced-motion handled globally. Appearance and Voice migrations look correct; tests are thorough.

Nit (non-blocking): ch-save-bar-out keyframe + ch-save-bar-leave class in styles/index.css are dead — the component unmounts instantly on save/discard (intentional per PR description). Either remove the leave animation rules or add a note explaining they are reserved for a future animated-unmount approach.

Primitive is clean, sticky placement correct, reduced-motion handled globally. Appearance and Voice migrations look correct; tests are thorough. **Nit (non-blocking):** `ch-save-bar-out` keyframe + `ch-save-bar-leave` class in `styles/index.css` are dead — the component unmounts instantly on save/discard (intentional per PR description). Either remove the leave animation rules or add a note explaining they are reserved for a future animated-unmount approach.

reviewer commented

2026-05-04 21:19:02 +00:00

Collaborator

PR has conflicts — please rebase on main before merging.