/* global React, ENTRIES, CATEGORIES, CLUSTERS, META_FIELDS, monthKey, monthLabel, fmtDate, fmtDateShort, getCat, isQuote, isPoem, EntryCard, QuoteCard, VerseCard, MonthDivider, ChipRow, Masthead, TabBar, Seal, Folio, CategoryMark, RunningHead, EntryImage, loadClusterCache, deriveClusters, clusterHome, setClusterOverride, describable, autoDescribe, descriptionFor, generateDescription, loadDescriptions, backfillDescriptions, findCover, backfillCovers, resizeImage, db */ const useS = React.useState; const useM = React.useMemo; const Fragment = React.Fragment; /* ───────────────────────────────────────────────────────────── View 1 — LEDGER (default archive) Vertical list grouped by month; quotes inline as pull-quotes ─────────────────────────────────────────────────────────── */ function LedgerView({ entries, onOpen, quoteStyle }) { const groups = useM(() => { const dated = entries.filter(e => e.date); const undated = entries.filter(e => !e.date); const byMonth = {}; dated.forEach(e => { const k = monthKey(e.date); (byMonth[k] = byMonth[k] || []).push(e); }); const keys = Object.keys(byMonth).sort().reverse(); const ordered = keys.map(k => ({ key: k, label: monthLabel(k), entries: byMonth[k].sort((a,b) => b.date.localeCompare(a.date)) })); if (undated.length) ordered.push({ key: 'undated', label: 'Marginalia', entries: undated }); return ordered; }, [entries]); return (
{groups.map(g => (
{g.entries.map(e => ( isPoem(e) ? : isQuote(e) ? : ))}
))}
); } /* ───────────────────────────────────────────────────────────── View 2 — POSTCARDS (vertical stack of quote-postcards, mixed media) Full-bleed cards that feel like a pile of postcards ─────────────────────────────────────────────────────────── */ function PostcardsView({ entries, onOpen }) { return (
{entries.map((e, i) => { const rot = (i % 3 === 0) ? '-0.4deg' : (i % 3 === 1 ? '0.3deg' : '0deg'); return (
{isPoem(e) ? : isQuote(e) ? : }
); })}
); } function MediaPostcard({ entry, onOpen }) { const cat = getCat(entry.category); const author = entry.metadata?.author; const venue = entry.metadata?.album || entry.metadata?.venue; return ( ); } /* ───────────────────────────────────────────────────────────── View 3 — SPREAD (notebook-style two-column on phone) Folio numbers, running heads, ruled ─────────────────────────────────────────────────────────── */ function SpreadView({ entries, onOpen }) { const groups = useM(() => { const dated = entries.filter(e => e.date).sort((a,b) => b.date.localeCompare(a.date)); const byMonth = {}; dated.forEach(e => { const k = monthKey(e.date); (byMonth[k] = byMonth[k] || []).push(e); }); return Object.keys(byMonth).sort().reverse().map(k => ({ key: k, label: monthLabel(k), entries: byMonth[k] })); }, [entries]); return (
{groups.map((g, gi) => (
{g.label} Folio {gi + 1}
{g.entries.map((e, i) => ( ))} {/* page number */}
— {(gi + 1) * 2 - 1} · {(gi + 1) * 2} —
))}
); } /* ───────────────────────────────────────────────────────────── View 4 — ATLAS (map view) Stylized hand-drawn map with pins for locations ─────────────────────────────────────────────────────────── */ function AtlasView({ entries, onOpen }) { const byLocation = useM(() => { const m = {}; entries.forEach(e => { const loc = e.metadata?.location; if (loc) (m[loc] = m[loc] || []).push(e); }); return m; }, [entries]); // hand-placed fake coordinates for a stylized map of Europe const coords = { 'London': { x: 32, y: 38 }, 'Paris': { x: 41, y: 45 }, 'Florence': { x: 55, y: 65 }, 'Berlin': { x: 55, y: 34 }, 'Amsterdam':{ x: 44, y: 36 }, }; const [sel, setSel] = useS(null); const cities = Object.keys(byLocation); const active = sel || cities[0]; return (
{/* Map */}
Mappa Enthousiasmarum {cities.length} cities
{/* stylized abstract map — layered rectangles approximating continents */} {/* sea */} {/* lat/lon grid */} {[15,30,45,60,75].map(y => ( ))} {[20,35,50,65,80].map(x => ( ))} {/* landmass silhouettes */} {/* pins */} {cities.map(city => { const c = coords[city] || { x: 50, y: 50 }; const isSel = active === city; const count = byLocation[city].length; return ( setSel(city)} style={{ cursor: 'pointer' }}> {isSel && } {city} {count} {count === 1 ? 'entry' : 'entries'} ); })} {/* compass rose */} N
{/* list for active city */}
{active}
{byLocation[active]?.length || 0} entries
{(byLocation[active] || []).map(e => ( ))}
); } /* ───────────────────────────────────────────────────────────── Book description — an internet-grounded ~15-line description, cached. Auto-fetched the first time a book is opened; a quiet "Refresh" re-runs it. (src/descriptions.js holds the engine.) ─────────────────────────────────────────────────────────── */ function BookDescription({ entry }) { const [row, setRow] = useS(() => descriptionFor(entry.id)); const [busy, setBusy] = useS(false); const [err, setErr] = useS(null); const fetchDesc = (force) => { setBusy(true); setErr(null); generateDescription(entry) .then(r => setRow(r)) .catch(e => setErr(e.message)) .finally(() => setBusy(false)); }; // On open: show any cached description; books fetch theirs unasked, // every other category waits for its button. React.useEffect(() => { const existing = descriptionFor(entry.id); setRow(existing); setErr(null); if (!existing && autoDescribe(entry)) fetchDesc(false); }, [entry.id]); const heading = { book: 'On the book', film: 'On the film', music: 'On the music', visualart: 'On the work', exhibition: 'On the exhibition', theatre: 'On the production', ballet: 'On the production', event: 'On the event', place: 'On the place', }[entry.category] || 'On the work'; return (
{heading}
{busy && !row ? (

Reading around the web…

) : err && !row ? ( <>

{err}

) : !row ? ( ) : row ? ( <>

{row.text}

{err && {err}} ) : null}
); } /* ───────────────────────────────────────────────────────────── Detail view — a single entry as a full page ─────────────────────────────────────────────────────────── */ function DetailView({ entry, onBack, onEdit, onFav }) { const cat = getCat(entry.category); const fields = META_FIELDS[entry.category] || []; const big = entry.title.length < 60; const isQ = isQuote(entry); const isP = isPoem(entry); // For quotes & poems, author/work appear as a styled attribution — not in the meta table. const metaFields = (isQ || isP) ? fields.filter(f => f.key !== 'author' && f.key !== 'work') : fields; const hasMeta = metaFields.some(f => entry.metadata?.[f.key]) || entry.metadata?.location || entry.metadata?.link; return (
{entry.image && (
)} {isP ? ( <> {entry.title && (

{entry.title}

)} {entry.verse && (

{entry.verse}

)} {entry.note && (

{entry.note}

)} {(entry.metadata?.author || entry.metadata?.work) && (
{entry.metadata?.author && (
{entry.metadata.author}
)} {entry.metadata?.work && (
{entry.metadata.work}
)}
)} ) : isQuote(entry) ? ( <>
“

{entry.title}

{entry.note && (

{entry.note}

)} {(entry.metadata?.author || entry.metadata?.source || entry.metadata?.work) && (
{(entry.metadata?.author || entry.metadata?.source) && (
{entry.metadata.author || entry.metadata.source}
)} {entry.metadata?.work && (
{entry.metadata.work}
)}
)} ) : ( <>

{entry.title}

{entry.date && (
{fmtDate(entry.date)}
)} {entry.note && (

{entry.note}

)} )} {entry.image && ( )} {describable(entry) && }
{/* colophon — production details at the foot, like a fine-press page */} {hasMeta && (
Colophon
{metaFields.map(f => entry.metadata?.[f.key] && (
{f.label}
{entry.metadata[f.key]}
 ))} {entry.metadata?.location && (
Seen in
{entry.metadata.location}
 )} {entry.metadata?.link && (
Source
↗ {entry.metadata.link.replace(/^https?:\/\//, '').slice(0, 40)}{entry.metadata.link.length > 47 ? '…' : ''}
 )}
)}
); } /* ───────────────────────────────────────────────────────────── Add/Edit modal ─────────────────────────────────────────────────────────── */ function EditModal({ entry, onClose, onSave, onDelete, canUpload = false }) { const [form, setForm] = useS(entry || { title: '', category: 'book', date: new Date().toISOString().slice(0,10), note: '', metadata: {}, }); const isNew = !entry?.id; const cat = getCat(form.category); const isQ = cat.id === 'quote'; // A quote has no title: the words themselves are the entry. They live in // `title` (so search, cards and older entries need nothing) but are edited // as a paragraph, and can be read straight off a photograph of the page. const [readingQuote, setReadingQuote] = useS(false); const quoteInputRef = React.useRef(null); const onQuotePhoto = async (e) => { const file = e.target.files && e.target.files[0]; e.target.value = ''; if (!file) return; setReadingQuote(true); try { const { dataUrl } = await resizeImage(file, 1400, 0.82); const data = dataUrl.split(',')[1]; const text = await window.claude.complete({ model: 'claude-sonnet-4-6', max_tokens: 1200, messages: [{ role: 'user', content: [ { type: 'image', source: { type: 'base64', media_type: 'image/jpeg', data } }, { type: 'text', text: 'This is a photograph of a passage — a printed page, a screen, or handwriting. Transcribe it exactly as written, in its own language, with its original spelling and punctuation. If part of the text is underlined, highlighted or otherwise marked, transcribe only that part; otherwise the whole visible passage. Keep line breaks only where they carry meaning (verse); join ordinary prose lines with spaces. Reply with ONLY a JSON object: {"quote": "...", "author": "...", "work": "..."} — give author and work only when they can actually be read on the page (a running head, a caption, a title page), otherwise "".' }, ] }], }); const m = String(text).match(/\{[\s\S]*\}/); const r = m ? JSON.parse(m[0]) : {}; if (!r.quote) throw new Error('no text could be read'); setForm(f => ({ ...f, title: String(r.quote).trim(), metadata: { ...f.metadata, ...(r.author ? { author: String(r.author).trim() } : {}), ...(r.work ? { work: String(r.work).trim() } : {}) }, })); } catch (err) { alert('Could not read the page: ' + err.message); } setReadingQuote(false); }; // Choose a photograph → shrink it now (#9), upload on save (#37). const onPhoto = async (e) => { const file = e.target.files && e.target.files[0]; if (!file) return; try { const { blob, dataUrl } = await resizeImage(file); setForm(f => ({ ...f, _imageBlob: blob, _imageData: dataUrl })); } catch (err) { alert(err.message); } e.target.value = ''; }; // #32 — a gentle, rotating one-line prompt at capture; the answer (the note) // is what makes future Insights rich. const whyPrompt = useM(() => { const ps = [ 'What did it awaken in you?', 'Why do you want to remember this?', 'What did it change, even a little?', 'What were you feeling when it landed?', 'What will you carry from it?', 'What did it make you notice?', ]; return ps[Math.floor(Math.random() * ps.length)]; }, []); return (
e.stopPropagation()} style={{ background: 'var(--paper)', width: '100%', maxHeight: '85%', overflowY: 'auto', padding: '20px 20px 40px', borderTop: '2px solid var(--rubric)', }}>
{isNew ? 'New enthusiasm' : 'Edit'}
{CATEGORIES.map(c => ( ))}
{isQ ? ( <>
{readingQuote ? ( ◌ Reading the page… ) : ( )}