Skip to content

refactor(settings): simplify settings layout and controls#1288

Open
maria-rcks wants to merge 7 commits intopingdotgg:mainfrom
maria-rcks:maria/settings-ui-simplify
Open

refactor(settings): simplify settings layout and controls#1288
maria-rcks wants to merge 7 commits intopingdotgg:mainfrom
maria-rcks:maria/settings-ui-simplify

Conversation

@maria-rcks
Copy link
Collaborator

@maria-rcks maria-rcks commented Mar 21, 2026

What Changed

Simplified the settings page structure and reduced UI noise without changing the overall design language.

This updates the settings screen to use calmer grouped sections, simpler row layouts, lighter custom model management, and a top-bar Restore defaults action instead of reset controls inside the page body.

It also adds a small reusable improvement to the shared select component so settings dropdowns can render without the extra selected-item gutter.

Why

The previous settings UI had too many nested boxes, repeated action patterns, and too much visual weight for advanced or infrequently used options.

This keeps the page closer to the rest of the app and makes the common settings easier to scan.

UI Changes

Before

Screen.Recording.2026-03-21.at.8.17.54.PM.mov

After

Screen.Recording.2026-03-21.at.8.18.40.PM.mov

Checklist

  • This PR is small and focused
  • I explained what changed and why
  • I included before/after screenshots for any UI changes
  • I included a video for animation/interaction changes

Note

Restructure settings UI to support Claude and Codex CLI provider configuration

  • Adds claudeBinaryPath to AppSettingsSchema and introduces getProviderStartOptions in appSettings.ts to build normalized provider overrides, returning undefined when none are set.
  • Rewrites _chat.settings.tsx with new SettingsSection, SettingsRow, and SettingResetButton components, collapsible provider install panels for Codex and Claude, and a global 'Restore defaults' confirmation action.
  • Converts 'Default thread mode' from a toggle to a dropdown select, and adds show-more/less and per-row remove controls to custom model management.
  • Extends SelectItem in select.tsx with a hideIndicator prop that adjusts grid layout when the selection indicator is hidden.
  • Behavioral Change: ChatView now uses getProviderStartOptions for dispatch, so provider overrides include Claude paths and pass undefined instead of an empty object when no overrides are set.

Macroscope summarized 3730235.

@coderabbitai
Copy link

coderabbitai bot commented Mar 21, 2026

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 2b43c42e-73ec-4528-a860-e7fc64e62e42

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions bot added size:XXL 1,000+ changed lines (additions + deletions). vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. labels Mar 21, 2026
@maria-rcks
Copy link
Collaborator Author

I didn't touch the install path for codex section "codex install", i also think there should be one for claude? but if julius wants to give me ideas or just code it himself im all for it.

@UtkarshUsername
Copy link
Contributor

Can't restore individual defaults now?

@maria-rcks
Copy link
Collaborator Author

@UtkarshUsername is it really needed to have a reset button appearing on each one? tried a select thing to reset but wasnt happy, if you have a better idea than just slapping a reset button everywhere, would love to hear.

@vishalHaridas
Copy link

I agree that individual restores are definitely useful, especially when options eventually grow.
Why not follow a minimal icon like Zed's IDE:
Default:
image
Changed:
image

@maria-rcks
Copy link
Collaborator Author

will update this later

@UtkarshUsername
Copy link
Contributor

@UtkarshUsername is it really needed to have a reset button appearing on each one?

Yes, having that is helpful. Users might want different settings for, let's say theme and models.

tried a select thing to reset but wasnt happy, if you have a better idea than just slapping a reset button everywhere, would love to hear.

I like the UI shared by @vishalHaridas


And one small nit-pick. The "Codex Install" chevron pointing towards right makes me feel as if it will open in a new page, but it is an accordion. So, can you change the orientation to point down when closed, and up when open. Like this:
image

@maria-rcks
Copy link
Collaborator Author

noted
will update once i get back

@maria-rcks maria-rcks force-pushed the maria/settings-ui-simplify branch from 50f2367 to 2528237 Compare March 24, 2026 00:05
@maria-rcks maria-rcks force-pushed the maria/settings-ui-simplify branch from 2528237 to 3730235 Compare March 24, 2026 01:25
@vishalHaridas
Copy link

The new UI and behavior look amazing!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:XXL 1,000+ changed lines (additions + deletions). vouch:trusted PR author is trusted by repo permissions or the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants