Give the settings page a more polished layout - #22
Merged
Merged
Conversation
Turn the intro into an accent-tinted header card, replace the numbered section badges with icons, use toggle switches for on/off settings, add focus rings to inputs, and make the integrations and custom action sections full width. Style the notification, portability, and updates panels to match the other sections, and hide release output boxes until they have content. Works with the light theme and every accent color. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BUhabxL4SPejg19jgbSyYN
Commanderx-code
marked this pull request as ready for review
September 26, 2026 03:13
This was referenced Sep 26, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📝 Change
Brings the in-app Settings page in line with the refreshed docs (#16–#21). The changes are visual only: no settings, IDs, storage, or behavior change.
aria-hidden.role="switch") and the notification checkboxes are real toggle switches in the accent color, with a visible focus ring.All new rules sit in one block at the end of
src/styles.css, scoped to#settings-viewand#notification-form. They use the existing theme variables (--cyan,--surface,--surface-soft,--line,--accent-ink), so the light theme and all three accent colors work. Transitions are covered by the existing reduced-motion rule.color-mix()has anrgbafallback declared first.✅ Validation
npm run checknpm test: 78/78 pass. The interface tests exercise settings search, section links, and saving.npm run test:rust: not run; there are no Rust changes.🔎 Review notes
No new dependencies. Only markup glyphs and CSS changed. Worth a quick look in the desktop app (WebKitGTK) to confirm the switches render as expected.
🤖 Generated with Claude Code
https://claude.ai/code/session_01BUhabxL4SPejg19jgbSyYN
Generated by Claude Code