feat: add UI customization settings page #7150
Conversation
- Add new UISettings component with toggles for various UI elements - Add UI visibility state properties to global settings schema - Integrate UI settings into the main settings view - Update ChatTextArea to respect UI visibility settings - Update ChatView to respect context percentage bar and auto-approve tab settings - Add backend message handlers for persisting UI settings - Add comprehensive localization strings for all UI settings - Update tests to support new UI visibility properties Implements #7149 - allows users to customize which UI elements are visible for a cleaner, more personalized interface
dosubot
bot
added
size:XL
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
| <div className="space-y-3 pl-4"> | ||
| <VSCodeCheckbox | ||
| checked={showEnhancePromptButton} | ||
| onChange={(e: any) => setCachedStateField("showEnhancePromptButton", e.target.checked)} |
There was a problem hiding this comment.
Consider using proper TypeScript event types instead of any for better type safety:
| onChange={(e: any) => setCachedStateField("showEnhancePromptButton", e.target.checked)} | |
| onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCachedStateField("showEnhancePromptButton", e.target.checked)} |
This pattern appears multiple times throughout the file and would provide better IDE support and catch potential type errors at compile time.
| } | ||
| // UI Settings handlers | ||
| case "showEnhancePromptButton": | ||
| await updateGlobalState("showEnhancePromptButton", message.bool ?? true) |
There was a problem hiding this comment.
Each UI toggle triggers a separate postStateToWebview() call, which could impact performance when users change multiple settings quickly. Consider batching these updates or debouncing the state synchronization to reduce the number of messages sent to the webview.
For example, you could collect all changes and send them in a single update after a short delay.
| </label> | ||
| </VSCodeCheckbox> | ||
|
|
||
| <VSCodeCheckbox |
There was a problem hiding this comment.
The repetitive checkbox pattern could be refactored into a reusable component to reduce code duplication. For example:
const UIToggle = ({ setting, label, value, onChange }) => (
<VSCodeCheckbox
checked={value}
onChange={(e) => onChange(setting, e.target.checked)}
data-testid={`show-${setting}-checkbox`}>
<label className="block">{label}</label>
</VSCodeCheckbox>
);This would make the component more maintainable and easier to extend with new settings.
| @@ -0,0 +1,167 @@ | |||
| import React, { HTMLAttributes } from "react" | |||
There was a problem hiding this comment.
Missing unit tests for this new component. Consider adding tests to verify:
- Toggle functionality works correctly
- State persistence through the setCachedStateField callback
- Proper rendering of all UI elements
- Accessibility attributes are present
hannesrudolph
added
the
Issue/PR - Triage
|
@roomote-agent Use switch_mode to switch to pr-fixer mode and solve the issues on this PR. Do not create a new one. |
|
I see the request to fix the issues on this PR. I notice the |
- Added uiSettings translations to all 17 non-English locale files - Fixes failing check-translations CI job - All locale files now have complete translations for the new UI customization settings
hannesrudolph
added
PR - Changes Requested
and removed
Issue/PR - Triage
|
✅ Issue Fixed Successfully! The failing What was the issue?The PR added new UI settings strings to the English translation file but did not include the corresponding translations in the other 17 language files, causing the translation check to fail. What was done?
Results✅ All CI checks are now passing:
The PR is ready for review and merge! |
github-project-automation
bot
moved this from PR [Changes Requested]
to Done
in Roo Code Roadmap
Closes #7149
Summary
This PR implements a comprehensive UI Customization Settings page that allows users to toggle various UI elements for a more personalized and clutter-free experience.
Changes Made
New Features
UISettingscomponent with toggles for all customizable UI elementsUI Elements That Can Be Toggled
Prompt Input Area
General UI Elements
Technical Implementation
ExtensionStateContextfor state managementwebviewMessageHandler.tsfor persisting settingsChatTextAreaandChatViewcomponents to respect visibility settingsTesting
Screenshots
The new UI Settings page provides an intuitive interface for customizing the visibility of various UI elements, helping users create their ideal workspace.
Breaking Changes
None - all UI elements are visible by default, maintaining backward compatibility.
Related Issues
Closes #7149
Important
Introduces a UI customization settings page to toggle visibility of various UI elements, ensuring a personalized user experience while maintaining backward compatibility.
UISettingscomponent toSettingsViewfor toggling UI elements.Enhance Prompt,Codebase Indexing,Add Images,Slash Commands,Hint Text,Send Button,API Configuration,Auto-Approve Tab, andContext Percentage Bar.ExtensionStateContextandglobalSettingsSchema.webviewMessageHandler.tsto handle new UI settings messages.ChatTextArea,ChatView, andTaskHeaderto respect new visibility settings.ChatTextArea.spec.tsxto cover new UI settings.This description was created by
for 0d4afbf. You can customize this summary. It will automatically update as commits are pushed.