Repository navigation
Conversation
The phone's DOM renderer now draws the desktop too, in split or unified layout, beside the changed-files tree, and the Monaco diff editors are gone. - Split pairs the lines diffr paired, with a hatched filler where a side has none. Unwrapped, each side scrolls sideways on its own and a file's segments stay level; wrapped, both sides of a row wrap to one height. Selecting text keeps to the side it started on. - Unified on a desktop shows both sides' line numbers. - Rows are drawn in blocks of 120 only near the screen and emptied again far from it, at their measured height. Expanding the 25k-row pnpm-lock.yaml in split took one 440 ms task and scrolled at a 46 ms p95 frame; it now takes 35 ms and scrolls at 10 ms. - Folds work as before; on a desktop the gutter folds, so clicking code only places the caret that z and j/k act on. - The files tree, its summary and a drag sash move into FilesSidebar. Deleted: the multi-diff view, its structural folds, syntax decorations and per-scope viewed controls, native-scroll shims, the overflow-widget host and the CSS that styled them. The bundle drops from 2.95 MB of JS (782 kB gzip) to 2.11 MB (about 555 kB). Agent-Session: 429958d8-68f3-4f68-bd3b-a8371e7feb8e Agent-Session: 5eb4067a-b2f6-4508-a6dd-0471ff2c14d1
The Monaco view had these and the plain rows did not yet. - On a desktop, the scope under the pointer lights its chevron, shows a rail down its indentation that folds it on click, and shows its changes left to read with a viewed box on its header. - Marking a scope viewed records its lines as viewed, folds it and dims them. A viewed scope keeps "Viewed" on its header, the outermost one only, and its pill reads ✓. Viewed scopes start folded, as before. StructuralViewedState comes back without its Monaco widget hook. - On a phone, pinching in over a scope folds it and pinching out over a fold opens it. The list sets touch-action: pan-x pan-y, so Safari never zooms the page under it, and the touch listeners stay passive. - Wrapped lines continue under their own indentation, and their number and chevron stay beside the first line. Agent-Session: 429958d8-68f3-4f68-bd3b-a8371e7feb8e Agent-Session: 5eb4067a-b2f6-4508-a6dd-0471ff2c14d1
As the Monaco view did, with the CSS Custom Highlight API that find already uses, so hovering adds no DOM. Brace columns are one-based. Agent-Session: 429958d8-68f3-4f68-bd3b-a8371e7feb8e Agent-Session: 5eb4067a-b2f6-4508-a6dd-0471ff2c14d1
…owser Agent-Session: 5eb4067a-b2f6-4508-a6dd-0471ff2c14d1
Agent-Session: 5eb4067a-b2f6-4508-a6dd-0471ff2c14d1
Agent-Session: 5eb4067a-b2f6-4508-a6dd-0471ff2c14d1
Agent-Session: 5eb4067a-b2f6-4508-a6dd-0471ff2c14d1
Agent-Session: 5eb4067a-b2f6-4508-a6dd-0471ff2c14d1
…l's fold on the header Agent-Session: 5eb4067a-b2f6-4508-a6dd-0471ff2c14d1
Agent-Session: 5eb4067a-b2f6-4508-a6dd-0471ff2c14d1
Agent-Session: 5eb4067a-b2f6-4508-a6dd-0471ff2c14d1
Agent-Session: 5eb4067a-b2f6-4508-a6dd-0471ff2c14d1
…hone Agent-Session: 5eb4067a-b2f6-4508-a6dd-0471ff2c14d1 Agent-Session: 01a1362c-3e21-7c22-9c5c-8f440a884b30
Agent-Session: 5eb4067a-b2f6-4508-a6dd-0471ff2c14d1 Agent-Session: 01a1362c-3e21-7c22-9c5c-8f440a884b30
…nd keep file extensions Agent-Session: 5eb4067a-b2f6-4508-a6dd-0471ff2c14d1 Agent-Session: 01a1362c-3e21-7c22-9c5c-8f440a884b30
Agent-Session: 5eb4067a-b2f6-4508-a6dd-0471ff2c14d1 Agent-Session: 01a1362c-3e21-7c22-9c5c-8f440a884b30
…tion, and list a line's scopes from its number Agent-Session: 5eb4067a-b2f6-4508-a6dd-0471ff2c14d1 Agent-Session: 01a1362c-3e21-7c22-9c5c-8f440a884b30
…the gutter iOS drew the inner list's scroll bar under the sticky file headers. A phone now scrolls the page: the app header sticks, the file headers stick below it, and the observers that draw and free rows watch the viewport. A band's chevron sits in the gutter in line with the rows' own, before a hatched code column reading "⋯ N unchanged lines", as Monaco drew it. Agent-Session: 5eb4067a-b2f6-4508-a6dd-0471ff2c14d1 Agent-Session: 429958d8-68f3-4f68-bd3b-a8371e7feb8e
…bel on its diagonal fill Agent-Session: 5eb4067a-b2f6-4508-a6dd-0471ff2c14d1 Agent-Session: 429958d8-68f3-4f68-bd3b-a8371e7feb8e Agent-Session: dcdf8861-de36-4127-b7a5-52bfb5448d3d
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Draw diffr web's comparison as plain DOM rows on desktop as well as phones, in split or unified layout, and delete the Monaco diff editors. Stacks on #1095; merge #1093, #1094 and #1095 first. It deletes
reviewFilesDiffView.ts, which #1096 edits, so #1096 can close once this merges.z a/o/c/A/O/Candz j/kact on. On a phone, a tap anywhere on a fold row folds it.touch-action: pan-x pan-y, so touch listeners stay passive.FilesSidebarholds the changed-files tree, its summary line and a drag sash. ⌘B toggles it.nativeDiffScroll.tsshrinks toviewport.ts, which holds only the phone media query.I started from our renderer rather than forking
@pierre/diffs, whose line-hunk model and built-in Shiki don't fit diffr's folds. I took the idea of per-side scroll columns from its split layout but copied none of its code.Evidence
vite
v5.3.0...v5.4.0(217 files):pnpm-lock.yaml(25k rows), split, desktop Chrome[/]across blocks, the fold keys, the sidebar and quick open all checked, with no console errors. Estimated block heights matched measured ones exactly, so the page doesn't jump as blocks fill.touch-actionalso readspan-x pan-y. A real two-finger gesture in the simulator is still untried.Merge Danger
Door: two-way; revert the two commits to bring the Monaco diff view back.
Blast Radius: diffr web's whole diff view on every screen size.