Skip to content

feat(desktop): add expanded changes sidebar view#858

Merged
Kitenite merged 6 commits intomainfrom
changes-sidebar
Jan 20, 2026
Merged

feat(desktop): add expanded changes sidebar view#858
Kitenite merged 6 commits intomainfrom
changes-sidebar

Conversation

@Kitenite
Copy link
Copy Markdown
Collaborator

@Kitenite Kitenite commented Jan 20, 2026

Summary

  • Add expandable changes sidebar that replaces the main content view when expanded
  • Create 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, show only when closed
  • Remember and restore expanded mode state when sidebar is toggled
  • Update tooltips to "Open/Close Changes Sidebar" with keyboard shortcut

Test plan

  • Click "Changes" button to open sidebar
  • Click expand button in sidebar header to enter expanded mode
  • Verify ChangesContent replaces the tabs view (empty for now)
  • Verify sidebar border is hidden in expanded mode
  • Click shrink button to exit expanded mode
  • Close sidebar and reopen - verify expanded state is restored
  • Verify "Changes" button is hidden when sidebar is open
  • Verify tooltips show correct text and keyboard shortcut

Summary by CodeRabbit

  • New Features

    • New workspace layout with a resizable sidebar and improved expand/collapse behavior; main content switches cleanly between tab view and changes view.
    • Added a placeholder "changes" view for upcoming code-review support.
  • Style

    • Updated icons and button styling; refined tooltip labels for sidebar actions.
  • Refactor

    • Reworked workspace and sidebar state handling to remember/restore previous sidebar mode.

✏️ Tip: You can customize this high-level summary in your review settings.

- 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
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jan 20, 2026

Warning

Rate limit exceeded

@Kitenite has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 24 minutes and 44 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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.

📥 Commits

Reviewing files that changed from the base of the PR and between f8ae7a3 and a2b4c08.

📒 Files selected for processing (3)
  • apps/desktop/src/main/lib/terminal/daemon/history-manager.ts
  • apps/desktop/src/renderer/screens/main/components/WorkspaceView/ChangesContent/ChangesContent.tsx
  • apps/desktop/src/renderer/screens/main/components/WorkspaceView/WorkspaceLayout/WorkspaceLayout.tsx
📝 Walkthrough

Walkthrough

Replace 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

Cohort / File(s) Summary
Workspace layout & placeholder
apps/desktop/src/renderer/screens/main/components/WorkspaceView/WorkspaceLayout/WorkspaceLayout.tsx, apps/desktop/src/renderer/screens/main/components/WorkspaceView/WorkspaceLayout/index.ts, apps/desktop/src/renderer/screens/main/components/WorkspaceView/ChangesContent/ChangesContent.tsx, apps/desktop/src/renderer/screens/main/components/WorkspaceView/ChangesContent/index.ts
Added WorkspaceLayout that orchestrates main content vs. sidebar rendering and a centered ChangesContent placeholder.
Dashboard integration
apps/desktop/src/renderer/routes/_authenticated/_dashboard/workspace/$workspaceId/page.tsx
Replaced ContentView with WorkspaceLayout and added an explicit flex class on the container.
Sidebar state
apps/desktop/src/renderer/stores/sidebar-state.ts
Added lastMode to SidebarState and updated setSidebarOpen/setSidebarWidth to save/restore modes and width on open/close.
Tabs & ContentView changes
apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/index.tsx, apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/index.tsx
Removed embedded sidebar/resizable panel from TabsContent; ContentView now reads sidebar state to adjust trailingAction.
Sidebar controls & header
apps/desktop/src/renderer/screens/main/components/SidebarControl/SidebarControl.tsx, apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/ChangesHeader/ChangesHeader.tsx
Updated sidebar control icon/styling and replaced static expand/close UI with mode-driven expand/collapse toggles and hotkey tooltip.
Import path updates
apps/desktop/src/renderer/screens/main/components/WorkspaceView/ChangesContent/components/DiffViewer/DiffViewer.tsx, apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/FileViewerPane/components/FileViewerContent/FileViewerContent.tsx
Adjusted import paths for EditorContextMenu and DiffViewer to new component locations.
Diff viewer re-export
apps/desktop/src/renderer/screens/main/components/WorkspaceView/ChangesContent/index.ts
Added re-export for ChangesContent.

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
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Poem

🐰 Hop-hop, a layout fresh and neat,

WorkspaceLayout takes the seat,
Modes remembered, sidebar swings,
Tabs stay tidy, diff bell rings,
🥕 A little hop for every commit so sweet.

🚥 Pre-merge checks | ✅ 1 | ❌ 2
❌ Failed checks (2 warnings)
Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description provides a comprehensive summary of changes and a detailed test plan, but does not follow the required template structure with distinct sections. Reorganize the description to follow the template: add a Description section, Related Issues, Type of Change selection, formal Testing section, and Additional Notes if needed.
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (1 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main feature being added: an expanded changes sidebar view with proper hierarchy and mode switching.

✏️ 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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 to ChangesHeader, they could remain as private helpers. Consider refactoring when time permits.

Comment on lines 142 to 146
<TooltipContent side="bottom" showArrow={false}>
<HotkeyTooltipContent
label="Toggle Changes Sidebar"
label="Open Changes Sidebar"
hotkeyId="TOGGLE_SIDEBAR"
/>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

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.

Suggested change
<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.

@Kitenite Kitenite merged commit ed1bc89 into main Jan 20, 2026
4 checks passed
@Kitenite Kitenite deleted the changes-sidebar branch January 20, 2026 20:20
@github-actions
Copy link
Copy Markdown
Contributor

🧹 Preview Cleanup Complete

The following preview resources have been cleaned up:

  • ⚠️ Neon database branch
  • ⚠️ Electric Fly.io app

Thank you for your contribution! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant