Feature: Collapse/expand individual file diffs

[blimmer]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

Add a built-in mechanism to programmatically collapse and expand the diff content within a diff component instance. This would allow consumers to hide/show the diff body while keeping the header visible, which is a standard UX pattern in code review tools (GitHub, GitLab, Bitbucket, etc.).

Could we add a collapsed boolean prop on all diff components?

<FileDiff
  collapsed={isCollapsed}
  // ... other props
/>

When collapsed={true}, the diff body (lines/hunks) should be hidden but the header should remain visible.

Motivation and context

Multi-file diff views are more usable when users can collapse/expand files. When reviewing a changeset with many files, users might to collapse files they've already reviewed or that aren't relevant.

I've worked around this today like this:

<FileDiff<DiffComment[]>
  fileDiff={fileDiffMetadata}
  options={{
    enableHoverUtility: !readOnly && !isCollapsed,
    unsafeCSS: isCollapsed ? 'pre[data-diffs] { display: none !important; }' : '/* expanded */',

However, this is bound to the internal implementation. A top-level collapsed flag would be great.

[AlexanderHott]

+1 for this. The workaround above messes with the diff count in the header. I'd be willing to tackle this if I could get a bit of guidance.

[amadeus]

I forgot to post about this, but we've shipped a version of this in the latest beta. They accept a prop called collapsed.

The docs for this will be at this url: https://pierrejs-docs-7807qt05g-pierre-computer-company.vercel.app/

Also you can check the Custom header metadata example on this homepage