Projects › BibleWeb › Cross-References › Cross-ref sidebar in reader
Done

Cross-ref sidebar in reader

Area: Cross-References Milestone: v2

Context

Problem: Users reading a chapter may want to quickly check what other verses are connected to the one they're reading — without leaving the reader to open the full graph view.

Solution: A drawer panel that slides in from the right showing cross-references for a selected verse. It has its own internal navigation — clicking a cross-ref loads that verse's references within the sidebar, building a breadcrumb trail.

Not included: The full interactive graph. This is a simpler list-based exploration within a drawer.

Functional

User flow:

  1. User clicks a verse in the reader → context menu
  2. Clicks "Cross-references" → sidebar drawer opens (480px, right side)
  3. Shows cross-references for that verse as cards
  4. Each card: book abbreviation, chapter:verse, vote count badge, 3-line text preview
  5. Clicking a cross-ref card loads that verse's references within the sidebar (internal navigation)
  6. Breadcrumb trail tracks exploration path
  7. "Open in reader" button navigates to that chapter and closes the drawer

Edge cases:

  • Internal breadcrumb: clicking back returns to previous verse's refs
  • Vote threshold stepper available within the sidebar
  • Verse text shown in current translation language (EN or NL)

UX & Design

Drawer: Right side, 480px width, full viewport height.

Ref cards: Book abbreviation, chapter:verse reference, vote count badge (colored), up to 3 lines of verse text (CSS line-clamp).

Breadcrumb: Shows exploration path at the top. Backspace key goes back.

Tier gate: crossRefGraph (Pro+)

Technical

Component: CrossRefSidebar.svelte — uses Drawer layout component with variant="right".

API: Same GET /api/crossrefs/[bookId]/[chapter]/[verse]?minVotes=N.

Query: getCrossRefsWithText() — fetches both directions (from/to), deduplicates targets, batch-fetches verse texts. Response includes targetText and targetTextNl.

Internal navigation: breadcrumbs: VerseLocation[] state tracks path. Clicking a ref pushes to breadcrumbs and re-fetches.

Files:

  • apps/web/src/lib/components/bible/CrossRefSidebar.svelte
  • apps/web/src/routes/api/crossrefs/[bookId]/[chapter]/[verse]/+server.ts
  • apps/web/src/lib/server/queries/cross-refs.ts

Status

Current: DONE Milestone: v2 Priority: High — makes cross-references accessible during reading

History:

  • BibleGame had a similar sidebar panel for cross-refs
  • Internal breadcrumb navigation was a web-specific addition

Dependencies:

  • Requires: cross_references data (DONE), verse context menu (DONE), tier system (DONE)
← Back to Cross-References features