fix(ui): Improve worktree panel UI with dropdown for multiple worktrees #680
Conversation
Fixes #673 When users have 3+ worktrees, especially with auto-generated long branch names, the horizontal tab layout would wrap to multiple rows, creating a cluttered and messy UI. This change introduces a compact dropdown menu that automatically activates when there are 3 or more worktrees. Changes: - Add WorktreeDropdown component for consolidated worktree selection - Add WorktreeDropdownItem component for individual worktree entries - Add shared utility functions for indicator styling (PR badges, changes, test status) to ensure consistent appearance - Modify worktree-panel.tsx to switch between tab layout (1-2 worktrees) and dropdown layout (3+ worktrees) automatically - Truncate long branch names with tooltip showing full name - Maintain all status indicators (dev server, auto mode, PR, changes, tests) in both layouts The dropdown groups worktrees by type (main branch vs feature worktrees) and provides full integration with branch switching and action dropdowns. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Summary of ChangesHello @Shironex, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly improves the user interface and experience of the worktree panel, particularly for users managing multiple Git worktrees. By intelligently switching between a traditional tab layout and a compact dropdown menu based on the number of active worktrees, the UI avoids visual clutter caused by numerous or long branch names. This ensures that the worktree panel remains clean, readable, and highly functional, regardless of the complexity of the user's worktree setup. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughAdds a new WorktreeDropdown UI with accompanying WorktreeDropdownItem and shared worktree-indicator utilities, and integrates the dropdown into the board-view worktree panel to toggle between tab and dropdown layouts for multiple worktrees. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant BoardView
participant WorktreeDropdown
participant DropdownMenu
participant WorktreeItem
participant ActionsDropdown
User->>BoardView: Click worktree control
BoardView->>WorktreeDropdown: open dropdown (props, selected worktree)
WorktreeDropdown->>DropdownMenu: render items (main + others)
DropdownMenu->>WorktreeItem: render WorktreeDropdownItem per worktree
User->>WorktreeItem: select item
WorktreeItem->>WorktreeDropdown: onSelect -> onSwitchBranch / handlers
User->>WorktreeItem: open item actions
WorktreeItem->>ActionsDropdown: open actions -> execute action (create/switch/refresh)
ActionsDropdown->>WorktreeDropdown: notify action result
WorktreeDropdown->>BoardView: propagate selection/status changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Shironex
added
the
scope: ui
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new WorktreeDropdown component and its related sub-components (WorktreeDropdownItem, worktree-indicator-utils) to enhance the user interface for managing multiple worktrees. The WorktreePanel now dynamically switches between a tab-based layout and the new dropdown layout when there are three or more worktrees, preventing horizontal tab wrapping. The WorktreeDropdown displays the selected worktree with various status indicators (e.g., running, dev server, tests, uncommitted changes, PR status) and integrates branch switching and worktree actions. A review comment suggests refactoring the hardcoded threshold of 3 for activating the dropdown layout into a named constant for better readability and future configurability.
apps/ui/src/components/views/board-view/worktree-panel/worktree-panel.tsx
Outdated
Show resolved
Hide resolved
Shironex
added
Do Not Merge
…shold - Added a constant `WORKTREE_DROPDOWN_THRESHOLD` to define the threshold for switching from tabs to dropdown layout in the WorktreePanel. - Updated the logic to use this constant for better readability and maintainability of the code.
Shironex
added
Ready-To-Merge
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In
`@apps/ui/src/components/views/board-view/worktree-panel/components/worktree-dropdown-item.tsx`:
- Around line 86-90: The DropdownMenuItem currently uses onClick which breaks
keyboard activation; update the component so it uses Radix's onSelect instead of
onClick (or attach the same handler to onSelect) on the DropdownMenuItem element
(the one with className using cn and aria-current) so keyboard Enter/Space
triggers the same onSelect handler as mouse clicks; ensure you remove/replace
the onClick prop and keep existing className and aria-current behavior.
Summary
Fixes #673
This PR addresses the UI/UX issue where the worktree panel becomes cluttered and messy when users have 3 or more worktrees, especially with auto-generated long branch names that cause horizontal tab wrapping.
Problem
feature/v0.14.0rc-1768981697539-gg62) are very longSolution
Implemented a smart layout system that:
Changes Implemented
New
WorktreeDropdowncomponent (worktree-dropdown.tsx)New
WorktreeDropdownItemcomponent (worktree-dropdown-item.tsx)New shared utilities (
worktree-indicator-utils.ts)truncateBranchName(): Consistent branch name truncationgetPRBadgeStyles(): PR badge styling by state (OPEN/MERGED/CLOSED)getChangesBadgeStyles(): Uncommitted changes badge stylinggetTestStatusStyles(): Test status indicator stylingUpdated
worktree-panel.tsxFeatures Preserved in Dropdown
Test plan
🤖 Generated with Claude Code
Preview
Before
After
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.