Projects BibleWeb Interlinear Verse-by-verse navigation in popup
Needs Design

Verse-by-verse navigation in popup

Area: Interlinear Milestone: v2

Context

Problem: When studying Greek/Hebrew words in the interlinear popup, users want to move to the next or previous verse without closing the popup, navigating in the reader, and reopening it.

Solution: Arrow key navigation within the popup — pressing left/right arrow keys moves to the previous/next verse while keeping the interlinear popup open.

Not included: Jumping to arbitrary verses from within the popup. Just sequential prev/next.

Functional

Expected user flow:

  1. User has the interlinear popup open on a verse
  2. Presses → (right arrow) → popup loads the next verse's Greek/Hebrew words
  3. Presses ← (left arrow) → popup loads the previous verse
  4. Any word selections on the current verse are preserved before navigating

Edge cases:

  • At the first verse of a chapter: left arrow does nothing (or wraps to previous chapter?)
  • At the last verse: right arrow does nothing (or wraps?)
  • Word selections should auto-save before navigation

UX & Design

Keyboard: Arrow left/right when popup is open. Visual: Verse reference updates in the popup header. Word cards reload with new verse data.

TODO: Decide on chapter boundary behavior

Technical

Implementation:

  • Add arrow key listeners to InterlinearPopup.svelte
  • Compute next/prev verse from current bookId, chapter, verse
  • Fetch new word data from the interlinear API
  • Save current selections before navigating

Files:

  • apps/web/src/lib/components/bible/InterlinearPopup.svelte (modify)

Status

Current: NEEDS_DESIGN Milestone: v2 Priority: Medium — significant UX improvement for sequential study

Design questions:

  1. What happens at chapter boundaries?
  2. Should unsaved selections be auto-saved or prompt?

Dependencies:

  • Requires: interlinear popup (DONE)