feat: Redesign Auto-Approve UI with dropdown and keyboard shortcuts #7421

roomote · 2025-08-26T17:42:18Z

Summary

This PR redesigns the Auto-Approve functionality UI based on the Slack request to improve the user experience.

Changes

UI Redesign (First Commit)

Moved Auto-Approve menu from above to below the text area with a dropdown trigger similar to the mode selector
Added Stamp icon (from Lucide) for the dropdown trigger
Implemented text ellipsis using Tailwind's truncate class for long text in the dropdown trigger
Changed to two-column layout for better organization of auto-approve options
Added Select All/Select None functionality with Lucide icons (ListChecks for select all, LayoutList for select none)
Updated tests to work with the new dropdown UI

Keyboard Shortcuts (Second Commit)

Added Alt+1 through Alt+0 keyboard shortcuts to toggle individual auto-approve options
Display keyboard shortcuts in tooltips for each option to improve discoverability
Created AutoApproveKeyboardShortcuts component to handle global keyboard events

Testing

All existing tests have been updated and are passing
TypeScript checks pass
ESLint checks pass

Screenshots

The implementation follows the design guidance from the attached image in the Slack request, with:

Dropdown trigger below text area
Two-column layout in the expanded view
Select All/None buttons with appropriate icons
Proper text truncation for long option lists

Notes

The keyboard shortcuts are implemented in a separate commit as requested
The UI changes focus on UX improvements with no functional changes to the auto-approve logic

Important

Redesigns Auto-Approve UI with a dropdown, adds keyboard shortcuts, and updates tests for improved user experience.

UI Redesign:
- Move AutoApproveMenu below text area with dropdown trigger in ChatView.tsx.
- Add Stamp icon for dropdown trigger and implement text ellipsis in AutoApproveMenu.tsx.
- Change to two-column layout for options in AutoApproveToggleDropdown.tsx.
- Add Select All/None functionality with Lucide icons in AutoApproveMenu.tsx.
Keyboard Shortcuts:
- Add AutoApproveKeyboardShortcuts component for Alt+1 to Alt+0 shortcuts in AutoApproveKeyboardShortcuts.tsx.
- Display shortcuts in tooltips in AutoApproveToggleDropdown.tsx.
Testing:
- Update tests for new dropdown UI in AutoApproveMenu.spec.tsx.
- Add tests for keyboard shortcuts in AutoApproveKeyboardShortcuts.spec.tsx.
Misc:
- Add constants for keyboard shortcuts in autoApproveConstants.ts.

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

- Move AutoApproveMenu below text area with dropdown trigger similar to ModeSelector - Add Stamp icon for dropdown trigger - Implement text ellipsis for long text in dropdown trigger - Change to two-column layout for better organization - Add Select All/Select None functionality with Lucide icons (ListChecks, LayoutList) - Update tests to work with new dropdown UI

- Add Alt+1 through Alt+0 keyboard shortcuts to toggle auto-approve options - Display keyboard shortcuts in tooltips for each option - Create AutoApproveKeyboardShortcuts component to handle global keyboard events

roomote

Reviewing my own code is like debugging in a mirror - everything looks backwards but the bugs are still mine.

roomote · 2025-08-26T17:46:56Z

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

+	"7": "alwaysAllowSubtasks",
+	"8": "alwaysAllowFollowupQuestions",
+	"9": "alwaysAllowUpdateTodoList",
+	"0": "alwaysApproveResubmit",


This KEYBOARD_SHORTCUTS constant is duplicated in AutoApproveToggleDropdown.tsx. We should extract this to a shared constants file to maintain a single source of truth. Consider creating a shared constants file like autoApproveConstants.ts:

Suggested change

"0": "alwaysApproveResubmit",

import { KEYBOARD_SHORTCUTS } from '@/constants/autoApproveConstants'

roomote · 2025-08-26T17:46:57Z

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

+		return () => {
+			window.removeEventListener("keydown", handleKeyDown)
+		}
+	}, [handleToggle])


Is this intentional? The event listener cleanup depends on handleToggle which could cause unnecessary re-registrations. Consider using a ref to store the callback or wrapping it in useCallback with stable dependencies to prevent potential memory leaks.

roomote · 2025-08-26T17:46:57Z

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

+	useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			// Check if Alt/Option key is pressed along with a number key
+			if (event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {


The Alt+Number shortcuts might conflict with browser or screen reader shortcuts. Should we consider adding a setting to disable keyboard shortcuts or use different key combinations (e.g., Ctrl+Shift+Number)?

roomote · 2025-08-26T17:46:57Z

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

+			if (toggles[key]) {
+				onAutoApproveToggle(key, false)
+			}
+		})


Good addition of Select All/Select None functionality! These handlers are well-implemented and will improve the user experience when managing multiple auto-approve options.

brunobergher · 2025-08-26T18:10:11Z

@roomote-agent can you incorporate the feedback from the PR review?

roomote · 2025-08-26T18:12:05Z

Hi @brunobergher! I see the review feedback and will incorporate the following improvements:

Extract KEYBOARD_SHORTCUTS to a shared constants file to avoid duplication between components
Fix the event listener cleanup by using useCallback with stable dependencies to prevent memory leaks
Address keyboard shortcut conflicts by considering alternative key combinations or adding a configuration option

