Load translation notes by visible chapter

src/App.tsx

@@ -4,6 +4,7 @@ import {
   getCommentaryForVerse,
   getDictionaryEntriesForTerms,
   getLibraryState,
+  getTranslationNotesForVerses,
   getTranslations,
   searchVerses,
 } from './studyClient'
@@ -56,6 +57,16 @@ function reference(verse: Verse) {
   return `${verse.book} ${verse.chapter}:${verse.verse}`
 }
 
+function replaceChangedVerses(verses: Verse[], hydrate: (verse: Verse) => Verse) {
+  let changed = false
+  const next = verses.map((verse) => {
+    const hydrated = hydrate(verse)
+    if (hydrated !== verse) changed = true
+    return hydrated
+  })
+  return changed ? next : verses
+}
+
 function createSession(title = 'Study Session', baseTranslation = defaultTranslationId): StudySession {
   const now = new Date().toISOString()
   const id =
@@ -268,6 +279,7 @@ function App() {
   const pageMotionTimeout = useRef<number | null>(null)
   const notesDragOpenTimeout = useRef<number | null>(null)
   const readerRef = useRef<HTMLElement | null>(null)
+  const hydratedNoteChapters = useRef(new Set<string>())
 
   async function loadLibrary(translationId = activeSession?.baseTranslation ?? defaultTranslationId) {
     setError(null)
@@ -643,6 +655,47 @@ function App() {
       .slice(start, start + pageSize)
       .filter((verse) => verse.book === book)
   }, [libraryVerses, pageStartId, selectedVerse, verses])
+
+  useEffect(() => {
+    if (!activeSession?.baseTranslation || pageVerses.length === 0) return
+    const chapterKeys = [
+      ...new Set(
+        pageVerses.map(
+          (verse) => `${activeSession.baseTranslation}:${verse.book}:${verse.chapter}`,
+        ),
+      ),
+    ]
+    const unloadedChapterKeys = chapterKeys.filter(
+      (chapterKey) => !hydratedNoteChapters.current.has(chapterKey),
+    )
+    if (unloadedChapterKeys.length === 0) return
+    for (const chapterKey of unloadedChapterKeys) hydratedNoteChapters.current.add(chapterKey)
+
+    let cancelled = false
+    getTranslationNotesForVerses(activeSession.baseTranslation, pageVerses)
+      .then((notesByVerse) => {
+        if (cancelled || notesByVerse.size === 0) return
+        const hydrate = (verse: Verse) => {
+          const notes = notesByVerse.get(String(verse.id))
+          if (!notes) return verse
+          if (
+            (verse.footnotes?.length ?? 0) === notes.footnotes.length &&
+            (verse.studyNotes?.length ?? 0) === notes.studyNotes.length
+          ) {
+            return verse
+          }
+          return { ...verse, footnotes: notes.footnotes, studyNotes: notes.studyNotes }
+        }
+        setLibraryVerses((current) => replaceChangedVerses(current, hydrate))
+        setVerses((current) => replaceChangedVerses(current, hydrate))
+      })
+      .catch((reason) => setError(String(reason)))
+
+    return () => {
+      cancelled = true
+    }
+  }, [activeSession?.baseTranslation, pageVerses])
+
   const pageRange = pageVerses.length
     ? `${reference(pageVerses[0])} - ${reference(pageVerses[pageVerses.length - 1])}`
     : 'No page loaded'