Reading plans: integrated into the Reader, redesigned, with per-plan translation

Reader: plan strip with a dot per chapter, plan sheet (day picker, chapter ticks, translation, streak, other plans), end-of-day card that steps through the day and rolls into the next, and chapter-level auto-marking. Each plan remembers its own translation (BSB, ESV, NLT, CSB, NASB, NET) and the Reader follows it while a plan is open. Plans home redesigned in the reader's themes with a Continue card, in-progress plans, a filterable catalog, and sheets for details and the custom-plan builder. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-09-29 09:47:51 -04:00
1 parent c11b6a60bf
commit b1bc1c8ea4
@@ -0,0 +1,270 @@
+// Form for creating or editing a custom reading plan (title, days, cover photo,
+// books and chapter ranges). Themed with the reader's --r-* colour variables.
+import { useRef, useState } from 'react';
+import { bookOptions, CHAPTER_COUNTS } from '../../utils/bibleUtils.jsx';
+import {
+  bookChapterCount, ALL_BOOKS, OT_BOOKS, NT_BOOKS, GOSPELS, PENTATEUCH, WISDOM_BOOKS,
+} from '../../utils/readingPlans.js';
+
+// Downscales a picked image file to a reasonable cover-photo size and returns
+// a data URL — no server upload endpoint needed, it's stored right on the plan.
+export function resizeImageToDataUrl(file, maxWidth = 960, quality = 0.82) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = () => reject(new Error('Could not read file.'));
+    reader.onload = () => {
+      const img = new Image();
+      img.onerror = () => reject(new Error('Could not decode image.'));
+      img.onload = () => {
+        const scale = Math.min(1, maxWidth / img.width);
+        const canvas = document.createElement('canvas');
+        canvas.width = Math.round(img.width * scale);
+        canvas.height = Math.round(img.height * scale);
+        canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
+        resolve(canvas.toDataURL('image/jpeg', quality));
+      };
+      img.src = reader.result;
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
+const BOOK_PRESETS = [
+  ['All', ALL_BOOKS],
+  ['None', []],
+  ['Old Testament', OT_BOOKS],
+  ['New Testament', NT_BOOKS],
+  ['Gospels', GOSPELS],
+  ['Pentateuch', PENTATEUCH],
+  ['Psalms', ['PSA']],
+  ['Proverbs', ['PRO']],
+  ['Wisdom', WISDOM_BOOKS],
+];
+
+export default function CustomPlanBuilder({ initialValues, onSubmit, onCancel }) {
+  const [title, setTitle] = useState(initialValues?.title ?? '');
+  const [description, setDescription] = useState(initialValues?.description ?? '');
+  const [days, setDays] = useState(initialValues?.days ?? 30);
+  const [books, setBooks] = useState(initialValues?.books ?? []);
+  const [chapterRanges, setChapterRanges] = useState(initialValues?.chapterRanges ?? {});
+  const [image, setImage] = useState(initialValues?.image ?? null);
+  const [imageError, setImageError] = useState('');
+  const fileInputRef = useRef(null);
+  const isEditing = !!initialValues;
+
+  const toggleBook = (abbrev) => {
+    const isOn = books.includes(abbrev);
+    setBooks((prev) => (isOn ? prev.filter((b) => b !== abbrev) : [...prev, abbrev]));
+    if (isOn) {
+      setChapterRanges((prev) => {
+        if (!(abbrev in prev)) return prev;
+        const next = { ...prev };
+        delete next[abbrev];
+        return next;
+      });
+    }
+  };
+
+  const setChapterRange = (abbrev, key, value) => {
+    const total = CHAPTER_COUNTS[abbrev] ?? 1;
+    const clamped = Math.min(total, Math.max(1, Math.round(value) || 1));
+    setChapterRanges((prev) => ({
+      ...prev,
+      [abbrev]: { start: prev[abbrev]?.start ?? 1, end: prev[abbrev]?.end ?? total, [key]: clamped },
+    }));
+  };
+
+  const applyPreset = (list) => {
+    setBooks(list);
+    setChapterRanges({});
+  };
+
+  const pickImage = async (e) => {
+    const file = e.target.files?.[0];
+    e.target.value = '';
+    if (!file) return;
+    try {
+      setImageError('');
+      setImage(await resizeImageToDataUrl(file));
+    } catch {
+      setImageError("Couldn't use that image.");
+    }
+  };
+
+  const totalChapters = books.reduce((sum, b) => sum + bookChapterCount(b, chapterRanges), 0);
+  const canCreate = title.trim().length > 0 && totalChapters > 0 && days >= 1;
+
+  return (
+    <div className="rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-5">
+      <h3 className="mb-3 text-sm font-semibold text-[var(--r-text)]">{isEditing ? 'Edit reading plan' : 'New reading plan'}</h3>
+      <div className="grid gap-3 sm:grid-cols-2">
+        <label className="text-sm text-[var(--r-text)]">
+          Title
+          <input
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="e.g. Advent Readings"
+            className="mt-1 w-full rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]"
+          />
+        </label>
+        <label className="text-sm text-[var(--r-text)]">
+          Days
+          <input
+            type="number"
+            min="1"
+            max="365"
+            value={days}
+            onChange={(e) => setDays(Number(e.target.value))}
+            className="mt-1 w-full rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]"
+          />
+        </label>
+      </div>
+      <label className="mt-3 block text-sm text-[var(--r-text)]">
+        Description <span className="text-[var(--r-sub)]">(optional)</span>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          rows={2}
+          className="mt-1 w-full rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]"
+        />
+      </label>
+
+      <div className="mt-3">
+        <span className="text-sm text-[var(--r-text)]">Cover photo <span className="text-[var(--r-sub)]">(optional)</span></span>
+        <div className="mt-1 flex items-center gap-3">
+          {image ? (
+            <img src={image} alt="" className="h-16 w-28 rounded-lg object-cover" />
+          ) : (
+            <div className="flex h-16 w-28 items-center justify-center rounded-lg bg-[var(--r-bg)] text-2xl">🖼️</div>
+          )}
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-3 py-1.5 text-sm font-semibold text-[var(--r-text)] hover:bg-black/5"
+          >
+            {image ? 'Change photo' : 'Choose photo'}
+          </button>
+          {image && (
+            <button type="button" onClick={() => setImage(null)} className="text-sm text-[var(--r-sub)] hover:text-rose-500">
+              Remove
+            </button>
+          )}
+          <input ref={fileInputRef} type="file" accept="image/*" onChange={pickImage} className="hidden" />
+        </div>
+        {imageError && <p className="mt-1 text-xs text-rose-500">{imageError}</p>}
+      </div>
+
+      <div className="mt-4">
+        <div className="mb-2 flex flex-wrap items-center gap-2">
+          <span className="text-sm font-semibold text-[var(--r-text)]">Books</span>
+          {BOOK_PRESETS.map(([label, list]) => (
+            <button
+              key={label}
+              type="button"
+              onClick={() => applyPreset(list)}
+              className="rounded-full border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-2.5 py-1 text-xs font-semibold text-[var(--r-text)] hover:bg-black/5"
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+        <p className="mb-2 text-xs text-[var(--r-sub)]">
+          Check a book to include the whole thing, or narrow it to a chapter range with the fields that appear.
+        </p>
+        <div className="grid gap-3 sm:grid-cols-2">
+          <div className="max-h-56 overflow-y-auto rounded-xl border border-[var(--r-line)] p-2">
+            <p className="mb-1 px-1 text-xs font-semibold uppercase tracking-wide text-[var(--r-sub)]">Old Testament</p>
+            {bookOptions.filter((b) => OT_BOOKS.includes(b.abbrev)).map((b) => (
+              <BookRow
+                key={b.abbrev}
+                book={b}
+                checked={books.includes(b.abbrev)}
+                range={chapterRanges[b.abbrev]}
+                onToggle={() => toggleBook(b.abbrev)}
+                onRangeChange={(key, value) => setChapterRange(b.abbrev, key, value)}
+              />
+            ))}
+          </div>
+          <div className="max-h-56 overflow-y-auto rounded-xl border border-[var(--r-line)] p-2">
+            <p className="mb-1 px-1 text-xs font-semibold uppercase tracking-wide text-[var(--r-sub)]">New Testament</p>
+            {bookOptions.filter((b) => NT_BOOKS.includes(b.abbrev)).map((b) => (
+              <BookRow
+                key={b.abbrev}
+                book={b}
+                checked={books.includes(b.abbrev)}
+                range={chapterRanges[b.abbrev]}
+                onToggle={() => toggleBook(b.abbrev)}
+                onRangeChange={(key, value) => setChapterRange(b.abbrev, key, value)}
+              />
+            ))}
+          </div>
+        </div>
+        <p className="mt-2 text-xs text-[var(--r-sub)]">
+          {books.length} book{books.length !== 1 ? 's' : ''} selected · {totalChapters} chapters
+          {days > 0 && totalChapters > 0 && ` · ~${(totalChapters / days).toFixed(1)} ch/day`}
+        </p>
+        {isEditing && (
+          books.join() !== initialValues.books.join()
+          || Number(days) !== initialValues.days
+          || JSON.stringify(chapterRanges) !== JSON.stringify(initialValues.chapterRanges ?? {})
+        ) && (
+          <p className="mt-2 text-xs text-amber-600">
+            Changing the books, chapters, or day count restarts progress for any run of this plan already in your list.
+          </p>
+        )}
+      </div>
+
+      <div className="mt-4 flex items-center gap-3">
+        <button
+          type="button"
+          disabled={!canCreate}
+          onClick={() => onSubmit({ title, description, days, books, chapterRanges, image })}
+          className="rounded-xl bg-[var(--r-accent)] px-4 py-2 text-sm font-semibold text-[var(--r-on)] transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {isEditing ? 'Save changes' : 'Create plan'}
+        </button>
+        <button type="button" onClick={onCancel} className="text-sm text-[var(--r-sub)] hover:text-[var(--r-text)]">Cancel</button>
+      </div>
+    </div>
+  );
+}
+
+// One book row in the custom-plan builder: a checkbox, and — once checked — a
+// "ch. X–Y" chapter-range pair that defaults to the whole book.
+function BookRow({ book, checked, range, onToggle, onRangeChange }) {
+  const total = CHAPTER_COUNTS[book.abbrev] ?? 1;
+  return (
+    <label className="flex items-center gap-2 rounded-lg px-1 py-1 text-sm hover:bg-black/5">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={onToggle}
+        className="h-4 w-4 shrink-0 rounded border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] accent-[var(--r-accent)]"
+      />
+      <span className="flex-1">{book.name}</span>
+      {checked && total > 1 && (
+        <span className="flex shrink-0 items-center gap-1 text-xs text-[var(--r-sub)]" onClick={(e) => e.preventDefault()}>
+          ch.
+          <input
+            type="number"
+            min={1}
+            max={total}
+            value={range?.start ?? 1}
+            onChange={(e) => onRangeChange('start', e.target.value)}
+            className="w-11 rounded border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-1 py-0.5 text-center"
+          />
+          –
+          <input
+            type="number"
+            min={1}
+            max={total}
+            value={range?.end ?? total}
+            onChange={(e) => onRangeChange('end', e.target.value)}
+            className="w-11 rounded border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-1 py-0.5 text-center"
+          />
+          <span className="text-[var(--r-sub)]">/{total}</span>
+        </span>
+      )}
+    </label>
+  );
+}
@@ -0,0 +1,113 @@
+// Detail for one plan. Two modes: an in-progress plan (days to tick or jump into,
+// its translation, catch-up / restart / remove) and a catalog plan (preview of the
+// first days, pick a translation, start it).
+import { useRef, useState } from 'react';
+import Sheet from '../reader/Sheet.jsx';
+import TranslationSelect from './TranslationSelect.jsx';
+import { resizeImageToDataUrl } from './CustomPlanBuilder.jsx';
+import { formatDayReadings, getPlanSchedule, daysBehindPace } from '../../utils/readingPlans.js';
+
+const btn = 'rounded-xl border border-[var(--r-line)] px-3 py-2 text-sm hover:bg-black/5';
+const primary = 'w-full rounded-xl bg-[var(--r-accent)] py-2.5 text-sm font-medium text-[var(--r-on)] hover:opacity-90 disabled:opacity-50';
+
+function ActiveBody({ plan, progress, onClose, actions }) {
+  const schedule = getPlanSchedule(plan.id);
+  const behind = daysBehindPace(plan, progress);
+  const pct = plan.days > 0 ? Math.round((progress.completedDays.length / plan.days) * 100) : 0;
+  return (
+    <>
+      <div className="mb-3 flex items-center justify-between text-sm">
+        <span>{progress.completedDays.length} of {plan.days} days · {pct}%</span>
+        <span className="flex items-center gap-2">
+          <span className="text-xs text-[var(--r-sub)]">Read in</span>
+          <TranslationSelect value={progress.translation ?? actions.defaultTranslation} onChange={(t) => actions.setTranslation(progress.id, t)} />
+        </span>
+      </div>
+      <div className="mb-3 h-1.5 overflow-hidden rounded-full bg-[var(--r-line)]"><div className="h-full bg-[var(--r-accent)]" style={{ width: `${pct}%` }} /></div>
+      {behind >= 2 && (
+        <div className="mb-3 flex items-center justify-between rounded-xl border border-[var(--r-line)] px-3 py-2 text-xs">
+          <span className="text-[var(--r-sub)]">{behind} days behind pace</span>
+          <button type="button" onClick={() => actions.recalibrate(progress.id)} className="font-medium text-[var(--r-accent)] hover:underline">Catch me up</button>
+        </div>
+      )}
+      <div className="max-h-[38vh] overflow-y-auto rounded-xl border border-[var(--r-line)]">
+        {schedule.map((refs, i) => {
+          const done = progress.completedDays.includes(i);
+          return (
+            <div key={i} className="flex items-center gap-3 border-b border-[var(--r-line)] px-3 py-2 last:border-0">
+              <input type="checkbox" checked={done} onChange={() => actions.toggleDay(progress.id, i, plan.days)} className="h-4 w-4 shrink-0 accent-[var(--r-accent)]" aria-label={`Day ${i + 1} read`} />
+              <span className={`flex-1 text-sm ${done ? 'text-[var(--r-sub)] line-through' : ''}`}>Day {i + 1} · {formatDayReadings(refs)}</span>
+              <button type="button" onClick={() => { onClose(); actions.read(progress.id, i); }} className="shrink-0 text-xs font-medium text-[var(--r-accent)] hover:underline">Read</button>
+            </div>
+          );
+        })}
+      </div>
+      <div className="mt-4 flex items-center justify-between text-xs">
+        <button type="button" onClick={() => { if (window.confirm('Restart this plan from day 1?')) { actions.restart(progress.id); onClose(); } }} className="text-[var(--r-sub)] hover:text-[var(--r-text)]">Restart</button>
+        <button type="button" onClick={() => { if (window.confirm('Remove this plan?')) { actions.remove(progress.id); onClose(); } }} className="text-red-600 hover:underline">Remove</button>
+      </div>
+    </>
+  );
+}
+
+function CatalogBody({ plan, active, completedCount, onClose, actions }) {
+  const [translation, setTranslation] = useState(actions.defaultTranslation);
+  const [imageError, setImageError] = useState('');
+  const fileRef = useRef(null);
+  const schedule = getPlanSchedule(plan.id);
+  const chapters = schedule.reduce((n, d) => n + d.length, 0);
+  const pickImage = async (e) => {
+    const file = e.target.files?.[0];
+    e.target.value = '';
+    if (!file) return;
+    try { setImageError(''); actions.updateCover(plan.id, await resizeImageToDataUrl(file)); } catch { setImageError('Couldn’t use that image.'); }
+  };
+  return (
+    <>
+      {plan.image && <img src={plan.image} alt="" onError={(e) => { e.currentTarget.style.display = 'none'; }} className="mb-3 h-32 w-full rounded-xl object-cover" style={{ objectPosition: plan.imageFocus ?? 'center' }} />}
+      <p className="text-sm text-[var(--r-sub)]">{plan.description || 'A custom reading plan.'}</p>
+      <p className="mt-2 text-xs text-[var(--r-sub)]">{plan.days} days · {chapters} chapters · about {(chapters / plan.days).toFixed(1)} a day{completedCount > 0 ? ` · completed ${completedCount}×` : ''}</p>
+
+      <p className="mb-1 mt-4 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">First days</p>
+      <div className="rounded-xl border border-[var(--r-line)]">
+        {schedule.slice(0, 5).map((refs, i) => (
+          <div key={i} className="border-b border-[var(--r-line)] px-3 py-1.5 text-sm last:border-0">Day {i + 1} · {formatDayReadings(refs)}</div>
+        ))}
+      </div>
+
+      {!active && (
+        <div className="mt-4 flex items-center justify-between text-sm">
+          <span>Read in</span>
+          <TranslationSelect value={translation} onChange={setTranslation} />
+        </div>
+      )}
+      <div className="mt-3">
+        {active
+          ? <button type="button" className={primary} onClick={() => { onClose(); actions.read(active.id, actions.nextDay(plan, active)); }}>Continue reading</button>
+          : <button type="button" className={primary} onClick={() => { actions.start(plan.id, translation); onClose(); }}>{completedCount > 0 ? 'Start again' : 'Start plan'}</button>}
+      </div>
+
+      {plan.custom && (
+        <div className="mt-4 flex flex-wrap items-center gap-3 border-t border-[var(--r-line)] pt-3 text-xs">
+          <button type="button" onClick={() => { onClose(); actions.edit(plan.id); }} className="text-[var(--r-sub)] hover:text-[var(--r-text)]">Edit plan</button>
+          <button type="button" onClick={() => fileRef.current?.click()} className="text-[var(--r-sub)] hover:text-[var(--r-text)]">{plan.image ? 'Change cover' : 'Add cover photo'}</button>
+          {plan.image && <button type="button" onClick={() => actions.updateCover(plan.id, null)} className="text-[var(--r-sub)] hover:text-red-600">Remove cover</button>}
+          <button type="button" onClick={() => { if (window.confirm('Delete this plan? Its progress history will be removed too.')) { actions.delete(plan.id); onClose(); } }} className="ml-auto text-red-600 hover:underline">Delete</button>
+          <input ref={fileRef} type="file" accept="image/*" onChange={pickImage} className="hidden" />
+          {imageError && <p className="w-full text-red-600">{imageError}</p>}
+        </div>
+      )}
+    </>
+  );
+}
+
+export default function PlanDetailSheet({ plan, progress, active, completedCount, onClose, actions }) {
+  if (!plan) return null;
+  return (
+    <Sheet open onClose={onClose} title={<span>{plan.icon ? `${plan.icon} ` : ''}{plan.title}</span>}>
+      {progress
+        ? <ActiveBody plan={plan} progress={progress} onClose={onClose} actions={actions} />
+        : <CatalogBody plan={plan} active={active} completedCount={completedCount} onClose={onClose} actions={actions} />}
+    </Sheet>
+  );
+}
@@ -0,0 +1,11 @@
+import { READER_TRANSLATIONS } from '../../hooks/useBibleReader.js';
+
+// Every Bible the app can read in — used for a plan's own translation.
+export default function TranslationSelect({ value, onChange, className = '' }) {
+  return (
+    <select value={value} onChange={(e) => onChange(e.target.value)}
+      className={`rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2 py-1 text-sm text-[var(--r-text)] ${className}`}>
+      {READER_TRANSLATIONS.map((t) => <option key={t.id} value={t.id}>{t.id} · {t.name}</option>)}
+    </select>
+  );
+}