Projects › BibleWeb › Commentaries › Commentary drawer in reader
Done

Commentary drawer in reader

Area: Commentaries Milestone: v2

Context

Problem: Users want to read commentary on a verse without leaving the chapter they're reading. A full-page commentary view would break the reading flow. The commentary needs to appear alongside the Bible text.

Solution: A slide-in drawer panel on the right side of the reader that shows commentary for the selected verse. It includes tabbed access to all three commentary sources (Matthew Henry, John Gill, Kanttekeningen) and can be opened and closed without losing the reading position.

Not included: Inline commentary (embedded between verses) or split-screen mode. The drawer is an overlay that doesn't reflow the Bible text.

Functional

When a user wants commentary on a verse, they click the verse → context menu → "Commentary". A drawer slides in from the right showing the commentary text with tabs for switching between sources.

User flow:

  1. User clicks a verse in the reader
  2. Selects "Commentary" from the context menu
  3. A right-side drawer slides in showing the verse reference and commentary text
  4. Header shows "Commentary" label and the verse reference (e.g., "Matthew 5:3")
  5. Tab bar allows switching between Matthew Henry, John Gill, and Kanttekeningen
  6. User reads commentary while the Bible text remains visible on the left
  7. Close via X button — reader position is preserved

Edge cases:

  • If a verse has no commentary from any source, the drawer shows an empty state
  • If commentary exists for some sources but not others, those tabs still appear but show "No commentary available"
  • Dutch language fallback: when UI is Dutch and text_nl is null, shows "(Alleen beschikbaar in het Engels)" and falls back to English text
  • Commentary text is rendered paragraph by paragraph (split on \n, empty lines filtered)

UX & Design

Drawer layout:

  • Position: right side of the screen
  • Width: 400px
  • Height: full viewport
  • Background: theme card background
  • Shadow: left-side drop shadow for depth

Header:

  • "Commentary" label + verse reference (e.g., "Matthew 5:3")
  • Close button (X icon) in top-right

Tab bar:

  • Three tabs: Matthew Henry | John Gill | Kanttekeningen
  • Tab order defined in SOURCE_ORDER constant
  • Active tab: underlined, primary color
  • Only tabs with available commentary are shown

Content:

  • Scrollable text area
  • Paragraph rendering (split on newlines)
  • Standard reading typography

Responsive:

  • Desktop: 400px drawer overlaying the right portion of the reader
  • Mobile: drawer takes full width

Technical

Component: CommentaryDrawer.svelte at apps/web/src/lib/components/bible/CommentaryDrawer.svelte

Data flow:

  1. User clicks "Commentary" in context menu → sets readModal state to { type: 'commentary', verse }
  2. CommentaryDrawer mounts and fetches GET /api/commentaries/[bookId]/[chapter]/[verse]
  3. Response grouped by source into a Map
  4. Tab bar rendered for available sources
  5. Active tab's text rendered paragraph-by-paragraph

API: GET /api/commentaries/[bookId]/[chapter]/[verse]

  • Requires tier: commentaries (Pro+)
  • Returns: [{ source, text, textNl, verseId }]
  • Cache: max-age=86400

Query: getCommentaries(verseId) in commentaries.ts — selects from commentaries WHERE verse_id matches

Tab order: SOURCE_ORDER = ['matthew_henry', 'john_gill', 'kanttekeningen_sv']

Dutch fallback: When lang === 'nl' and textNl is populated → show Dutch. When textNl is null → show English with "(Alleen beschikbaar in het Engels)" note.

Uses: Reuses the Drawer layout component with variant="right" and width="400px".

Files:

  • apps/web/src/lib/components/bible/CommentaryDrawer.svelte — main component
  • apps/web/src/routes/api/commentaries/[bookId]/[chapter]/[verse]/+server.ts — API endpoint
  • apps/web/src/lib/server/queries/commentaries.ts — getCommentaries(), getCommentariesForChapter()
  • apps/web/src/lib/stores/readModal.svelte.ts — drawer state management

Status

Current: DONE Milestone: v2 Priority: Core — the primary way users access commentary

History:

  • BibleGame had a similar right-panel commentary view
  • Web version uses a slide-in drawer pattern for consistency with cross-ref sidebar
  • Dutch fallback handling added when the text_nl column was introduced

Dependencies:

  • Requires: commentary data (DONE), verse context menu (DONE), tier system (DONE)
  • Used by: all three commentary sources (Matthew Henry, John Gill, Kanttekeningen)
← Back to Commentaries features