Connect reading plans to study/audio, cache offline audio, add journal export

Reading plan days now offer "Study this" (seeds a new chunk-builder project
with the day's full passage and jumps straight into the Study editor) and
"Listen" (starts book-mode audio at the right chapter via a new
handlePlayBookAudioFrom, avoiding a stale-closure bug the reader-state
approach would hit). Fixed the "Listen to BSB Audio" player only rendering
when a study project existed, leaving Listen with nowhere to show up.

The service worker now caches audio.bible.helloao.org (the actual host
serving narrator audio, not just the text/cross-ref API) and no longer
tries to cache 206 Partial Content responses, which the Cache API rejects
and was throwing unhandled rejections for every range-requested audio file.

Added a reading journal export (Settings > My reading journal): gathers
bookmarks, text highlights, and completed plans, fetches their verse text,
and offers a .docx download or a print-to-PDF page.

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

src/pages/HomePage.jsx

@@ -21,6 +21,9 @@ export default function HomePage() {
     toggleDay,
     openReadingPlans,
     readReadingPlanDay,
+    listenReadingPlanDay,
+    studyReadingPlanDay,
+    studyBuildBusy,
     audioBook, setAudioBook,
     audioNarrator, setAudioNarrator,
     audioState,
@@ -161,9 +164,61 @@ export default function HomePage() {
           readingActivity={readingActivity}
           openReadingPlans={openReadingPlans}
           readReadingPlanDay={readReadingPlanDay}
+          listenReadingPlanDay={listenReadingPlanDay}
+          studyReadingPlanDay={studyReadingPlanDay}
+          studyBuildBusy={studyBuildBusy}
           toggleDay={toggleDay}
         />
 
+        {/* BSB audio player — shown regardless of whether there are any study projects yet,
+            so "Listen" from a reading plan always has somewhere visible to land. */}
+        <div className="mb-4">
+          <AudioPlayer
+            title="Listen to BSB Audio"
+            subtitle={
+              audioState.status === 'idle' || audioState.status === 'error'
+                ? 'Play a full book of the Berean Standard Bible.'
+                : `Playing ${bookOptions.find((b) => b.abbrev === audioBook)?.name} — chapter ${audioState.chapter} of ${audioState.total}`
+            }
+            errorMessage="Couldn't load audio for this book/narrator."
+            status={audioState.status}
+            currentTime={audioProgress.currentTime}
+            duration={audioProgress.duration}
+            onPlay={handlePlayBookAudio}
+            onTogglePause={handleToggleBookAudioPause}
+            onSeekBack={() => handleSeekAudio(-10)}
+            onSeekForward={() => handleSeekAudio(10)}
+            onSeekTo={handleSeekAudioTo}
+            onNext={handleSkipBookChapter}
+            nextDisabled={audioState.chapter >= audioState.total}
+            onStop={handleStopBookAudio}
+            controls={(
+              <>
+                <select
+                  value={audioBook}
+                  onChange={(e) => setAudioBook(e.target.value)}
+                  disabled={audioState.status === 'playing' || audioState.status === 'paused'}
+                  className="rounded-xl border border-slate-300 bg-white px-2 py-1.5 text-sm text-slate-900 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200 disabled:opacity-60"
+                >
+                  {bookOptions.map((book) => (
+                    <option key={book.abbrev} value={book.abbrev}>{book.name}</option>
+                  ))}
+                </select>
+                <select
+                  value={audioNarrator}
+                  onChange={(e) => setAudioNarrator(e.target.value)}
+                  disabled={audioState.status === 'playing' || audioState.status === 'paused'}
+                  className="rounded-xl border border-slate-300 bg-white px-2 py-1.5 text-sm text-slate-900 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200 disabled:opacity-60"
+                >
+                  <option value="david">David</option>
+                  <option value="hays">Hays</option>
+                  <option value="souer">Souer</option>
+                </select>
+              </>
+            )}
+          />
+        </div>
+
         {projectIndex.length === 0 ? (
           <div className="mx-auto max-w-xl rounded-3xl border border-dashed border-slate-300 bg-white p-10 text-center shadow-panel">
             <p className="text-lg font-semibold text-slate-700">No projects yet</p>
@@ -252,52 +307,6 @@ export default function HomePage() {
               </div>
             )}
 
-            <div className="mb-4">
-              <AudioPlayer
-                title="Listen to BSB Audio"
-                subtitle={
-                  audioState.status === 'idle' || audioState.status === 'error'
-                    ? 'Play a full book of the Berean Standard Bible.'
-                    : `Playing ${bookOptions.find((b) => b.abbrev === audioBook)?.name} — chapter ${audioState.chapter} of ${audioState.total}`
-                }
-                errorMessage="Couldn't load audio for this book/narrator."
-                status={audioState.status}
-                currentTime={audioProgress.currentTime}
-                duration={audioProgress.duration}
-                onPlay={handlePlayBookAudio}
-                onTogglePause={handleToggleBookAudioPause}
-                onSeekBack={() => handleSeekAudio(-10)}
-                onSeekForward={() => handleSeekAudio(10)}
-                onSeekTo={handleSeekAudioTo}
-                onNext={handleSkipBookChapter}
-                nextDisabled={audioState.chapter >= audioState.total}
-                onStop={handleStopBookAudio}
-                controls={(
-                  <>
-                    <select
-                      value={audioBook}
-                      onChange={(e) => setAudioBook(e.target.value)}
-                      disabled={audioState.status === 'playing' || audioState.status === 'paused'}
-                      className="rounded-xl border border-slate-300 bg-white px-2 py-1.5 text-sm text-slate-900 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200 disabled:opacity-60"
-                    >
-                      {bookOptions.map((book) => (
-                        <option key={book.abbrev} value={book.abbrev}>{book.name}</option>
-                      ))}
-                    </select>
-                    <select
-                      value={audioNarrator}
-                      onChange={(e) => setAudioNarrator(e.target.value)}
-                      disabled={audioState.status === 'playing' || audioState.status === 'paused'}
-                      className="rounded-xl border border-slate-300 bg-white px-2 py-1.5 text-sm text-slate-900 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200 disabled:opacity-60"
-                    >
-                      <option value="david">David</option>
-                      <option value="hays">Hays</option>
-                      <option value="souer">Souer</option>
-                    </select>
-                  </>
-                )}
-              />
-            </div>
             <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
             {projectIndex
               .slice()
@@ -410,7 +419,9 @@ export default function HomePage() {
   );
 }
 
-function ReadingPlansSummaryCard({ planProgress, readingActivity, openReadingPlans, readReadingPlanDay, toggleDay }) {
+function ReadingPlansSummaryCard({
+  planProgress, readingActivity, openReadingPlans, readReadingPlanDay, listenReadingPlanDay, studyReadingPlanDay, studyBuildBusy, toggleDay,
+}) {
   const active = planProgress.filter((p) => !p.completedAt);
   const streak = computeStreak(readingActivity);
 
@@ -486,13 +497,32 @@ function ReadingPlansSummaryCard({ planProgress, readingActivity, openReadingPla
                 </p>
               </div>
               {refs && (
-                <button
-                  type="button"
-                  onClick={() => readReadingPlanDay(refs[0].book, refs[0].chapter)}
-                  className="shrink-0 rounded-xl bg-indigo-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-indigo-500"
-                >
-                  Read
-                </button>
+                <div className="flex shrink-0 items-center gap-1.5">
+                  <button
+                    type="button"
+                    onClick={() => listenReadingPlanDay(refs[0].book, refs[0].chapter)}
+                    title="Listen to today's reading"
+                    className="rounded-xl border border-indigo-200 px-2.5 py-1.5 text-sm text-indigo-700 hover:bg-indigo-100"
+                  >
+                    🎧
+                  </button>
+                  <button
+                    type="button"
+                    disabled={studyBuildBusy}
+                    onClick={() => studyReadingPlanDay(refs, `${plan.title} — ${formatDayReadings(refs)}`)}
+                    title="Start a study project from this passage"
+                    className="rounded-xl border border-indigo-200 px-2.5 py-1.5 text-sm text-indigo-700 hover:bg-indigo-100 disabled:cursor-not-allowed disabled:opacity-50"
+                  >
+                    ✎
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => readReadingPlanDay(refs[0].book, refs[0].chapter)}
+                    className="rounded-xl bg-indigo-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-indigo-500"
+                  >
+                    Read
+                  </button>
+                </div>
               )}
             </div>
             <div className="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-slate-100">