Skip to content

feat(ui): paint host highlights on scripture surfaces - #140

Open
Dustin-Kelley wants to merge 6 commits into
mainfrom
dk/pass-highlights-into-votd-biblecard
Open

feat(ui): paint host highlights on scripture surfaces#140
Dustin-Kelley wants to merge 6 commits into
mainfrom
dk/pass-highlights-into-votd-biblecard

Conversation

@Dustin-Kelley

@Dustin-Kelley Dustin-Kelley commented Aug 18, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Subscribe BibleTextView, BibleCard, and VerseOfTheDay at chapter scope through the existing native highlights cache, and always pass a Highlight[] into the WebView so controlled paint latches.
  • Paint-only: no apply/remove, no verse-action sheet, no token in the WebView. Hosts cannot pass highlights.
  • Pins @youversion/platform-react-ui to 2.7.0 (the published highlights prop from platform-sdk-react#335).

Test plan

  • Core and UI unit tests (parser, VOTD lookup, three bridge suites)
  • Device: signed-in highlight on a reader passage also paints on a card / VOTD of that passage
  • Signed-out (or no rows) still passes []; no fill
  • BibleCard version change rescopes; stale other-version rows do not paint
  • Tapping a verse on these surfaces still does nothing

Greptile Summary

The PR adds paint-only host highlights to BibleTextView, BibleCard, and VerseOfTheDay, backed by the native chapter-scoped highlights cache.

  • Adds a disabled/null-scope path that always supplies a controlled Highlight[].
  • Bridges cached highlights into all three DOM scripture surfaces without exposing auth tokens or write actions.
  • Pins the VOTD calendar day consistently across native passage lookup and WebView rendering.
  • Updates the platform dependencies and adds bridge, cache, parser, and VOTD coverage.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename Overview
packages/core/src/highlights/use-highlights.ts Adds an enabled switch that suppresses fetching, persistence, refreshing state, and painted cache output for dummy scopes.
packages/core/src/highlights/use-highlight-paint.ts Introduces a paint-only wrapper that maps absent scopes to a disabled dummy subscription and always returns an array.
packages/ui/src/native/verse-of-the-day.tsx Uses one sampled or consumer-provided calendar day for both passage lookup and DOM rendering, resolving the prior cross-day mismatch.
packages/ui/src/native/bible-card.tsx Resolves the displayed passage to chapter scope and forwards cached highlights to the DOM surface.
packages/ui/src/native/bible-text-view.tsx Adds chapter-scoped highlight paint while preserving the existing read-only interaction surface.
packages/ui/src/dom/verse-of-the-day.tsx Forwards a controlled highlights array to the Web component and clears legacy WebView auth residue.
packages/ui/src/native/use-verse-of-the-day-passage-id.ts Looks up the passage for the shared day value and rejects stale asynchronous results.

Sequence Diagram

sequenceDiagram
  participant Host as Native scripture surface
  participant Scope as Highlight scope resolver
  participant Cache as Native highlights cache
  participant DOM as Expo DOM bridge
  participant Web as Web scripture component
  Host->>Scope: Resolve version, book, and chapter
  Scope->>Cache: Subscribe at chapter scope
  Cache-->>Host: Highlight[]
  Host->>DOM: Pass Highlight[] without token
  DOM->>Web: Render controlled highlights
Loading

Reviews (5): Last reviewed commit: "fix(ui): do not paint other-scope highli..." | Re-trigger Greptile

Context used:

Dustin-Kelley and others added 3 commits August 18, 2026 11:58
Subscribe BibleTextView, BibleCard, and VerseOfTheDay at chapter
scope and always pass Highlight[] into the DOM so the latch is
ready when platform-sdk-react#335 publishes.

Co-authored-by: Cursor <cursoragent@cursor.com>
Reset paint from previous-scope state instead of a render-time ref,
and stop HighlightsPaint's render-prop from breaking BibleCard memoization.

Co-authored-by: Cursor <cursoragent@cursor.com>
Drop the type widen now that the web highlights prop exists. Native still
owns fetch so BibleTextView, BibleCard, and VerseOfTheDay paint from the
same cache without a token in the WebView.

Co-authored-by: Cursor <cursoragent@cursor.com>
@Dustin-Kelley
Dustin-Kelley marked this pull request as ready for review August 19, 2026 16:41
@Dustin-Kelley Dustin-Kelley self-assigned this Aug 19, 2026
Comment thread packages/ui/src/native/verse-of-the-day-api.ts Outdated
Native sampled today independently of the WebView, so a mount across
local midnight could paint highlights for a different passage than the
card. Sample once (or use the consumer prop) and always pass dayOfYear
into both the lookup and the DOM.

Co-authored-by: Cursor <cursoragent@cursor.com>
Comment thread packages/ui/src/native/verse-of-the-day.tsx
@Dustin-Kelley

Copy link
Copy Markdown
Collaborator Author

@greptile please review again after my response to your comment

Dustin-Kelley and others added 2 commits August 19, 2026 14:38
VOTD paint imports BibleClient from @youversion/platform-core. Name that
dependency on the UI package so published installs resolve it without
relying on a hoisted copy from core.

Co-authored-by: Cursor <cursoragent@cursor.com>
A null Highlight Scope now yields [] instead of every cached row, so
stale other-version and other-chapter highlights cannot reach the
WebView before today's passage is known.

Co-authored-by: Cursor <cursoragent@cursor.com>

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will be another great candidate for Tanstack Query

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.

2 participants