Projects › BibleWeb › Notes › Note indicators in reader
Done

Note indicators in reader

Area: Notes Milestone: v1

Context

Problem: Users have notes scattered across many verses. While reading a chapter, they need to know which verses have notes without opening the notes list.

Solution: A subtle dashed underline on the first few words of verses that have notes. Clicking the underline opens the note editor directly (bypassing the context menu for quick access).

Not included: Showing note content inline or a note count. This is a presence indicator only.

Functional

User flow:

  1. User has notes on certain verses
  2. When reading a chapter, verses with notes show a dashed underline on their first 5 words
  3. Clicking the underlined words opens the note editor for that verse
  4. The indicator updates reactively when notes are added or removed

Edge cases:

  • Verses with fewer than 5 words: all words underlined
  • Click on underlined words stops propagation (doesn't also open context menu)
  • Indicators computed from the notes store Map for O(1) per-verse lookup

UX & Design

Visual:

  • Dashed underline: border-bottom: 1.5px dashed var(--color-header, rgb(140, 160, 200))
  • Only first 5 words (or fewer if verse is short)
  • Cursor: pointer
  • Padding-bottom: 1px

Note: Despite the feature name "dots," the implementation uses dashed underlines, not dot markers.

Technical

Computation (in +page.svelte):

  • noteVerseIds = $derived(new Set(...)) — checks every verse against getVerseNote() from the notes store
  • getVerseNote() does O(1) Map lookup from Map<"bookId:chapter:verse", VerseNote>

Rendering (VerseText.svelte):

  • When hasNote is true: splits text, wraps first min(5, words.length) words in <span class="note-indicator">
  • Click handler: onnoteclick(verse) with stopPropagation()

Files:

  • apps/web/src/lib/components/bible/VerseText.svelte — indicator rendering
  • apps/web/src/lib/components/bible/VerseList.svelte — passes noteVerseIds
  • apps/web/src/lib/stores/notes.svelte.ts — Map-based lookup
  • apps/web/src/routes/(app)/read/[[book]]/[[chapter]]/+page.svelte — computes noteVerseIds

Status

Current: DONE Milestone: v1 Priority: Medium — connects reader to notes system

History:

  • BibleGame used colored dot markers next to noted verses
  • Web version uses dashed underlines for a cleaner, less cluttered look

Dependencies:

  • Requires: notes system (DONE), reader (DONE)

Screenshots

Feature screenshot
← Back to Notes features