Fold the Study notes/resources halves; compare translations

- Your notes and Commentary & resources can each be folded so the other
  fills the right column (remembered on this device; never both folded).
- Compare has a Translations view: pick BSB/ESV/NET/NLT/CSB/NASB and read the
  chunk verse by verse, with each translation's notice.

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

src/pages/StudyPage.jsx

@@ -43,6 +43,18 @@ export default function StudyPage() {
   const [tab, setTab] = useResourceTab();
   const [openWordId, setOpenWordId] = useState(null);
   const [comparing, setComparing] = useState(false);
+  // Either half of the right column can be folded away so the other fills it (remembered on this device).
+  const [folded, setFolded] = useState(() => {
+    try { const f = JSON.parse(localStorage.getItem('study-folded')); return { notes: !!f?.notes, resources: !!f?.resources && !f?.notes }; } catch { return { notes: false, resources: false }; }
+  });
+  const toggleFold = (which) => setFolded((cur) => {
+    const other = which === 'notes' ? 'resources' : 'notes';
+    // folding the last open half opens the other one instead, so the column is never empty
+    const next = { ...cur, [which]: !cur[which] };
+    if (next[which] && next[other]) next[other] = false;
+    try { localStorage.setItem('study-folded', JSON.stringify(next)); } catch { /* storage unavailable */ }
+    return next;
+  });
   useEffect(() => { setOpenWordId(null); }, [selectedChunk?.id]);
 
   const resources = useStudyResources({
@@ -132,20 +144,33 @@ export default function StudyPage() {
           </div>
           {selectedChunk && chapter && (
             <>
-              <section aria-label="Notes" className="flex min-h-[22rem] flex-col overflow-hidden rounded-2xl border border-[var(--r-line)] bg-[var(--r-bg)] lg:min-h-0 lg:flex-[11]">
-                <h2 className="shrink-0 border-b border-[var(--r-line)] px-4 py-2.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Your notes</h2>
-                <div className="min-h-0 flex-1 overflow-y-auto p-3">
+              <section aria-label="Notes" className={`flex flex-col overflow-hidden rounded-2xl border border-[var(--r-line)] bg-[var(--r-bg)] ${folded.notes ? 'shrink-0' : 'min-h-[22rem] lg:min-h-0 lg:flex-[11]'}`}>
+                <h2 className="shrink-0">
+                  <button type="button" onClick={() => toggleFold('notes')} aria-expanded={!folded.notes}
+                    className="flex w-full items-center justify-between px-4 py-2.5 text-left text-[11px] uppercase tracking-wide text-[var(--r-sub)] hover:bg-black/5">
+                    Your notes<span aria-hidden="true">{folded.notes ? '▸' : '▾'}</span>
+                  </button>
+                </h2>
+                <div className={`min-h-0 flex-1 overflow-y-auto border-t border-[var(--r-line)] p-3 ${folded.notes ? 'hidden' : ''}`}>
                   <NotesPane chunk={selectedChunk} updateChunk={updateChunk} allTags={allTags} templateId={project?.templateDef ?? project?.templateId} saveTemplate={saveUserTemplate} notify={notify}
                     onPray={() => startPrayerFor(formatChunkReference(project, chapterIndex, selectedChunk, '–'))} />
                 </div>
               </section>
-              <section aria-label="Resources" className="flex min-h-[24rem] flex-col overflow-hidden rounded-2xl border border-[var(--r-line)] bg-[var(--r-bg)] lg:min-h-0 lg:flex-[10]">
-                <ResourcePane
-                  tab={tab} setTab={setTab} chunk={selectedChunk} chapter={chapter} chapterIndex={chapterIndex} project={project}
-                  updateChunk={updateChunk} notify={notify}
-                  resources={resources} wordStudy={wordStudy} crossRefs={crossRefs}
-                  openWordId={openWordId} setOpenWordId={setOpenWordId}
-                />
+              <section aria-label="Resources" className={`flex flex-col overflow-hidden rounded-2xl border border-[var(--r-line)] bg-[var(--r-bg)] ${folded.resources ? 'shrink-0' : 'min-h-[24rem] lg:min-h-0 lg:flex-[10]'}`}>
+                <h2 className="shrink-0">
+                  <button type="button" onClick={() => toggleFold('resources')} aria-expanded={!folded.resources}
+                    className="flex w-full items-center justify-between px-4 py-2.5 text-left text-[11px] uppercase tracking-wide text-[var(--r-sub)] hover:bg-black/5">
+                    Commentary &amp; resources<span aria-hidden="true">{folded.resources ? '▸' : '▾'}</span>
+                  </button>
+                </h2>
+                <div className={`flex min-h-0 flex-1 flex-col border-t border-[var(--r-line)] ${folded.resources ? 'hidden' : ''}`}>
+                  <ResourcePane
+                    tab={tab} setTab={setTab} chunk={selectedChunk} chapter={chapter} chapterIndex={chapterIndex} project={project}
+                    updateChunk={updateChunk} notify={notify}
+                    resources={resources} wordStudy={wordStudy} crossRefs={crossRefs}
+                    openWordId={openWordId} setOpenWordId={setOpenWordId}
+                  />
+                </div>
               </section>
             </>
           )}