Version history, notes on highlights and bookmarks, "you've studied this", prayer journal

- Earlier versions of a study: the server keeps compressed copies (about one per ten minutes of
  editing, the latest 30); Export shows what differs and puts one back (the replaced copy is kept)
- Notes on highlights and bookmarks: synced, merged without loss, in exports and backups
- Reader verse panel lists your studies and chunks that cover the verse, and opens them
- Prayer journal: requests, who for, linked verses, days prayed, answers; synced, in backups
  and the account export; daily prayer reminder through ntfy
- TODO.md lists the ideas not built yet

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/reader/MarkNote.jsx

@@ -0,0 +1,33 @@
+// A short note on a highlight or a bookmark: shown under it, added or edited in place.
+import { useState } from 'react';
+
+export default function MarkNote({ note = '', onSave, label = 'note', className = '' }) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState('');
+  const open = () => { setDraft(note); setEditing(true); };
+  const save = () => { onSave(draft.trim()); setEditing(false); };
+
+  if (editing) {
+    return (
+      <div className={className}>
+        <textarea autoFocus value={draft} maxLength={500} rows={2} aria-label={`Your ${label}`} onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={(e) => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); save(); } else if (e.key === 'Escape') { e.stopPropagation(); setEditing(false); } }}
+          className="w-full resize-y rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2.5 py-1.5 text-sm text-[var(--r-text)] focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]" placeholder="What does this mean to you?" />
+        <div className="mt-1 flex items-center gap-3 text-xs">
+          <button type="button" onClick={save} className="font-medium text-[var(--r-accent)] hover:underline">Save</button>
+          <button type="button" onClick={() => setEditing(false)} className="text-[var(--r-sub)] hover:underline">Cancel</button>
+          <span className="ml-auto text-[10px] text-[var(--r-sub)]">{draft.length}/500</span>
+        </div>
+      </div>
+    );
+  }
+  if (!note) {
+    return <div className={className}><button type="button" onClick={open} className="text-xs text-[var(--r-accent)] hover:underline">+ Add {label}</button></div>;
+  }
+  return (
+    <div className={`${className} flex items-start gap-2`}>
+      <p className="min-w-0 flex-1 whitespace-pre-wrap rounded-lg bg-[var(--r-bg)] px-2.5 py-1.5 text-[13px] italic text-[var(--r-text)]">{note}</p>
+      <button type="button" onClick={open} aria-label={`Edit ${label}`} className="shrink-0 text-xs text-[var(--r-sub)] hover:underline">Edit</button>
+    </div>
+  );
+}

src/components/reader/MarkNote.test.jsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi, test, expect } from 'vitest';
+import MarkNote from './MarkNote.jsx';
+
+test('a note can be added, and is saved trimmed', async () => {
+  const onSave = vi.fn();
+  const user = userEvent.setup();
+  render(<MarkNote note="" onSave={onSave} label="highlight note" />);
+  await user.click(screen.getByRole('button', { name: /add highlight note/i }));
+  await user.type(screen.getByLabelText('Your highlight note'), '  Pray this daily  ');
+  await user.click(screen.getByRole('button', { name: 'Save' }));
+  expect(onSave).toHaveBeenCalledWith('Pray this daily');
+});
+
+test('an existing note is shown, and can be edited or cleared', async () => {
+  const onSave = vi.fn();
+  const user = userEvent.setup();
+  render(<MarkNote note="First thought" onSave={onSave} label="note" />);
+  expect(screen.getByText('First thought')).toBeInTheDocument();
+  await user.click(screen.getByRole('button', { name: 'Edit note' }));
+  const box = screen.getByLabelText('Your note');
+  expect(box).toHaveValue('First thought');
+  await user.clear(box);
+  await user.click(screen.getByRole('button', { name: 'Save' })); // an empty note removes it
+  expect(onSave).toHaveBeenCalledWith('');
+});
+
+test('cancelling keeps what was there; Ctrl+Enter saves', async () => {
+  const onSave = vi.fn();
+  const user = userEvent.setup();
+  render(<MarkNote note="Keep me" onSave={onSave} />);
+  await user.click(screen.getByRole('button', { name: /edit/i }));
+  await user.type(screen.getByLabelText(/your/i), ' more');
+  await user.click(screen.getByRole('button', { name: 'Cancel' }));
+  expect(onSave).not.toHaveBeenCalled();
+  expect(screen.getByText('Keep me')).toBeInTheDocument();
+  await user.click(screen.getByRole('button', { name: /edit/i }));
+  await user.type(screen.getByLabelText(/your/i), ' more{Control>}{Enter}{/Control}');
+  expect(onSave).toHaveBeenCalledWith('Keep me more');
+});

src/components/reader/MarksSheet.jsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react';
 import Sheet from './Sheet.jsx';
 import { CloseIcon } from './icons.jsx';
