Projects › BibleWeb › Bible Reading › Verse context menu (right-click)
Done

Verse context menu (right-click)

Area: Bible Reading Milestone: v1

Context

Problem: Users need quick access to multiple actions on a verse — adding notes, copying text, opening commentaries — without cluttering the reading interface with buttons on every verse.

Solution: A context menu that appears when you click any verse. It shows all available actions for that verse, with some actions gated behind Pro/Premium tiers.

Not included: Multi-verse selection or batch operations. This is always one verse at a time.

Functional

Clicking a verse in the reader opens a floating menu next to the click position with several action options. The menu closes when you click elsewhere or press Escape.

User flow:

  1. User clicks on a verse in the reader
  2. A menu appears at the click position showing: the verse reference (e.g., "5:3") and action buttons
  3. User clicks an action (e.g., "Add Note", "Copy Verse", "Commentary")
  4. The action is performed and the menu closes

Menu items:

  • Add Note / Edit Note (if note exists) — free tier
  • Copy Verse — free tier
  • Bookmark — free tier
  • Share — free tier
  • Commentary — Pro+ tier
  • Cross-references — Pro+ tier
  • Greek/Hebrew — Pro+ tier

Edge cases:

  • Text selection (dragging to select text) does NOT open the menu — a drag guard checks if the pointer moved more than 5px
  • Menu auto-repositions to stay within the viewport (8px margin on all sides)
  • Tier-gated items show but may be locked for free users

UX & Design

Appearance:

  • Floating card with rounded corners and shadow
  • Positioned at click coordinates (clientX + 8, clientY + 8)
  • Auto-clamps to viewport edges with 8px margin

Menu items: Each item is a row with:

  • Icon (left)
  • Label text (right)
  • Hover: subtle background highlight

Close behavior:

  • Click outside (invisible backdrop div)
  • Press Escape key
  • Click any menu item

Responsive: Same appearance on mobile and desktop — positioned near the tap/click point.

Technical

Trigger: handleVerseClick(verse, event) in +page.svelte:

  • Drag guard: checks Math.abs(e.clientX - startX) + Math.abs(e.clientY - startY) > 5 — if true, it's text selection, not a click
  • Valid click calls openContextMenu(verse, { x: clientX + 8, y: clientY + 8 })
  • Sets readModal state to { type: 'context-menu', verse, position }

Positioning: A $effect in VerseContextMenu.svelte clamps position to viewport:

  • Right edge: Math.min(x, window.innerWidth - menuWidth - 8)
  • Bottom edge: Math.min(y, window.innerHeight - menuHeight - 8)

Tier gating: hasFeature(user.currentTier, 'interlinear') etc. for Pro+ items

Components:

  • VerseContextMenu.svelte — the menu UI
  • readModal.svelte.ts — shared Svelte 5 $state for menu visibility

Files:

  • apps/web/src/lib/components/bible/VerseContextMenu.svelte — menu component
  • apps/web/src/lib/stores/readModal.svelte.ts — state management
  • apps/web/src/routes/(app)/read/[[book]]/[[chapter]]/+page.svelte — click handler + action handlers

Status

Current: DONE Milestone: v1 Priority: Core — primary way users interact with individual verses

History:

  • BibleGame had a right-click context menu on verses
  • Web version uses left-click instead (more natural for touch/mobile)
  • Drag guard added to prevent conflicts with text selection

Dependencies:

  • Requires: chapter reader (DONE), tier system (DONE)
  • Used by: note creation, verse copying, commentary/cross-ref/interlinear launch
← Back to Bible Reading features