feat: replace auto-approve text labels with icons in collapsed view #6500

roomote · 2025-07-31T18:22:05Z

This PR replaces the text labels in the collapsed auto-approve menu with their corresponding icons, providing a more compact and visually consistent interface.

FocuSee.Project.2025-08-19.18-17-55.mp4

Changes

Updated AutoApproveMenu component to display icons instead of text labels when collapsed
Added enabledIcons computed value to extract icon names from enabled toggles
Modified the display span to render icons with proper styling
Updated tests to check for icon presence instead of text content
Removed unused displayText and enabledActionsList variables

Visual Changes

When collapsed, the auto-approve menu now shows icons (eye, edit, terminal, etc.) instead of text labels like "Read, Write, Execute"
Icons are displayed with proper spacing and styling
The "None selected" text is still shown when no options are enabled

Testing

All existing tests have been updated and are passing
The functionality remains unchanged, only the visual representation is different

Important

Replaces text labels with icons in the collapsed AutoApproveMenu for a more compact UI, updating tests accordingly.

UI Update:
- AutoApproveMenu now displays icons instead of text labels in collapsed view.
- Icons include eye, edit, terminal, etc., with proper spacing and styling.
- "None selected" text is shown only when no options are enabled.
Code Changes:
- Added enabledIcons computed value to extract icon names from enabled toggles.
- Removed unused displayText and enabledActionsList variables.
Testing:
- Updated tests in AutoApproveMenu.spec.tsx to check for icon presence instead of text content.
- Tests ensure icons are displayed and toggled correctly, and tooltips are shown.

^{This description was created by}^{for e5b41c8. You can customize this summary. It will automatically update as commits are pushed.}

- Updated AutoApproveMenu component to display icons instead of text labels when collapsed - Added enabledIcons computed value to extract icon names from enabled toggles - Modified the display span to render icons with proper styling - Updated tests to check for icon presence instead of text content - Removed unused displayText and enabledActionsList variables - Maintains the same functionality while providing a more compact visual representation

ellipsis-dev · 2025-07-31T18:24:05Z

webview-ui/src/components/chat/AutoApproveMenu.tsx

