Redesign the Reader; add ESV

New reading surface with paper/sepia/dark themes, slim top and bottom bars,
and sheets for navigation, search, settings, audio and per-verse study tools.
Plan progress is built into the reader. Page-flip mode removed. ESV added via
the server-side proxy (ESV_API_KEY).

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

src/components/reader/NavigatorSheet.jsx

@@ -0,0 +1,54 @@
+// One place to pick translation, book and chapter (replaces three dropdowns).
+import { useState } from 'react';
+import Sheet from './Sheet.jsx';
+import { bookOptions, CHAPTER_COUNTS } from '../../utils/bibleUtils.jsx';
+import { READER_TRANSLATIONS } from '../../hooks/useBibleReader.js';
+
+const NT_START = bookOptions.findIndex((b) => b.abbrev === 'MAT');
+const chip = 'rounded-lg border px-2 py-2 text-center text-sm transition';
+
+export default function NavigatorSheet({ open, onClose, bookAbbrev, chapter, translation, onTranslation, onGo }) {
+  const [pickedBook, setPickedBook] = useState(null); // book abbrev whose chapters are showing
+  const close = () => { setPickedBook(null); onClose(); };
+  const book = pickedBook ? bookOptions.find((b) => b.abbrev === pickedBook) : null;
+
+  const bookButton = (b) => (
+    <button key={b.abbrev} type="button" onClick={() => setPickedBook(b.abbrev)}
+      className={`${chip} truncate ${b.abbrev === bookAbbrev ? 'border-[var(--r-accent)] text-[var(--r-accent)]' : 'border-[var(--r-line)] hover:bg-black/5'}`}>
+      {b.name}
+    </button>
+  );
+
+  return (
+    <Sheet open={open} onClose={close} title={book ? (
+      <button type="button" onClick={() => setPickedBook(null)} className="text-[var(--r-sub)] hover:text-[var(--r-text)]">‹ All books · <span className="text-[var(--r-text)]">{book.name}</span></button>
+    ) : 'Go to'}>
+      {!book && (
+        <>
+          <div className="mb-3 flex flex-wrap gap-1.5">
+            {READER_TRANSLATIONS.map((t) => (
+              <button key={t.id} type="button" onClick={() => onTranslation(t.id)} title={t.name}
+                className={`rounded-full border px-3 py-1 text-xs font-medium ${t.id === translation ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`}>
+                {t.id}
+              </button>
+            ))}
+          </div>
+          <p className="mb-1.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Old Testament</p>
+          <div className="mb-4 grid grid-cols-3 gap-1.5 sm:grid-cols-4">{bookOptions.slice(0, NT_START).map(bookButton)}</div>
+          <p className="mb-1.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">New Testament</p>
+          <div className="grid grid-cols-3 gap-1.5 sm:grid-cols-4">{bookOptions.slice(NT_START).map(bookButton)}</div>
+        </>
+      )}
+      {book && (
+        <div className="grid grid-cols-6 gap-1.5 sm:grid-cols-8">
+          {Array.from({ length: CHAPTER_COUNTS[book.abbrev] ?? 1 }, (_, i) => i + 1).map((n) => (
+            <button key={n} type="button" onClick={() => { onGo(book.abbrev, n); close(); }}
+              className={`${chip} ${book.abbrev === bookAbbrev && n === chapter ? 'border-[var(--r-accent)] bg-[var(--r-accent)] text-[var(--r-on)]' : 'border-[var(--r-line)] hover:bg-black/5'}`}>
+              {n}
+            </button>
+          ))}
+        </div>
+      )}
+    </Sheet>
+  );
+}