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>
33 lines
1.9 KiB
React
33 lines
1.9 KiB
React
// The "Save for offline" control: a button, or progress with a Stop button while a download runs.
|
||
import { canSaveOffline } from '../utils/offline.js';
|
||
|
||
export function DownloadProgress({ job, onCancel }) {
|
||
const pct = job.total ? Math.round((job.done / job.total) * 100) : 0;
|
||
return (
|
||
<div role="status" className="rounded-xl border border-[var(--r-line)] px-3 py-2 text-xs">
|
||
<div className="mb-1.5 flex items-center justify-between gap-2">
|
||
<span>Saving {job.label}… {job.done} of {job.total}</span>
|
||
<button type="button" onClick={onCancel} className="text-[var(--r-accent)] hover:underline">Stop</button>
|
||
</div>
|
||
<div className="h-1 overflow-hidden rounded-full bg-[var(--r-line)]"><div className="h-full bg-[var(--r-accent)] transition-[width]" style={{ width: `${pct}%` }} /></div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// One book of a translation.
|
||
export function SaveBookOffline({ offline, translation, book, name }) {
|
||
if (!canSaveOffline(translation)) {
|
||
return <p className="mt-4 text-[11px] text-[var(--r-sub)]">Saving for offline works with the BSB and NET. The {translation}’s licence doesn’t allow it.</p>;
|
||
}
|
||
if (offline.job) return <div className="mt-4"><DownloadProgress job={offline.job} onCancel={offline.cancel} /></div>;
|
||
const saved = offline.isSaved(translation, book);
|
||
return (
|
||
<div className="mt-4 flex items-center justify-between gap-3 rounded-xl border border-[var(--r-line)] px-3 py-2 text-sm">
|
||
<span className={saved ? '' : 'text-[var(--r-sub)]'}>{saved ? `✓ ${name} (${translation}) is saved for offline` : `Read ${name} without a connection`}</span>
|
||
{!saved && (
|
||
<button type="button" onClick={() => offline.saveBook(translation, book, name)} className="shrink-0 rounded-full border border-[var(--r-line)] px-3 py-1 text-xs font-medium hover:bg-black/5">Save for offline</button>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|