+							? t("chat:autoApprove.none")
+							: enabledIcons.map((icon, index) => (
+									<span
+										key={index}


Consider using the toggle key (e.g., the key string) as the unique key instead of the index, and add an aria-label attribute to each icon span for accessibility.

roomote

Thank you for this UI improvement! The refactoring successfully replaces text labels with icons for a more compact interface. I've identified a few areas that could be enhanced for better robustness and accessibility.

roomote · 2025-07-31T18:25:21Z

webview-ui/src/components/chat/AutoApproveMenu.tsx

+							? t("chat:autoApprove.none")
+							: enabledIcons.map((icon, index) => (
+									<span
+										key={index}


The enabledIcons array could contain duplicate icons if multiple settings share the same icon, causing React key warnings. Consider using the setting key + index as the key instead of just index, or filter out duplicates if that's the intended behavior.

roomote · 2025-07-31T18:25:21Z

webview-ui/src/components/chat/AutoApproveMenu.tsx

+						{!effectiveAutoApprovalEnabled || !hasEnabledOptions
+							? t("chat:autoApprove.none")
+							: enabledIcons.map((icon, index) => (
+									<span


For better accessibility, consider adding aria-label attributes to these icon spans. Screen readers won't be able to interpret the meaning of these icons without text labels or proper ARIA attributes.

roomote · 2025-07-31T18:25:21Z

webview-ui/src/components/chat/AutoApproveMenu.tsx

-						{displayText}
+						{!effectiveAutoApprovalEnabled || !hasEnabledOptions
+							? t("chat:autoApprove.none")
+							: enabledIcons.map((icon, index) => (


With many enabled options, icons could overflow the container. Consider adding a maximum display count (e.g., show first 3-4 icons + '...' indicator) or implementing horizontal scrolling for better UX.

roomote · 2025-07-31T18:25:21Z

webview-ui/src/components/chat/AutoApproveMenu.tsx

+							gap: "6px",
 						}}>
-						{displayText}
+						{!effectiveAutoApprovalEnabled || !hasEnabledOptions


This inline conditional logic could be extracted to a helper function for better readability. Something like renderEnabledIcons() would make the JSX cleaner.

roomote · 2025-07-31T18:25:21Z

webview-ui/src/components/chat/AutoApproveMenu.tsx

+		return Object.entries(toggles)
+			.filter(([_key, value]) => !!value)
+			.map(([key]) => autoApproveSettingsConfig[key as AutoApproveSetting].icon)
+	}, [toggles])


The dependency array includes the entire toggles object. For better performance, consider memoizing based on just the enabled state values or using a more specific dependency array.

daniel-lxs · 2025-08-05T21:39:47Z

@roomote-agent Add tooltips to the icons so they are more easily identifiable, do not create a new PR, push to this one

roomote · 2025-08-05T21:41:20Z

I see your request to add tooltips to the icons in the collapsed view. I'll work on implementing this now and push the changes to this PR branch.

- Wrapped each icon in StandardTooltip component - Tooltips display the label for each auto-approve option - Added test to verify tooltips appear on hover - Helps users identify icons more easily in collapsed state

roomote · 2025-08-05T21:46:14Z

I've successfully added tooltips to the icons in the collapsed auto-approve menu! 🎉

Changes made:

Wrapped each icon in the StandardTooltip component
The tooltips display the corresponding label for each auto-approve option (e.g., "Read-only operations", "Write operations", etc.)
Added a test case to verify that tooltips appear when hovering over the icons

The implementation uses the existing autoApproveSettingsConfig to map icons to their labels, ensuring consistency with the rest of the application.

The changes have been pushed to this PR branch and CI checks are currently running.

daniel-lxs · 2025-08-05T21:50:38Z

@hannesrudolph This looks a bit weird

hannesrudolph · 2025-08-19T23:29:29Z

@hannesrudolph This looks a bit weird

ellipsis-dev · 2025-08-19T23:32:30Z

webview-ui/src/components/chat/AutoApproveMenu.tsx

+									const tooltipContent = config ? t(config.labelKey) : ""
+
+									return (
+										<StandardTooltip key={index} content={tooltipContent}>


Consider using a stable unique key (e.g. the icon name) instead of the array index in the map() to avoid potential key collisions if the order changes.

Suggested change

<StandardTooltip key={index} content={tooltipContent}>

<StandardTooltip key={icon} content={tooltipContent}>

…ighlight active ones; update tests

…irectly - Icons in collapsed view are now clickable buttons that toggle their respective options - Added hover effect for better UX feedback - Clicking an icon directly toggles the auto-approve option without expanding the menu - Updated tests to verify the new clickable behavior - Maintains tooltips on all icon buttons

dosubot · 2025-08-20T00:26:28Z

Related Documentation

No published documentation to review for changes on this repository.
Write your first living document

^{How did I do? Any feedback?}

Copilot

Pull Request Overview

This PR modernizes the auto-approve menu interface by replacing text labels with icons in the collapsed view, creating a more compact and visually appealing design. The functionality remains unchanged while improving the visual representation.

Replace text labels with corresponding icons (eye, edit, terminal, etc.) in collapsed view
Add interactive tooltips and hover states for better user experience
Update test suite to verify icon presence and tooltip functionality

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
AutoApproveMenu.tsx	Replaces text display with icon buttons, adds tooltips and hover effects
AutoApproveMenu.spec.tsx	Updates tests to check for icon presence, highlighting, and tooltip functionality

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-08-20T00:26:46Z

webview-ui/src/components/chat/AutoApproveMenu.tsx

+							alignItems: "center",
+							gap: "6px",
+						}}
+						onClick={(e) => e.stopPropagation()}>


The onClick handler e.stopPropagation() on the span element is redundant since each individual button already handles its own click events. This could be removed to simplify the code.

Suggested change

onClick={(e) => e.stopPropagation()}>

>

Copilot · 2025-08-20T00:26:46Z

webview-ui/src/components/chat/AutoApproveMenu.tsx

+										}}
+										onMouseLeave={(e) => {
+											e.currentTarget.style.backgroundColor = "transparent"
+										}}


[nitpick] The inline mouse event handlers for hover effects could be extracted to improve readability and maintainability. Consider using CSS hover pseudo-selectors or extracting these into named functions.

Suggested change

}}

ellipsis-dev · 2025-08-20T00:28:06Z

webview-ui/src/components/chat/AutoApproveMenu.tsx

+							const isEnabled = !!toggles[key]
+							return (
+								<StandardTooltip key={key} content={t(labelKey)}>
+									<button


Consider adding an accessible aria-label to the icon button (e.g., aria-label={t(labelKey)}) to ensure screen reader users can understand its purpose.

^{This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.}

daniel-lxs

LGTM

roomote bot requested review from cte and mrubens as code owners July 31, 2025 18:22

github-project-automation bot added this to Roo Code Roadmap Jul 31, 2025

roomote bot requested a review from jr as a code owner July 31, 2025 18:22

github-project-automation bot added this to Roo Code Roadmap Jul 31, 2025

github-project-automation bot moved this to Triage in Roo Code Roadmap Jul 31, 2025

github-project-automation bot moved this to New in Roo Code Roadmap Jul 31, 2025

dosubot bot added size:M This PR changes 30-99 lines, ignoring generated files. UI/UX UI/UX related or focused labels Jul 31, 2025

ellipsis-dev bot reviewed Jul 31, 2025

View reviewed changes

roomote bot commented Jul 31, 2025

View reviewed changes

hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Jul 31, 2025

daniel-lxs moved this from Triage to PR [Needs Prelim Review] in Roo Code Roadmap Aug 1, 2025

hannesrudolph added PR - Needs Preliminary Review and removed Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. labels Aug 1, 2025

daniel-lxs assigned daniel-lxs and hannesrudolph and unassigned daniel-lxs Aug 5, 2025

daniel-lxs marked this pull request as draft August 5, 2025 21:38

daniel-lxs moved this from PR [Needs Prelim Review] to PR [Draft / In Progress] in Roo Code Roadmap Aug 5, 2025

feat: add tooltips to auto-approve icons in collapsed view

cfa2081

- Wrapped each icon in StandardTooltip component - Tooltips display the label for each auto-approve option - Added test to verify tooltips appear on hover - Helps users identify icons more easily in collapsed state

hannesrudolph added PR - Draft / In Progress and removed PR - Needs Preliminary Review labels Aug 5, 2025

hannesrudolph closed this Aug 19, 2025

github-project-automation bot moved this from New to Done in Roo Code Roadmap Aug 19, 2025

github-project-automation bot moved this from PR [Draft / In Progress] to Done in Roo Code Roadmap Aug 19, 2025

hannesrudolph reopened this Aug 19, 2025

github-project-automation bot moved this from Done to Triage in Roo Code Roadmap Aug 19, 2025

github-project-automation bot moved this from Done to New in Roo Code Roadmap Aug 19, 2025

hannesrudolph moved this from Triage to PR [Draft / In Progress] in Roo Code Roadmap Aug 19, 2025

ellipsis-dev bot reviewed Aug 19, 2025

View reviewed changes

Merge Resolver added 2 commits August 19, 2025 17:39

feat(webview-ui): show all auto-approve icons in collapsed view and h…

782174e

…ighlight active ones; update tests

hannesrudolph moved this from PR [Draft / In Progress] to PR [Needs Prelim Review] in Roo Code Roadmap Aug 20, 2025

hannesrudolph marked this pull request as ready for review August 20, 2025 00:26

Copilot AI review requested due to automatic review settings August 20, 2025 00:26

dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. and removed size:M This PR changes 30-99 lines, ignoring generated files. labels Aug 20, 2025

Copilot AI reviewed Aug 20, 2025

View reviewed changes

ellipsis-dev bot reviewed Aug 20, 2025

View reviewed changes

hannesrudolph added PR - Needs Preliminary Review and removed PR - Draft / In Progress labels Aug 20, 2025

daniel-lxs approved these changes Aug 21, 2025

View reviewed changes

dosubot bot added the lgtm This PR has been approved by a maintainer label Aug 21, 2025

daniel-lxs moved this from PR [Needs Prelim Review] to PR [Needs Review] in Roo Code Roadmap Aug 21, 2025

hannesrudolph added PR - Needs Review and removed PR - Needs Preliminary Review labels Aug 21, 2025

hannesrudolph closed this Aug 26, 2025

github-project-automation bot moved this from PR [Needs Review] to Done in Roo Code Roadmap Aug 26, 2025

github-project-automation bot moved this from New to Done in Roo Code Roadmap Aug 26, 2025

	<StandardTooltip key={index} content={tooltipContent}>
	<StandardTooltip key={icon} content={tooltipContent}>

feat: replace auto-approve text labels with icons in collapsed view #6500

feat: replace auto-approve text labels with icons in collapsed view #6500

Uh oh!

Conversation

roomote bot commented Jul 31, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Visual Changes

Testing

Uh oh!

ellipsis-dev bot Jul 31, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot left a comment

Choose a reason for hiding this comment

Uh oh!

roomote bot Jul 31, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Jul 31, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Jul 31, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Jul 31, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Jul 31, 2025

Choose a reason for hiding this comment

Uh oh!

daniel-lxs commented Aug 5, 2025

Uh oh!

roomote bot commented Aug 5, 2025

Uh oh!

roomote bot commented Aug 5, 2025

Changes made:

Uh oh!

daniel-lxs commented Aug 5, 2025

Uh oh!

hannesrudolph commented Aug 19, 2025

Uh oh!

ellipsis-dev bot Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

dosubot bot commented Aug 20, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

daniel-lxs left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

roomote bot commented Jul 31, 2025 •

edited by ellipsis-dev bot

Loading