feat(desktop): add right sidebar with Changes/Files tabs

[Kitenite]

Summary

• Added tab switcher at the top of the right sidebar to switch between "Changes" and "Files" views
• Tab buttons have icons and text labels
• Moved expand/close buttons from ChangesHeader to the right sidebar header
• Files view is currently a placeholder
• Synced expanded/collapsed state between sidebar ChangesView and main content InfiniteScrollView

Test plan

• Open right sidebar and verify tab buttons show "Changes" and "Files" with icons
• Click "Files" tab to see placeholder view
• Click "Changes" tab to return to changes view
• Verify expand/collapse and close buttons work in the header
• Expand/collapse a category in sidebar, verify it syncs to the main changes content view

Summary by CodeRabbit

• New Features

  • Added a tabbed sidebar with Changes and Files tabs for improved organization and navigation of workspace content.
  • Implemented expand/collapse and close controls within the new sidebar interface for better control and accessibility.

• UI/UX

  • Reorganized sidebar layout and repositioned controls to enhance overall user experience and workflow efficiency.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

The pull request refactors the workspace sidebar architecture by replacing the left-side Sidebar component with a new RightSidebar component featuring tabbed navigation (Changes and Files tabs). The changes remove sidebar toggle controls from the ChangesHeader, consolidate sidebar state management, and update related imports and layout references.

Changes

Cohort / File(s)	Summary
Right Sidebar - New Component apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/index.tsx	Added new RightSidebar component with tabbed UI for Changes and Files views, workspace data fetching via TRPC, file-opening handlers with expansion-state-dependent behavior, and sidebar toggle/close controls.
Sidebar Removal apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsx	Deleted Sidebar component that previously managed workspace state, file operations, and Changes view rendering. Functionality migrated to new RightSidebar.
Header UI Cleanup apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/components/ChangesHeader/ChangesHeader.tsx	Removed sidebar expand/collapse, close button, and associated state management and icon imports. Component no longer manages sidebar toggle functionality.
Import Path Updates apps/desktop/src/renderer/screens/main/components/WorkspaceView/ChangesContent/components/FileDiffSection/FileDiffSection.tsx	Updated import source for utility functions from left sidebar path to right sidebar path.
Layout Integration apps/desktop/src/renderer/screens/main/components/WorkspaceView/WorkspaceLayout/WorkspaceLayout.tsx	Replaced Sidebar component with RightSidebar in ResizablePanel; updated corresponding import path.
State Management apps/desktop/src/renderer/stores/sidebar-state.ts	Added RightSidebarTab enum with Changes and Files options; introduced rightSidebarTab state property and setRightSidebarTab setter to SidebarState interface and store implementation.

Sequence Diagram

sequenceDiagram
    participant User as User
    participant RSidebar as RightSidebar
    participant TRPC as TRPC Query
    participant SidebarStore as Sidebar Store
    participant TabsStore as Tabs Store
    participant ChangesView as ChangesView

    User->>RSidebar: Click Changes/Files Tab
    RSidebar->>SidebarStore: setRightSidebarTab(selectedTab)
    SidebarStore->>RSidebar: Update tab state

    User->>RSidebar: Opens File via Changes View
    RSidebar->>RSidebar: Determine expand state
    alt Expanded Mode
        RSidebar->>TRPC: scrollToFile(worktreePath)
    else Collapsed Mode
        RSidebar->>TabsStore: addFileViewerPane(workspaceId, filePath)
        RSidebar->>TRPC: invalidateFileContent(readWorkingFile, getFileContents)
    end

    User->>RSidebar: Click Expand/Collapse Button
    RSidebar->>SidebarStore: Toggle between SidebarMode.Changes/Tabs
    SidebarStore->>RSidebar: Update expansion state
    RSidebar->>RSidebar: Re-render with new layout

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 minutes

Possibly related PRs

• feat(desktop): add expanded changes sidebar view #858: Modifies workspace sidebar state, expanded-changes behavior, and sidebar store integration—directly related to the state management and sidebar expansion refactoring.
• feat(desktop): polish UI for changes sidebar and workspace management #612: Modifies ChangesHeader UI and sidebar control removal—overlaps with header cleanup changes in this PR.
• Fix changes sidebar #390: Modifies workspace sidebar components and Sidebar/index.tsx structure—directly related to the Sidebar component removal and replacement.

Poem

🐰 A sidebar moves right, the tabs now align,
Changes and Files in harmony shine,
Old left-side logic now tucked away neat,
New RightSidebar makes the layout complete! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
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 (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main feature: adding a right sidebar component with tab switching between Changes and Files views.
Description check	✅ Passed	The description includes all required template sections with substantive content: Summary, Related Issues (N/A), Type of Change (New feature implied), Testing (test plan provided), and Additional Notes.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch kitenite/create-filetree

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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