Sign up
View stargazers13Sign up

refactor(web): ChatView's right panel lives in its own component#22700

merged1
refactor/chatview-terminal-drawers
refactor/chatview-right-panel
opened4d agobyJJulius Marminge
3 files changed
View on GitHubTwo-way sync enabledPR last imported 4d ago

ChatView wrote out the right panel's ~45-prop RightPanelTabs list twice, once for the inline layout and once for the sheet. It also owned the panel's width state, so the commit at the end of every resize drag re-rendered ChatView and the whole chat column.

chat/ChatRightPanel.tsx renders the inline or sheet layout from one prop list and owns usePreviewPanelInlineSize. RightPanelTabsProps is now exported so the wrapper can reuse it.

previous layerthis layer
ChatView.tsx lines8,5318,477
Renders when a right-panel resize drag ends139 (ChatView 1)1 (ChatRightPanel only)

Renders were counted with the rc-init.js fiber counter on a dev server seeded from real data (median of 3 runs; base 6a6c84f vs the stack top before its rebase onto current main):

Interactionmain: commits / renders (ChatView)stack top: commits / renders (ChatView)
Type 20 chars in the composer22 / 678 (1)22 / 678 (1)
Switch threads14 / 779 (5)14 / 777 (5)
Open + close the terminal drawer15 / 494 (3)15 / 497 (3)
Open + close the right panel21 / 723 (4)21 / 726 (4)
Drag the right panel's resize handle13 / 139 (1)1 / 1 (0)

The +3 renders are the new ChatTerminalDrawers and ChatRightPanel wrappers. The drag row is the right panel layer: the drag's final width commit used to re-render ChatView and the whole chat column, and now re-renders only ChatRightPanel.

Tests: vp test run src/reactCompilerCoverage.test.ts for ChatView and every new file (0 bailouts), vp test run src/components/RightPanelTabs.test.tsx, tsc-rs --noEmit for apps/web, and oxlint on the changed files.

🤖 Generated with Claude Code

Checks

All checks passed

Added 1 commit

  • refactor(web): ChatView's right panel lives in its own component9c5f157
Ggithub-actionsBot4d ago
Synced from GitHub

Thread transfer impact

⚠️ The latest CI run did not produce a thread transfer result for 9c5f157.

This comment will update automatically after the next completed run.

MmacroscopeappBot4d ago
Synced from GitHub

Approvability

Verdict: Approved at 9c5f157

Macroscope's review found this PR approvable — This is a contained extraction of ChatView’s existing right-panel rendering into ChatRightPanel, preserving the prior inline/sheet branches, callbacks, sizing inputs, and animation behavior. RightPanelTabs only exposes its existing props type, with no new user-facing capability or sensitive/configuration change.

You can add or adjust custom eligibility rules. Learn more.

CcoderabbitaiBot4d ago
Synced from GitHub

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Path: .coderabbit.config.ts
  • Review profile: CHILL
  • Plan: Team
  • Run ID: 5adc5785-8cef-4ce2-a7ef-31ad596209da
📥 Commits

Reviewing files that changed from the base of the PR and between ff41fc5c94b5eecb6d9b6d17dbaebe27b3dc8906 and 9c5f157e3dec5256e9ed593a68c129b41db0ba44.

📒 Files selected for processing: 3
  • apps/web/src/components/ChatView.tsx
  • apps/web/src/components/RightPanelTabs.tsx
  • apps/web/src/components/chat/ChatRightPanel.tsx

Limit details: You’ve used all 10 included reviews currently available.

📝 Walkthrough

ChatView now renders its right panel through ChatRightPanel. The new component selects inline or sheet rendering and receives the panel layout, sizing, animation, close, control, and maximization props.

Changes: Chat right panel

Layer / File(s)Summary
Add shared panel rendering
apps/web/src/components/chat/ChatRightPanel.tsx, apps/web/src/components/RightPanelTabs.tsx		ChatRightPanel renders RightPanelTabs inline or inside RightPanelSheet. RightPanelTabsProps is now exported.
Use shared panel rendering
apps/web/src/components/ChatView.tsx		ChatView uses ChatRightPanel for the desktop panel and removes the separate sheet rendering branch and preview inline-size state.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Refactor

Suggested reviewers: t3dotgg

Merge Risk: ⚪ Minimal · up to 9c5f1

The right panel retains its existing inline and sheet behavior, with no identified issue blocking merge.

Pre-merge checks: Passed 3 · Failed 1

Failed Failed checks: 1 warning

Check nameStatusExplanationResolution
Description checkWarningThe description explains the problem, implementation, performance impact, and verification results. It does not include the required Scope and approval section, and it omits the required before/after …Add the Scope and approval section with the related issue or explicit maintainer approval, or explain why this focused refactor qualifies for an exemption. Add clear before/after screenshots and any needed recording for resize interaction d…
Passed Passed checks: 3 passed
Check nameStatusExplanation
Title checkPassedThe title clearly and concisely describes the main change: extracting ChatView's right panel into its own component.
Linked Issues checkPassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes checkPassedCheck skipped because no linked issues were found for this pull request.
Full details: Description check

Explanation

The description explains the problem, implementation, performance impact, and verification results. It does not include the required Scope and approval section, and it omits the required before/after screenshots for this UI change.

Resolution

Add the Scope and approval section with the related issue or explicit maintainer approval, or explain why this focused refactor qualifies for an exemption. Add clear before/after screenshots and any needed recording for resize interaction details.

✨ Finishing Touches: 💡 1
🛠️ Fix failing CI checks: 💡
  • Commit to this branch
  • Create a new PR
📝 Generate docstrings
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Usage-based review receipt

Note

This review was completed with usage-based billing: files reviewed beyond your plan's included limits are billed at $0.25/file. View usage-based billing.

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