Add page motion and timeline helper

src/App.tsx

@@ -11,6 +11,7 @@ const activeSessionStorageKey = 'libre-study.active-session.v1'
 const timelineLimit = 200
 type ViewMode = 'page' | 'study' | 'notes' | 'compare'
 type StrongDisplayMode = 'off' | 'highlight' | 'numbers'
+type PageMotion = 'idle' | 'turn-forward' | 'turn-back'
 type TimelineEntryType = 'verse' | 'strong' | 'footnote' | 'search' | 'navigation' | 'view' | 'setting'
 
 type TimelineEntry = {
@@ -153,6 +154,8 @@ function App() {
   const [railOpen, setRailOpen] = useState(false)
   const [sessionModalOpen, setSessionModalOpen] = useState(false)
   const [aboutModalOpen, setAboutModalOpen] = useState(false)
+  const [timelineModalOpen, setTimelineModalOpen] = useState(false)
+  const [pageMotion, setPageMotion] = useState<PageMotion>('idle')
   const [viewMode, setViewMode] = useState<ViewMode>('notes')
   const [query, setQuery] = useState('')
   const [libraryVerses, setLibraryVerses] = useState<Verse[]>([])
@@ -172,6 +175,7 @@ function App() {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const restoredSessionId = useRef('')
+  const pageMotionTimeout = useRef<number | null>(null)
 
   async function loadLibrary() {
     setError(null)
@@ -223,6 +227,40 @@ function App() {
     )
   }
 
+  function playPageTurnSound() {
+    if (!window.AudioContext) return
+
+    try {
+      const audio = new window.AudioContext()
+      const oscillator = audio.createOscillator()
+      const gain = audio.createGain()
+
+      oscillator.type = 'triangle'
+      oscillator.frequency.setValueAtTime(120, audio.currentTime)
+      oscillator.frequency.exponentialRampToValueAtTime(42, audio.currentTime + 0.08)
+      gain.gain.setValueAtTime(0.0001, audio.currentTime)
+      gain.gain.exponentialRampToValueAtTime(0.06, audio.currentTime + 0.012)
+      gain.gain.exponentialRampToValueAtTime(0.0001, audio.currentTime + 0.11)
+      oscillator.connect(gain)
+      gain.connect(audio.destination)
+      oscillator.start()
+      oscillator.stop(audio.currentTime + 0.12)
+      window.setTimeout(() => audio.close().catch(() => null), 180)
+    } catch {
+      // Page sound is intentionally best-effort.
+    }
+  }
+
+  function triggerPageMotion(direction: PageMotion) {
+    if (pageMotionTimeout.current) window.clearTimeout(pageMotionTimeout.current)
+    setPageMotion('idle')
+    window.requestAnimationFrame(() => {
+      setPageMotion(direction)
+      playPageTurnSound()
+      pageMotionTimeout.current = window.setTimeout(() => setPageMotion('idle'), 520)
+    })
+  }
+
   async function runSearch(nextQuery = query) {
     setError(null)
     const trimmed = nextQuery.trim()
@@ -439,6 +477,9 @@ function App() {
       libraryVerses.find((entry) => entry.book === book)
 
     if (!next) return
+    const currentBookIndex = selectedVerse ? books.indexOf(selectedVerse.book) : -1
+    const nextBookIndex = books.indexOf(next.book)
+    triggerPageMotion(nextBookIndex >= currentBookIndex ? 'turn-forward' : 'turn-back')
     setQuery('')
     setSelectedStrong(null)
     setVerses(libraryVerses)
@@ -466,6 +507,7 @@ function App() {
       pageAnchors[Math.min(pageAnchors.length - 1, Math.max(0, index + direction))]
 
     if (!next) return
+    triggerPageMotion(direction > 0 ? 'turn-forward' : 'turn-back')
     setPageStartId(next.id)
     setSelectedId(next.id)
     setSelectedStrong(null)
@@ -817,7 +859,7 @@ function App() {
     if (!selectedVerse) return null
 
     return (
-      <nav className="book-tabs" aria-label="Bible book tabs">
+      <nav className={`book-tabs ${pageMotion}`} aria-label="Bible book tabs">
         {visibleBookTabs.map((book) => (
           <button
             key={book}
@@ -833,6 +875,66 @@ function App() {
     )
   }
 
+  function renderTimelineModal() {
+    if (!timelineModalOpen) return null
+
+    return (
+      <div className="modal-backdrop" role="presentation" onMouseDown={() => setTimelineModalOpen(false)}>
+        <section
+          className="modal-panel timeline-modal"
+          role="dialog"
+          aria-modal="true"
+          aria-label="Study timeline"
+          onMouseDown={(event) => event.stopPropagation()}
+        >
+          <header>
+            <div>
+              <span className="eyebrow">Timeline</span>
+              <h2>{activeSession?.title ?? 'Study Session'}</h2>
+            </div>
+            <button type="button" className="close-button" onClick={() => setTimelineModalOpen(false)}>
+              Close
+            </button>
+          </header>
+          {activeSession?.timeline.length ? (
+            <div className="timeline-canvas">
+              <ol>
+                {[...activeSession.timeline].reverse().map((entry) => (
+                  <li key={entry.id}>
+                    <span className="timeline-dot" />
+                    <button
+                      type="button"
+                      disabled={!entry.reference}
+                      onClick={() => {
+                        restoreTimelineEntry(entry)
+                        setTimelineModalOpen(false)
+                      }}
+                    >
+                      <time>{formatTimelineTime(entry.at)}</time>
+                      <strong>{entry.label}</strong>
+                      {entry.reference ? <span>{entry.reference}</span> : null}
+                      {entry.detail ? <small>{entry.detail}</small> : null}
+                    </button>
+                  </li>
+                ))}
+              </ol>
+            </div>
+          ) : (
+            <div className="empty-timeline">
+              <span className="note-helper-figure" aria-hidden="true">
+                <span className="helper-head" />
+                <span className="helper-body" />
+                <span className="helper-notebook" />
+                <span className="helper-pencil" />
+              </span>
+              <p>This session has not recorded timeline events yet.</p>
+            </div>
+          )}
+        </section>
+      </div>
+    )
+  }
+
   function renderSessionModal() {
     if (!sessionModalOpen) return null
 
@@ -1181,7 +1283,7 @@ function App() {
                   </div>
                 </div>
               ) : (
-                <div className={`page-system ${viewMode}`}>
+                <div className={`page-system ${viewMode} ${pageMotion}`}>
                   {renderBiblePage('KJV')}
                   {viewMode !== 'page' ? renderStudyMargin() : null}
                   {renderFootnoteStrip()}
@@ -1223,31 +1325,23 @@ function App() {
                     </span>
                   ))}
                 </div>
-                <section className="session-timeline" aria-label="Session timeline">
-                  <header>
-                    <span className="eyebrow">Timeline</span>
-                    <strong>{activeSession?.timeline.length ?? 0} events</strong>
-                  </header>
-                  {activeSession?.timeline.length ? (
-                    <ol>
-                      {activeSession.timeline.slice(0, 14).map((entry) => (
-                        <li key={entry.id}>
-                          <button
-                            type="button"
-                            disabled={!entry.reference}
-                            onClick={() => restoreTimelineEntry(entry)}
-                          >
-                            <span>{formatTimelineTime(entry.at)}</span>
-                            <strong>{entry.label}</strong>
-                            {entry.detail ? <small>{entry.detail}</small> : null}
-                          </button>
-                        </li>
-                      ))}
-                    </ol>
-                  ) : (
-                    <p>Click verses, Strong's entries, page controls, or footnotes to build this session timeline.</p>
-                  )}
-                </section>
+                <button
+                  type="button"
+                  className="note-helper"
+                  onClick={() => setTimelineModalOpen(true)}
+                  aria-label="Open study timeline"
+                >
+                  <span className="note-helper-figure" aria-hidden="true">
+                    <span className="helper-head" />
+                    <span className="helper-body" />
+                    <span className="helper-notebook" />
+                    <span className="helper-pencil" />
+                  </span>
+                  <span>
+                    <strong>Study timeline</strong>
+                    <small>{activeSession?.timeline.length ?? 0} events recorded</small>
+                  </span>
+                </button>
               </aside>
               ) : null}
             </div>
@@ -1258,6 +1352,7 @@ function App() {
       </section>
       {renderSessionModal()}
       {renderAboutModal()}
+      {renderTimelineModal()}
     </main>
   )
 }