// screens-library.jsx — modules home (Bibles, Commentaries, Dictionaries, Devotionals, Books, Journals) + collections + journal function ModuleTile({ m, onClick }) { return (
{m.name}
{m.count}
); } function LibraryScreen({ ctx }) { const D = window.TrinityData; const [view, setView] = React.useState('library'); return (

Library

{/* segmented: Library / Watch */}
{[['library', 'Library', 'library'], ['watch', 'Watch', 'play']].map(([id, label, ic]) => { const on = view === id; return ( ); })}
{view === 'watch' ? : } ); } function LibraryHome({ ctx }) { const D = window.TrinityData; return ( {/* collections strip */}
{D.COLLECTIONS.map((c) => )}
Modules
{D.MODULES.map((m) => m.id === 'bibles' ? ctx.openStore('language', 'bibles') : m.id === 'dictionaries' ? ctx.openStore('featured', 'dictionaries') : ctx.openModule(m) } />)}
ctx.newJournal()}>Recent journal
{(ctx.journalEntries || D.JOURNAL).length === 0 ? ( ) : null} {(ctx.journalEntries || D.JOURNAL).map((j) =>
ctx.openJournal(j)} style={{ padding: 15, borderRadius: 18, background: 'var(--surface)', border: '1px solid var(--line)', cursor: 'pointer', position: 'relative', overflow: 'hidden', boxShadow: 'var(--shadow)' }}>
{j.ref || 'Reflection'} {j.date}
{j.title}

{j.body}

)}
); } // ── encrypted full backup (keys, journals, notes, highlights, books) ── function BackupCard({ ctx }) { const [picking, setPicking] = React.useState(false); const [pass, setPass] = React.useState(''); const [show, setShow] = React.useState(false); const [busy, setBusy] = React.useState(''); // '' | 'local' | 'cloud' const [done, setDone] = React.useState(null); // null | 'device' | 'downloads' | 'cloud' const fileRef = React.useRef(null); const secure = (typeof window !== 'undefined') && window.isSecureContext && (typeof crypto !== 'undefined') && crypto.subtle; const INCLUDED = [ { ic: 'key', label: 'Recovery key', sealed: true }, { ic: 'pen', label: 'Journals & notes' }, { ic: 'marker', label: 'Highlights' }, { ic: 'bookmark', label: 'Bookmarks' }, { ic: 'books', label: 'Downloaded books' }]; const strength = pass.length === 0 ? null : pass.length < 4 ? { t: 'Too short', c: 'var(--ink-3)' } : /^\d+$/.test(pass) && pass.length < 6 ? { t: 'PIN — easy to use, easier to guess', c: 'var(--clay)' } : pass.length < 8 ? { t: 'OK', c: 'var(--gold)' } : { t: 'Strong', c: 'var(--sage)' }; const run = async (mode) => { if (!secure) { ctx.toast('Open the app over https to make a backup'); return; } if (pass.length < 4) { ctx.toast('Use at least 4 characters (a PIN is fine)'); return; } setBusy(mode); try { const obj = window.TrinityBackup.collectMember(); const text = await window.TrinityBackup.encryptObj(obj, pass); const name = 'trinityone-backup-' + new Date().toISOString().slice(0, 10) + '.json'; const res = await window.TrinityBackup.saveFile(name, text, mode); setBusy(''); setDone((res && res.where) || mode); ctx.toast(mode === 'local' ? 'Saved to your device' : 'Backup ready to store'); setTimeout(() => { setDone(null); setPicking(false); setPass(''); }, 2200); } catch (e) { setBusy(''); ctx.toast('Backup failed: ' + (e.message || e)); } }; const onRestoreFile = async (e) => { const f = e.target.files && e.target.files[0]; e.target.value = ''; if (!f) return; const p = window.prompt('Enter the passphrase or PIN for this backup file:'); if (p == null) return; try { const text = await window.TrinityBackup.readFile(f); const obj = await window.TrinityBackup.decryptStr(text, p); await window.TrinityBackup.applyMember(obj); ctx.toast('Backup restored'); } catch (err) { ctx.toast(err.message || 'Couldn’t restore that file'); } }; return (
Back up your data
An encrypted copy of your notes, journals, highlights & books — restore on a new phone in seconds.
{!picking ? : null}
{/* what's included */}
{INCLUDED.map((it) => {it.label} {it.sealed ? : null} )}
{/* security note — always visible */}
Sealed on this phone with a passphrase only you know — restore it later from a file on your device or cloud drive. If you lose the passphrase, no one can open it. Your paper recovery key still matters — it restores your account even without this file.
{picking ? (
{!secure ? (
You’re on an http address — the browser disables encryption here. Open the app over https to create a backup.
) : null}
Passphrase or PIN
setPass(e.target.value)} type={show ? 'text' : 'password'} placeholder="a memorable passphrase, or a PIN" style={{ flex: 1, height: 44, padding: '0 13px', borderRadius: 12, border: '1px solid var(--line)', background: 'var(--surface)', fontSize: 14.5, fontFamily: 'var(--font-ui)', color: 'var(--ink)', outline: 'none' }} />
{strength ?
{strength.t}
: null}
) : null}
); } // ── journal entry overlay ── function JournalView({ entry, open, onClose, ctx }) { if (!entry) return null; return (
{ onClose(); setTimeout(() => ctx && ctx.editJournal(entry), 220); }} />
{entry.ref || 'Reflection'}

{entry.title}

{entry.date}

{entry.body}

); } // ── journal editor (create / edit / delete) ── const JOURNAL_COLORS = ['var(--hl-yellow)', 'var(--hl-green)', 'var(--hl-pink)', 'var(--hl-blue)', 'var(--hl-clay)']; function JournalEditor({ entry, open, onClose, ctx }) { const editing = !!(entry && entry.id); const [ref, setRef] = React.useState(''); const [title, setTitle] = React.useState(''); const [body, setBody] = React.useState(''); const [color, setColor] = React.useState('var(--hl-yellow)'); React.useEffect(() => { if (open) { setRef((entry && entry.ref) || ''); setTitle((entry && entry.title) || ''); setBody((entry && entry.body) || ''); setColor((entry && entry.color) || 'var(--hl-yellow)'); } }, [open, entry && entry.id]); const canSave = !!(title.trim() || body.trim()); const save = () => { if (!canSave) return; ctx.saveJournal({ id: (entry && entry.id) || ('j' + Date.now()), date: (entry && entry.date) || 'Today', ref: ref.trim(), color, title: title.trim() || 'Untitled', body: body.trim(), }); onClose(); ctx.toast(editing ? 'Journal updated' : 'Journal saved'); }; const del = () => { ctx.deleteJournal(entry.id); onClose(); ctx.toast('Entry deleted'); }; return (
{editing ? 'Edit entry' : 'New entry'}
setRef(e.target.value)} placeholder="Link a verse — e.g. John 1:4 (optional)" style={{ flex: 1, minWidth: 0, border: 'none', background: 'none', outline: 'none', fontSize: 14, fontWeight: 600, color: 'var(--ink)', fontFamily: 'var(--font-ui)' }} />
Marker
{JOURNAL_COLORS.map(c => (
setTitle(e.target.value)} placeholder="Title" style={{ width: '100%', border: 'none', background: 'none', outline: 'none', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 25, letterSpacing: '-.4px', color: 'var(--ink)', marginBottom: 10, padding: 0 }} />