Skip to content

feat(review): VS Code-style diff search in file tree sidebar#347

Merged
backnotprop merged 3 commits into
mainfrom
feat/review-search
Mar 20, 2026
Merged

feat(review): VS Code-style diff search in file tree sidebar#347
backnotprop merged 3 commits into
mainfrom
feat/review-search

Conversation

@backnotprop
Copy link
Copy Markdown
Owner

Summary

  • Adds diff search to the code review UI — search input lives in the file tree sidebar, VS Code-style
  • Search engine parses unified diff patches, finds matches across all files with line numbers and side labels (new/old/ctx)
  • Results replace the file tree when a query is active, grouped by file with collapsible sections and match count badges
  • Clicking a match navigates to the file and scrolls to the matching line with amber highlight (passive matches get yellow)
  • Highlights penetrate @pierre/diffs shadow DOM via recursive root traversal with inline styles
  • Keyboard: Cmd/Ctrl+F focuses search, Enter/F3 steps through matches, Escape clears

Based on the search engine from #344 by @sercantor — his data layer (reviewSearch.ts, reviewSearchHighlight.ts, useReviewSearch.ts) is taken verbatim. The UI integration (sidebar placement, FileTree/DiffViewer wiring) is new.

Test plan

  • bun test packages/review-editor/ — all 19 tests pass
  • bun run build:review && bun run build — builds clean
  • Manual: open code review with multiple files, search for a term, verify results appear in sidebar
  • Manual: click a result → navigates to file and scrolls to match with amber highlight
  • Manual: Cmd+F focuses input, Enter steps forward, Shift+Enter steps backward, Escape clears
  • Manual: clear search → file tree returns
  • Manual: single-file diff → no sidebar, Cmd+F falls through to browser default

backnotprop and others added 2 commits March 19, 2026 19:12
Search data layer for code review: patch parser, match finder, file
grouping, snippet extraction, DOM highlight injection with shadow DOM
traversal, and state management hook.

Co-Authored-By: sercan tor <tor.sercan@gmail.com>
VS Code-style search UI in the file tree panel. Search input at the top
of the sidebar replaces the tree with grouped results when active.
Clicking a match navigates to the file and scrolls to the line.

Keyboard: Cmd/Ctrl+F focuses input, Enter/F3 steps through matches,
Escape clears. In-diff highlights via shadow DOM traversal.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@backnotprop
Copy link
Copy Markdown
Owner Author

Code review

No issues found. Checked for bugs and CLAUDE.md compliance.

🤖 Generated with Claude Code

- If this code review was useful, please react with 👍. Otherwise, react with 👎.

…rimmed queries

Group search matches by line before highlighting so each DOM occurrence
gets the correct match ID. Also trim the query before building the
highlight regex to stay consistent with the search engine.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@backnotprop backnotprop merged commit 0908e23 into main Mar 20, 2026
2 checks passed
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