Skip to content

Unify right panel with tabbed Files/Editor/Diffs views#331

Merged
BunsDev merged 1 commit into
mainfrom
okcode/sleek-diff-sidebar
Apr 7, 2026
Merged

Unify right panel with tabbed Files/Editor/Diffs views#331
BunsDev merged 1 commit into
mainfrom
okcode/sleek-diff-sidebar

Conversation

@BunsDev
Copy link
Copy Markdown
Member

@BunsDev BunsDev commented Apr 7, 2026

Summary

  • Move workspace file tree from the left sidebar into a unified right panel alongside the code editor and diff viewer
  • Add a minimal tab header with icon+label toggle buttons (Files, Editor, Diffs) to switch between panel views, inspired by the Vercel PR diff UI
  • Replace three separate SidebarProvider instances with a single resizable sidebar coordinated via a new Zustand store (rightPanelStore)
  • Sync existing codeViewerStore and diffViewerStore opens/closes with the unified panel via effects
  • Maintain mobile support via Sheet wrapper for the right panel content

Files changed

  • rightPanelStore.ts — New Zustand store for unified right panel state (tab + open/close), persisted to localStorage
  • RightPanelHeader.tsx — New minimal header component with icon+label toggle buttons and close button
  • _chat.$threadId.tsx — Major rewrite replacing 3 separate sidebar providers with single unified right sidebar
  • Sidebar.tsx — Remove inline file tree; replace show/hide toggle with "Open file tree" button that opens right panel
  • HeaderPanelsMenu.tsx — Use rightPanelStore directly for Files/Editor/Diffs toggles
  • ChatHeader.tsx — Simplify props passed to HeaderPanelsMenu
  • useLayoutActions.ts — Point code viewer and diff viewer sidebar width keys to shared right panel key

Test plan

  • Verify file tree appears in right panel "Files" tab
  • Verify code editor appears in right panel "Editor" tab
  • Verify diff viewer appears in right panel "Diffs" tab
  • Verify tab toggle buttons work (clicking active tab closes panel)
  • Verify mobile sheet wrapper works on small viewports
  • Verify panel state persists across page reloads
  • Verify existing code viewer and diff viewer store integrations still work

🤖 Generated with Claude Code

Move the workspace file tree from the left sidebar into a unified right
panel alongside the code editor and diff viewer. Add a minimal tab header
with icon+label toggle buttons to switch between panel views, inspired
by the Vercel PR diff UI. The three sub-panels share a single resizable
sidebar with coordinated state via a new Zustand store.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 7, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
okcode-marketing Ready Ready Preview Apr 7, 2026 4:04am
v0-compute-the-platform-to-build Ready Ready Preview, Open in v0 Apr 7, 2026 4:04am

@github-actions github-actions Bot added size:XL vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. labels Apr 7, 2026
@BunsDev BunsDev merged commit 9255811 into main Apr 7, 2026
10 of 11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:XL vouch:trusted PR author is trusted by repo permissions or the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant