Redesign review-diff UI with toolbar buttons, sticky header, and file filter#1564
Open
Redesign review-diff UI with toolbar buttons, sticky header, and file filter#1564
Conversation
…ent cards, file filter Rework the Review Diff panel layout to read like a purpose-built magit-style code review UI instead of a plain diff view: - Toolbar: rounded-border 3-row frame around chip-style buttons (`▌ n ▐ next`, `▌ s ▐ stage`, …). Reduced clutter from 16 shortcuts down to the eight most-used ones — the rest stay bound. Each chip is a hit target so the toolbar is now clickable. A `/ filter` chip on the right edge doubles as a button. - Sticky header: switched from the plain "STAGED · README.md +4 / -3" line to a three-segment layout — a warm `[GIT]` badge, the filename in bright-fg bold, and right-aligned "+A / -R" counts styled in add/remove colors. Sticky width is computed from the actual diff panel share (75%) so the counts don't drift off-panel. - Inline comments: previously rendered as a muted one-line note; now full-line-wide callout bars with a leading ⚠ glyph and a warm-bg extending to the line end, so they read as reviewer annotations on their host line rather than another diff row. - Comments panel: each comment is now a three-row card (`path:line` header + body + spacer) instead of a single-line truncated summary, matching the pinned-card layout reviewers expect. - File filter: new `/` shortcut opens a prompt; entering a substring hides files whose path doesn't match (case-insensitive), empty clears. The toolbar filter chip reflects the active query. Filter state lives on the review-mode state object and is cleared on restart. All colors continue to resolve through theme keys only — the new `syntax.type` accent, `syntax.string` warm badge, and `editor.selection_bg` button chip all follow theme swaps.
Adds `blog_showcase_review_diff_ui`, an `#[ignore]`-gated animation test that exercises every redesigned piece of the Review Diff UI: - opens the command palette and launches Review Diff, - lands the cursor on a changed line in README.md (exercising the `[GIT] README.md +4 / -3` sticky header), - adds two inline comments in two different files so the generated GIF shows both the full-width ⚠ callout bar in the diff and two stacked cards in the COMMENTS panel, - exercises the new `/` filter (type "hello" → only hello.py is visible and the toolbar filter chip reflects the query; then backspace + Enter to clear). The test also doubles as a visual regression harness for the redesign — every step is an `snap()` call, so the frame sequence captures the structural changes end-to-end. Generated GIF checked in under `docs/blog/editing/review-diff/`. Runs under the existing `blog_showcase_` filter and follows the project's semantic-wait rule (`wait_for_prompt`, `wait_until` on "Generating Review Diff Stream") — no fixed sleeps in the test.
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.
This PR overhauls the review-diff mode UI with several polished improvements:
Summary
Redesigns the review-diff interface with a bordered button toolbar, enhanced sticky header with
[GIT]badge and change counts, full-width inline comment callout bars, multi-line comment cards in the comments panel, and a new/keyboard shortcut for filtering files by substring.Key Changes
Toolbar Redesign
▌ key ▐) and contrasting background▌/▐ filter)state.toolbarButtonshit-region trackingrenderButton()function generates styled button chips with proper overlays and hit regionsbuildToolbarBorderRow()function creates rounded-corner border rowsSticky Header Enhancement
[GIT]badge in warm accent color (STYLE_BADGE_FG) to identify the pinned file+A / -R) with green/red foreground colors (STYLE_ADD_COUNT_FG / STYLE_REMOVE_COUNT_FG)Comment Display Improvements
»to⚠(warning icon) for better visual semanticsFile Filtering
filterfield to ReviewState for substring-based file filtering (case-insensitive)review_filter()command prompts user for filter text and rebuilds the display/keyboard shortcutColor and Style Additions
editor.current_line_bgfor better visual separationImplementation Details
state.toolbarButtonsarray tracks button hit regions for mouse click dispatchdispatchToolbarCommand()function routes toolbar clicks to their corresponding handlersbuildDiffLines()to compute visible file listTesting
Added
blog_showcase_review_diff_ui()e2e test that exercises the full redesigned UI end-to-end, including toolbar interaction, sticky header display, inline comments, comment cards, and the file filter feature.https://claude.ai/code/session_01J4SvLK2NMKaUiDDN1g98Qk