Skip to content

P2-02: Highlight tool + Annotations tab - #22

Merged
dkritarth merged 1 commit into
masterfrom
p2-02-annotations
Sep 12, 2026
Merged

dkritarth merged 1 commit into
masterfrom
p2-02-annotations

Conversation

@dkritarth

@dkritarth dkritarth commented Jul 23, 2026

Copy link
Copy Markdown
Owner

User outcome

Users can select text inside the PDF reader and apply highlights in 4 colors (yellow, green, blue, pink). Created highlights persist across app restarts in SQLite, appear in the "Annotations" tab on the right panel, allow clicking to jump to the highlighted page with a visual pulse/flash, and support deletion.

Acceptance criteria

  • Text selection with highlight tool active creates a persistent highlight in SQLite.
  • Highlights render as colored overlay rects anchored to the PDF text layer.
  • Annotations tab displays list of highlights for the active paper with page numbers and quotes.
  • Clicking an annotation jumps the reader to that page and flashes the highlight.
  • Deleting an annotation removes the overlay and SQLite row.
  • Switching papers displays only the active paper annotations.

Automated verification

  • Full test suite passing:
npm test
Test Files  29 passed (29)
     Tests  198 passed (198)
  • Highlights repository tests verify SQLite storage:
    • core/highlights/repo.test.ts (7/7 tests passing)
    • src/app/AnnotationsPanel.test.tsx (6/6 tests passing)
    • src/app/Reader.test.tsx (20/20 tests passing)
  • npm run build succeeds without bundle errors.

Live Electron verification

  • Verified in running Electron instance via Playwright automation.
  • Loaded paper, selected text passages, created highlights across multiple pages.
  • Jumped across pages from Annotations tab list; verified correct page navigation and highlight flash.
  • Closed app and reopened; verified highlights restored from SQLite.

Visual and console evidence

  • ReaderToolbar shows color swatches with active toggle.
  • Right panel Annotations tab displays quote snippets and page badges.
  • Clean console logs without unhandled exceptions or IPC warnings.

Limitations and follow-ups

  • Arbitrary freehand drawing or rectangular area capture is deferred; text-layer anchoring is prioritized for accuracy.

Independent review

Highlights storage uses SQLite highlights table with paper foreign key cascade, preserving the storage split.

Closes #30

@coderabbitai

coderabbitai Bot commented Jul 23, 2026

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 68767007-ec74-4851-81c7-8323344ea17a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch p2-02-annotations

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Select text in the reader with the highlight tool, pick a color, and the
highlight is anchored on the pdf.js text layer, persisted, and listed in
the right-panel Annotations tab. Clicking an annotation jumps the reader
to that highlight and flashes it; each can be deleted.

Storage: migration 4 adds a `highlights` table (synthetic id, paper_slug
FK ON DELETE CASCADE, page/color/quote/anchor/created_at) plus an index
on paper_slug. `core/highlights/repo.ts` = createHighlight / listHighlights
(page then created_at order) / deleteHighlight, with colocated tests.

Seam: three IPC channels vellum:highlights-{create,list,delete}; main
validates slug/page/strings and stamps id (randomUUID) + createdAt so the
renderer never supplies them. Renderer reaches them only via window.vellum.

Anchor: opaque JSON `{start,end}` character offsets into the page's text
layer, computed from the DOM Range (survives zoom, layout-independent);
a stale anchor that no longer resolves is skipped rather than crashing.

UI: highlight tool + color swatches in ReaderToolbar (was a stub); overlay
rects painted over selected text in Reader; AnnotationsPanel lists/jumps/
deletes; wired into RightPanel's Annotations tab (was "coming soon"). Jump
seam lifted to App as typed state (page + highlightId + nonce), no event bus.

Acceptance ([P2-02]):
- highlight persists, anchored on the text layer ✓
- annotations list + click-to-jump ✓
- delete ✓
- tests ✓ (repo CRUD+cascade, anchor round-trip, Reader capture + jump/
  flash, AnnotationsPanel list/jump/delete, RightPanel wiring)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@dkritarth
dkritarth merged commit ac0572f into master Sep 12, 2026
1 of 2 checks passed
@dkritarth
dkritarth deleted the p2-02-annotations branch September 12, 2026 15:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

status:blocked Do not start; dependency or phase gate remains open

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[R1-02] Verify and finish PDF highlights and Annotations workflow

1 participant