Reader: compare button next to Aa

A button beside Aa in the reader's top bar opens a Compare translations
sheet (pick the Bible to compare with, show/hide the differing-word
highlights). It shows as active while a comparison is on. The controls
moved out of the Aa sheet; "C" opens it from the keyboard.

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

src/components/ShortcutsHelp.jsx

@@ -14,6 +14,7 @@ const BY_PAGE = {
     ['/', 'Search this chapter or the whole Bible'],
     ['G', 'Pick a book and chapter'],
     ['B', 'Bookmark the selected verse'],
+    ['C', 'Compare translations'],
     [',', 'Reading settings'],
     ['F', 'Hide or show the controls'],
   ],

src/components/reader/CompareSheet.jsx

@@ -0,0 +1,35 @@
+// Compare translations: pick a second Bible to read beside the one you're reading, and whether the
+// words that differ are highlighted. The chapter shows how different the two are.
+import Sheet from './Sheet.jsx';
+import { READER_TRANSLATIONS } from '../../utils/bibleText.js';
+
+export default function CompareSheet({ open, onClose, translation, parallel, onParallel, showDiff, onShowDiff }) {
+  const chip = (active) => `rounded-full border px-3 py-1.5 text-sm font-medium ${active ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`;
+  const options = READER_TRANSLATIONS.filter((t) => t.id !== translation);
+  return (
+    <Sheet open={open} onClose={onClose} title="Compare translations">
+      <p className="mb-3 text-sm text-[var(--r-sub)]">
+        Read another Bible beside the {translation}. You’ll see how different its wording is for the whole chapter and for each verse.
+      </p>
+      <span className="mb-1.5 block text-xs text-[var(--r-sub)]">Compare {translation} with</span>
+      <div role="group" aria-label="Translation to compare with" className="mb-4 flex flex-wrap gap-1.5">
+        {options.map((t) => (
+          <button key={t.id} type="button" title={t.name} aria-pressed={parallel === t.id} onClick={() => { onParallel(parallel === t.id ? '' : t.id); if (parallel !== t.id) onClose(); }} className={chip(parallel === t.id)}>{t.id}</button>
+        ))}
+        <button type="button" aria-pressed={!parallel} onClick={() => onParallel('')} className={chip(!parallel)}>Off</button>
+      </div>
+      {parallel && (
+        <>
+          <span className="mb-1.5 block text-xs text-[var(--r-sub)]">Highlight the words that differ</span>
+          <div role="group" aria-label="Highlight differences" className="flex overflow-hidden rounded-xl border border-[var(--r-line)]">
+            {[[true, 'Show'], [false, 'Hide']].map(([id, text]) => (
+              <button key={String(id)} type="button" aria-pressed={showDiff === id} onClick={() => onShowDiff(id)}
+                className={`flex-1 px-3 py-2 text-sm ${showDiff === id ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'text-[var(--r-sub)] hover:bg-black/5'}`}>{text}</button>
+            ))}
+          </div>
+        </>
+      )}
+      <p className="mt-4 text-[11px] text-[var(--r-sub)]">The wording is compared word by word, ignoring capitals and punctuation. It shows how the wording differs, not which translation is more accurate. Tap any verse and open Compare to see all six translations of it.</p>
+    </Sheet>
+  );
+}

src/components/reader/ReaderBars.jsx

@@ -1,11 +1,11 @@
 // Top and bottom chrome for the reader. Everything stays one tap away; focus
 // mode hides both.
