Move study editor state into StudyPage and hooks

- StudyPage owns layout/tabs/collapsed sections, tags, DOCX script import, chunk navigation, keyboard shortcuts, and the selected-chunk values derived from the project. - useStudyResources: commentary + interlinear for the selected chunk's chapter. These now load only on the study page (they previously also fetched while on Setup). - useCrossRefs: typed refs, dataset suggestions, verse text. - useWordStudy: word entries, Strong's lookups, suggestion picker. - Fix: study-page messages (word suggestions, DOCX import, lookups) set a status that only SetupPage displayed, so they were never seen. They now show as a toast on the study page. - copyVerse moves into ReaderPage. - Tests: toast, arrow-key navigation, cross-refs, tags. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-22 14:59:22 -04:00
1 parent 4b14b3fbe6
commit bf02e071fa
@@ -1,68 +0,0 @@
-# Study App Improvement Suggestions
-
-_Refreshed 2026-07-06 (multiple passes) — items already shipped have been removed; this reflects what's actually still open. Recent additions: multi-user auth with per-account data scoping, TOTP 2FA with backup codes, podcast terminology generalized to "Session" for study-only users (with a configurable podcast/show name), auto-restore on new devices, study templates (richer OIA guiding prompts), PDF/print export, Markdown export, a passage breadcrumb, whole-Bible search, better bookmark UX (always-visible SVG icons + a jump-to panel), read-only share links, and an admin panel (`server/auth.js` `ADMIN_EMAIL`, hardcoded to the site owner's account) showing every user/project with view/delete controls._
-
-## Features
-
-### Study Tools
- **Bible comparison mode** — show two translations side-by-side. `availableTranslations` is already fetched and a translation is already selectable per project, but only one renders at a time — no split/parallel view
- **Verse-level notes** — annotations are still chunk-level only (OIA fields); no way to attach a note to a single verse within a chunk
- **Progress tracking** — no "in progress"/"complete" marker per chunk and no progress bar on the home project card
-
-### Export / Sharing
- **Episode length estimate** — Final Script field exists per chunk; a word-count-based "~X minutes read aloud" estimate would help podcast planning
- **Share link is single-use-case** — one share token per project, all-or-nothing (whole project, all chunks). A per-chunk or per-chapter share might be worth it for someone who only wants to share one episode's notes rather than the whole series
-
-### Chunk Builder (Setup Page)
- **Drag-to-select verses** — still click-then-shift-click; no click-and-drag range selection
- **Auto-chunk** — no "split by paragraph/section" button; every chunk boundary is manual or typed
-
---
-
-## UX / UI
-
-### Study Page
-
-### Reader
- **Bookmark color picker is still an emoji button** (🎨) — the bookmark/copy icons became proper SVGs, but color-cycling didn't get the same treatment
-
-### Home Page
- Search/filter/sort/rename are all implemented — nothing open here currently
-
---
-
-## Code Architecture
-
-### State Management
- **`App.jsx` is now ~5,700+ lines** — still one component. Splitting into `pages/HomePage.jsx`, `pages/SetupPage.jsx`, `pages/StudyPage.jsx`, `pages/BibleReaderPage.jsx`, plus extracted hooks (`useProject`, `useGreekLookup`, `useAutosave`) is more valuable now than ever given the continued size growth
-
-### Sync / Persistence
- No rate-limiting on `/api/auth/*` — a determined attacker could brute-force a weak password or 2FA code; worth adding if this is ever reachable beyond a small trusted group
- **Conflict resolution is still last-write-wins** — only `lastEdited` timestamps are compared; no "which version do you want to keep?" UI
- **Offline-first** — still no service worker; app requires a live connection to `bible.helloao.org` for chapter/audio/commentary loads with no cached fallback if that API is down
-
-### Security (OWASP)
- **No input validation on server** — still no max-length/character validation on `id`/`title` in `server/index.js`
- **CORS** — still no CORS headers configured
- **Shared HTML view is sandboxed but not escaped** — `buildExportHtml` interpolates OIA notes into HTML without escaping `<`/`>`/`&`; the public share view mitigates this by rendering in a `sandbox="allow-popups"` iframe (no `allow-scripts`, so injected `<script>`/event handlers can't execute), but the underlying string-building still isn't defense-in-depth. Worth properly HTML-escaping user text in `buildExportHtml` itself
-
---
-
-## Performance
-
- **Verse data stored in project JSON** — still true; full verse text is saved per chapter in both localStorage and SQLite
- **Hardcoded external API, no fallback** — audio and commentary both call `bible.helloao.org` directly with no retry UI if the free API is briefly down; whole-Bible search now adds a third hard dependency on this API (`/complete.json`)
-
---
-
-## Testing
-
- Missing: autosave debounce behavior, DOCX session-list import, cross-ref auto-suggest, commentary loading, and no coverage yet for the newer share-link/2FA/whole-Bible-search flows (all verified manually in-browser instead)
-
---
-
-## Developer Experience
-
- **No ESLint config** — still true; no `.eslintrc*` or `eslint.config.*` in the repo
- **No TypeScript** — still true
- **No `docker-compose.yml`** — still true; Dockerfile exists but no one-command local dev with server + SQLite volume
@@ -6,28 +6,12 @@ import { useBibleReader } from './hooks/useBibleReader.js';
 import { useProjectLibrary } from './hooks/useProjectLibrary.js';
 import { useReadingPlan } from './hooks/useReadingPlan.js';
 import { useSharedView } from './hooks/useSharedView.js';
-import {
-  loadNtGloss,
-  loadNtConcordance,
-  loadHebrewDict,
-  loadGreekDict,
-  GREEK_FUNCTION_WORDS,
-  shortHebrewGloss,
-  ENGLISH_STOP_WORDS,
-  buildGreekDefinitionHtml,
-  fetchBollsDefinition,
-  formatCrossRef,
-} from './utils/wordStudy.js';
 import HomePage from './pages/HomePage.jsx';

 import {
  bookOptions,
-  NT_BOOK_NUMBER,
  makeId,
-  getChunkVerseEntries,
-  chunkSpansNextChapter,
  buildExportHtml,
-  extractPartOfSpeech,
  parseBibleChapter,
  loadProjectIndex,
  switchStorageUser,
@@ -36,9 +20,6 @@ import {
  saveProjectToStorage,
  migrateOldStorageKeys,
 } from './utils/projectStorage.js';
-import {
-  parseCrossRefString,
-} from './utils/importParsers.js';

 import {
  saveRemoteProject,
@@ -78,7 +59,6 @@ const App = () => {
  const [projectIndex, setProjectIndex] = useState([]);
  const [activeChapterIndex, setActiveChapterIndex] = useState(0);
  const [showAddChapterForm, setShowAddChapterForm] = useState(false);
-  const [crossRefInput, setCrossRefInput] = useState('');
  const [saveStatus, setSaveStatus] = useState('');
  const [rangeStart, setRangeStart] = useState(null);
  const [rangeEnd, setRangeEnd] = useState(null);
@@ -92,11 +72,6 @@ const App = () => {
  const [typedChunkBulk, setTypedChunkBulk] = useState('');
  const saveTimerRef = useRef(null);
  const [syncStatus, setSyncStatus] = useState('');   // '' | 'syncing' | 'synced' | 'error'
-  const [suggestingGreekForChunkId, setSuggestingGreekForChunkId] = useState(null);
-  const [suggestingHebrewForChunkId, setSuggestingHebrewForChunkId] = useState(null);
-  // suggestModal: null | { chunkId, words: [{ strongKey, lexeme, translit, def }] }
-  const [suggestModal, setSuggestModal] = useState(null);
-  const [suggestSelection, setSuggestSelection] = useState(new Set());
  const reader = useBibleReader(currentPage);
  const audio = useAudio(reader.readerBookAbbrev, reader.readerChapter);
  const readingPlan = useReadingPlan();
@@ -122,64 +97,11 @@ const App = () => {
    setCurrentPage,
    setActiveChapterIndex,
  });
-  const [studyLayout, setStudyLayout] = useState(() => {
-    const saved = localStorage.getItem('studyLayout');
-    return saved === 'stacked' ? 'stacked' : 'split'; // 'annotate' (Draw) was removed
-  }); // 'stacked' | 'split'
-  const [activeStudyTab, setActiveStudyTab] = useState(
-    () => localStorage.getItem('activeStudyTab') || 'notes',
-  );
-  const [mobileStudyTab, setMobileStudyTab] = useState('scripture');
-
-  useEffect(() => {
-    localStorage.setItem('studyLayout', studyLayout);
-  }, [studyLayout]);
-
-  useEffect(() => {
-    localStorage.setItem('activeStudyTab', activeStudyTab);
-  }, [activeStudyTab]);
-
  const [verseSearch, setVerseSearch] = useState('');
-  const [collapsedSections, setCollapsedSections] = useState({});
-  const [commentarySource, setCommentarySource] = useState('matthew-henry');
-  const [commentaryData, setCommentaryData] = useState(null); // { content: [...] } for current chapter
-  const [commentaryLoading, setCommentaryLoading] = useState(false);
-  const [commentaryError, setCommentaryError] = useState('');
-  const _commentaryCacheRef = useRef({});
-  const [interlinearData, setInterlinearData] = useState(null);
-  const [interlinearLoading, setInterlinearLoading] = useState(false);
-  const [interlinearError, setInterlinearError] = useState('');
-  const _interlinearCacheRef = useRef({});
-
-  const loadInterlinearChapter = async (bookAbbrev, chapterNumber) => {
-    if (_interlinearCacheRef.current[bookAbbrev]) return _interlinearCacheRef.current[bookAbbrev];
-    const res = await fetch(`/interlinear/${bookAbbrev}.json`);
-    if (!res.ok) throw new Error('No interlinear data for this book.');
-    const data = await res.json();
-    _interlinearCacheRef.current[bookAbbrev] = data;
-    return data;
-  };
-
-  const loadCommentaryChapter = async (commentaryId, bookAbbrev, chapterNumber) => {
-    const cacheKey = `${commentaryId}/${bookAbbrev}/${chapterNumber}`;
-    if (_commentaryCacheRef.current[cacheKey]) return _commentaryCacheRef.current[cacheKey];
-    const res = await fetch(`https://bible.helloao.org/api/c/${commentaryId}/${bookAbbrev}/${chapterNumber}.json`);
-    const contentType = res.headers.get('content-type') || '';
-    if (!res.ok || !contentType.includes('json')) throw new Error(`No ${commentaryId} commentary for this chapter.`);
-    const data = await res.json();
-    _commentaryCacheRef.current[cacheKey] = data;
-    return data;
-  };
-
  const openBibleReader = () => {
    setCurrentPage('reader');
  };

-  const copyVerse = (bookName, chapterNum, verseNum, text) => {
-    const citation = `${bookName} ${chapterNum}:${verseNum} BSB — ${text}`;
-    navigator.clipboard?.writeText(citation);
-  };
-
  // ---------------------------------------------------------------------------
  // Startup: migrate old keys and load index
  // ---------------------------------------------------------------------------
@@ -197,88 +119,8 @@ const App = () => {
    }
  }, [setup.book, setup.chapter, titleEdited]);

-  // Reset cross-ref input when selected chunk changes
  const allChunks = project ? project.chapters.flatMap((ch) => ch.chunks) : [];
  const activeChapter = project?.chapters[activeChapterIndex] ?? null;
-  const selectedChunk = allChunks.find((c) => c.id === project?.selectedChunkId) ?? allChunks[0] ?? null;
-  const selectedChunkChapterIndex = selectedChunk
-    ? project.chapters.findIndex((ch) => ch.chunks.some((c) => c.id === selectedChunk.id))
-    : -1;
-
-  useEffect(() => {
-    if (collapsedSections.commentary) return;
-    if (selectedChunkChapterIndex < 0) return;
-    const chapter = project.chapters[selectedChunkChapterIndex];
-    setCommentaryLoading(true);
-    setCommentaryError('');
-    loadCommentaryChapter(commentarySource, chapter.bookAbbrev, chapter.chapter)
-      .then((data) => setCommentaryData(data))
-      .catch((err) => {
-        setCommentaryData(null);
-        setCommentaryError(err.message);
-      })
-      .finally(() => setCommentaryLoading(false));
-  }, [commentarySource, selectedChunk?.id, selectedChunkChapterIndex, collapsedSections.commentary]);
-
-  useEffect(() => {
-    if (collapsedSections.interlinear) return;
-    if (selectedChunkChapterIndex < 0) return;
-    const chapter = project.chapters[selectedChunkChapterIndex];
-    setInterlinearLoading(true);
-    setInterlinearError('');
-    loadInterlinearChapter(chapter.bookAbbrev, chapter.chapter)
-      .then((data) => setInterlinearData(data?.[String(chapter.chapter)] ?? null))
-      .catch((err) => {
-        setInterlinearData(null);
-        setInterlinearError(err.message);
-      })
-      .finally(() => setInterlinearLoading(false));
-  }, [selectedChunk?.id, selectedChunkChapterIndex, collapsedSections.interlinear]);
-
-  useEffect(() => {
-    setCrossRefSuggestions([]);
-    setTagInput('');
-  }, [selectedChunk?.id]);
-  const selectedChunkChapter = selectedChunkChapterIndex >= 0
-    ? project.chapters[selectedChunkChapterIndex]
-    : null;
-  const selectedChunkVerses = selectedChunk
-    ? getChunkVerseEntries(project, selectedChunkChapterIndex, selectedChunk)
-    : [];
-  const selectedChunkGlobalIndex = allChunks.findIndex((c) => c.id === project?.selectedChunkId);
-
-  useEffect(() => {
-    setCrossRefInput('');
-  }, [project?.selectedChunkId]);
-
-  // Keyboard shortcuts: arrow keys navigate chunks on the study page, Esc closes modals
-  useEffect(() => {
-    const handleKeyDown = (event) => {
-      const tag = event.target?.tagName;
-      const isEditable = tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || event.target?.isContentEditable;
-
-      if (event.key === 'Escape') {
-        if (suggestModal) {
-          setSuggestModal(null);
-          setSuggestSelection(new Set());
-        }
-        return;
-      }
-
-      if (currentPage !== 'study' || isEditable || suggestModal) return;
-
-      if (event.key === 'ArrowLeft') {
-        event.preventDefault();
-        goToPreviousChunk();
-      } else if (event.key === 'ArrowRight') {
-        event.preventDefault();
-        goToNextChunk();
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [currentPage, suggestModal, selectedChunkGlobalIndex, allChunks]);
-
  // Autosave
  useEffect(() => {
    if (!project) return;
@@ -406,26 +248,6 @@ const App = () => {
    setCurrentPage('study');
  };

-  // ---------------------------------------------------------------------------
-  // Chunk navigation
-  // ---------------------------------------------------------------------------
-
-  const goToPreviousChunk = () => {
-    if (selectedChunkGlobalIndex <= 0) return;
-    updateProject((current) => ({
-      ...current,
-      selectedChunkId: allChunks[selectedChunkGlobalIndex - 1].id,
-    }));
-  };
-
-  const goToNextChunk = () => {
-    if (selectedChunkGlobalIndex < 0 || selectedChunkGlobalIndex >= allChunks.length - 1) return;
-    updateProject((current) => ({
-      ...current,
-      selectedChunkId: allChunks[selectedChunkGlobalIndex + 1].id,
-    }));
-  };
-
  // ---------------------------------------------------------------------------
  // Chunk CRUD (operates on activeChapter in setup view, on selectedChunkChapter in study)
  // ---------------------------------------------------------------------------
@@ -777,455 +599,6 @@ const App = () => {
    });
  };

-  // ---------------------------------------------------------------------------
-  // Cross-references
-  // ---------------------------------------------------------------------------
-
-  const addCrossRef = (chunkId) => {
-    const ref = crossRefInput.trim();
-    if (!ref) return;
-    updateChunk(chunkId, {
-      crossReferences: [...(selectedChunk?.crossReferences ?? []), ref],
-    });
-    setCrossRefInput('');
-  };
-
-  const removeCrossRef = (chunkId, ref) => {
-    updateChunk(chunkId, {
-      crossReferences: (selectedChunk?.crossReferences ?? []).filter((r) => r !== ref),
-    });
-  };
-
-  const [tagInput, setTagInput] = useState('');
-
-  const addTag = (chunkId) => {
-    const tag = tagInput.trim();
-    if (!tag) return;
-    const existing = selectedChunk?.tags ?? [];
-    if (existing.some((t) => t.toLowerCase() === tag.toLowerCase())) {
-      setTagInput('');
-      return;
-    }
-    updateChunk(chunkId, { tags: [...existing, tag] });
-    setTagInput('');
-  };
-
-  const removeTag = (chunkId, tag) => {
-    updateChunk(chunkId, {
-      tags: (selectedChunk?.tags ?? []).filter((t) => t !== tag),
-    });
-  };
-
-  const importFinalScriptDocx = async (chunkId, file) => {
-    if (!file) return;
-    try {
-      const arrayBuffer = await file.arrayBuffer();
-      const { default: mammoth } = await import('mammoth');
-      const { value } = await mammoth.extractRawText({ arrayBuffer });
-      updateChunk(chunkId, { finalScript: value.trim() });
-      setStatusMessage('Imported script from DOCX.');
-      window.setTimeout(() => setStatusMessage(''), 1800);
-    } catch (err) {
-      setStatusMessage('Could not read that DOCX file.');
-      window.setTimeout(() => setStatusMessage(''), 1800);
-    }
-  };
-
-  const [suggestingCrossRefs, setSuggestingCrossRefs] = useState(false);
-  const [crossRefSuggestions, setCrossRefSuggestions] = useState([]);
-  const _crossRefDatasetCacheRef = useRef({});
-
-  const suggestCrossRefsForChunk = async (chunkId) => {
-    const chunk = allChunks.find((c) => c.id === chunkId);
-    const chapterIndex = project?.chapters.findIndex((ch) =>
-      ch.chunks.some((c) => c.id === chunkId)
-    ) ?? -1;
-    const chapter = chapterIndex >= 0 ? project.chapters[chapterIndex] : null;
-    if (!chunk || !chapter) return;
-
-    setSuggestingCrossRefs(true);
-    setCrossRefSuggestions([]);
-    try {
-      const cacheKey = `${chapter.bookAbbrev}/${chapter.chapter}`;
-      let chapterData = _crossRefDatasetCacheRef.current[cacheKey];
-      if (!chapterData) {
-        const res = await fetch(`https://bible.helloao.org/api/d/open-cross-ref/${chapter.bookAbbrev}/${chapter.chapter}.json`);
-        if (!res.ok) throw new Error('No cross-reference data found for this chapter.');
-        chapterData = await res.json();
-        _crossRefDatasetCacheRef.current[cacheKey] = chapterData;
-      }
-
-      const verseEntries = (chapterData.chapter?.content ?? []).filter(
-        (item) => item.verse >= chunk.startVerse
-          && item.verse <= chunk.endVerse,
-      );
-
-      const existing = new Set(chunk.crossReferences ?? []);
-      const seen = new Set();
-      const refs = [];
-      for (const v of verseEntries) {
-        for (const ref of v.references ?? []) {
-          const formatted = formatCrossRef(ref);
-          if (existing.has(formatted) || seen.has(formatted)) continue;
-          seen.add(formatted);
-          refs.push({ formatted, score: ref.score ?? 0 });
-        }
-      }
-
-      refs.sort((a, b) => b.score - a.score);
-      if (refs.length === 0) {
-        setStatusMessage('No new cross-reference suggestions found for this passage.');
-        window.setTimeout(() => setStatusMessage(''), 2500);
-        return;
-      }
-      setCrossRefSuggestions(refs.slice(0, 12).map((r) => r.formatted));
-    } catch (err) {
-      setStatusMessage(`Cross-reference suggest failed: ${err.message}`);
-      window.setTimeout(() => setStatusMessage(''), 3000);
-    } finally {
-      setSuggestingCrossRefs(false);
-    }
-  };
-
-  const _verseChapterCacheRef = useRef({});
-
-  const loadVerseText = async (refString) => {
-    const parsed = parseCrossRefString(refString);
-    if (!parsed) throw new Error('Could not parse reference.');
-    const translation = project?.translation ?? 'BSB';
-    const cacheKey = `${translation}/${parsed.bookAbbrev}/${parsed.chapter}`;
-    let verses = _verseChapterCacheRef.current[cacheKey];
-    if (!verses) {
-      const res = await fetch(`https://bible.helloao.org/api/${translation}/${parsed.bookAbbrev}/${parsed.chapter}.json`);
-      if (!res.ok) throw new Error('Could not load verse text.');
-      const data = await res.json();
-      verses = parseBibleChapter(data);
-      _verseChapterCacheRef.current[cacheKey] = verses;
-    }
-    const text = verses
-      .filter((v) => v.number >= parsed.verse && v.number <= parsed.endVerse)
-      .map((v) => v.text)
-      .join(' ');
-    return text;
-  };
-
-  const addSuggestedCrossRef = (chunkId, ref) => {
-    updateChunk(chunkId, {
-      crossReferences: [...(selectedChunk?.crossReferences ?? []), ref],
-    });
-    setCrossRefSuggestions((cur) => cur.filter((r) => r !== ref));
-  };
-
-  // ---------------------------------------------------------------------------
-  // Greek word helpers
-  // ---------------------------------------------------------------------------
-
-  const updateChunkWord = (chunkId, wordId, patch) => {
-    updateProject((current) => ({
-      ...current,
-      chapters: current.chapters.map((ch) => ({
-        ...ch,
-        chunks: ch.chunks.map((chunk) => {
-          if (chunk.id !== chunkId) return chunk;
-          return {
-            ...chunk,
-            greekWords: chunk.greekWords.map((word) =>
-              word.id === wordId ? { ...word, ...patch } : word,
-            ),
-          };
-        }),
-      })),
-    }));
-  };
-
-  const addGreekWord = (chunkId) => {
-    const newWord = {
-      id: makeId(),
-      query: '',
-      strongNumber: '',
-      englishGloss: '',
-      lexeme: '',
-      transliteration: '',
-      partOfSpeech: '',
-      shortDefinition: '',
-      definitionHtml: '',
-      loading: false,
-    };
-    updateProject((current) => ({
-      ...current,
-      chapters: current.chapters.map((ch) => ({
-        ...ch,
-        chunks: ch.chunks.map((chunk) =>
-          chunk.id === chunkId
-            ? { ...chunk, greekWords: [...chunk.greekWords, newWord] }
-            : chunk,
-        ),
-      })),
-    }));
-  };
-
-  const removeGreekWord = (chunkId, wordId) => {
-    updateProject((current) => ({
-      ...current,
-      chapters: current.chapters.map((ch) => ({
-        ...ch,
-        chunks: ch.chunks.map((chunk) =>
-          chunk.id === chunkId
-            ? { ...chunk, greekWords: chunk.greekWords.filter((w) => w.id !== wordId) }
-            : chunk,
-        ),
-      })),
-    }));
-  };
-
-  const suggestGreekWordsForChunk = async (chunkId) => {
-    const chunk = allChunks.find((c) => c.id === chunkId);
-    const chapterIndex = project?.chapters.findIndex((ch) =>
-      ch.chunks.some((c) => c.id === chunkId)
-    ) ?? -1;
-    const chapter = chapterIndex >= 0 ? project.chapters[chapterIndex] : null;
-    if (!chunk || !chapter) return;
-    if (!NT_BOOK_NUMBER[chapter.bookAbbrev]) {
-      setStatusMessage('Auto-suggest only works for New Testament books.');
-      window.setTimeout(() => setStatusMessage(''), 2500);
-      return;
-    }
-    setSuggestingGreekForChunkId(chunkId);
-    try {
-      const [concordance, dict, gloss] = await Promise.all([loadNtConcordance(), loadGreekDict(), loadNtGloss()]);
-      const bookData = concordance[chapter.bookAbbrev] ?? {};
-      const chapterData = bookData[chapter.chapter] ?? {};
-      const nextChapterData = chunkSpansNextChapter(project, chapterIndex, chunk)
-        ? bookData[project.chapters[chapterIndex + 1].chapter] ?? {}
-        : {};
-
-      const strongsInRange = new Set();
-      for (let v = chunk.startVerse; v <= chunk.endVerse; v++) {
-        for (const s of chapterData[String(v)] ?? []) strongsInRange.add(s);
-      }
-      if (chunkSpansNextChapter(project, chapterIndex, chunk)) {
-        for (let v = 1; v <= chunk.spilloverEndVerse; v++) {
-          for (const s of nextChapterData[String(v)] ?? []) strongsInRange.add(s);
-        }
-      }
-
-      if (strongsInRange.size === 0) {
-        setStatusMessage("No Strong's data found for this passage.");
-        window.setTimeout(() => setStatusMessage(''), 3000);
-        return;
-      }
-
-      const existingNumbers = new Set(
-        chunk.greekWords.map((w) => w.strongNumber.toUpperCase()).filter(Boolean)
-      );
-
-      const modalWords = [];
-      for (const strongKey of strongsInRange) {
-        if (existingNumbers.has(strongKey)) continue;
-        const entry = dict[strongKey];
-        modalWords.push({
-          strongKey,
-          lexeme: entry?.lemma ?? '',
-          translit: entry?.translit ?? '',
-          def: gloss[strongKey] ?? entry?.kjv_def ?? 'No definition found.',
-          entry,
-        });
-      }
-
-      if (modalWords.length === 0) {
-        setStatusMessage('All words from this passage are already added.');
-        window.setTimeout(() => setStatusMessage(''), 2000);
-        return;
-      }
-
-      // Pre-select content words; pre-uncheck known function words
-      const preSelected = new Set(
-        modalWords
-          .filter((w) => !GREEK_FUNCTION_WORDS.has(w.strongKey))
-          .map((w) => w.strongKey)
-      );
-      setSuggestModal({
-        chunkId,
-        language: 'greek',
-        helperText: "Content words are pre-checked. Uncheck any you don't need.",
-        words: modalWords,
-      });
-      setSuggestSelection(preSelected);
-    } catch (err) {
-      setStatusMessage(`Suggest failed: ${err.message}`);
-      window.setTimeout(() => setStatusMessage(''), 3000);
-    } finally {
-      setSuggestingGreekForChunkId(null);
-    }
-  };
-
-  const suggestHebrewWordsForChunk = async (chunkId) => {
-    const chunk = allChunks.find((c) => c.id === chunkId);
-    const chapterIndex = project?.chapters.findIndex((ch) =>
-      ch.chunks.some((c) => c.id === chunkId)
-    ) ?? -1;
-    const chapter = chapterIndex >= 0 ? project.chapters[chapterIndex] : null;
-    if (!chunk || !chapter) return;
-    if (NT_BOOK_NUMBER[chapter.bookAbbrev]) {
-      setStatusMessage('Hebrew suggestions are for Old Testament passages.');
-      window.setTimeout(() => setStatusMessage(''), 2500);
-      return;
-    }
-
-    setSuggestingHebrewForChunkId(chunkId);
-    try {
-      const dict = await loadHebrewDict();
-      const versesInChunk = getChunkVerseEntries(project, chapterIndex, chunk)
-        .map((v) => v.text)
-        .join(' ')
-        .toLowerCase();
-
-      const candidateWords = Array.from(new Set(
-        versesInChunk
-          .replace(/[^a-z\s]/g, ' ')
-          .split(/\s+/)
-          .map((w) => w.trim())
-          .filter((w) => w.length >= 4 && !ENGLISH_STOP_WORDS.has(w)),
-      ));
-
-      if (candidateWords.length === 0) {
-        setStatusMessage('No Hebrew suggestion candidates found in this passage.');
-        window.setTimeout(() => setStatusMessage(''), 2500);
-        return;
-      }
-
-      const existingNumbers = new Set(
-        chunk.greekWords.map((w) => (w.strongNumber || '').toUpperCase()).filter(Boolean)
-      );
-
-      const seen = new Set();
-      const modalWords = [];
-      const entries = Object.entries(dict);
-
-      for (const token of candidateWords) {
-        const match = entries.find(([, entry]) => {
-          const defs = `${entry.kjv_def || ''} ${entry.strongs_def || ''}`.toLowerCase();
-          return defs.split(/[,;()\s]+/).includes(token);
-        });
-        if (!match) continue;
-        const [strongKey, entry] = match;
-        if (!/^H\d+$/i.test(strongKey)) continue;
-        const normalized = strongKey.toUpperCase();
-        if (existingNumbers.has(normalized) || seen.has(normalized)) continue;
-        seen.add(normalized);
-        modalWords.push({
-          strongKey: normalized,
-          lexeme: entry?.lemma ?? '',
-          translit: entry?.xlit ?? '',
-          def: shortHebrewGloss(entry?.kjv_def) || 'No definition found.',
-          fullDef: entry?.kjv_def ?? '',
-          entry,
-        });
-        if (modalWords.length >= 20) break;
-      }
-
-      if (modalWords.length === 0) {
-        setStatusMessage('No Hebrew suggestions found from this passage text.');
-        window.setTimeout(() => setStatusMessage(''), 2500);
-        return;
-      }
-
-      setSuggestModal({
-        chunkId,
-        language: 'hebrew',
-        helperText: 'Heuristic matches from passage text; uncheck anything not useful.',
-        words: modalWords,
-      });
-      setSuggestSelection(new Set(modalWords.map((w) => w.strongKey)));
-    } catch (err) {
-      setStatusMessage(`Hebrew suggest failed: ${err.message}`);
-      window.setTimeout(() => setStatusMessage(''), 3000);
-    } finally {
-      setSuggestingHebrewForChunkId(null);
-    }
-  };
-
-  const confirmSuggestWords = () => {
-    if (!suggestModal) return;
-    const { chunkId, words } = suggestModal;
-    const newWords = words
-      .filter((w) => suggestSelection.has(w.strongKey))
-      .map((w) => ({
-        id: makeId(),
-        query: w.strongKey,
-        strongNumber: w.strongKey,
-        englishGloss: w.def,
-        lexeme: w.lexeme,
-        transliteration: w.translit,
-        partOfSpeech: '',
-        shortDefinition: w.fullDef || w.def,
-        definitionHtml: w.entry ? buildGreekDefinitionHtml(w.strongKey, w.entry) : '',
-        loading: false,
-      }));
-    if (newWords.length > 0) {
-      updateProject((current) => ({
-        ...current,
-        chapters: current.chapters.map((ch) => ({
-          ...ch,
-          chunks: ch.chunks.map((c) =>
-            c.id === chunkId ? { ...c, greekWords: [...c.greekWords, ...newWords] } : c
-          ),
-        })),
-      }));
-      const label = suggestModal?.language === 'hebrew' ? 'Hebrew' : 'Greek';
-      setStatusMessage(`Added ${newWords.length} ${label} word${newWords.length > 1 ? 's' : ''}.`);
-      window.setTimeout(() => setStatusMessage(''), 2000);
-    }
-    setSuggestModal(null);
-    setSuggestSelection(new Set());
-  };
-
-  const lookupWord = async (chunkId, wordId, language = 'greek') => {
-    const chunk = allChunks.find((c) => c.id === chunkId);
-    const word = chunk?.greekWords.find((w) => w.id === wordId);
-    if (!word || !word.query.trim()) return;
-    updateChunkWord(chunkId, wordId, { loading: true });
-    try {
-      // Normalize bare numbers based on selected lookup language.
-      const raw = word.query.trim();
-      const inferredPrefix = language === 'hebrew' ? 'H' : 'G';
-      const normalized = /^\d+$/.test(raw)
-        ? `${inferredPrefix}${raw}`
-        : /^[gGhH]\d+$/.test(raw)
-          ? raw.toUpperCase()
-          : raw;
-
-      const [definitions, gloss] = await Promise.all([
-        fetchBollsDefinition(normalized),
-        loadNtGloss().catch(() => ({})),
-      ]);
-      if (!definitions || definitions.length === 0) {
-        updateChunkWord(chunkId, wordId, {
-          strongNumber: '',
-          shortDefinition: 'No definition found.',
-          definitionHtml: '',
-        });
-        return;
-      }
-      const first = definitions[0];
-      const strongKey = (first.topic || normalized).toUpperCase();
-      const extractedPartOfSpeech = extractPartOfSpeech(first.definition || '');
-      updateChunkWord(chunkId, wordId, {
-        strongNumber: first.topic || normalized,
-        englishGloss: gloss[strongKey] || first.short_definition || '',
-        lexeme: first.lexeme || '',
-        transliteration: first.transliteration || '',
-        partOfSpeech: extractedPartOfSpeech || word.partOfSpeech || '',
-        shortDefinition: first.short_definition || '',
-        definitionHtml: first.definition || '',
-      });
-    } catch {
-      updateChunkWord(chunkId, wordId, { shortDefinition: 'Lookup failed.' });
-    } finally {
-      updateChunkWord(chunkId, wordId, { loading: false });
-    }
-  };
-
  // ---------------------------------------------------------------------------
  // Home page helpers
  // ---------------------------------------------------------------------------
@@ -1295,7 +668,6 @@ const App = () => {
    ...audio,
    // Reader
    ...reader,
-    copyVerse,
    // Setup
    project, setProject,
    setup,
@@ -1325,49 +697,8 @@ const App = () => {
    moveChunk,
    deleteChunk,
    updateProject,
-    // Study
-    selectedChunk,
-    selectedChunkChapterIndex,
-    selectedChunkChapter,
-    selectedChunkVerses,
-    selectedChunkGlobalIndex,
-    studyLayout, setStudyLayout,
-    activeStudyTab, setActiveStudyTab,
-    mobileStudyTab, setMobileStudyTab,
-    collapsedSections, setCollapsedSections,
-    interlinearData,
-    interlinearLoading,
-    interlinearError,
-    commentarySource, setCommentarySource,
-    commentaryData,
-    commentaryLoading,
-    commentaryError,
-    crossRefInput, setCrossRefInput,
-    suggestingCrossRefs,
-    crossRefSuggestions,
-    tagInput, setTagInput,
-    suggestModal, setSuggestModal,
-    suggestSelection, setSuggestSelection,
-    suggestingGreekForChunkId,
-    suggestingHebrewForChunkId,
-    goToPreviousChunk,
-    goToNextChunk,
+    // Study (editor state lives in StudyPage and its hooks)
    updateChunk,
-    addCrossRef,
-    removeCrossRef,
-    suggestCrossRefsForChunk,
-    addSuggestedCrossRef,
-    addTag,
-    removeTag,
-    addGreekWord,
-    removeGreekWord,
-    updateChunkWord,
-    lookupWord,
-    suggestGreekWordsForChunk,
-    suggestHebrewWordsForChunk,
-    confirmSuggestWords,
-    loadVerseText,
-    importFinalScriptDocx,
  };

  return (
@@ -631,3 +631,43 @@ describe('Project header and sharing', () => {
    }
  });
 });
+
+// ---------------------------------------------------------------------------
+// Study editor (StudyPage local state + useCrossRefs / useWordStudy hooks)
+// ---------------------------------------------------------------------------
+describe('Study editor', () => {
+  test('study-page messages now show as a status toast', async () => {
+    await goToStudyWith3Chunks();
+    // Titus is a New Testament book, so the Hebrew picker explains why it can't help.
+    fireEvent.click(screen.getByRole('button', { name: /suggest hebrew/i }));
+    expect(await screen.findByRole('status')).toHaveTextContent(/old testament/i);
+  });
+
+  test('arrow keys move between chunks', async () => {
+    await goToStudyWith3Chunks();
+    fireEvent.keyDown(window, { key: 'ArrowRight' });
+    expect(await findChunkCounter(2, 3)).toBeInTheDocument();
+    fireEvent.keyDown(window, { key: 'ArrowLeft' });
+    expect(await findChunkCounter(1, 3)).toBeInTheDocument();
+  });
+
+  test('a typed cross-reference is added, and the input clears on chunk change', async () => {
+    await goToStudyWith3Chunks();
+    const input = screen.getByPlaceholderText(/john 1:1 or rom 3:23/i);
+    fireEvent.change(input, { target: { value: 'Rom 3:23' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+    expect(await screen.findByText('Rom 3:23')).toBeInTheDocument();
+    fireEvent.change(input, { target: { value: 'half typed' } });
+    fireEvent.click(screen.getByRole('button', { name: /next chunk/i }));
+    await waitFor(() => expect(input).toHaveValue(''));
+  });
+
+  test('a tag can be added with Enter', async () => {
+    await goToStudyWith3Chunks();
+    const input = screen.getByPlaceholderText(/add a tag/i);
+    fireEvent.change(input, { target: { value: 'grace' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+    expect(await screen.findByText(/#?grace/)).toBeInTheDocument();
+    expect(input).toHaveValue('');
+  });
+});
@@ -0,0 +1,129 @@
+// Cross-references for the selected chunk: typed entry, suggestions from the
+// Open Cross Ref dataset, and loading a reference's verse text.
+import { useEffect, useState } from 'react';
+import { parseBibleChapter } from '../utils/bibleUtils.jsx';
+import { parseCrossRefString } from '../utils/importParsers.js';
+import { formatCrossRef } from '../utils/wordStudy.js';
+
+const crossRefDatasetCache = {}; // "BOOK/chapter" -> Open Cross Ref chapter data
+const verseChapterCache = {}; // "translation/BOOK/chapter" -> parsed verses
+
+// notify(message, ms) shows a short status message on the study page.
+export function useCrossRefs({ project, allChunks, selectedChunk, updateChunk, notify }) {
+  const [crossRefInput, setCrossRefInput] = useState('');
+  const [suggestingCrossRefs, setSuggestingCrossRefs] = useState(false);
+  const [crossRefSuggestions, setCrossRefSuggestions] = useState([]);
+
+  useEffect(() => {
+    setCrossRefSuggestions([]);
+  }, [selectedChunk?.id]);
+
+  useEffect(() => {
+    setCrossRefInput('');
+  }, [project?.selectedChunkId]);
+
+  const addCrossRef = (chunkId) => {
+    const ref = crossRefInput.trim();
+    if (!ref) return;
+    updateChunk(chunkId, {
+      crossReferences: [...(selectedChunk?.crossReferences ?? []), ref],
+    });
+    setCrossRefInput('');
+  };
+
+  const removeCrossRef = (chunkId, ref) => {
+    updateChunk(chunkId, {
+      crossReferences: (selectedChunk?.crossReferences ?? []).filter((r) => r !== ref),
+    });
+  };
+
+
+  const suggestCrossRefsForChunk = async (chunkId) => {
+    const chunk = allChunks.find((c) => c.id === chunkId);
+    const chapterIndex = project?.chapters.findIndex((ch) =>
+      ch.chunks.some((c) => c.id === chunkId)
+    ) ?? -1;
+    const chapter = chapterIndex >= 0 ? project.chapters[chapterIndex] : null;
+    if (!chunk || !chapter) return;
+
+    setSuggestingCrossRefs(true);
+    setCrossRefSuggestions([]);
+    try {
+      const cacheKey = `${chapter.bookAbbrev}/${chapter.chapter}`;
+      let chapterData = crossRefDatasetCache[cacheKey];
+      if (!chapterData) {
+        const res = await fetch(`https://bible.helloao.org/api/d/open-cross-ref/${chapter.bookAbbrev}/${chapter.chapter}.json`);
+        if (!res.ok) throw new Error('No cross-reference data found for this chapter.');
+        chapterData = await res.json();
+        crossRefDatasetCache[cacheKey] = chapterData;
+      }
+
+      const verseEntries = (chapterData.chapter?.content ?? []).filter(
+        (item) => item.verse >= chunk.startVerse
+          && item.verse <= chunk.endVerse,
+      );
+
+      const existing = new Set(chunk.crossReferences ?? []);
+      const seen = new Set();
+      const refs = [];
+      for (const v of verseEntries) {
+        for (const ref of v.references ?? []) {
+          const formatted = formatCrossRef(ref);
+          if (existing.has(formatted) || seen.has(formatted)) continue;
+          seen.add(formatted);
+          refs.push({ formatted, score: ref.score ?? 0 });
+        }
+      }
+
+      refs.sort((a, b) => b.score - a.score);
+      if (refs.length === 0) {
+        notify('No new cross-reference suggestions found for this passage.', 2500);
+        return;
+      }
+      setCrossRefSuggestions(refs.slice(0, 12).map((r) => r.formatted));
+    } catch (err) {
+      notify(`Cross-reference suggest failed: ${err.message}`, 3000);
+    } finally {
+      setSuggestingCrossRefs(false);
+    }
+  };
+
+
+  const loadVerseText = async (refString) => {
+    const parsed = parseCrossRefString(refString);
+    if (!parsed) throw new Error('Could not parse reference.');
+    const translation = project?.translation ?? 'BSB';
+    const cacheKey = `${translation}/${parsed.bookAbbrev}/${parsed.chapter}`;
+    let verses = verseChapterCache[cacheKey];
+    if (!verses) {
+      const res = await fetch(`https://bible.helloao.org/api/${translation}/${parsed.bookAbbrev}/${parsed.chapter}.json`);
+      if (!res.ok) throw new Error('Could not load verse text.');
+      const data = await res.json();
+      verses = parseBibleChapter(data);
+      verseChapterCache[cacheKey] = verses;
+    }
+    const text = verses
+      .filter((v) => v.number >= parsed.verse && v.number <= parsed.endVerse)
+      .map((v) => v.text)
+      .join(' ');
+    return text;
+  };
+
+  const addSuggestedCrossRef = (chunkId, ref) => {
+    updateChunk(chunkId, {
+      crossReferences: [...(selectedChunk?.crossReferences ?? []), ref],
+    });
+    setCrossRefSuggestions((cur) => cur.filter((r) => r !== ref));
+  };
+
+  return {
+    crossRefInput, setCrossRefInput,
+    suggestingCrossRefs,
+    crossRefSuggestions,
+    addCrossRef,
+    removeCrossRef,
+    suggestCrossRefsForChunk,
+    addSuggestedCrossRef,
+    loadVerseText,
+  };
+}
@@ -0,0 +1,76 @@
+// Commentary and interlinear text for the chapter of the selected chunk.
+// Each loads only while its section is expanded; results are cached for the visit.
+import { useEffect, useState } from 'react';
+
+const commentaryCache = {}; // "commentaryId/BOOK/chapter" -> data
+const interlinearCache = {}; // BOOK -> whole-book interlinear data
+
+export function useStudyResources({ project, selectedChunk, selectedChunkChapterIndex, collapsedSections }) {
+  const [commentarySource, setCommentarySource] = useState('matthew-henry');
+  const [commentaryData, setCommentaryData] = useState(null); // { content: [...] } for current chapter
+  const [commentaryLoading, setCommentaryLoading] = useState(false);
+  const [commentaryError, setCommentaryError] = useState('');
+  const [interlinearData, setInterlinearData] = useState(null);
+  const [interlinearLoading, setInterlinearLoading] = useState(false);
+  const [interlinearError, setInterlinearError] = useState('');
+
+  const loadInterlinearChapter = async (bookAbbrev, chapterNumber) => {
+    if (interlinearCache[bookAbbrev]) return interlinearCache[bookAbbrev];
+    const res = await fetch(`/interlinear/${bookAbbrev}.json`);
+    if (!res.ok) throw new Error('No interlinear data for this book.');
+    const data = await res.json();
+    interlinearCache[bookAbbrev] = data;
+    return data;
+  };
+
+  const loadCommentaryChapter = async (commentaryId, bookAbbrev, chapterNumber) => {
+    const cacheKey = `${commentaryId}/${bookAbbrev}/${chapterNumber}`;
+    if (commentaryCache[cacheKey]) return commentaryCache[cacheKey];
+    const res = await fetch(`https://bible.helloao.org/api/c/${commentaryId}/${bookAbbrev}/${chapterNumber}.json`);
+    const contentType = res.headers.get('content-type') || '';
+    if (!res.ok || !contentType.includes('json')) throw new Error(`No ${commentaryId} commentary for this chapter.`);
+    const data = await res.json();
+    commentaryCache[cacheKey] = data;
+    return data;
+  };
+
+  useEffect(() => {
+    if (collapsedSections.commentary) return;
+    if (selectedChunkChapterIndex < 0) return;
+    const chapter = project.chapters[selectedChunkChapterIndex];
+    setCommentaryLoading(true);
+    setCommentaryError('');
+    loadCommentaryChapter(commentarySource, chapter.bookAbbrev, chapter.chapter)
+      .then((data) => setCommentaryData(data))
+      .catch((err) => {
+        setCommentaryData(null);
+        setCommentaryError(err.message);
+      })
+      .finally(() => setCommentaryLoading(false));
+  }, [commentarySource, selectedChunk?.id, selectedChunkChapterIndex, collapsedSections.commentary]);
+
+  useEffect(() => {
+    if (collapsedSections.interlinear) return;
+    if (selectedChunkChapterIndex < 0) return;
+    const chapter = project.chapters[selectedChunkChapterIndex];
+    setInterlinearLoading(true);
+    setInterlinearError('');
+    loadInterlinearChapter(chapter.bookAbbrev, chapter.chapter)
+      .then((data) => setInterlinearData(data?.[String(chapter.chapter)] ?? null))
+      .catch((err) => {
+        setInterlinearData(null);
+        setInterlinearError(err.message);
+      })
+      .finally(() => setInterlinearLoading(false));
+  }, [selectedChunk?.id, selectedChunkChapterIndex, collapsedSections.interlinear]);
+
+  return {
+    commentarySource, setCommentarySource,
+    commentaryData,
+    commentaryLoading,
+    commentaryError,
+    interlinearData,
+    interlinearLoading,
+    interlinearError,
+  };
+}
@@ -0,0 +1,341 @@
+// Greek/Hebrew word studies on a chunk: word entries, Strong's lookups, and the
+// "suggest words from this passage" picker.
+import { useState } from 'react';
+import {
+  NT_BOOK_NUMBER,
+  chunkSpansNextChapter,
+  extractPartOfSpeech,
+  getChunkVerseEntries,
+  makeId,
+} from '../utils/bibleUtils.jsx';
+import {
+  ENGLISH_STOP_WORDS,
+  GREEK_FUNCTION_WORDS,
+  buildGreekDefinitionHtml,
+  fetchBollsDefinition,
+  loadGreekDict,
+  loadHebrewDict,
+  loadNtConcordance,
+  loadNtGloss,
+  shortHebrewGloss,
+} from '../utils/wordStudy.js';
+
+// notify(message, ms) shows a short status message on the study page.
+export function useWordStudy({ project, allChunks, updateProject, notify }) {
+  const [suggestingGreekForChunkId, setSuggestingGreekForChunkId] = useState(null);
+  const [suggestingHebrewForChunkId, setSuggestingHebrewForChunkId] = useState(null);
+  // suggestModal: null | { chunkId, words: [{ strongKey, lexeme, translit, def }] }
+  const [suggestModal, setSuggestModal] = useState(null);
+  const [suggestSelection, setSuggestSelection] = useState(new Set());
+
+  const updateChunkWord = (chunkId, wordId, patch) => {
+    updateProject((current) => ({
+      ...current,
+      chapters: current.chapters.map((ch) => ({
+        ...ch,
+        chunks: ch.chunks.map((chunk) => {
+          if (chunk.id !== chunkId) return chunk;
+          return {
+            ...chunk,
+            greekWords: chunk.greekWords.map((word) =>
+              word.id === wordId ? { ...word, ...patch } : word,
+            ),
+          };
+        }),
+      })),
+    }));
+  };
+
+  const addGreekWord = (chunkId) => {
+    const newWord = {
+      id: makeId(),
+      query: '',
+      strongNumber: '',
+      englishGloss: '',
+      lexeme: '',
+      transliteration: '',
+      partOfSpeech: '',
+      shortDefinition: '',
+      definitionHtml: '',
+      loading: false,
+    };
+    updateProject((current) => ({
+      ...current,
+      chapters: current.chapters.map((ch) => ({
+        ...ch,
+        chunks: ch.chunks.map((chunk) =>
+          chunk.id === chunkId
+            ? { ...chunk, greekWords: [...chunk.greekWords, newWord] }
+            : chunk,
+        ),
+      })),
+    }));
+  };
+
+  const removeGreekWord = (chunkId, wordId) => {
+    updateProject((current) => ({
+      ...current,
+      chapters: current.chapters.map((ch) => ({
+        ...ch,
+        chunks: ch.chunks.map((chunk) =>
+          chunk.id === chunkId
+            ? { ...chunk, greekWords: chunk.greekWords.filter((w) => w.id !== wordId) }
+            : chunk,
+        ),
+      })),
+    }));
+  };
+
+  const suggestGreekWordsForChunk = async (chunkId) => {
+    const chunk = allChunks.find((c) => c.id === chunkId);
+    const chapterIndex = project?.chapters.findIndex((ch) =>
+      ch.chunks.some((c) => c.id === chunkId)
+    ) ?? -1;
+    const chapter = chapterIndex >= 0 ? project.chapters[chapterIndex] : null;
+    if (!chunk || !chapter) return;
+    if (!NT_BOOK_NUMBER[chapter.bookAbbrev]) {
+      notify('Auto-suggest only works for New Testament books.', 2500);
+      return;
+    }
+    setSuggestingGreekForChunkId(chunkId);
+    try {
+      const [concordance, dict, gloss] = await Promise.all([loadNtConcordance(), loadGreekDict(), loadNtGloss()]);
+      const bookData = concordance[chapter.bookAbbrev] ?? {};
+      const chapterData = bookData[chapter.chapter] ?? {};
+      const nextChapterData = chunkSpansNextChapter(project, chapterIndex, chunk)
+        ? bookData[project.chapters[chapterIndex + 1].chapter] ?? {}
+        : {};
+
+      const strongsInRange = new Set();
+      for (let v = chunk.startVerse; v <= chunk.endVerse; v++) {
+        for (const s of chapterData[String(v)] ?? []) strongsInRange.add(s);
+      }
+      if (chunkSpansNextChapter(project, chapterIndex, chunk)) {
+        for (let v = 1; v <= chunk.spilloverEndVerse; v++) {
+          for (const s of nextChapterData[String(v)] ?? []) strongsInRange.add(s);
+        }
+      }
+
+      if (strongsInRange.size === 0) {
+        notify("No Strong's data found for this passage.", 3000);
+        return;
+      }
+
+      const existingNumbers = new Set(
+        chunk.greekWords.map((w) => w.strongNumber.toUpperCase()).filter(Boolean)
+      );
+
+      const modalWords = [];
+      for (const strongKey of strongsInRange) {
+        if (existingNumbers.has(strongKey)) continue;
+        const entry = dict[strongKey];
+        modalWords.push({
+          strongKey,
+          lexeme: entry?.lemma ?? '',
+          translit: entry?.translit ?? '',
+          def: gloss[strongKey] ?? entry?.kjv_def ?? 'No definition found.',
+          entry,
+        });
+      }
+
+      if (modalWords.length === 0) {
+        notify('All words from this passage are already added.', 2000);
+        return;
+      }
+
+      // Pre-select content words; pre-uncheck known function words
+      const preSelected = new Set(
+        modalWords
+          .filter((w) => !GREEK_FUNCTION_WORDS.has(w.strongKey))
+          .map((w) => w.strongKey)
+      );
+      setSuggestModal({
+        chunkId,
+        language: 'greek',
+        helperText: "Content words are pre-checked. Uncheck any you don't need.",
+        words: modalWords,
+      });
+      setSuggestSelection(preSelected);
+    } catch (err) {
+      notify(`Suggest failed: ${err.message}`, 3000);
+    } finally {
+      setSuggestingGreekForChunkId(null);
+    }
+  };
+
+  const suggestHebrewWordsForChunk = async (chunkId) => {
+    const chunk = allChunks.find((c) => c.id === chunkId);
+    const chapterIndex = project?.chapters.findIndex((ch) =>
+      ch.chunks.some((c) => c.id === chunkId)
+    ) ?? -1;
+    const chapter = chapterIndex >= 0 ? project.chapters[chapterIndex] : null;
+    if (!chunk || !chapter) return;
+    if (NT_BOOK_NUMBER[chapter.bookAbbrev]) {
+      notify('Hebrew suggestions are for Old Testament passages.', 2500);
+      return;
+    }
+
+    setSuggestingHebrewForChunkId(chunkId);
+    try {
+      const dict = await loadHebrewDict();
+      const versesInChunk = getChunkVerseEntries(project, chapterIndex, chunk)
+        .map((v) => v.text)
+        .join(' ')
+        .toLowerCase();
+
+      const candidateWords = Array.from(new Set(
+        versesInChunk
+          .replace(/[^a-z\s]/g, ' ')
+          .split(/\s+/)
+          .map((w) => w.trim())
+          .filter((w) => w.length >= 4 && !ENGLISH_STOP_WORDS.has(w)),
+      ));
+
+      if (candidateWords.length === 0) {
+        notify('No Hebrew suggestion candidates found in this passage.', 2500);
+        return;
+      }
+
+      const existingNumbers = new Set(
+        chunk.greekWords.map((w) => (w.strongNumber || '').toUpperCase()).filter(Boolean)
+      );
+
+      const seen = new Set();
+      const modalWords = [];
+      const entries = Object.entries(dict);
+
+      for (const token of candidateWords) {
+        const match = entries.find(([, entry]) => {
+          const defs = `${entry.kjv_def || ''} ${entry.strongs_def || ''}`.toLowerCase();
+          return defs.split(/[,;()\s]+/).includes(token);
+        });
+        if (!match) continue;
+        const [strongKey, entry] = match;
+        if (!/^H\d+$/i.test(strongKey)) continue;
+        const normalized = strongKey.toUpperCase();
+        if (existingNumbers.has(normalized) || seen.has(normalized)) continue;
+        seen.add(normalized);
+        modalWords.push({
+          strongKey: normalized,
+          lexeme: entry?.lemma ?? '',
+          translit: entry?.xlit ?? '',
+          def: shortHebrewGloss(entry?.kjv_def) || 'No definition found.',
+          fullDef: entry?.kjv_def ?? '',
+          entry,
+        });
+        if (modalWords.length >= 20) break;
+      }
+
+      if (modalWords.length === 0) {
+        notify('No Hebrew suggestions found from this passage text.', 2500);
+        return;
+      }
+
+      setSuggestModal({
+        chunkId,
+        language: 'hebrew',
+        helperText: 'Heuristic matches from passage text; uncheck anything not useful.',
+        words: modalWords,
+      });
+      setSuggestSelection(new Set(modalWords.map((w) => w.strongKey)));
+    } catch (err) {
+      notify(`Hebrew suggest failed: ${err.message}`, 3000);
+    } finally {
+      setSuggestingHebrewForChunkId(null);
+    }
+  };
+
+  const confirmSuggestWords = () => {
+    if (!suggestModal) return;
+    const { chunkId, words } = suggestModal;
+    const newWords = words
+      .filter((w) => suggestSelection.has(w.strongKey))
+      .map((w) => ({
+        id: makeId(),
+        query: w.strongKey,
+        strongNumber: w.strongKey,
+        englishGloss: w.def,
+        lexeme: w.lexeme,
+        transliteration: w.translit,
+        partOfSpeech: '',
+        shortDefinition: w.fullDef || w.def,
+        definitionHtml: w.entry ? buildGreekDefinitionHtml(w.strongKey, w.entry) : '',
+        loading: false,
+      }));
+    if (newWords.length > 0) {
+      updateProject((current) => ({
+        ...current,
+        chapters: current.chapters.map((ch) => ({
+          ...ch,
+          chunks: ch.chunks.map((c) =>
+            c.id === chunkId ? { ...c, greekWords: [...c.greekWords, ...newWords] } : c
+          ),
+        })),
+      }));
+      const label = suggestModal?.language === 'hebrew' ? 'Hebrew' : 'Greek';
+      notify(`Added ${newWords.length} ${label} word${newWords.length > 1 ? 's' : ''}.`, 2000);
+    }
+    setSuggestModal(null);
+    setSuggestSelection(new Set());
+  };
+
+  const lookupWord = async (chunkId, wordId, language = 'greek') => {
+    const chunk = allChunks.find((c) => c.id === chunkId);
+    const word = chunk?.greekWords.find((w) => w.id === wordId);
+    if (!word || !word.query.trim()) return;
+    updateChunkWord(chunkId, wordId, { loading: true });
+    try {
+      // Normalize bare numbers based on selected lookup language.
+      const raw = word.query.trim();
+      const inferredPrefix = language === 'hebrew' ? 'H' : 'G';
+      const normalized = /^\d+$/.test(raw)
+        ? `${inferredPrefix}${raw}`
+        : /^[gGhH]\d+$/.test(raw)
+          ? raw.toUpperCase()
+          : raw;
+
+      const [definitions, gloss] = await Promise.all([
+        fetchBollsDefinition(normalized),
+        loadNtGloss().catch(() => ({})),
+      ]);
+      if (!definitions || definitions.length === 0) {
+        updateChunkWord(chunkId, wordId, {
+          strongNumber: '',
+          shortDefinition: 'No definition found.',
+          definitionHtml: '',
+        });
+        return;
+      }
+      const first = definitions[0];
+      const strongKey = (first.topic || normalized).toUpperCase();
+      const extractedPartOfSpeech = extractPartOfSpeech(first.definition || '');
+      updateChunkWord(chunkId, wordId, {
+        strongNumber: first.topic || normalized,
+        englishGloss: gloss[strongKey] || first.short_definition || '',
+        lexeme: first.lexeme || '',
+        transliteration: first.transliteration || '',
+        partOfSpeech: extractedPartOfSpeech || word.partOfSpeech || '',
+        shortDefinition: first.short_definition || '',
+        definitionHtml: first.definition || '',
+      });
+    } catch {
+      updateChunkWord(chunkId, wordId, { shortDefinition: 'Lookup failed.' });
+    } finally {
+      updateChunkWord(chunkId, wordId, { loading: false });
+    }
+  };
+
+  return {
+    suggestingGreekForChunkId,
+    suggestingHebrewForChunkId,
+    suggestModal, setSuggestModal,
+    suggestSelection, setSuggestSelection,
+    updateChunkWord,
+    addGreekWord,
+    removeGreekWord,
+    lookupWord,
+    suggestGreekWordsForChunk,
+    suggestHebrewWordsForChunk,
+    confirmSuggestWords,
+  };
+}
@@ -7,6 +7,11 @@ import DrawCanvas from './DrawCanvas.jsx';

 const NO_STROKES = []; // stable fallback so DrawCanvas doesn't redraw every render

+// Copies "Book 3:16 BSB — text" to the clipboard.
+const copyVerse = (bookName, chapterNum, verseNum, text) => {
+  navigator.clipboard?.writeText(`${bookName} ${chapterNum}:${verseNum} BSB — ${text}`);
+};
+
 export default function ReaderPage() {
  const {
    goHome,
@@ -42,7 +47,6 @@ export default function ReaderPage() {
    handlePlayReaderAudio,
    handleToggleReaderAudioPause,
    handleStopBookAudio,
-    copyVerse,
    setReaderCrossRefs,
    readerInkByPage,
    updateReaderPageInk,
@@ -1,60 +1,180 @@
+import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import DOMPurify from 'dompurify';
 import { useApp } from '../context/AppContext.js';
+import { useCrossRefs } from '../hooks/useCrossRefs.js';
+import { useStudyResources } from '../hooks/useStudyResources.js';
+import { useWordStudy } from '../hooks/useWordStudy.js';
 import { buildGreekDefinitionHtml, externalLookupLinks, speakOriginalWord } from '../utils/wordStudy.js';
 import ProjectHeader from '../components/ProjectHeader.jsx';
-import { STUDY_TABS, COMMENTARY_OPTIONS, NT_BOOK_NUMBER, formatChunkReference, CrossRefChip } from '../utils/bibleUtils.jsx';
+import {
+  STUDY_TABS,
+  COMMENTARY_OPTIONS,
+  NT_BOOK_NUMBER,
+  formatChunkReference,
+  getChunkVerseEntries,
+  CrossRefChip,
+} from '../utils/bibleUtils.jsx';

 export default function StudyPage() {
+  const { project, allChunks, projectIndex, updateProject, updateChunk } = useApp();
+
+  // Short-lived status line (word suggestions, DOCX import, lookups, …)
+  const [statusMessage, setStatusMessage] = useState('');
+  const statusTimerRef = useRef(null);
+  const notify = (message, ms = 2000) => {
+    window.clearTimeout(statusTimerRef.current);
+    setStatusMessage(message);
+    statusTimerRef.current = window.setTimeout(() => setStatusMessage(''), ms);
+  };
+  useEffect(() => () => window.clearTimeout(statusTimerRef.current), []);
+
+  const selectedChunk = allChunks.find((c) => c.id === project?.selectedChunkId) ?? allChunks[0] ?? null;
+  const selectedChunkChapterIndex = selectedChunk
+    ? project.chapters.findIndex((ch) => ch.chunks.some((c) => c.id === selectedChunk.id))
+    : -1;
+  const selectedChunkChapter = selectedChunkChapterIndex >= 0
+    ? project.chapters[selectedChunkChapterIndex]
+    : null;
+  const selectedChunkVerses = selectedChunk
+    ? getChunkVerseEntries(project, selectedChunkChapterIndex, selectedChunk)
+    : [];
+  const selectedChunkGlobalIndex = allChunks.findIndex((c) => c.id === project?.selectedChunkId);
+
+  const [studyLayout, setStudyLayout] = useState(() => {
+    const saved = localStorage.getItem('studyLayout');
+    return saved === 'stacked' ? 'stacked' : 'split'; // 'annotate' (Draw) was removed
+  }); // 'stacked' | 'split'
+  const [activeStudyTab, setActiveStudyTab] = useState(
+    () => localStorage.getItem('activeStudyTab') || 'notes',
+  );
+  const [mobileStudyTab, setMobileStudyTab] = useState('scripture');
+
+  useEffect(() => {
+    localStorage.setItem('studyLayout', studyLayout);
+  }, [studyLayout]);
+
+  useEffect(() => {
+    localStorage.setItem('activeStudyTab', activeStudyTab);
+  }, [activeStudyTab]);
+  const [collapsedSections, setCollapsedSections] = useState({});
+
  const {
-    project,
-    allChunks,
-    selectedChunk,
-    selectedChunkChapterIndex,
-    selectedChunkChapter,
-    selectedChunkVerses,
-    selectedChunkGlobalIndex,
-    studyLayout, setStudyLayout,
-    activeStudyTab, setActiveStudyTab,
-    mobileStudyTab, setMobileStudyTab,
-    collapsedSections, setCollapsedSections,
-    interlinearData,
-    interlinearLoading,
-    interlinearError,
    commentarySource, setCommentarySource,
    commentaryData,
    commentaryLoading,
    commentaryError,
+    interlinearData,
+    interlinearLoading,
+    interlinearError,
+  } = useStudyResources({ project, selectedChunk, selectedChunkChapterIndex, collapsedSections });
+
+  const {
    crossRefInput, setCrossRefInput,
    suggestingCrossRefs,
    crossRefSuggestions,
-    tagInput, setTagInput,
-    suggestModal, setSuggestModal,
-    suggestSelection, setSuggestSelection,
-    suggestingGreekForChunkId,
-    suggestingHebrewForChunkId,
-    projectIndex,
-    goToPreviousChunk,
-    goToNextChunk,
-    updateProject,
-    updateChunk,
    addCrossRef,
    removeCrossRef,
    suggestCrossRefsForChunk,
    addSuggestedCrossRef,
-    addTag,
-    removeTag,
+    loadVerseText,
+  } = useCrossRefs({ project, allChunks, selectedChunk, updateChunk, notify });
+
+  const {
+    suggestingGreekForChunkId,
+    suggestingHebrewForChunkId,
+    suggestModal, setSuggestModal,
+    suggestSelection, setSuggestSelection,
+    updateChunkWord,
    addGreekWord,
    removeGreekWord,
-    updateChunkWord,
    lookupWord,
    suggestGreekWordsForChunk,
    suggestHebrewWordsForChunk,
    confirmSuggestWords,
-    loadVerseText,
-    importFinalScriptDocx,
-    formatChunkReference: _ignored,
-  } = useApp();
+  } = useWordStudy({ project, allChunks, updateProject, notify });
+
+  const [tagInput, setTagInput] = useState('');
+
+  const addTag = (chunkId) => {
+    const tag = tagInput.trim();
+    if (!tag) return;
+    const existing = selectedChunk?.tags ?? [];
+    if (existing.some((t) => t.toLowerCase() === tag.toLowerCase())) {
+      setTagInput('');
+      return;
+    }
+    updateChunk(chunkId, { tags: [...existing, tag] });
+    setTagInput('');
+  };
+
+  const removeTag = (chunkId, tag) => {
+    updateChunk(chunkId, {
+      tags: (selectedChunk?.tags ?? []).filter((t) => t !== tag),
+    });
+  };
+
+  useEffect(() => {
+    setTagInput('');
+  }, [selectedChunk?.id]);
+
+  const importFinalScriptDocx = async (chunkId, file) => {
+    if (!file) return;
+    try {
+      const arrayBuffer = await file.arrayBuffer();
+      const { default: mammoth } = await import('mammoth');
+      const { value } = await mammoth.extractRawText({ arrayBuffer });
+      updateChunk(chunkId, { finalScript: value.trim() });
+      notify('Imported script from DOCX.', 1800);
+    } catch {
+      notify('Could not read that DOCX file.', 1800);
+    }
+  };
+
+  const goToPreviousChunk = () => {
+    if (selectedChunkGlobalIndex <= 0) return;
+    updateProject((current) => ({
+      ...current,
+      selectedChunkId: allChunks[selectedChunkGlobalIndex - 1].id,
+    }));
+  };
+
+  const goToNextChunk = () => {
+    if (selectedChunkGlobalIndex < 0 || selectedChunkGlobalIndex >= allChunks.length - 1) return;
+    updateProject((current) => ({
+      ...current,
+      selectedChunkId: allChunks[selectedChunkGlobalIndex + 1].id,
+    }));
+  };
+
+  // Keyboard shortcuts: arrow keys navigate chunks on the study page, Esc closes modals
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      const tag = event.target?.tagName;
+      const isEditable = tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || event.target?.isContentEditable;
+
+      if (event.key === 'Escape') {
+        if (suggestModal) {
+          setSuggestModal(null);
+          setSuggestSelection(new Set());
+        }
+        return;
+      }
+
+      if (isEditable || suggestModal) return;
+
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        goToPreviousChunk();
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        goToNextChunk();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [suggestModal, selectedChunkGlobalIndex, allChunks]);
+

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900">
@@ -998,6 +1118,11 @@ export default function StudyPage() {
        </div>,
        document.body
      )}
+      {statusMessage && (
+        <div role="status" className="fixed bottom-20 left-1/2 z-40 -translate-x-1/2 rounded-full bg-slate-900 px-4 py-2 text-sm text-white shadow-lg">
+          {statusMessage}
+        </div>
+      )}
    </div>
  );
 }