Improve mode names UI consistency #7929
Conversation
- Remove emojis from mode names for cleaner UI - Change 'Code' mode to 'Agent' for better clarity - Standardize naming convention across all modes - Add new file icon components (FileIcon.tsx, FilePathWithIcon.tsx) - Improve various UI components for consistency - Enhance multiple chat components and UI elements - Update UI components across webview-ui for better UX This improves the overall user experience by providing a cleaner, more professional interface with consistent naming conventions.
… selected item refs
dosubot
bot
added
size:XXL
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
![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 changes and have several concerns that need to be addressed:
Critical Issues
1. Missing linked GitHub issue
The PR template requires linking to an approved GitHub issue, but the "Closes: #" field is empty. This violates the contribution guidelines. Please link the relevant issue or create one if it doesn't exist.
2. Incomplete PR template
Multiple required sections are not filled out:
- Description section (no explanation of implementation details)
- Test Procedure section (no testing steps provided)
- Pre-Submission Checklist (all items unchecked)
- Screenshots/Videos section (empty despite UI changes)
- Documentation Updates section (not addressed)
- Get in Touch section (no Discord username)
Code Quality Concerns
3. Inconsistent border-radius values
The PR mixes rounded-xl and rounded-2xl without clear rationale. Consider establishing a consistent design system approach.
4. Unused dependency
Added path-browserify to webview-ui/package.json (line 54) but it doesn't appear to be used in any of the changed files. If it's not needed, please remove it.
5. Loss of user context
Changing labels from descriptive text like "Roo wants to read this file" to just "Read" removes helpful context. This could impact user understanding of what actions are being performed.
6. Missing test coverage
New components (FileIcon.tsx and FilePathWithIcon.tsx) lack corresponding test files.
7. Inline styles maintenance concern
TodoListDisplay.tsx contains extensive inline styles that would be better as CSS classes for maintainability.
8. TypeScript type safety
Using (window as any) in FileIcon.tsx bypasses TypeScript's type safety. Consider defining proper types.
9. Mode name changes
The mode names in packages/types/src/mode.ts have been changed (removing emojis), but the PR title mentions "mode names UI consistency" without explaining this significant change.
Please address these issues before the PR can be merged. Happy to discuss any of these points further!
hannesrudolph
added
the
Issue/PR - Triage
Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>
…ing chat.json keys\n\n- Add editingLabel/readingLabel across locales (ca,de,es,fr,hi,id,it,ja,ko,nl,pl,pt-BR,ru,tr,vi,zh-CN,zh-TW)\n- Fill missing create/search/insert translations (id, zh-TW)\n- Ensure webview chat.json passes translation checks
…hore(webview): remove unused dep, restore i18n context, refactor styles and types
…ss translation check
- ApiConfigSelector: show info blurb and visible select/title when <=6 - ChatTextArea: add cursor-pointer and use animate-spin for enhancing state - types: set code mode display name back to 'Code' to match tests
|
Hey @MeetSohailCodes, Thank you for the contribution! Can you share some screenshots of how this looks? Also, I see that the compile and unit tests CI actions are failing. Can you take a look? |
hannesrudolph
added
PR - Draft / In Progress
and removed
Issue/PR - Triage
Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>
|
well I'm sorry but i am creating my own cline fork extention more better |
4 participants
Related GitHub Issue
Closes: #
Roo Code Task Context (Optional)
Description
Test Procedure
Pre-Submission Checklist
Screenshots / Videos
Documentation Updates
Additional Notes
Get in Touch
Important
This pull request enhances UI consistency for mode names across components, updates CSS styles, and adds new translation keys for improved user experience.
mode.tsfor clarity.ApiConfigSelectorwith new styles and improved layout inApiConfigSelector.tsx.AutoApproveMenufor better user experience and visual consistency inAutoApproveMenu.tsx.ChatTextAreato streamline controls and improve accessibility inChatTextArea.tsx.ModeIconcomponent for better icon representation inModeSelector.tsx.popover.tsx.rounded-xstorounded-xlin multiple components for a consistent rounded appearance.button.tsxto match new design guidelines.editingLabelandreadingLabelin multiple language files such aschat.jsonfor various locales.postcssdependency inpackage.jsonfor CSS processing.CHANGELOG.mdto reflect UI changes and improvements.This description was created by
for 21d40c3. You can customize this summary. It will automatically update as commits are pushed.