nmemmertandClaude Sonnet 5.5
d13f55faf7
Study - New Outline stage (hierarchical I./A./1. points, linked to chunks, in all exports); the chunk stage is now "Chunks" - Home cards: passages shown as ranges, tags capped with "+N more" Reader - Side-by-side translations and a Compare tab per verse - Typeface, line spacing, verse-number settings; text and column scale with the screen - Highlights/bookmarks sheet with named colours (synced); BSB footnote spacing fix - Cmd-K palette (passages, studies, notes, marks), keyboard shortcuts and "?" help Flow and safety - Toasts with Undo replace most confirm()/alert() - Back/Forward move between pages - Server refuses saves over a newer copy (409); keep-mine / use-other banner; opening a study no longer re-stamps it - Latest chapter request wins when flipping quickly Offline and data - Save books, plan days or a whole BSB/NET for offline - Service worker fixes: helloao /api/ URLs were skipped and responses cloned too late - Settings: download/restore a full backup Accessibility - Sheets trap focus and close on Escape, skip link, focus ring, reduced motion, theme contrast raised to 4.5:1 (with a test) Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
60 lines
3.2 KiB
React
60 lines
3.2 KiB
React
// One place to pick translation, book and chapter (replaces three dropdowns).
|
||
import { useState } from 'react';
|
||
import Sheet from './Sheet.jsx';
|
||
import { bookOptions, CHAPTER_COUNTS } from '../../utils/bibleUtils.jsx';
|
||
import { READER_TRANSLATIONS } from '../../utils/bibleText.js';
|
||
import { SaveBookOffline } from '../OfflineSave.jsx';
|
||
|
||
const NT_START = bookOptions.findIndex((b) => b.abbrev === 'MAT');
|
||
const chip = 'rounded-lg border px-2 py-2 text-center text-sm transition';
|
||
|
||
export default function NavigatorSheet({ open, onClose, bookAbbrev, chapter, translation, onTranslation, translationNote, onGo, offline }) {
|
||
const [pickedBook, setPickedBook] = useState(null); // book abbrev whose chapters are showing
|
||
const close = () => { setPickedBook(null); onClose(); };
|
||
const book = pickedBook ? bookOptions.find((b) => b.abbrev === pickedBook) : null;
|
||
|
||
const bookButton = (b) => (
|
||
<button key={b.abbrev} type="button" onClick={() => setPickedBook(b.abbrev)}
|
||
className={`${chip} truncate ${b.abbrev === bookAbbrev ? 'border-[var(--r-accent)] text-[var(--r-accent)]' : 'border-[var(--r-line)] hover:bg-black/5'}`}>
|
||
{b.name}
|
||
</button>
|
||
);
|
||
|
||
return (
|
||
<Sheet open={open} onClose={close} label="Go to" title={book ? (
|
||
<button type="button" onClick={() => setPickedBook(null)} className="text-[var(--r-sub)] hover:text-[var(--r-text)]">‹ All books · <span className="text-[var(--r-text)]">{book.name}</span></button>
|
||
) : 'Go to'}>
|
||
{!book && (
|
||
<>
|
||
<div className="mb-3 flex flex-wrap gap-1.5">
|
||
{READER_TRANSLATIONS.map((t) => (
|
||
<button key={t.id} type="button" onClick={() => onTranslation(t.id)} title={t.name}
|
||
className={`rounded-full border px-3 py-1 text-xs font-medium ${t.id === translation ? '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}
|
||
</button>
|
||
))}
|
||
</div>
|
||
{translationNote && <p className="-mt-1 mb-3 text-[11px] text-[var(--r-sub)]">{translationNote}</p>}
|
||
<p className="mb-1.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Old Testament</p>
|
||
<div className="mb-4 grid grid-cols-3 gap-1.5 sm:grid-cols-4">{bookOptions.slice(0, NT_START).map(bookButton)}</div>
|
||
<p className="mb-1.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">New Testament</p>
|
||
<div className="grid grid-cols-3 gap-1.5 sm:grid-cols-4">{bookOptions.slice(NT_START).map(bookButton)}</div>
|
||
</>
|
||
)}
|
||
{book && (
|
||
<>
|
||
<div className="grid grid-cols-6 gap-1.5 sm:grid-cols-8">
|
||
{Array.from({ length: CHAPTER_COUNTS[book.abbrev] ?? 1 }, (_, i) => i + 1).map((n) => (
|
||
<button key={n} type="button" onClick={() => { onGo(book.abbrev, n); close(); }}
|
||
className={`${chip} ${book.abbrev === bookAbbrev && n === chapter ? 'border-[var(--r-accent)] bg-[var(--r-accent)] text-[var(--r-on)]' : 'border-[var(--r-line)] hover:bg-black/5'}`}>
|
||
{n}
|
||
</button>
|
||
))}
|
||
</div>
|
||
{offline && <SaveBookOffline offline={offline} translation={translation} book={book.abbrev} name={book.name} />}
|
||
</>
|
||
)}
|
||
</Sheet>
|
||
);
|
||
}
|