Surface reading plan sync failures instead of failing silently

Reading plan sync was truly fire-and-forget: a failed PUT to
/api/reading-plans left the change stuck on that device with no
indication anything was wrong, which is exactly what "doesn't sync
across devices" looks like from the outside.

Moved the sync call out of the setState updater and into a proper effect
keyed on state, so success/failure can be tracked. Both Home and Reading
Plans now show a red banner with the actual error (HTTP status or network
error) and a Retry button when a sync fails, mirroring how study project
sync already reports errors. Verified the full cycle locally: normal sync,
a killed-server failure showing the banner, and Retry recovering once the
server's back.

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

src/pages/HomePage.jsx

@@ -24,6 +24,9 @@ export default function HomePage() {
     listenReadingPlanDay,
     studyReadingPlanDay,
     studyBuildBusy,
+    readingPlanSyncStatus,
+    readingPlanSyncError,
+    retryReadingPlanSync,
     audioBook, setAudioBook,
     audioNarrator, setAudioNarrator,
     audioState,
@@ -158,6 +161,20 @@ export default function HomePage() {
             </div>
           </div>
         )}
+        {readingPlanSyncStatus === 'error' && (
+          <div className="mb-6 flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-rose-200 bg-rose-50 p-4">
+            <p className="text-sm text-rose-700">
+              ⚠️ Couldn't sync your reading plans to the server — changes here are only saved on this device until this is fixed.
+            </p>
+            <button
+              type="button"
+              onClick={retryReadingPlanSync}
+              className="shrink-0 rounded-xl border border-rose-300 px-3 py-1.5 text-sm font-semibold text-rose-700 hover:bg-rose-100"
+            >
+              Retry
+            </button>
+          </div>
+        )}
         {/* Reading plans summary — shown regardless of whether there are any study projects yet */}
         <ReadingPlansSummaryCard
           planProgress={planProgress}

src/pages/ReadingPlansPage.jsx

@@ -39,6 +39,9 @@ export default function ReadingPlansPage() {
     listenReadingPlanDay,
     studyReadingPlanDay,
     studyBuildBusy,
+    readingPlanSyncStatus,
+    readingPlanSyncError,
+    retryReadingPlanSync,
   } = useApp();
   const [builderMode, setBuilderMode] = useState(null); // null | 'new' | a custom plan id to edit
 
@@ -80,6 +83,21 @@ export default function ReadingPlansPage() {
       </header>
 
       <main className="mx-auto max-w-5xl space-y-8 px-4 py-8 sm:px-6 lg:px-8">
+        {readingPlanSyncStatus === 'error' && (
+          <div className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm">
+            <span className="text-rose-700">
+              ⚠️ Couldn't sync your reading plans to the server — changes here are only saved on this device until this is fixed.
+              {readingPlanSyncError && <span className="block text-xs text-rose-500">{readingPlanSyncError}</span>}
+            </span>
+            <button
+              type="button"
+              onClick={retryReadingPlanSync}
+              className="shrink-0 rounded-xl border border-rose-300 px-3 py-1.5 font-semibold text-rose-700 hover:bg-rose-100"
+            >
+              Retry
+            </button>
+          </div>
+        )}
         {activeProgress.length > 0 && (
           <TodayPanel
             activeProgress={activeProgress}