feat(ui): reorder api profile #7731
Conversation
dosubot
bot
added
size:L
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
There was a problem hiding this comment.
Thank you for your contribution! I've reviewed the API profile reordering feature and found several issues that need attention before merging.
Critical Issues (Must Fix):
-
Missing persistence of custom order - The component doesn't persist the custom order to storage. When users reload VSCode, their custom ordering will be lost. The component should communicate with the extension backend to save/load the custom order preference.
-
Missing parent callback handlers - The component accepts
onSortModeChangeandonCustomOrderChangeprops but never calls them. These callbacks should be invoked when the sort mode or custom order changes to notify the parent component (lines 133-140 and 168-180 in ApiConfigSelector.tsx).
Important Suggestions (Should Consider):
-
Incomplete implementation - The PR only addresses API profiles reordering but issue #7496 also requests mode selector reordering. Should this be addressed in a separate PR or included here?
-
Accessibility concerns - The drag-and-drop functionality lacks keyboard navigation support. Users who rely on keyboard navigation cannot reorder items. Consider adding keyboard shortcuts (e.g., Ctrl+Up/Down) for accessibility.
-
UX improvement needed - When switching from custom to alphabetical sort, the custom order is lost without warning. Consider showing a confirmation dialog or preserving the custom order for when users switch back.
Minor Improvements (Nice to Have):
-
Visual feedback enhancement - The drag-over indicator (border-top) could be improved with a more visible drop zone indicator or preview of where the item will be placed.
-
Test coverage - While there's a test for drag-and-drop, it could be expanded to cover edge cases like dragging pinned items, canceling reorder mode, and switching between sort modes.
Overall, the implementation is well-structured and the UI looks good. The main concerns are around persistence and parent component integration which are critical for the feature to work properly across sessions.
hannesrudolph
added
the
Issue/PR - Triage
|
ah right forgot about the persistence, brb |
|
I've addressed the critical issues, lmk if we want keyboard navigation. |
dosubot
bot
added
size:XL
Screen.Recording.2025-09-07.at.09.12.45.movmanaged to make keyboard navigation works (ignore the pink outline, it's using system's colour, it should be default to blue for most people) |
hannesrudolph
added
PR - Needs Preliminary Review
and removed
Issue/PR - Triage
|
Hey @elianiva thank you for your contribution! One observation about the state management: The dual state approach with The current pattern could potentially lead to sync issues between the two states. Perhaps you could rely solely on the persisted state from the extension context and update it directly via vscode.postMessage, letting the context update flow back through props. This would eliminate the need for the internal fallback state and make the data flow more predictable. Just a thought to consider for reducing complexity and potential edge cases! The implementation is solid otherwise. |
daniel-lxs
moved this from PR [Needs Prelim Review]
to PR [Changes Requested]
in Roo Code Roadmap
hannesrudolph
added
PR - Changes Requested
and removed
PR - Needs Preliminary Review
labels
|
I've updated so that it uses a single source of truth, also fixed a reordering issue due to unnecessary complexity when using keyboard navigation. |
|
@brunobergher before I get the merge conflicts on this fixed, thoughts? |
|
Cool! I didn't realize this need but it makes sense. That way we avoid the always prominent mention of "drag to reorder" for people who just want to switch providers or modes. Is that fair? |
Ah yes, agreed, if we move it inside the settings then we can directly show the items instead of making it as a dropdown toggle. |
dosubot
bot
added
size:XXL
Screen.Recording.2025-09-29.at.15.02.43.movHere's what I came up with based on previous feedback, would love to have some feedback on this. The delay comes from the fact that we're relying on the server state instead of optimistic UI update. I'm not sure whether if it's worth it to update the UI optimistically and revert on failed call. I chose the simplest implementation first, I can always add it later if it's needed. |
hannesrudolph
force-pushed
the
feat/reorder-profile
branch
from
b1e93ed to
0d95ce0
Compare
Review complete. Found no new issues.
Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues. |
| onSelect(config.id) | ||
| } | ||
| }} | ||
| className={cn( |
There was a problem hiding this comment.
The ConfigItem component lacks keyboard accessibility because it's missing a tabIndex attribute. Users cannot tab to these options when navigating with the keyboard, breaking ARIA listbox patterns. Add tabIndex={0} to the outermost div.
Fix it with Roo Code or mention @roomote and request a fix.
| apiConfigsCustomOrder: z | ||
| .array( | ||
| z.object({ | ||
| id: z.string(), | ||
| index: z.number(), | ||
| pinned: z.boolean(), | ||
| }), | ||
| ) | ||
| .optional(), |
There was a problem hiding this comment.
The pinned field in apiConfigsCustomOrder is defined but never meaningfully used. In ApiConfigManager.tsx line 172, it's preserved with a default value but the sorting logic only uses the index field. This unused field adds complexity to the data model without providing value. Either implement functionality that uses this field or remove it from the schema to avoid data inconsistencies.
Fix it with Roo Code or mention @roomote and request a fix.
| onKeyDown={(e) => { | ||
| onKeyDown(e, index) | ||
| if (!isReorderingMode && (e.key === "Enter" || e.key === " ")) { | ||
| e.preventDefault() | ||
| onSelectConfig(config.name) | ||
| } | ||
| }} |
There was a problem hiding this comment.
Double selection bug: When a user presses Enter or Space on a config item in normal mode (not reordering), the onKeyDown callback at line 205 calls onSelectConfig, then the outer onKeyDown at line 204-210 calls it again. This happens because the parent's onKeyDown handler (line 204) doesn't check for isReorderingMode when handling Enter/Space. The parent handler should either check isReorderingMode or the inner handler should call e.stopPropagation() to prevent double-firing.
Fix it with Roo Code or mention @roomote and request a fix.
…e/onCustomOrderChange; fix double-selection keydown in settings; add tests
|
Summary of fixes and recommendations based on Bruno’s comments: Implemented:
Recommendations (defer to follow-up PR):
All CI checks passed after push; webview-ui test suite green locally. |
…controls, prefer saved custom order); Settings always-on reordering with Reset to Alphabetical; update tests; fix lint
…atural) in ApiConfigSelector
|
This PR is very far from being ready. Closing unless you have time to work on it for now. |
github-project-automation
bot
moved this from PR [Changes Requested]
to Done
in Roo Code Roadmap
4 participants
Related GitHub Issue
Closes: #7496
Roo Code Task Context (Optional)
Description
This PR introduces a UI for custom reordering of the API profiles in addition to the already existing alphabetical ordering.
Test Procedure
Test the feature as shown in the video below.
Pre-Submission Checklist
Screenshots / Videos
Screen.Recording.2025-09-06.at.10.36.39.mov
Documentation Updates
There should be a section showing off this reordering feature.
Additional Notes
Get in Touch
@elianiva
Important
Adds custom reordering of API profiles in
ApiConfigSelectorwith drag-and-drop support and updates i18n files for localization.ApiConfigSelector.tsx, supporting both alphabetical and custom order.ApiConfigSelectorto include drag-and-drop handlers and reorder mode controls.ApiConfigSelector.spec.tsxfor drag-and-drop reordering functionality.This description was created by
for 5ce0f51. You can customize this summary. It will automatically update as commits are pushed.