Fix plan days with no chapters, add a way out of ink mode, harden ntfy reminders

Plans can no longer have more days than chapters (existing ones heal), and
opening a plan never strands the Reader on an empty day. The Reader shows
Done drawing while inking (Escape also exits). Reminders use the user's own
timezone, send within a 3 hour grace window, and Settings has a Send test
notification button.

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

src/components/plans/CustomPlanBuilder.jsx

@@ -3,7 +3,7 @@
 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,
+  bookChapterCount, clampPlanDays, 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
@@ -201,8 +201,13 @@ export default function CustomPlanBuilder({ initialValues, onSubmit, onCancel })
         </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`}
+          {days > 0 && totalChapters > 0 && ` · ~${(totalChapters / Math.min(days, totalChapters)).toFixed(1)} ch/day`}
         </p>
+        {totalChapters > 0 && Number(days) > totalChapters && (
+          <p className="mt-1 text-xs text-[var(--r-accent)]">
+            That’s more days than chapters, so the plan will be {totalChapters} days, one chapter a day.
+          </p>
+        )}
         {isEditing && (
           books.join() !== initialValues.books.join()
           || Number(days) !== initialValues.days
@@ -218,7 +223,7 @@ export default function CustomPlanBuilder({ initialValues, onSubmit, onCancel })
         <button
           type="button"
           disabled={!canCreate}
-          onClick={() => onSubmit({ title, description, days, books, chapterRanges, image })}
+          onClick={() => onSubmit({ title, description, days: clampPlanDays(books, chapterRanges, 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'}

src/components/reader/ReaderBars.jsx

@@ -5,7 +5,7 @@ import { BookmarkIcon } from '../../utils/bibleUtils.jsx';
 
 const iconBtn = 'flex h-9 w-9 items-center justify-center rounded-lg text-[var(--r-sub)] transition hover:bg-black/5 disabled:opacity-30 disabled:hover:bg-transparent';
 
-export function TopBar({ title, onBack, onOpenNavigator, onSearch, onBookmarks, bookmarkCount, onSettings }) {
+export function TopBar({ title, onBack, onOpenNavigator, onSearch, onBookmarks, bookmarkCount, onSettings, onDoneDrawing }) {
   return (
     <div className="sticky top-0 z-30 border-b border-[var(--r-line)] bg-[var(--r-bar)] font-sans">
       <div className="mx-auto flex h-12 max-w-4xl items-center gap-1 px-2">
@@ -14,11 +14,20 @@ export function TopBar({ title, onBack, onOpenNavigator, onSearch, onBookmarks,
           className="mx-auto flex min-w-0 items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-[var(--r-text)] hover:bg-black/5">
           <span className="truncate">{title}</span><ChevronDown />
         </button>
-        <button type="button" onClick={onSearch} className={iconBtn} aria-label="Search"><SearchIcon /></button>
-        <button type="button" onClick={onBookmarks} className={`${iconBtn} relative ${bookmarkCount ? 'text-[var(--r-accent)]' : ''}`} aria-label="Bookmarks">
-          <BookmarkIcon filled={bookmarkCount > 0} />
-        </button>
-        <button type="button" onClick={onSettings} className={`${iconBtn} w-10 text-sm font-medium`} aria-label="Reading settings">Aa</button>
+        {onDoneDrawing ? (
+          <button type="button" onClick={onDoneDrawing}
+            className="mr-1 flex items-center gap-1.5 rounded-full bg-[var(--r-accent)] px-4 py-1.5 text-xs font-medium text-[var(--r-on)]">
+            <CheckIcon />Done drawing
+          </button>
+        ) : (
+          <>
+            <button type="button" onClick={onSearch} className={iconBtn} aria-label="Search"><SearchIcon /></button>
+            <button type="button" onClick={onBookmarks} className={`${iconBtn} relative ${bookmarkCount ? 'text-[var(--r-accent)]' : ''}`} aria-label="Bookmarks">
+              <BookmarkIcon filled={bookmarkCount > 0} />
+            </button>
+            <button type="button" onClick={onSettings} className={`${iconBtn} w-10 text-sm font-medium`} aria-label="Reading settings">Aa</button>
+          </>
+        )}
       </div>
     </div>
   );