Projects BibleWeb Parallel Gospels Translation toggle within parallel view
Planned

Translation toggle within parallel view

Area: Parallel Gospels Milestone: v2

Context

Problem: The parallel Gospel view needs its own translation toggle (EN/NL/Both) independent of the main reader's setting, so users can compare Gospel accounts in their preferred language.

Solution: Add the same EN/NL/Both toggle buttons to the parallel view header, controlling the language of all Gospel columns simultaneously.

Not included: Per-column language selection (e.g., Matthew in English, Mark in Dutch). All columns use the same language.

Functional

Expected user flow:

  1. User opens a parallel Gospel passage
  2. Sees EN/NL/Both toggle in the header
  3. Clicks "Both" → each verse in every column shows EN text + NL text below
  4. Clicks "NL" → only Dutch text in all columns

Edge cases:

  • "Both" mode doubles the text per verse, making columns taller
  • Translation mode is local to the parallel view page (not persisted)

UX & Design

Same toggle as reader: Three pill buttons (EN | NL | Both) in the page header.

Technical

Implementation: translationMode state on the parallel detail page, passed to ParallelVerseView.svelte. The component already handles translationMode for dual rendering.

Files:

  • apps/web/src/routes/(app)/parallel/[pericopeId]/+page.svelte (modify — add toggle)
  • apps/web/src/lib/components/bible/ParallelVerseView.svelte (already supports translationMode)

Status

Current: PLANNED Milestone: v2 Priority: Low — ParallelVerseView already supports translationMode, just needs the toggle UI

Dependencies:

  • Requires: side-by-side columns (DONE), dual translation (DONE)