+import MarkNote from './MarkNote.jsx';
 import { buildMarksDocxBlob, buildMarksModel, downloadMarksFile, marksToMarkdown } from '../../utils/marksExport.js';
 import { COLOR_NAMES, COLOR_SUGGESTIONS, HIGHLIGHT_COLORS, colorTitle } from '../../utils/highlightColors.js';
 
@@ -10,6 +11,7 @@ const tabBtn = (active) => `rounded-full border px-3 py-1 text-xs font-medium ${
 
 export default function MarksSheet({
   open, onClose, initialTab = 'highlights', bookmarks, highlights, colorLabels, onSetLabel, onJump, onRemoveBookmark, onRemoveHighlight,
+  bookmarkNotes = {}, onSetHighlightNote, onSetBookmarkNote,
 }) {
   const [tab, setTab] = useState(initialTab);
   // Opening from the Highlights button shows highlights; from the Bookmarks button, bookmarks
@@ -24,7 +26,7 @@ export default function MarksSheet({
   const [exportError, setExportError] = useState('');
   const exportAs = async (kind) => {
     setExportError('');
-    const model = buildMarksModel({ highlights, bookmarks, colorLabels });
+    const model = buildMarksModel({ highlights, bookmarks, colorLabels, bookmarkNotes });
     try {
       if (kind === 'md') downloadMarksFile(new Blob([marksToMarkdown(model)], { type: 'text/markdown;charset=utf-8' }), 'highlights-and-bookmarks.md');
       else downloadMarksFile(await buildMarksDocxBlob(model), 'highlights-and-bookmarks.docx');
@@ -73,15 +75,18 @@ export default function MarksSheet({
           ) : shown.length === 0 ? (
             <p className="text-sm text-[var(--r-sub)]">Nothing highlighted in that colour yet.</p>
           ) : shown.map((h) => (
-            <div key={h.id} className="flex items-start gap-2 rounded-lg px-1 py-1.5 hover:bg-black/5">
-              <span className="mt-1 h-3 w-3 shrink-0 rounded-full border border-black/10" style={{ backgroundColor: h.color }} title={colorTitle(h.color, colorLabels)} />
-              <button type="button" onClick={() => onJump(h.book, h.chapter, h.verse)} className="min-w-0 flex-1 text-left text-sm">
-                <span className="font-medium">{h.bookName} {h.chapter}:{h.verse}</span>
-                {colorLabels[h.color] && <span className="ml-1.5 text-[11px] text-[var(--r-sub)]">{colorLabels[h.color]}</span>}
-                {h.text && <span className="mt-0.5 block font-serif text-[var(--r-sub)]">“{h.text}”</span>}
-              </button>
-              <button type="button" onClick={() => onRemoveHighlight(h)} aria-label={`Remove highlight on ${h.bookName} ${h.chapter}:${h.verse}`}
-                className="rounded p-1 text-[var(--r-sub)] hover:text-[var(--r-danger,#b42318)]"><CloseIcon /></button>
+            <div key={h.id} className="rounded-lg px-1 py-1.5 hover:bg-black/5">
+              <div className="flex items-start gap-2">
+                <span className="mt-1 h-3 w-3 shrink-0 rounded-full border border-black/10" style={{ backgroundColor: h.color }} title={colorTitle(h.color, colorLabels)} />
+                <button type="button" onClick={() => onJump(h.book, h.chapter, h.verse)} className="min-w-0 flex-1 text-left text-sm">
+                  <span className="font-medium">{h.bookName} {h.chapter}:{h.verse}</span>
+                  {colorLabels[h.color] && <span className="ml-1.5 text-[11px] text-[var(--r-sub)]">{colorLabels[h.color]}</span>}
+                  {h.text && <span className="mt-0.5 block font-serif text-[var(--r-sub)]">“{h.text}”</span>}
+                </button>
+                <button type="button" onClick={() => onRemoveHighlight(h)} aria-label={`Remove highlight on ${h.bookName} ${h.chapter}:${h.verse}`}
+                  className="rounded p-1 text-[var(--r-sub)] hover:text-[var(--r-danger,#b42318)]"><CloseIcon /></button>
+              </div>
+              {onSetHighlightNote && <MarkNote className="ml-5 mt-1" note={h.note} label={`note on ${h.bookName} ${h.chapter}:${h.verse}`} onSave={(text) => onSetHighlightNote(h.id, text)} />}
             </div>
           ))}
         </>
@@ -91,13 +96,16 @@ export default function MarksSheet({
         bookmarks.length === 0 ? (
           <p className="text-sm text-[var(--r-sub)]">No bookmarks yet. Tap a verse, then the bookmark icon, to save it here.</p>
         ) : bookmarks.map((e) => (
-          <div key={e.key} className="flex items-center gap-2 rounded-lg px-1 py-1.5 hover:bg-black/5">
-            <span className="h-3 w-3 shrink-0 rounded-full" style={{ backgroundColor: e.color }} />
-            <button type="button" onClick={() => onJump(e.bookAbbrev, e.chapter, e.verse)} className="flex-1 truncate text-left text-sm">
-              {e.bookName} {e.chapter}:{e.verse}
-            </button>
-            <button type="button" onClick={() => onRemoveBookmark(e)} aria-label={`Remove bookmark on ${e.bookName} ${e.chapter}:${e.verse}`}
-              className="rounded p-1 text-[var(--r-sub)] hover:text-[var(--r-danger,#b42318)]"><CloseIcon /></button>
+          <div key={e.key} className="rounded-lg px-1 py-1.5 hover:bg-black/5">
+            <div className="flex items-center gap-2">
+              <span className="h-3 w-3 shrink-0 rounded-full" style={{ backgroundColor: e.color }} />
+              <button type="button" onClick={() => onJump(e.bookAbbrev, e.chapter, e.verse)} className="flex-1 truncate text-left text-sm">
+                {e.bookName} {e.chapter}:{e.verse}
+              </button>
+              <button type="button" onClick={() => onRemoveBookmark(e)} aria-label={`Remove bookmark on ${e.bookName} ${e.chapter}:${e.verse}`}
+                className="rounded p-1 text-[var(--r-sub)] hover:text-[var(--r-danger,#b42318)]"><CloseIcon /></button>
+            </div>
+            {onSetBookmarkNote && <MarkNote className="ml-5 mt-1" note={bookmarkNotes[e.key]} label={`note on ${e.bookName} ${e.chapter}:${e.verse}`} onSave={(text) => onSetBookmarkNote(e.key, text)} />}
           </div>
         ))
       )}

src/components/reader/VerseSheet.jsx

@@ -11,6 +11,7 @@ import { DiffText } from './DiffText.jsx';
 import { HIGHLIGHT_COLORS, colorTitle } from '../../utils/highlightColors.js';
 import { isWholeVerse } from '../../utils/highlightSpans.js';
 import { useIqAvailable } from '../../hooks/useIq.js';
+import MarkNote from './MarkNote.jsx';
 import VerseShareImage from '../VerseShareImage.jsx';
 import IqLexicon from '../iq/IqLexicon.jsx';
 import IqStudyAids from '../iq/IqStudyAids.jsx';
@@ -155,7 +156,7 @@ function CompareTab({ book, chapter, verse, current }) {
 
 export default function VerseSheet({
   verse, book, bookName, chapter, translation, words, crossRefs, crossRefsLoading, onLoadCrossRefs,
-  bookmarkColor, onToggleBookmark, onCycleColor, onJump, onClose, request,
+  bookmarkColor, onToggleBookmark, onCycleColor, bookmarkNote = '', onSetBookmarkNote, onSetHighlightNote, studiesHere = [], onOpenStudy, onPray, onJump, onClose, request,
   verseHighlights = [], colorLabels = {}, onHighlightVerse, onClearVerseHighlights, panelRef, resizeHandle,
 }) {
   const iqOn = useIqAvailable();
@@ -204,6 +205,11 @@ export default function VerseSheet({
               <span className="block h-4 w-4 rounded-full border border-black/10" style={{ backgroundColor: bookmarkColor }} />
             </button>
           )}
+          {onPray && (
+            <button type="button" onClick={() => onPray(`${bookName} ${chapter}:${verse.number}`)} className={`${actionBtn} text-xs`} aria-label="Pray about this verse" title="Add a prayer about this verse">
+              Pray
+            </button>
+          )}
           <button type="button" onClick={() => setImageOpen((o) => !o)} aria-pressed={imageOpen} className={`${actionBtn} text-xs`} aria-label="Share verse as image" title="Share as image">
             Image
           </button>
@@ -240,6 +246,40 @@ export default function VerseSheet({
           <span className="basis-full text-[11px] text-[var(--r-sub)]">Or select words in the text to highlight just those.</span>
         </div>
       )}
+      {studiesHere.length > 0 && onOpenStudy && (
+        <div className="mb-3 rounded-xl border border-[var(--r-line)] p-3" aria-label="In your studies">
+          <p className="mb-1.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">You’ve studied this</p>
+          <ul className="space-y-2">
+            {studiesHere.slice(0, 5).map((e) => (
+              <li key={`${e.projectId}/${e.chunkId}`} className="flex items-start justify-between gap-3 text-sm">
+                <span className="min-w-0">
+                  <span className="font-medium">{e.title}</span> <span className="text-xs text-[var(--r-sub)]">{e.ref}</span>
+                  {e.snippet && <span className="mt-0.5 block truncate font-serif text-[13px] text-[var(--r-sub)]">{e.snippet}</span>}
+                </span>
+                <button type="button" onClick={() => onOpenStudy(e.projectId, e.chunkId)} className="shrink-0 text-xs font-medium text-[var(--r-accent)] hover:underline">Open</button>
+              </li>
+            ))}
+          </ul>
+          {studiesHere.length > 5 && <p className="mt-1.5 text-[11px] text-[var(--r-sub)]">and {studiesHere.length - 5} more</p>}
+        </div>
+      )}
+      {(bookmarkColor && onSetBookmarkNote) || (verseHighlights.length > 0 && onSetHighlightNote) ? (
+        <div className="mb-3 space-y-2 rounded-xl border border-[var(--r-line)] p-3" aria-label="Your notes on this verse">
+          <p className="text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Your notes</p>
+          {bookmarkColor && onSetBookmarkNote && (
+            <div>
+              <p className="flex items-center gap-1.5 text-xs text-[var(--r-sub)]"><span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: bookmarkColor }} />Bookmark</p>
+              <MarkNote note={bookmarkNote} label="bookmark note" onSave={onSetBookmarkNote} className="mt-1" />
+            </div>
+          )}
+          {onSetHighlightNote && verseHighlights.map((h) => (
+            <div key={h.id}>
+              <p className="flex items-center gap-1.5 truncate text-xs text-[var(--r-sub)]"><span className="h-2.5 w-2.5 shrink-0 rounded-full border border-black/10" style={{ backgroundColor: h.color }} /><span className="truncate">{isWholeVerse(h, verse.text) ? 'Whole verse' : `“${h.text}”`}</span></p>
+              <MarkNote note={h.note} label="highlight note" onSave={(text) => onSetHighlightNote(h.id, text)} className="mt-1" />
+            </div>
+          ))}
+        </div>
+      ) : null}
       <div role="tablist" aria-label="About this verse" className="mb-3 flex gap-1.5 overflow-x-auto pb-1">
         {TABS.map(([id, label]) => (
           <button key={id} type="button" role="tab" aria-selected={tab === id} onClick={() => setTab(id)}

src/components/reader/VerseSheetStudies.test.jsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi, test, expect } from 'vitest';
+import VerseSheet from './VerseSheet.jsx';
+
+vi.mock('../StudyPanel.jsx', () => ({ CommentaryTab: () => null, PeoplePlacesTab: () => null }));
+
+const base = {
+  verse: { number: 1, text: 'Paul, a servant of God.' }, book: 'TIT', bookName: 'Titus', chapter: 1, translation: 'BSB',
+  onToggleBookmark: () => {}, onCycleColor: () => {}, onJump: () => {}, onClose: () => {}, onLoadCrossRefs: () => {},
+};
+const here = [{ projectId: 'p1', chunkId: 'a', title: 'Titus Notes', ref: 'Titus 1:1–4', snippet: 'Paul calls himself a servant' }];
+
+test('the verse panel lists your studies that cover the verse, and opens one at that chunk', async () => {
+  const onOpenStudy = vi.fn();
+  render(<VerseSheet {...base} studiesHere={here} onOpenStudy={onOpenStudy} />);
+  expect(screen.getByText('You’ve studied this')).toBeInTheDocument();
+  expect(screen.getByText('Titus Notes')).toBeInTheDocument();
+  expect(screen.getByText('Paul calls himself a servant')).toBeInTheDocument();
+  await userEvent.setup().click(screen.getByRole('button', { name: 'Open' }));
+  expect(onOpenStudy).toHaveBeenCalledWith('p1', 'a');
+});
+
+test('nothing is shown when no study covers the verse', () => {
+  render(<VerseSheet {...base} studiesHere={[]} onOpenStudy={() => {}} />);
+  expect(screen.queryByText('You’ve studied this')).toBeNull();
+});
+
+test('your notes on the verse show up in the panel and can be added', async () => {
+  const onSetBookmarkNote = vi.fn();
+  const onSetHighlightNote = vi.fn();
+  const user = userEvent.setup();
+  render(<VerseSheet {...base} bookmarkColor="#fef08a" bookmarkNote="Memorise" onSetBookmarkNote={onSetBookmarkNote}
+    verseHighlights={[{ id: 'h1', color: '#bbf7d0', startOffset: 0, endOffset: 4, text: 'Paul' }]} onSetHighlightNote={onSetHighlightNote} />);
+  expect(screen.getByText('Memorise')).toBeInTheDocument();
+  expect(screen.getByText('“Paul”')).toBeInTheDocument();
+  await user.click(screen.getByRole('button', { name: /add highlight note/i }));
+  await user.type(screen.getByLabelText('Your highlight note'), 'Who he is');
+  await user.click(screen.getByRole('button', { name: 'Save' }));
+  expect(onSetHighlightNote).toHaveBeenCalledWith('h1', 'Who he is');
+});