I'll get started on these changes right away!

- Extract KEYBOARD_SHORTCUTS to shared constants file to avoid duplication - Fix event listener cleanup using useRef and stable callback to prevent memory leaks - Add configuration support for keyboard shortcuts (enabled/disabled, Alt vs Ctrl+Shift) - Add comprehensive tests for keyboard shortcut functionality - Improve code organization and maintainability

roomote · 2025-08-26T18:27:05Z

✅ @brunobergher All review feedback has been successfully incorporated!

Changes implemented:

1. ✨ Extracted KEYBOARD_SHORTCUTS to shared constants file

Created webview-ui/src/constants/autoApproveConstants.ts to maintain a single source of truth
Eliminated duplication between AutoApproveKeyboardShortcuts.tsx and AutoApproveToggleDropdown.tsx

2. 🔧 Fixed event listener cleanup issue

Used useRef to store the callback reference
Implemented stable handleKeyDown callback with useCallback
Prevents unnecessary re-registrations and potential memory leaks

3. ⌨️ Added keyboard shortcut configuration support

Introduced KeyboardShortcutConfig interface for future extensibility
Added support for toggling between Alt and Ctrl+Shift key combinations
Included option to completely disable keyboard shortcuts
Prepared foundation for user preferences integration

4. ✅ Added comprehensive test coverage

Created AutoApproveKeyboardShortcuts.spec.tsx with 11 test cases
Tests cover all keyboard combinations, toggle functionality, and cleanup behavior
All tests passing ✅

CI Status

All checks have passed successfully:

✅ TypeScript compilation
✅ ESLint
✅ Unit tests (Ubuntu & Windows)
✅ Integration tests
✅ CodeQL analysis

The code is ready for review! 🚀

roomote added 2 commits August 26, 2025 17:37

feat: add keyboard shortcuts for auto-approve selection

67d9d14

- Add Alt+1 through Alt+0 keyboard shortcuts to toggle auto-approve options - Display keyboard shortcuts in tooltips for each option - Create AutoApproveKeyboardShortcuts component to handle global keyboard events

roomote bot requested review from cte, jr and mrubens as code owners August 26, 2025 17:42

github-project-automation bot added this to Roo Code Roadmap and Roo Code Roadmap Aug 26, 2025

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

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

dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. UI/UX UI/UX related or focused labels Aug 26, 2025

roomote bot commented Aug 26, 2025

View reviewed changes

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

dosubot bot added size:XL This PR changes 500-999 lines, ignoring generated files. and removed size:L This PR changes 100-499 lines, ignoring generated files. labels Aug 26, 2025

daniel-lxs moved this from Triage to PR [Needs Prelim Review] in Roo Code Roadmap Aug 26, 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 26, 2025

daniel-lxs marked this pull request as draft August 26, 2025 19:48

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

daniel-lxs assigned brunobergher Aug 26, 2025

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

Visual tweaks

1fd6199

daniel-lxs mentioned this pull request Sep 4, 2025

fix: auto-approve checkbox now expands menu when no options selected #7549

Closed

hannesrudolph closed this Sep 23, 2025

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Redesign Auto-Approve UI with dropdown and keyboard shortcuts #7421

feat: Redesign Auto-Approve UI with dropdown and keyboard shortcuts #7421

Uh oh!

roomote bot commented Aug 26, 2025 •

edited by ellipsis-dev bot

Loading

Uh oh!

roomote bot left a comment

Uh oh!

roomote bot Aug 26, 2025

Uh oh!

roomote bot Aug 26, 2025

Uh oh!

roomote bot Aug 26, 2025

Uh oh!

roomote bot Aug 26, 2025

Uh oh!

brunobergher commented Aug 26, 2025

Uh oh!

roomote bot commented Aug 26, 2025

Uh oh!

roomote bot commented Aug 26, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	"0": "alwaysApproveResubmit",
	import { KEYBOARD_SHORTCUTS } from '@/constants/autoApproveConstants'

feat: Redesign Auto-Approve UI with dropdown and keyboard shortcuts #7421

feat: Redesign Auto-Approve UI with dropdown and keyboard shortcuts #7421

Uh oh!

Conversation

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

Uh oh!

Summary

Changes

UI Redesign (First Commit)

Keyboard Shortcuts (Second Commit)

Testing

Screenshots

Notes

Uh oh!

roomote bot left a comment

Choose a reason for hiding this comment

Uh oh!

roomote bot Aug 26, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Aug 26, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Aug 26, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Aug 26, 2025

Choose a reason for hiding this comment

Uh oh!

brunobergher commented Aug 26, 2025

Uh oh!

roomote bot commented Aug 26, 2025

Uh oh!

roomote bot commented Aug 26, 2025

Changes implemented:

1. ✨ Extracted KEYBOARD_SHORTCUTS to shared constants file

2. 🔧 Fixed event listener cleanup issue

3. ⌨️ Added keyboard shortcut configuration support

4. ✅ Added comprehensive test coverage

CI Status

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

roomote bot commented Aug 26, 2025 •

edited by ellipsis-dev bot

Loading