Projects › BibleWeb › Notes › Dedicated two-panel notes manager
Needs Design

Dedicated two-panel notes manager

Area: Notes Milestone: v1

Context

Problem: The current notes list at /notes is a simple flat list. Users with many notes need a richer interface — browsing notes by book/chapter on the left while reading and editing on the right.

Solution: A full-width two-panel notes manager: left panel is a scrollable note list grouped by book and chapter, right panel shows the selected note's content with editing, manual links, and auto-connections.

Not included: Drag-and-drop reordering, tags, or folders. The grouping is by Bible book/chapter (natural organization).

Functional

Expected user flow:

  1. User navigates to an enhanced /notes page
  2. Left panel: notes grouped by book, then chapter (e.g., "Genesis" → "Chapter 1" → 3 notes)
  3. Clicks a note in the left panel → right panel shows full content
  4. Can edit content directly in the right panel
  5. Below content: manual links section + auto-connection suggestions

Responsive: On mobile, panels stack (list on top, detail on bottom) or use a drill-down pattern.

UX & Design

Left panel:

  • Scrollable list
  • Grouped by book → chapter
  • Each note shows: verse reference + date + preview
  • Selected note highlighted

Right panel:

  • Full note content (editable)
  • Manual links section
  • Auto-connections section
  • Delete button

TODO: Wireframe or mockup for the two-panel layout

Technical

Implementation:

  • Replace or enhance the current /notes page
  • Left panel: reuse getAllNotes() grouped by bookId → chapter
  • Right panel: reuse NoteEditor component logic

Files:

  • apps/web/src/routes/(app)/notes/+page.svelte (major rewrite)
  • apps/web/src/lib/components/bible/NoteEditor.svelte (reuse/adapt)

Status

Current: NEEDS_DESIGN Milestone: v1 Priority: Medium — improves note management for power users

Design questions:

  1. Should this replace the current notes list or be a separate /notes/manager route?
  2. Mobile layout: stacked panels or drill-down navigation?
  3. Should the right panel support Markdown preview?

Dependencies:

  • Requires: notes system (DONE), note cross-linking (DONE)
← Back to Notes features