-import { ChevronLeft, ChevronRight, ChevronDown, SearchIcon, LinkIcon, PenIcon, HeadphonesIcon, FocusIcon, CheckIcon } from './icons.jsx';
+import { ChevronLeft, ChevronRight, ChevronDown, SearchIcon, LinkIcon, PenIcon, HeadphonesIcon, FocusIcon, CheckIcon, CompareIcon } from './icons.jsx';
 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, onDoneDrawing }) {
+export function TopBar({ title, onBack, onOpenNavigator, onSearch, onBookmarks, bookmarkCount, onCompare, compareActive, onSettings, onDoneDrawing }) {
   return (
     <div className="safe-top 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">
@@ -25,6 +25,7 @@ export function TopBar({ title, onBack, onOpenNavigator, onSearch, onBookmarks,
             <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={onCompare} className={`${iconBtn} ${compareActive ? 'text-[var(--r-accent)]' : ''}`} aria-label="Compare translations" aria-pressed={!!compareActive} title="Compare translations"><CompareIcon /></button>
             <button type="button" onClick={onSettings} className={`${iconBtn} w-10 text-sm font-medium`} aria-label="Reading settings">Aa</button>
           </>
         )}

src/components/reader/SettingsSheet.jsx

@@ -2,7 +2,6 @@
 // to read beside the first.
 import Sheet from './Sheet.jsx';
 import { READER_THEMES } from './readerThemes.js';
-import { READER_TRANSLATIONS } from '../../utils/bibleText.js';
 
 const SIZES = [['S', 0.875], ['M', 1], ['L', 1.125], ['XL', 1.25], ['XXL', 1.5]];
 
@@ -22,7 +21,6 @@ function Segmented({ options, value, onChange, label }) {
 export default function SettingsSheet({
   open, onClose, fontSize, onFontSize, theme, onTheme, layout, onLayout, wide, onWide,
   font, onFont, spacing, onSpacing, verseNumbers, onVerseNumbers,
-  translation, parallel, onParallel, showDiff, onShowDiff,
 }) {
   const row = 'mb-4';
   const label = 'mb-1.5 block text-xs text-[var(--r-sub)]';
@@ -56,24 +54,6 @@ export default function SettingsSheet({
         <span className={label}>Width</span>
         <Segmented label="Reading width" options={[[false, 'Column'], [true, 'Two columns']]} value={wide} onChange={onWide} />
       </div>
-      <div className={row}>
-        <span className={label}>Read beside another Bible</span>
-        <div role="group" aria-label="Second translation" className="flex flex-wrap gap-1.5">
-          {[{ id: '', name: 'Off' }, ...READER_TRANSLATIONS.filter((t) => t.id !== translation)].map((t) => (
-            <button key={t.id || 'off'} type="button" onClick={() => onParallel(t.id)} aria-pressed={parallel === t.id} title={t.name}
-              className={`rounded-full border px-3 py-1 text-xs font-medium ${parallel === t.id ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`}>
-              {t.id || 'Off'}
-            </button>
-          ))}
-        </div>
-        <p className="mt-1.5 text-[11px] text-[var(--r-sub)]">Shows both side by side on wider screens, and stacked on a phone.</p>
-      </div>
-      {parallel && (
-        <div className={row}>
-          <span className={label}>Highlight differences from {translation}</span>
-          <Segmented label="Highlight differences" options={[[true, 'Show'], [false, 'Hide']]} value={showDiff} onChange={onShowDiff} />
-        </div>
-      )}
     </Sheet>
   );
 }

src/components/reader/icons.jsx

@@ -11,3 +11,4 @@ export const PenIcon = () => <svg {...base}><path d="M13.5 3.5l3 3L7 16l-4 1 1-4
 export const HeadphonesIcon = () => <svg {...base}><path d="M3.5 12V10a6.5 6.5 0 0113 0v2" /><rect x="2.5" y="11.5" width="3.5" height="5" rx="1.2" /><rect x="14" y="11.5" width="3.5" height="5" rx="1.2" /></svg>;
 export const FocusIcon = () => <svg {...base}><path d="M3 7V4h3M17 7V4h-3M3 13v3h3M17 13v3h-3" /></svg>;
 export const CheckIcon = () => <svg {...base}><path d="M4.5 10.5l3.5 3.5 7.5-8" /></svg>;
+export const CompareIcon = () => <svg {...base}><rect x="2.5" y="3.5" width="6.5" height="13" rx="1.3" /><rect x="11" y="3.5" width="6.5" height="13" rx="1.3" /><path d="M4.5 7h2.5M4.5 10h2.5M13 7h2.5M13 10h2.5" /></svg>;

src/pages/ReaderPage.jsx

@@ -15,6 +15,7 @@ import ReaderText from '../components/reader/ReaderText.jsx';
 import PlanStrip from '../components/reader/PlanStrip.jsx';
 import NavigatorSheet from '../components/reader/NavigatorSheet.jsx';
 import SettingsSheet from '../components/reader/SettingsSheet.jsx';
+import CompareSheet from '../components/reader/CompareSheet.jsx';
 import SearchSheet from '../components/reader/SearchSheet.jsx';
 import MarksSheet from '../components/reader/MarksSheet.jsx';
 import { useToast } from '../components/Toasts.jsx';
@@ -272,6 +273,7 @@ export default function ReaderPage() {
         if (e.key === '/') { e.preventDefault(); openSheet('search'); }
         else if (e.key === 'g' || e.key === 'G') { e.preventDefault(); openSheet('nav'); }
         else if (e.key === ',') { e.preventDefault(); openSheet('settings'); }
+        else if (e.key === 'c' || e.key === 'C') { e.preventDefault(); openSheet('compare'); }
         else if (e.key === 'f' || e.key === 'F') setChromeVisible((v) => !v);
         else if ((e.key === 'b' || e.key === 'B') && selectedKey) {
           readerBookmarks[selectedKey] ? removeBookmark(selectedKey, readerBookmarks[selectedKey]) : toggleReaderBookmark(selectedKey);
@@ -405,6 +407,7 @@ export default function ReaderPage() {
           onSearch={() => openSheet('search')}
           onBookmarks={() => openSheet('bookmarks')}
           bookmarkCount={bookmarkEntries.length + highlightEntries.length}
+          onCompare={() => openSheet('compare')} compareActive={!!parallelId}
           onSettings={() => openSheet('settings')}
           onDoneDrawing={readerDrawMode ? () => setReaderDrawMode(false) : undefined}
         />
@@ -558,6 +561,9 @@ export default function ReaderPage() {
         font={readerFont} onFont={setReaderFont}
         spacing={readerSpacing} onSpacing={setReaderSpacing}
         verseNumbers={readerVerseNumbers} onVerseNumbers={setReaderVerseNumbers}
+      />
+      <CompareSheet
+        open={sheet === 'compare'} onClose={closeSheet}
         translation={readerTranslation} parallel={parallelId} onParallel={setReaderParallel}
         showDiff={readerShowDiff} onShowDiff={setReaderShowDiff}
       />

src/pages/ReaderPage.test.jsx

@@ -47,6 +47,17 @@ test('renders the chapter, chrome and opens the tool sheets', () => {
   expect(screen.getByPlaceholderText(/Search John 3/)).toBeTruthy();
 });
 
+test('the compare button next to Aa opens the comparison sheet, and choosing a Bible turns it on', () => {
+  ctx.setReaderParallel = vi.fn();
+  render(<ReaderPage />);
+  const compare = screen.getByLabelText('Compare translations');
+  expect(compare.nextElementSibling).toBe(screen.getByLabelText('Reading settings')); // sits right beside Aa
+  fireEvent.click(compare);
+  expect(screen.getByText(/how different its wording is/)).toBeTruthy();
+  fireEvent.click(screen.getByRole('button', { name: 'NET' }));
+  expect(ctx.setReaderParallel).toHaveBeenCalledWith('NET');
+});
+
 test('tapping a verse selects it', () => {
   render(<ReaderPage />);
   fireEvent.click(screen.getByText(/This man came to Jesus/));