feat(web): collapsible file diffs in commit diff panel

[brendan-kellam]

Summary

• Added collapsible file diffs in the commit diff panel: hovering the status badge reveals a chevron, and clicking it toggles the diff body.
• Collapsed state lives in FileDiffList (keyed by file path), so it survives virtualization unmounts when rows scroll out of view.
• On collapse, the row's header scrolls to the top of the viewport — but only if the user has already scrolled past it, so collapsing a row still in view leaves scroll position alone.
• estimateRowHeight now accounts for collapsed state (returns just the header height when collapsed).

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Collapsible file diffs in the commit diff panel. Users can now collapse and expand individual files when reviewing commits, significantly improving navigation and readability for large changesets. The collapse state for each file is preserved during the review session, enabling a more focused code review workflow.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 71fa1fbe-5d72-41c1-be77-9ac14f6df991

📥 Commits

Reviewing files that changed from the base of the PR and between e1bc871 and b936d9e.

📒 Files selected for processing (4)

• CHANGELOG.md
• packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fileDiffList.tsx
• packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fileDiffRow.tsx
• packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fileStatus.tsx

---

Walkthrough

This pull request adds collapsible file diffs functionality to the commit diff panel. Files can now be collapsed to display only the status header, with per-file state tracked in the list component, scroll synchronization maintained, and interactive UI affordances provided through an updated status badge.

Changes

Cohort / File(s)	Summary
Documentation CHANGELOG.md	Added changelog entry documenting the new collapsible file diffs UI feature.
Collapsible File Diffs Implementation packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fileDiffList.tsx, fileDiffRow.tsx, fileStatus.tsx	Introduces per-file collapsed state management via a Set, derives row identity through a getRowKey helper, makes virtual sizing conditional on collapse state, wires collapse/expand handlers to StatusBadge with scroll alignment, updates StatusBadge to render as an interactive button with chevron icon and aria attributes when toggle handler is provided, and conditionally renders the diff body only when expanded.

Sequence Diagram

sequenceDiagram
    actor User
    participant StatusBadge as StatusBadge<br/>(fileStatus.tsx)
    participant FileDiffRow as FileDiffRow<br/>(fileDiffRow.tsx)
    participant FileDiffList as FileDiffList<br/>(fileDiffList.tsx)
    participant Virtualizer as Virtualizer

    User->>StatusBadge: Click collapse/expand button
    StatusBadge->>FileDiffRow: Call onToggleCollapsed()
    FileDiffRow->>FileDiffList: Trigger toggle handler
    FileDiffList->>FileDiffList: Update collapsed state Set
    FileDiffList->>FileDiffList: Recalculate estimateSize<br/>(compact for collapsed)
    FileDiffList->>Virtualizer: Scroll to maintain<br/>row alignment
    Virtualizer->>FileDiffRow: Re-render with updated<br/>isCollapsed state
    FileDiffRow->>StatusBadge: Pass isCollapsed prop
    StatusBadge->>User: Update chevron icon & label

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch brendan/collapsible-file-diffs

---

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

_{Review rate limit: 6/8 reviews remaining, refill in 14 minutes and 8 seconds.}

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