Fix Pronunciation page Speak buttons; tidy App.jsx

PronunciationPage still read speakOriginalWord from context after it
moved to utils/wordStudy, so Speak would have thrown. Import it directly.
App.jsx: consolidate imports, update comments, list all pages.

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

src/App.jsx

@@ -7,20 +7,9 @@ import { useProjectLibrary } from './hooks/useProjectLibrary.js';
 import { useReadingPlan } from './hooks/useReadingPlan.js';
 import { useSharedView } from './hooks/useSharedView.js';
 import HomePage from './pages/HomePage.jsx';
-
-import {
-  buildExportHtml,
-  loadProjectIndex,
-  switchStorageUser,
-} from './utils/bibleUtils.jsx';
-import {
-  saveProjectToStorage,
-  migrateOldStorageKeys,
-} from './utils/projectStorage.js';
-
-import {
-  saveRemoteProject,
-} from './syncService.js';
+import { saveRemoteProject } from './syncService.js';
+import { buildExportHtml, loadProjectIndex, switchStorageUser } from './utils/bibleUtils.jsx';
+import { migrateOldStorageKeys, saveProjectToStorage } from './utils/projectStorage.js';
 
 // Less-common pages are split into their own chunks so the first load only
 // downloads what's needed to show the home screen.
@@ -33,17 +22,13 @@ const SetupPage = lazy(() => import('./pages/SetupPage.jsx'));
 const StudyPage = lazy(() => import('./pages/StudyPage.jsx'));
 const PronunciationPage = lazy(() => import('./pages/PronunciationPage.jsx'));
 
-// ---------------------------------------------------------------------------
-// Stable utility exports (used by tests and other modules)
-// ---------------------------------------------------------------------------
-
 // ---------------------------------------------------------------------------
 // App component
 // ---------------------------------------------------------------------------
 
 const App = () => {
   const [project, setProject] = useState(null);
-  // 'home' | 'setup' | 'study' | 'settings'
+  // 'home' | 'setup' | 'study' | 'reader' | 'import' | 'pronunciation' | 'settings' | 'admin'
   const [currentPage, setCurrentPage] = useState('home');
   const [projectIndex, setProjectIndex] = useState([]);
   const [saveStatus, setSaveStatus] = useState('');
@@ -73,20 +58,16 @@ const App = () => {
     setProjectIndex,
     setCurrentPage,
   });
-  const openBibleReader = () => {
-    setCurrentPage('reader');
-  };
 
-  // ---------------------------------------------------------------------------
   // Startup: migrate old keys and load index
-  // ---------------------------------------------------------------------------
   useEffect(() => {
     migrateOldStorageKeys();
     setProjectIndex(loadProjectIndex());
   }, []);
 
   const allChunks = project ? project.chapters.flatMap((ch) => ch.chunks) : [];
-  // Autosave
+
+  // Autosave: 1s after the last edit, save locally, then sync to the server.
   useEffect(() => {
     if (!project) return;
     if (saveTimerRef.current) window.clearTimeout(saveTimerRef.current);
@@ -126,9 +107,8 @@ const App = () => {
     }));
   };
 
-  // ---------------------------------------------------------------------------
-  // Home page helpers
-  // ---------------------------------------------------------------------------
+  // Navigation
+  const openBibleReader = () => setCurrentPage('reader');
 
   const openNewProject = () => {
     setProject(null);
@@ -157,9 +137,8 @@ const App = () => {
     if (result.ok) window.setTimeout(() => setSyncStatus(''), 2500);
   };
 
-  // ---------------------------------------------------------------------------
-  // Context value — every state, handler, and computed value pages need.
-  // ---------------------------------------------------------------------------
+  // Shared with every page via useApp(). Page-specific state lives in the
+  // pages themselves or in hooks under src/hooks/.
   const contextValue = {
     // Navigation
     currentPage, setCurrentPage,

src/pages/PronunciationPage.jsx

@@ -1,9 +1,10 @@
 import { useState } from 'react';
 import { useApp } from '../context/AppContext.js';
 import { buildPronunciationGuide } from '../utils/bibleUtils.jsx';
+import { speakOriginalWord } from '../utils/wordStudy.js';
 
 export default function PronunciationPage() {
-  const { project, speakOriginalWord, setCurrentPage } = useApp();
+  const { project, setCurrentPage } = useApp();
   const [search, setSearch] = useState('');
   const [copied, setCopied] = useState(false);