feat(desktop): add expanded changes sidebar view#858
Conversation
- Add WorkspaceLayout component to handle sidebar + content mode switching - Move ChangesContent to be sibling of ContentView for proper hierarchy - Hide Changes button when sidebar is open - Update tooltips: "Open/Close Changes Sidebar" with keyboard shortcut - Restore expanded mode when sidebar is reopened
|
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. 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughReplace in-page ContentView rendering with a new WorkspaceLayout component that centralizes sidebar state, moves sidebar rendering out of TabsContent, introduces lastMode tracking in the sidebar store, and adds a placeholder ChangesContent component. Dashboard page now mounts WorkspaceLayout. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Page as Workspace Page
participant Layout as WorkspaceLayout
participant Store as SidebarStore
participant Main as MainContent (ContentView / TabView)
participant Sidebar as ResizableSidebar (ChangesView)
Page->>Layout: mount
Layout->>Store: read currentMode, isSidebarOpen, width
alt Sidebar open (mode == Changes)
Layout->>Sidebar: render with width
Sidebar->>Store: onResize(width) / setSidebarWidth
Sidebar->>Store: setMode(Changes) / interactions
Layout->>Main: render ChangesContent (or ContentView per mode)
else Sidebar closed
Layout->>Store: setSidebarOpen(false) (may restore lastMode on open)
Layout->>Main: render ContentView (full area)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 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 |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In
`@apps/desktop/src/renderer/screens/main/components/SidebarControl/SidebarControl.tsx`:
- Around line 142-146: The tooltip text is static but should reflect the current
sidebar state; update the HotkeyTooltipContent label prop inside
SidebarControl.tsx to be dynamic (use the same state/prop that drives the button
aria-label) so it shows "Open Changes Sidebar" when closed and "Close Changes
Sidebar" when open (or use a combined "Open/Close Changes Sidebar" if
preferred); modify the label passed to HotkeyTooltipContent
(hotkeyId="TOGGLE_SIDEBAR") to derive from the component's isOpen/isVisible
state or the same variable used for the aria-label to keep them consistent.
🧹 Nitpick comments (1)
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/ChangesHeader/ChangesHeader.tsx (1)
42-148: Consider extracting helper components to separate files.This file contains multiple components (
BaseBranchSelector,StashDropdown,RefreshButton,PRStatusLink,ChangesHeader). As per coding guidelines, prefer one component per file for better maintainability and testability.These helper components could be moved to their own files within a
components/subdirectory, or if they're small and tightly coupled toChangesHeader, they could remain as private helpers. Consider refactoring when time permits.
| <TooltipContent side="bottom" showArrow={false}> | ||
| <HotkeyTooltipContent | ||
| label="Toggle Changes Sidebar" | ||
| label="Open Changes Sidebar" | ||
| hotkeyId="TOGGLE_SIDEBAR" | ||
| /> |
There was a problem hiding this comment.
Tooltip text doesn't match PR objectives.
The PR objectives specify the tooltip should say "Open/Close Changes Sidebar", but the current implementation is static "Open Changes Sidebar". Meanwhile, the aria-label on Lines 127-129 correctly differentiates between "Hide" and "Show" states. Consider making the tooltip label dynamic to match the button's current state and align with the PR objectives.
<TooltipContent side="bottom" showArrow={false}>
<HotkeyTooltipContent
- label="Open Changes Sidebar"
+ label={isSidebarOpen ? "Close Changes Sidebar" : "Open Changes Sidebar"}
hotkeyId="TOGGLE_SIDEBAR"
/>
</TooltipContent>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <TooltipContent side="bottom" showArrow={false}> | |
| <HotkeyTooltipContent | |
| label="Toggle Changes Sidebar" | |
| label="Open Changes Sidebar" | |
| hotkeyId="TOGGLE_SIDEBAR" | |
| /> | |
| <TooltipContent side="bottom" showArrow={false}> | |
| <HotkeyTooltipContent | |
| label={isSidebarOpen ? "Close Changes Sidebar" : "Open Changes Sidebar"} | |
| hotkeyId="TOGGLE_SIDEBAR" | |
| /> |
🤖 Prompt for AI Agents
In
`@apps/desktop/src/renderer/screens/main/components/SidebarControl/SidebarControl.tsx`
around lines 142 - 146, The tooltip text is static but should reflect the
current sidebar state; update the HotkeyTooltipContent label prop inside
SidebarControl.tsx to be dynamic (use the same state/prop that drives the button
aria-label) so it shows "Open Changes Sidebar" when closed and "Close Changes
Sidebar" when open (or use a combined "Open/Close Changes Sidebar" if
preferred); modify the label passed to HotkeyTooltipContent
(hotkeyId="TOGGLE_SIDEBAR") to derive from the component's isOpen/isVisible
state or the same variable used for the aria-label to keep them consistent.
🧹 Preview Cleanup CompleteThe following preview resources have been cleaned up:
Thank you for your contribution! 🎉 |
Summary
WorkspaceLayoutcomponent to handle sidebar + content mode switchingChangesContentto be sibling ofContentViewfor proper hierarchyTest plan
Summary by CodeRabbit
New Features
Style
Refactor
✏️ Tip: You can customize this high-level summary in your review settings.