| | |
|--------|--------|
| <img width="2016" height="1476" alt="image"
src="https://github.com/user-attachments/assets/381036c4-f9e2-4412-b3c7-2ac3c1a1163f"
/> | <img width="1890" height="1458" alt="image"
src="https://github.com/user-attachments/assets/f7d55d77-52f8-4493-9ad5-37ca00cb051f"
/> |
| <img width="1760" height="940" alt="image"
src="https://github.com/user-attachments/assets/dacb9a5e-cf96-4f9c-bd4a-0633b2b55120"
/> | <img width="1966" height="1424" alt="image"
src="https://github.com/user-attachments/assets/110d409e-2bba-4fec-90e9-48ef2cdd5c98"
/> |
## Summary
Each settings page becomes a stack of cards with a consistent title,
intro line and toggle rows, instead of loose headings and bare
checkboxes. The shared pieces are `SettingCard.vue` and
`SettingToggle.vue`, and the styling moves out of `style.css` into
`client/css/settings.css`.
Appearance is now the landing page for `/settings` (General moves to
`/settings/general`, with a redirect so old `/settings/appearance` links
keep working). Below the width where the fixed sidebar would collide
with the centered container, the tabs collapse into a dropdown instead
of stacking above the content.
Setting names and bindings are unchanged, so nothing about how
preferences are stored or synced moves.
## Test Plan
- Ran the client and stepped through Appearance and Notifications:
toggling a switch still writes through to the settings store,
`/settings/appearance` redirects to Appearance, and the mobile dropdown
opens aligned to the card.
- Not verified in a browser: Account and General, which need a
non-public instance.
