feat(web): add pull request file sidebar

[ShpetimA]

What Changed

This pr adds a file-tree you can toggle using pierre to the pr viewer.
It also changes the default mode for files opened from prs from folded to opened.

Why

It adds better visibility on what changed in the pr.
You can see the file structure changes and easier navigation throughout the pr.
For the second point of swapping the default folded/opened state to me when you go in the pr code tab you go to review so intent is to view the files. Default should be open and if user wants he can fold.

UI Changes

Screen.Recording.2026-08-17.at.12.03.24.AM.mov

New Change one collapse/uncollapse button that does both filetree/files together:

Screen.Recording.2026-08-17.at.1.26.27.AM.mov

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Note

Medium Risk
Touches core PR diff UX (default expand, pagination, scroll coordination) but stays client-side with tests for fold and load-state logic; large PRs may feel heavier with expanded defaults.

Overview
Adds a Files sidebar on the pull request Code tab: a Pierre tree of changed paths (with git status), persisted show/hide via local storage, and Load more in the tree that shares the diff’s paginated loading with progress text that avoids false “complete” totals when hosts report lower bounds (e.g. GitLab 1000+).

Selecting a file expands that diff if needed and scrolls the diff viewer to it (viewerRef + revealFile). The toolbar expand/collapse all control now drives both per-file fold state and all tree directories through PullRequestDiffFileTreeHandle.

Default behavior change: file diffs start expanded (DiffFoldPreference replaces the old “fold until toolbar” null override). The toolbar file-count strip is dropped; caveat icons remain when relevant.

Shared Pierre tree CSS/host styles move to pierre-tree-theme.ts (also wired into FileBrowserPanel). User docs note the new tree and default expansion.

^{Reviewed by Cursor Bugbot for commit a4bb3c7. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add pull request file explorer sidebar to the code review view

• Adds a new PullRequestDiffFileTree component that renders a path-first file tree for the loaded diff files, with status indicators, directory expansion state, and a paginated 'Load more' action with a progress bar.
• Integrates the sidebar into PullRequestCodeTab with a toggle button; open/closed state persists in localStorage under t3code.pullRequestDiffFileTreeOpen.
• Selecting a file in the tree scrolls the corresponding diff into view via a new CodeViewHandle ref on StyledDiffCodeView.
• The 'expand/collapse all' toolbar action now also bulk-expands/collapses sidebar directories.
• Extracts shared tree theming into pierre-tree-theme.ts used by both the sidebar and FileBrowserPanel.
• Behavioral Change: isFileDiffCollapsed now defaults to expanded; the foldOverride state is replaced by foldPreference defaulting to 'expanded'.

^{Macroscope summarized a4bb3c7.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 4498ebde-b0d2-4d42-9fea-b1aa9c529a18

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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.}

[macroscopeapp]

Approvability

Verdict: Needs human review

This PR introduces a new user-facing feature (file explorer sidebar) with new components, state management, and UI controls. New features adding user-facing behavior warrant human review.

^{You can customize Macroscope's approvability policy. Learn more.}

[juliusmarminge]

can i not toggle the tree?

[ShpetimA]

can i not toggle the tree?

You mean the file tree ? Yes you can toggle it on the header of the file tree:

Screen.Recording.2026-08-12.at.11.49.39.PM.mov

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit ab556c8. Configure here.}

[ShpetimA]

can i not toggle the tree?

I understood the question wrong but yes you can also toggle it on or off. Meaning hide it, its saved in local storage presiting between prs.

[juliusmarminge]

can i not toggle the tree?

You mean the file tree ? Yes you can toggle it on the header of the file tree:

Screen.Recording.2026-08-12.at.11.49.39.PM.mov

not collapsing it, hiding it completely like on the Files tab:

CleanShot.2026-08-15.at.13.40.07.mp4

[ShpetimA]

Screen.Recording.2026-08-15.at.2.02.44.PM.mov

@juliusmarminge Yes we can, the tab which showed only file numbers now is the toggle my bad for not including the video initially just missed it

[juliusmarminge]

okay that placement is bad. we should use the same pattern as the Files tab.

[ShpetimA]

we could put it at the end of these icons what do you think

[juliusmarminge]

yes try that

[ShpetimA]

Screen.Recording.2026-08-15.at.2.16.30.PM.mov

Made the change and I'm liking it do you think we should keep still the file counter since we have one already here:

Feels like redundant info

[macroscopeapp]

Two consistency findings in the new file-tree sidebar: a primitive height override that does not survive the responsive merge, and a duplicated Pierre tree theming contract. Details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One layout finding on the new file-tree sidebar. The previously flagged size=\"xs\" vs h-10 height conflict on the Load more button is still open and not repeated here.

^{Posted via Macroscope — UI Consistency}

[ShpetimA]

Can't open the pr view anymore im rate limited 🙃. But here is the difference on the load more button. I made the change, I agree that compact looks better.

[ShpetimA]

@juliusmarminge Made the changes whenever you have time have a look again 🫡

[macroscopeapp]

One finding: the new file-tree header uses a surface-subheader class that is not defined anywhere, so the row loses its shared subheader geometry.

^{Posted via Macroscope — UI Consistency}

[Bil0000]

@ShpetimA can you plz update the PR desc with the latest screenshots of all UI changes you made?

Vids are preferred if possible

[ShpetimA]

@Bil0000 Updated with a video removed the old ui changes screenshot / videos

[Bil0000]

@ShpetimA why have 2 of these?

why not making it 1 that expands both?

[ShpetimA]

@ShpetimA why have 2 of these?

why not making it 1 that expands both?

One expands the file tree the other the files. I think makes sense to have both since unrelated

[ShpetimA]

@ShpetimA why have 2 of these?

why not making it 1 that expands both?

Could make the change to have one as both i dont think it would be bad aswell

[ShpetimA]

@Bil0000 Updated to one collapse/uncollapse button added a video in description

[macroscopeapp]

One finding: the load-more control's call-site overflow-hidden clips the Button primitive's coarse-pointer hit-target pseudo-element. Inline comment below.

^{Posted via Macroscope — UI Consistency}