Skip to content

diffr web: draw comparisons as plain unified rows on phones - #1094

Open
milanb17 wants to merge 1 commit into
claude/diffr-web-mobile-perffrom
claude/diffr-web-mobile-renderer
Open

milanb17 wants to merge 1 commit into
claude/diffr-web-mobile-perffrom
claude/diffr-web-mobile-renderer

Conversation

@milanb17

Copy link
Copy Markdown
Contributor

Summary

On phones, draw the comparison as plain unified rows instead of Monaco's diff editor, keeping diffr's folds and summaries. Stacks on #1093; merge it first.

viewport ≤ mobile breakpoint → MobileDiffView (DOM rows, built near the viewport)
otherwise                    → Monaco diff editor, unchanged
  • reviewUnifiedRows.ts turns a file's structural diff into the rows a reader sees: lines, and the bands diffr's collapsed folds leave in their place, with pseudocode summaries as the band's detail. It reads the same rows, gaps and foldables the diff editor uses.
  • Folding uses large targets: the whole header row, and the whole band, toggle a fold. Only folds spanning two or more lines get a chevron, since folding one line saves nothing and every chevron turns its row into a tap target. A tap that ends a text selection doesn't fold.
  • Pseudocode wraps at phone width. Syntax colours come from reviewSyntaxRoles.ts, extracted from reviewStructuralSyntax.ts so both views share them.
  • Find highlights matches with CSS Custom Highlights on phones. Crossing the breakpoint (rotation, resizing) re-routes to the other view.
  • Not ported yet: pinch to fold, per-scope viewed checkboxes, recursive fold, open on GitHub from the file header, and lens section headers.

Evidence

  • iPhone 17 Pro simulator, vite v5.3.0...v5.4.0 (217 files), cold loads, three runs each:
Peak Settled
Monaco 724–1031 MB 435–445 MB
Unified rows 696–759 MB 374–422 MB
  • A separate simulator pass checked folding and unfolding, pseudocode bands, file headers, the file tree, theme switching and rotation. Monaco's "potential listener LEAK" warnings (200/300/400 listeners) are gone on phones.
  • Known: one transient blank viewport after about 60 rapid flings, not yet reproduced; dragging selection handles is unverified because the simulator can't do it; bands can shift briefly during sideways swipes.
  • Browser typecheck, lint and format pass.

Merge Danger

Door: two-way; revert the commit.

Blast Radius: phone-width viewports in diffr web only; desktop still uses Monaco. Phone users lose the features listed as not ported.

Phones get a DOM renderer instead of Monaco's multi-diff editor: native scrolling, selection and find, with diffr's folds, bands and pseudocode summaries driven by the same session state and structural helpers.

Agent-Session: 5eb4067a-b2f6-4508-a6dd-0471ff2c14d1
Agent-Session: 429958d8-68f3-4f68-bd3b-a8371e7feb8e
Agent-Session: c4502e33-93da-4505-ac5c-2015d3e90139

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant