Home: move prayers and recall history to sidebar, add left column for recall cards

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

src/components/PinnedPrayers.jsx

@@ -9,7 +9,7 @@ export default function PinnedPrayers() {
   if (!list.length) return null;
   const today = localDateString();
   return (
-    <section aria-label="Pinned prayers" className="mb-4 rounded-xl border border-[var(--r-line)] bg-[var(--r-bar)] px-4 py-3 text-sm">
+    <section aria-label="Pinned prayers" className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bar)] px-4 py-3 text-sm">
       <div className="mb-2 flex items-center justify-between gap-3">
         <span className="font-medium">Praying for</span>
         <button type="button" onClick={openPrayer} className="text-xs text-[var(--r-accent)] hover:underline">Open journal →</button>

src/components/RecallHistory.jsx

@@ -15,7 +15,7 @@ export default function RecallHistory() {
   const { counts, total, recent } = recallSummary(history);
 
   return (
-    <section aria-label="Recall history" className="mb-4 rounded-xl border border-[var(--r-line)] bg-[var(--r-bar)] px-4 py-3 text-sm">
+    <section aria-label="Recall history" className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bar)] px-4 py-3 text-sm">
       <button type="button" onClick={() => setOpen((o) => !o)} aria-expanded={open} className="flex w-full flex-wrap items-center justify-between gap-3 text-left">
         <span><span className="font-medium">Recall history</span> <span className="text-xs text-[var(--r-sub)]">{total} recall{total === 1 ? '' : 's'} · {counts.solid} had it · {counts.partly} partly · {counts.forgot} slipped</span></span>
         <span className="flex items-center gap-1" aria-label="Last eight weeks">

src/pages/HomePage.jsx

@@ -146,8 +146,14 @@ export default function HomePage() {
         </>
       )}
     >
-      <main className="mx-auto grid max-w-6xl gap-6 px-4 py-6 lg:grid-cols-[minmax(0,1fr)_21rem]">
+      <main className="mx-auto grid max-w-6xl gap-y-6 px-4 py-6 lg:grid-cols-[minmax(0,1fr)_21rem] xl:max-w-[88rem] xl:grid-cols-[auto_minmax(0,1fr)_21rem]">
-        <section className="min-w-0">
+        {/* Left column: the recall and daily-verse cards (collapses when neither has anything to show) */}
+        <aside className="empty:hidden lg:col-span-2 xl:col-span-1 xl:w-80 xl:pr-6">
+          <WeeklyRecall />
+          <IqDailyCard />
+        </aside>
+
+        <section className="min-w-0 lg:pr-6">
           {projectIndex.length > 0 && (() => {
             const age = backupAge(lastBackupAt());
             return (
@@ -157,11 +163,7 @@ export default function HomePage() {
               </p>
             );
           })()}
-          <PinnedPrayers />
           <DailyFive />
-          <WeeklyRecall />
-          <RecallHistory />
-          <IqDailyCard />
           {autoRestoredCount !== null && (
             <div className={notice}>Synced {autoRestoredCount} project{autoRestoredCount > 1 ? 's' : ''} from another device.</div>
           )}
@@ -348,6 +350,9 @@ export default function HomePage() {
           <TodayCard planProgress={planProgress} readingActivity={readingActivity} openReadingPlans={openReadingPlans}
             openPlanReading={openPlanReading} studyReadingPlanDay={studyReadingPlanDay} studyBuildBusy={studyBuildBusy} />
 
+          <PinnedPrayers />
+          <RecallHistory />
+
           {/* BSB audio player — always shown, so it's easy to find */}
           <AudioPlayer
             title="Listen to BSB Audio"