Migrate diff viewer to @pierre/diffs CodeView (render any diff at scale)#17
Merged
Conversation
CodeView (the virtualization-first review surface) is only available in @pierre/diffs 1.2.x. Bump from 1.1.15 to 1.2.4 as the first step of migrating the diff viewer onto CodeView. https://claude.ai/code/session_01JHfEZvA73s1KmXxC99tnQE
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Render the entire change set in a single virtualization-first <CodeView> instead of a per-file PatchDiff loop. Each file becomes a controlled CodeViewDiffItem whose fileDiff is parsed client-side via parsePatchFiles, ordered by sortFilesAsTree. Comments and the inline comment input ride as per-item annotations through renderAnnotation; the gutter '+' via renderGutterUtility; the custom FileDiffHeader via renderCustomHeader. CodeView now owns virtualization, scroll anchoring, element pooling, DOM-height management and the worker pool, so the hand-rolled scale layer is removed: useScrollAnchor, the min-height ResizeObserver pin, the IntersectionObserver active-file tracking, and the deferred/forceRender placeholder system. Scroll-to-file is imperative via a DiffViewerHandle; active-file is derived from onScroll + getRenderedItems(). Tests and AGENTS.md updated for the new architecture. https://claude.ai/code/session_01JHfEZvA73s1KmXxC99tnQE
Add a settings popover (backgrounds, line numbers, word wrap, indicator style) and a theme picker (Auto/Light/Dark mode plus a selectable catalog of all diff themes: the 4 pierre themes and 65 bundled Shiki themes) to the StatusBar toolbar. Settings and theme selection persist to localStorage and feed the shared CodeView options. Lean further on CodeView: set expandUnchanged so unchanged context renders fully instead of collapsing into 'N unmodified lines' banners. Build the popover/dropdown surfaces on @base-ui/react primitives matching the existing shadcn (ui.blode.co) style: new ui/popover, ui/dropdown-menu, and ui/context-menu components. The blode registry is network-gated in this environment, so these are authored locally against the same primitive the registry uses and can be re-synced later. https://claude.ai/code/session_01JHfEZvA73s1KmXxC99tnQE
Restructure the theme popover to match the reference UX: a root view with mode (Auto/Light/Dark) plus 'Light theme' and 'Dark theme' rows that drill into scrollable theme lists with a back button, instead of one flat list. View resets to root when the popover closes. https://claude.ai/code/session_01JHfEZvA73s1KmXxC99tnQE
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
2 participants
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.
Goal
Migrate the CLI diff viewer (
apps/cli) from the per-filePatchDiffarchitecture to the new virtualization-firstCodeViewcomponent from@pierre/diffs, following Pierre's "On Rendering Diffs" post. Target: render an entire change set (thousands of files / 1M+ lines) in one virtualized surface, like the DiffsHub playground.Why a package upgrade is required
CodeViewdoes not exist in the previously pinned@pierre/diffs@1.1.15— it ships in1.2.x. This PR bumps to1.2.4as the first step.What changes
<CodeView>for the whole diff instead of a per-filePatchDiffloop. Each file becomes aCodeViewDiffItemwhosefileDiffis built client-side viaparsePatchFiles(patch).useScrollAnchor,min-heightResizeObserver pinning, IntersectionObserver active-file tracking, and the deferred-render/placeholder system.renderAnnotation+renderGutterUtility(per-itemannotations,metadatanotdata).diffStyle), line numbers (disableLineNumbers), word wrap (overflow), backgrounds (disableBackground), indicator style (diffIndicators), light/dark theming +unsafeCSS.CodeViewHandle(scrollTo) andonScroll.apps/cli/AGENTS.mdand tests updated for the new architecture.Status
🚧 Draft — dependency bump landed; the viewer rewrite, rewiring, and test updates are being implemented and will be pushed to this branch. Verified via
check-types+lint+test(no heavynext buildin CI here). Browser UX not yet manually verified.https://claude.ai/code/session_01JHfEZvA73s1KmXxC99tnQE
Generated by Claude Code