Redesign project header and study navigation

- Header: navigation buttons grouped; Study Guide, Podcast, and
  Pronunciation Guide move into a Tools menu (disabled until a chunk
  exists), set apart from Export and Share by a divider.
- Only one header dropdown is open at a time, and it closes on an
  outside click or Escape.
- Study page: drop the duplicate Prev/Next and counter at the top; the
  fixed bottom bar is the single chunk navigation and now shows a
  readable "Chunk N of M".
- Mobile empty-state hint points to Back to Chunks.
- Tests: Tools menu, one-dropdown-at-a-time, Escape/outside click.

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

src/components/ProjectHeader.jsx

@@ -1,6 +1,6 @@
 // Header for an open project (Setup and Study pages): navigation, Claude
 // prompts, pronunciation guide, export menu, share link, and save/sync status.
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useApp } from '../context/AppContext.js';
 import { useShareLink } from '../hooks/useShareLink.js';
 import { buildClaudePrompt, buildPodcastPrompt } from '../utils/exportBuilders.js';
@@ -24,8 +24,26 @@ export default function ProjectHeader({ loading = false }) {
     syncStatus,
     retrySync,
   } = useApp();
-  const [exportMenuOpen, setExportMenuOpen] = useState(false);
-  const [sharePanelOpen, setSharePanelOpen] = useState(false);
+  // Only one dropdown open at a time: 'tools' | 'export' | 'share' | null
+  const [openMenu, setOpenMenu] = useState(null);
+  const toggleMenu = (name) => setOpenMenu((current) => (current === name ? null : name));
+  const closeMenu = () => setOpenMenu(null);
+  const menusRef = useRef(null);
+
+  // Close the open dropdown on an outside click or Escape.
+  useEffect(() => {
+    if (!openMenu) return;
+    const onPointerDown = (e) => {
+      if (!menusRef.current?.contains(e.target)) setOpenMenu(null);
+    };
+    const onKeyDown = (e) => { if (e.key === 'Escape') setOpenMenu(null); };
+    document.addEventListener('mousedown', onPointerDown);
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [openMenu]);
   const share = useShareLink(project?.id);
 
   // Copies a prompt, then opens claude.ai so it can be pasted straight in.
@@ -40,76 +58,94 @@ export default function ProjectHeader({ loading = false }) {
   return (
     <div className="flex flex-wrap items-center gap-3">
       {currentPage !== 'home' && (
-        <button
-          type="button"
-          onClick={goHome}
-          className="rounded-xl border border-white/15 bg-white/10 px-4 py-2 text-sm text-white transition hover:bg-white/15"
-        >
-          ← Home
-        </button>
-      )}
-      {project && currentPage === 'study' && (
-        <button
-          type="button"
-          onClick={() => setCurrentPage('setup')}
-          className="rounded-xl border border-white/15 bg-white/10 px-4 py-2 text-sm text-white transition hover:bg-white/15"
-        >
-          ← Back to Chunks
-        </button>
+        <div className="flex flex-wrap items-center gap-2">
+          {currentPage !== 'home' && (
+            <button
+              type="button"
+              onClick={goHome}
+              className="rounded-xl border border-white/15 bg-white/10 px-4 py-2 text-sm text-white transition hover:bg-white/15"
+            >
+              ← Home
+            </button>
+          )}
+          {project && currentPage === 'study' && (
+            <button
+              type="button"
+              onClick={() => setCurrentPage('setup')}
+              className="rounded-xl border border-white/15 bg-white/10 px-4 py-2 text-sm text-white transition hover:bg-white/15"
+            >
+              ← Back to Chunks
+            </button>
+          )}
+        </div>
       )}
       {project && (
-        <div className="flex flex-wrap items-center gap-3">
-          <button
-            type="button"
-            onClick={() => copyPrompt(buildClaudePrompt(project))}
-            disabled={allChunks.length === 0}
-            className="rounded-md bg-violet-500 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-violet-400 disabled:cursor-not-allowed disabled:bg-slate-500"
-            title="Copies your study notes as a Claude prompt, then opens claude.ai so you can paste and go"
-          >
-            <span className="hidden sm:inline">Study Guide → </span>Claude ↗
-          </button>
-          <button
-            type="button"
-            onClick={() => copyPrompt(buildPodcastPrompt(project, authUser?.podcastName))}
-            disabled={allChunks.length === 0}
-            title="Copies a podcast script prompt for Claude, then opens claude.ai — set your show name in Account Settings first"
-            className="rounded-md bg-fuchsia-500 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-fuchsia-400 disabled:cursor-not-allowed disabled:bg-slate-500"
-          >
-            🎙<span className="hidden sm:inline"> Podcast → Claude ↗</span>
-          </button>
-          <button
-            type="button"
-            onClick={() => setCurrentPage('pronunciation')}
-            disabled={allChunks.length === 0}
-            title="Open the pronunciation guide — all Greek & Hebrew words with transliterations"
-            className="rounded-md bg-amber-500 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-amber-400 disabled:cursor-not-allowed disabled:bg-slate-500"
-          >
-            🗣<span className="hidden sm:inline"> Pronunciation Guide</span>
-          </button>
+        <div ref={menusRef} className="flex flex-wrap items-center gap-3 border-white/10 sm:border-l sm:pl-3">
           <div className="relative">
             <button
               type="button"
-              onClick={() => setExportMenuOpen((v) => !v)}
+              onClick={() => toggleMenu('tools')}
+              aria-expanded={openMenu === 'tools'}
+              disabled={allChunks.length === 0}
+              title={allChunks.length === 0 ? 'Add a chunk first to use these tools' : undefined}
+              className="flex items-center gap-1.5 rounded-md bg-violet-500 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-violet-400 disabled:cursor-not-allowed disabled:bg-slate-500 disabled:opacity-60 disabled:shadow-none"
+            >
+              🧰 Tools
+            </button>
+            {openMenu === 'tools' && allChunks.length > 0 && (
+              <div className="absolute left-0 top-full z-20 mt-2 w-64 overflow-hidden rounded-2xl border border-slate-200 bg-white py-1.5 text-left shadow-lg">
+                <button
+                  type="button"
+                  onClick={() => { copyPrompt(buildClaudePrompt(project)); closeMenu(); }}
+                  title="Copies your study notes as a Claude prompt, then opens claude.ai so you can paste and go"
+                  className="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50"
+                >
+                  Study Guide → Claude ↗
+                </button>
+                <button
+                  type="button"
+                  onClick={() => { copyPrompt(buildPodcastPrompt(project, authUser?.podcastName)); closeMenu(); }}
+                  title="Copies a podcast script prompt for Claude, then opens claude.ai — set your show name in Account Settings first"
+                  className="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50"
+                >
+                  🎙 Podcast → Claude ↗
+                </button>
+                <button
+                  type="button"
+                  onClick={() => { setCurrentPage('pronunciation'); closeMenu(); }}
+                  title="Open the pronunciation guide — all Greek & Hebrew words with transliterations"
+                  className="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50"
+                >
+                  🗣 Pronunciation Guide
+                </button>
+              </div>
+            )}
+          </div>
+          <div className="relative">
+            <button
+              type="button"
+              onClick={() => toggleMenu('export')}
+              aria-expanded={openMenu === 'export'}
               className="flex items-center gap-1.5 rounded-md bg-sky-500 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-sky-400"
             >
               ⬇ Export
             </button>
-            {exportMenuOpen && (
+            {openMenu === 'export' && (
               <div className="absolute left-0 top-full z-20 mt-2 w-56 overflow-hidden rounded-2xl border border-slate-200 bg-white py-1.5 text-left shadow-lg">
-                <button type="button" onClick={() => { exportProjectHtml(project); setExportMenuOpen(false); }}
+                <button type="button" onClick={() => { exportProjectHtml(project); closeMenu(); }}
                   className="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50">
                   Export HTML
                 </button>
-                <button type="button" onClick={() => { exportProjectDocx(project); setExportMenuOpen(false); }}
+                <button type="button" onClick={() => { exportProjectDocx(project); closeMenu(); }}
                   className="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50">
                   Export DOCX
                 </button>
-                <button type="button" onClick={() => { exportProjectMarkdown(project); setExportMenuOpen(false); }}
+                <button type="button" onClick={() => { exportProjectMarkdown(project); closeMenu(); }}
                   title="Handy for Obsidian, Notion, or any Markdown-based notes app"
                   className="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50">
                   Export Markdown
                 </button>
-                <button type="button" onClick={() => { printProjectPdf(project); setExportMenuOpen(false); }}
+                <button type="button" onClick={() => { printProjectPdf(project); closeMenu(); }}
                   title="Opens a print-friendly version in a new tab — choose 'Save as PDF' in the print dialog"
                   className="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50">
                   🖨 Print / Save PDF
@@ -120,12 +156,13 @@ export default function ProjectHeader({ loading = false }) {
           <div className="relative">
             <button
               type="button"
-              onClick={() => setSharePanelOpen((v) => !v)}
+              onClick={() => toggleMenu('share')}
+              aria-expanded={openMenu === 'share'}
               className={`rounded-md px-4 py-2 text-sm font-medium shadow-sm transition ${share.shareToken ? 'bg-teal-600 text-white hover:bg-teal-500' : 'border border-slate-300 bg-white text-slate-700 hover:bg-slate-50'}`}
             >
               🔗 {share.shareToken ? 'Shared' : 'Share'}
             </button>
-            {sharePanelOpen && (
+            {openMenu === 'share' && (
               <div className="absolute right-0 top-full z-20 mt-2 w-80 rounded-2xl border border-slate-200 bg-white p-4 text-left shadow-lg">
                 <h3 className="text-sm font-semibold text-slate-900">Read-only share link</h3>
                 <p className="mt-1 text-xs text-slate-500">
@@ -162,30 +199,30 @@ export default function ProjectHeader({ loading = false }) {
           </div>
         </div>
       )}
-        <div className="text-right text-sm text-slate-300 space-y-0.5">
-          {loading ? (
-            <span>Loading…</span>
-          ) : saveStatus ? (
-            <span className="text-emerald-300">{saveStatus}</span>
-           ) : (
-           <span>&nbsp;</span>
-          )}
-          {syncStatus === 'syncing' && <div className="text-xs text-slate-400">Syncing…</div>}
-          {syncStatus === 'synced' && <div className="text-xs text-emerald-400">Synced ✓</div>}
-          {syncStatus === 'error' && (
-            <div className="flex items-center gap-2">
-              <span className="text-xs text-rose-400">⚠ Sync failed</span>
-              <button
-                type="button"
-                onClick={retrySync}
-                className="text-xs text-slate-300 underline hover:text-white"
-              >
-                Retry
-              </button>
-            </div>
-          )}
-        </div>
-        <AuthStatus />
+      <div className="text-right text-sm text-slate-300 space-y-0.5">
+        {loading ? (
+          <span>Loading…</span>
+        ) : saveStatus ? (
+          <span className="text-emerald-300">{saveStatus}</span>
+        ) : (
+          <span>&nbsp;</span>
+        )}
+        {syncStatus === 'syncing' && <div className="text-xs text-slate-400">Syncing…</div>}
+        {syncStatus === 'synced' && <div className="text-xs text-emerald-400">Synced ✓</div>}
+        {syncStatus === 'error' && (
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-rose-400">⚠ Sync failed</span>
+            <button
+              type="button"
+              onClick={retrySync}
+              className="text-xs text-slate-300 underline hover:text-white"
+            >
+              Retry
+            </button>
+          </div>
+        )}
+      </div>
+      <AuthStatus />
     </div>
   );
 }