Projects › BibleWeb › Bible Reading › Chapter navigation (prev/next)
Done

Chapter navigation (prev/next)

Area: Bible Reading Milestone: v1

Context

Problem: After reading a chapter, users need a quick way to move to the next or previous chapter without going back to the book picker every time.

Solution: Prev/Next navigation links at the top of the reader, with smart book boundary wrapping — reaching the end of one book automatically takes you to the start of the next.

Not included: Rapid chapter browsing (hold-to-advance) or jump-to-chapter (that's the book picker). This is just sequential prev/next.

Functional

At the top of every chapter, there are Previous and Next navigation links. They work across book boundaries — if you're at the last chapter of Genesis, "Next" takes you to Exodus 1.

User flow:

  1. User is reading a chapter
  2. Click "Next" → navigates to next chapter in sequence
  3. Click "Prev" → navigates to previous chapter
  4. At the last chapter of a book, "Next" goes to chapter 1 of the next book
  5. At chapter 1 of a book, "Prev" goes to the last chapter of the previous book

Edge cases:

  • Genesis 1: no "Prev" button (start of Bible) — shown as disabled
  • Revelation 22: no "Next" button (end of Bible) — shown as disabled
  • In Jesus Words mode: prev/next skip to the next chapter that has Jesus' speech (may jump multiple chapters or books)

UX & Design

Layout: Horizontal bar at the top of the chapter with three sections:

  • Left: "< Prev" link (or disabled when at Genesis 1)
  • Center: Book/chapter label with book picker button, JW toggle, EN/NL/Both toggle, A-/A+ buttons
  • Right: "Next >" link (or disabled when at Revelation 22)

Disabled state: Opacity 25%, not clickable (rendered as <span> instead of <a>)

Keyboard shortcuts:

  • ← (left arrow): previous chapter
  • → (right arrow): next chapter
  • Home: first chapter of current book
  • End: last chapter of current book

Links: Rendered as <a> tags (not buttons) to enable browser link prefetching for instant navigation.

Technical

Components:

  • ChapterNav.svelte — renders the navigation bar with all controls
  • +page.svelte — wrapping logic (lines 81-125) that computes prev/next URLs

Navigation logic:

  • Normal mode: chapter - 1 / chapter + 1, wrapping at book boundaries via CHAPTER_COUNTS[bookId]
  • JW mode: prev/next computed from jesusSpeechChapters array (server-provided list of all Gospel chapters with Jesus speech)
  • Book boundary wrapping uses CHAPTER_COUNTS and TOTAL_BOOKS from bible-constants.ts

Files:

  • apps/web/src/lib/components/bible/ChapterNav.svelte — nav bar component
  • apps/web/src/routes/(app)/read/[[book]]/[[chapter]]/+page.svelte — wrapping logic
  • apps/web/src/lib/bible-constants.ts — CHAPTER_COUNTS, TOTAL_BOOKS constants

Status

Current: DONE Milestone: v1 Priority: Core — essential for sequential reading

History:

  • BibleGame had identical prev/next with book wrapping
  • Keyboard shortcuts added during web port

Dependencies:

  • Requires: chapter reader (DONE), bible constants (DONE)
  • Used by: Jesus Words mode navigation
← Back to Bible Reading features