Separate Settings Components

[PretzelVector]

Description

Made some nice cleanup to the settings components by:

• Separated out these components:

  • SettingCheckbox
  • SettingCombo
  • SettingSlider
  • SettingTextField

• Removed ExperimentalFeature and moved its functionality into SettingCheckbox

• Fixed the indent guides to be consistent for all settings

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Ad-hoc testing

Checklist:

• My code follows the patterns of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation

Additional context

Related Issues

Reviewers

---

Important

Refactor settings components in the webview UI by introducing modular components and removing redundant code for improved maintainability and consistency.

• Components:
  • Introduced SettingCheckbox, SettingCombo, SettingSlider, and SettingTextField components for modular settings management.
  • Removed ExperimentalFeature component, integrated its functionality into SettingCheckbox.
• Refactoring:
  • Updated ApiOptions.tsx, SettingsView.tsx, and TemperatureControl.tsx to use new components.
  • Improved consistency in settings UI with new components.
• Testing:
  • Updated tests in __tests__/ApiOptions.test.tsx and __tests__/SettingsView.test.tsx to accommodate new components.
  • Ensured all settings functionalities are covered with the new components.

^{This description was created by for 35f224efe06e181125b9976a586a42fcf06350f8. It will automatically update as commits are pushed.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: ee85628

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[mrubens]

Hey, thanks for the PR! I really like the improved organization but would be interested in exploring other visual treatments - have you looked at any other variations there? Happy to discuss more in Discord if that's easier. Thanks again!

[bramburn]

that looks awesaome! I was just thinking that!

[bramburn]

I think there's room to do more work around this to refactor the settings page

[PretzelVector]

have you looked at any other variations there?

Actually, I haven't tried other visual styles yet. Since we already have the components organized in hierarchy, it should be quite easy to explore different section styles. We can complete the component set by adding SettingSection and SettingTextContent.

But honestly, the better solution is probably to follow what Cline did - move most settings to proper VSCode extension settings that users can configure through VSCode's own UI.

[daniel-lxs]

Hey, thank you for your PR.

The separation of settings component is already implemented on Roo Code.

If you think we need to do better on our implementation please leave a comment or open a new PR.