Add reading plans: catalog, progress tracking, and custom plans

Replaces the old single-book reading goal with a full Reading Plans page:
9 built-in plans (Whole Bible, OT/NT, topical) with cover photos and
color-themed cards, day-by-day checklists synced to the server per user,
inline "mark today read" in the Bible reader, and user-created plans with
their own book picker and an optional uploaded cover photo.

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

src/pages/HomePage.jsx

@@ -4,21 +4,21 @@ import AuthStatus from '../components/AuthStatus.jsx';
 import AudioPlayer from '../components/AudioPlayer.jsx';
 import {
   bookOptions,
-  CHAPTER_COUNTS,
   formatChunkReference,
   formatRelativeDate,
   loadProjectIndex,
 } from '../utils/bibleUtils.jsx';
 import { loadProjectById } from '../utils/projectStorage.js';
+import { getPlan, getPlanSchedule, formatDayReadings, nextUnreadDayIndex } from '../utils/readingPlans.js';
 
 export default function HomePage() {
   const {
     autoRestoredCount,
     staleLocalProjects,
     projectIndex,
-    readingPlan,
-    createReadingPlan,
-    clearReadingPlan,
+    planProgress,
+    openReadingPlans,
+    readReadingPlanDay,
     audioBook, setAudioBook,
     audioNarrator, setAudioNarrator,
     audioState,
@@ -99,6 +99,14 @@ export default function HomePage() {
             >
               📖 Read Bible
             </button>
+            <button
+              type="button"
+              onClick={openReadingPlans}
+              className="rounded-xl border border-slate-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-slate-700"
+            >
+              <span className="hidden sm:inline">📅 Reading Plans</span>
+              <span className="sm:hidden">📅 Plans</span>
+            </button>
             <button
               type="button"
               onClick={openImportProject}
@@ -233,8 +241,12 @@ export default function HomePage() {
               </div>
             )}
 
-            {/* Reading plan card */}
-            <ReadingPlanCard readingPlan={readingPlan} createReadingPlan={createReadingPlan} clearReadingPlan={clearReadingPlan} openBibleReader={openBibleReader} />
+            {/* Reading plans summary */}
+            <ReadingPlansSummaryCard
+              planProgress={planProgress}
+              openReadingPlans={openReadingPlans}
+              readReadingPlanDay={readReadingPlanDay}
+            />
 
             <div className="mb-4">
               <AudioPlayer
@@ -394,108 +406,73 @@ export default function HomePage() {
   );
 }
 
-function ReadingPlanCard({ readingPlan, createReadingPlan, clearReadingPlan, openBibleReader }) {
-  const [showForm, setShowForm] = useState(false);
-  const [planBook, setPlanBook] = useState(bookOptions[0].abbrev);
-  const [planWeeks, setPlanWeeks] = useState(4);
+function ReadingPlansSummaryCard({ planProgress, openReadingPlans, readReadingPlanDay }) {
+  const active = planProgress.filter((p) => !p.completedAt);
 
-  if (readingPlan) {
-    const pct = readingPlan.totalChapters > 0
-      ? Math.round((readingPlan.chaptersRead.length / readingPlan.totalChapters) * 100)
-      : 0;
-    const daysLeft = Math.max(0, Math.ceil((readingPlan.targetDate - Date.now()) / 86400000));
-    const chapLeft = readingPlan.totalChapters - readingPlan.chaptersRead.length;
-    const paceNeeded = daysLeft > 0 ? (chapLeft / daysLeft).toFixed(1) : '—';
+  if (active.length === 0) {
     return (
-      <div className="mb-4 rounded-3xl border border-emerald-200 bg-emerald-50 p-5 shadow-panel">
-        <div className="flex items-start justify-between gap-3">
-          <div>
-            <p className="text-xs font-semibold uppercase tracking-widest text-emerald-600">Reading Plan</p>
-            <h3 className="mt-1 text-base font-semibold text-slate-900">{readingPlan.bookName}</h3>
-            <p className="mt-0.5 text-sm text-slate-600">
-              {readingPlan.chaptersRead.length} / {readingPlan.totalChapters} chapters · {daysLeft} day{daysLeft !== 1 ? 's' : ''} left · {paceNeeded} ch/day needed
-            </p>
-          </div>
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={openBibleReader}
-              className="rounded-xl bg-emerald-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-emerald-500"
-            >
-              Read
-            </button>
-            <button
-              type="button"
-              onClick={() => { if (window.confirm('Clear reading plan?')) clearReadingPlan(); }}
-              className="rounded-xl border border-emerald-300 px-3 py-1.5 text-sm text-emerald-700 hover:bg-emerald-100"
-            >
-              Clear
-            </button>
-          </div>
+      <div className="mb-4 flex items-center justify-between gap-3 rounded-3xl border border-slate-200 bg-white p-5 shadow-panel">
+        <div>
+          <p className="text-sm font-semibold text-slate-700">Reading Plans</p>
+          <p className="text-xs text-slate-500">Read through the Bible, the Gospels, Psalms, and more — one day at a time.</p>
         </div>
-        <div className="mt-3 h-2.5 w-full overflow-hidden rounded-full bg-emerald-200">
-          <div className="h-full rounded-full bg-emerald-500 transition-all" style={{ width: `${pct}%` }} />
-        </div>
-        <p className="mt-1 text-right text-xs text-emerald-700">{pct}%</p>
-        {readingPlan.chaptersRead.length > 0 && (
-          <p className="mt-1 text-xs text-slate-500">
-            Read: ch. {readingPlan.chaptersRead.slice(0, 12).join(', ')}{readingPlan.chaptersRead.length > 12 ? '…' : ''}
-          </p>
-        )}
+        <button
+          type="button"
+          onClick={openReadingPlans}
+          className="shrink-0 rounded-xl border border-slate-300 px-3 py-1.5 text-sm font-semibold text-slate-700 hover:bg-slate-50"
+        >
+          Browse plans
+        </button>
       </div>
     );
   }
 
   return (
-    <div className="mb-4 rounded-3xl border border-slate-200 bg-white p-5 shadow-panel">
-      {showForm ? (
-        <div className="flex flex-wrap items-center gap-3">
-          <span className="text-sm font-semibold text-slate-700">Read</span>
-          <select
-            value={planBook}
-            onChange={(e) => setPlanBook(e.target.value)}
-            className="rounded-xl border border-slate-300 bg-slate-50 px-2 py-1.5 text-sm text-slate-900 focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200"
-          >
-            {bookOptions.map((b) => (
-              <option key={b.abbrev} value={b.abbrev}>{b.name} ({CHAPTER_COUNTS[b.abbrev] ?? '?'} ch)</option>
-            ))}
-          </select>
-          <span className="text-sm text-slate-600">in</span>
-          <select
-            value={planWeeks}
-            onChange={(e) => setPlanWeeks(Number(e.target.value))}
-            className="rounded-xl border border-slate-300 bg-slate-50 px-2 py-1.5 text-sm text-slate-900 focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200"
-          >
-            {[1,2,3,4,6,8,12,16,26,52].map((w) => <option key={w} value={w}>{w} week{w !== 1 ? 's' : ''}</option>)}
-          </select>
-          <button
-            type="button"
-            onClick={() => {
-              const book = bookOptions.find((b) => b.abbrev === planBook);
-              createReadingPlan(planBook, book?.name ?? planBook, planWeeks);
-              setShowForm(false);
-            }}
-            className="rounded-xl bg-emerald-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-emerald-500"
-          >
-            Start plan
-          </button>
-          <button type="button" onClick={() => setShowForm(false)} className="text-sm text-slate-400 hover:text-slate-600">Cancel</button>
-        </div>
-      ) : (
-        <div className="flex items-center justify-between gap-3">
-          <div>
-            <p className="text-sm font-semibold text-slate-700">Reading Plan</p>
-            <p className="text-xs text-slate-500">Set a goal to read through a book, track chapters as you go.</p>
+    <div className="mb-4 space-y-3">
+      {active.map((progress) => {
+        const plan = getPlan(progress.planId);
+        if (!plan) return null;
+        const schedule = getPlanSchedule(progress.planId);
+        const pct = plan.days > 0 ? Math.round((progress.completedDays.length / plan.days) * 100) : 0;
+        const nextDay = nextUnreadDayIndex(plan, progress.completedDays);
+        const nextRefs = nextDay != null ? schedule[nextDay] : null;
+        return (
+          <div key={progress.id} className="rounded-3xl border border-emerald-200 bg-emerald-50 p-5 shadow-panel">
+            <div className="flex items-start justify-between gap-3">
+              <div>
+                <p className="text-xs font-semibold uppercase tracking-widest text-emerald-600">Reading Plan</p>
+                <h3 className="mt-1 text-base font-semibold text-slate-900">{plan.title}</h3>
+                <p className="mt-0.5 text-sm text-slate-600">
+                  {progress.completedDays.length} / {plan.days} days
+                  {nextRefs && <> · Next: {formatDayReadings(nextRefs)}</>}
+                </p>
+              </div>
+              <div className="flex items-center gap-2">
+                {nextRefs && (
+                  <button
+                    type="button"
+                    onClick={() => readReadingPlanDay(nextRefs[0].book, nextRefs[0].chapter)}
+                    className="rounded-xl bg-emerald-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-emerald-500"
+                  >
+                    Read
+                  </button>
+                )}
+                <button
+                  type="button"
+                  onClick={openReadingPlans}
+                  className="rounded-xl border border-emerald-300 px-3 py-1.5 text-sm text-emerald-700 hover:bg-emerald-100"
+                >
+                  View
+                </button>
+              </div>
+            </div>
+            <div className="mt-3 h-2.5 w-full overflow-hidden rounded-full bg-emerald-200">
+              <div className="h-full rounded-full bg-emerald-500 transition-all" style={{ width: `${pct}%` }} />
+            </div>
+            <p className="mt-1 text-right text-xs text-emerald-700">{pct}%</p>
           </div>
-          <button
-            type="button"
-            onClick={() => setShowForm(true)}
-            className="shrink-0 rounded-xl border border-slate-300 px-3 py-1.5 text-sm font-semibold text-slate-700 hover:bg-slate-50"
-          >
-            Set goal
-          </button>
-        </div>
-      )}
+        );
+      })}
     </div>
   );
 }