{_DIARY_RANGE_PRESETS.map(p => (
))}
{rangeId === 'custom' && (
setCustomStart(e.target.value)} style={{
flex: 1, padding: '8px 10px', borderRadius: 10,
border: '1px solid var(--border-2)', background: 'var(--surface)',
color: 'var(--text)', font: 'inherit', fontSize: 13,
}}/>
→
setCustomEnd(e.target.value)} style={{
flex: 1, padding: '8px 10px', borderRadius: 10,
border: '1px solid var(--border-2)', background: 'var(--surface)',
color: 'var(--text)', font: 'inherit', fontSize: 13,
}}/>
)}
);
}
/* ── SVG Donut chart ── */
function _DiaryDonutChart({ slices, size = 130 }) {
const total = slices.reduce((s, sl) => s + sl.value, 0);
if (!total) return null;
const r = 42, cx = size / 2, cy = size / 2, sw = 15;
const circ = 2 * Math.PI * r;
let cumPct = 0;
return (
{/* ── Header ── */}
Diary
{entries.length} {entries.length === 1 ? 'entry' : 'entries'} · {last30.length} this month
{/* ── On This Day ── */}
{onThisDay.length > 0 && (
📅
On This Day — {todayLabel}
{onThisDay.length} {onThisDay.length === 1 ? 'memory' : 'memories'} from past years
{onThisDay.map(e => (
onOpen(e)} showYear yearsAgo={curY - parseInt(e.date.slice(0, 4), 10)}/>
))}
)}
{/* ── Today's entry / prompt ── */}
{todayEntry ? (
onOpen(todayEntry)} featured/>
) : (
)}
{/* ── Mood breakdown ── */}
{last30.length > 0 && (
Mood · 30 days
{last30.length} entries
{Object.entries(ND_MOOD_META).map(([k, m]) => {
const n = moodCounts[k] || 0;
if (!n) return null;
return
;
})}
{Object.entries(ND_MOOD_META).map(([k, m]) => {
const n = moodCounts[k] || 0;
return (
);
})}
)}
{/* ── Search ── */}
setQ(e.target.value)} placeholder="Search entries, mood, tags…"
style={{ flex: 1, border: 0, background: 'transparent', outline: 'none', font: 'inherit', fontSize: 14, color: 'var(--text)' }}/>
{q && (
)}
{/* ── Tag pills ── */}
{allTags.length > 0 && (
{['All', ...allTags].map(t => {
const active = t === 'All' ? !tagFilter : t === tagFilter;
return (
);
})}
)}
{/* ── Recent entries (full entries only; all results when searching) ── */}
{isSearching ? `Results · ${filtered.length}` : 'Recent'}
{recentEntries.length ? (
recentEntries.map(e => onOpen(e)}/>)
) : (
)}
{!isSearching && hiddenQuickCount > 0 && (
{hiddenQuickCount} quick mood {hiddenQuickCount === 1 ? 'entry' : 'entries'} not shown here · visible in Calendar & Timeline
)}
e.entryMode !== 'quick')} onOpen={onOpen}/>
{/* Header */}
Calendar
Tap a date to see all memories for that day across years
{/* Controls */}
{/* Calendar card */}
{monthName}
{thisMonthCount} {thisMonthCount === 1 ? 'entry' : 'entries'}
{/* Day-of-week headers */}
{['S','M','T','W','T','F','S'].map((d, i) => (
{d}
))}
{/* Day cells */}
{cells.map((d, i) => {
if (!d) return
;
const mo2 = String(mo + 1).padStart(2, '0');
const dd = String(d).padStart(2, '0');
const md = `${mo2}-${dd}`;
const iso = `${yr}-${md}`;
const count = countByMD[md] || 0;
const isToday = iso === todayKey;
const isSelected = selected === md;
const moodKey = moodByMD[md];
const moodColor = moodKey ? ND_MOOD_META[moodKey]?.color : null;
return (
);
})}
{/* ── Inline selected-day memories ── */}
{selected && (
{/* Section header */}
{selectedDateLabel}
{selectedEntries.length} {selectedEntries.length === 1 ? 'memory' : 'memories'} across all years
{/* Memory cards */}
{selectedEntries.length > 0 ? (
selectedEntries.map(e => {
const entryYear = e.date ? parseInt(e.date.slice(0, 4), 10) : currentYear;
const ago = currentYear - entryYear;
return (
onOpen(e)}
showYear
yearsAgo={ago}
/>
);
})
) : (
📭 No memories yet on {selectedDateLabel}
)}
{/* Write action */}
)}
{/* Go To modal */}
{showGoto && (
setShowGoto(false)}>
e.stopPropagation()} style={{
background: 'var(--surface)', borderRadius: 18, padding: 24, width: '100%', maxWidth: 320,
display: 'flex', flexDirection: 'column', gap: 16,
boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
}}>
Go To Month
setGotoVal(e.target.value)} style={{
width: '100%', padding: '10px 12px', borderRadius: 10,
border: '1px solid var(--border-2)', background: 'var(--surface-2)',
font: 'inherit', fontSize: 14, color: 'var(--text)',
}}/>
)}
);
}
/* ── DIARY DATE MODAL — legacy, kept as export ── */
function DiaryDateModal({ monthDay, entries, onOpen, onClose, onCompose }) {
const dayEntries = entries
.filter(e => e.date && e.date.slice(5, 10) === monthDay)
.sort((a, b) => b.date.localeCompare(a.date));
const dateLabel = new Date(`2000-${monthDay}T00:00:00`).toLocaleDateString(undefined, { month: 'long', day: 'numeric' });
return (
e.stopPropagation()} style={{
width: '100%', maxHeight: '82vh', overflow: 'auto',
background: 'var(--bg)', borderRadius: '20px 20px 0 0',
padding: '20px 18px 40px', display: 'flex', flexDirection: 'column', gap: 14,
boxShadow: '0 -8px 40px rgba(0,0,0,0.2)',
}}>
{dateLabel}
{dayEntries.length ? `${dayEntries.length} ${dayEntries.length === 1 ? 'memory' : 'memories'}` : 'No memories yet'}
{dayEntries.map(e =>
onOpen(e)} showYear/>)}
);
}
/* ═══════════════════════════════════════════════════════════════════
DIARY TIMELINE — month-grouped, search (title/text/tags/mood/date)
═══════════════════════════════════════════════════════════════════*/
function DiaryTimeline({ entries, onOpen, onCompose }) {
const [q, setQ] = React.useState('');
const [showGoto, setShowGoto] = React.useState(false);
const [gotoVal, setGotoVal] = React.useState('');
const monthRefs = React.useRef({});
const [activeTabMo, setActiveTabMo] = React.useState(() => parseInt(todayISO().slice(5, 7), 10));
const todayMonth = parseInt(todayISO().slice(5, 7), 10);
const filtered = React.useMemo(() => {
if (!q) return entries;
const ql = q.toLowerCase();
return entries.filter(e => {
const moodLabel = (ND_MOOD_META[e.mood]?.label || e.mood || '').toLowerCase();
return (e.date || '').includes(q) ||
(e.date || '').slice(0, 4).includes(q) ||
(e.title || '').toLowerCase().includes(ql) ||
(e.text || '').toLowerCase().includes(ql) ||
(e.tags || []).some(t => t.toLowerCase().includes(ql)) ||
moodLabel.includes(ql);
});
}, [entries, q]);
const sorted = React.useMemo(() => [...filtered].sort((a, b) => {
const am = parseInt((a.date || '').slice(5, 7) || '0', 10);
const bm = parseInt((b.date || '').slice(5, 7) || '0', 10);
if (am !== bm) return am - bm;
const ad = parseInt((a.date || '').slice(8, 10) || '0', 10);
const bd = parseInt((b.date || '').slice(8, 10) || '0', 10);
if (ad !== bd) return ad - bd;
return (a.date || '').localeCompare(b.date || '');
}), [filtered]);
const grouped = React.useMemo(() => {
const g = {};
sorted.forEach(e => {
const mo = parseInt((e.date || '').slice(5, 7) || '0', 10);
if (!mo) return;
if (!g[mo]) g[mo] = [];
g[mo].push(e);
});
return g;
}, [sorted]);
const presentMonths = Object.keys(grouped).map(Number).sort((a, b) => a - b);
const monthsWithData = React.useMemo(() => {
const s = new Set();
entries.forEach(e => { if (e.date) s.add(parseInt(e.date.slice(5, 7), 10)); });
return s;
}, [entries]);
function scrollToMonth(mo) {
setActiveTabMo(mo);
const el = monthRefs.current[mo];
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
function handleGoto() {
if (!gotoVal) return;
const parts = gotoVal.split('-');
const targetMo = parseInt(parts[1] || parts[0], 10);
if (targetMo >= 1 && targetMo <= 12) scrollToMonth(targetMo);
setShowGoto(false);
setGotoVal('');
}
return (
{/* Header */}
Timeline
{entries.length} {entries.length === 1 ? 'entry' : 'entries'} · grouped by calendar month
{/* Controls */}
{/* Search bar */}
setQ(e.target.value)}
placeholder="Search title, text, tags, mood, date…"
style={{ flex: 1, border: 0, background: 'transparent', outline: 'none', font: 'inherit', fontSize: 14, color: 'var(--text)' }}/>
{q && (
)}
{q && (
{filtered.length} {filtered.length === 1 ? 'result' : 'results'} for "{q}"
)}
{/* Month tabs */}
{!q && (
{_DIARY_MONTHS_SHORT.map((mn, i) => {
const mo = i + 1;
const hasData = monthsWithData.has(mo);
const active = activeTabMo === mo;
return (
);
})}
)}
{/* Entry groups */}
{entries.length === 0 ? (
) : filtered.length === 0 ? (
) : (
presentMonths.map(mo => {
const monthEntries = grouped[mo];
const moLabel = _DIARY_MONTHS[mo - 1];
return (
{ monthRefs.current[mo] = el; }}
style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
{moLabel}
{monthEntries.length} {monthEntries.length === 1 ? 'entry' : 'entries'}
{monthEntries.map(e => (
onOpen(e)} showYear/>
))}
);
})
)}
{/* Go To modal */}
{showGoto && (
setShowGoto(false)}>
e.stopPropagation()} style={{
background: 'var(--surface)', borderRadius: 18, padding: 24, width: '100%', maxWidth: 320,
display: 'flex', flexDirection: 'column', gap: 16,
boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
}}>
Go To Month
setGotoVal(e.target.value)} style={{
width: '100%', padding: '10px 12px', borderRadius: 10,
border: '1px solid var(--border-2)', background: 'var(--surface-2)',
font: 'inherit', fontSize: 14, color: 'var(--text)',
}}/>
)}
);
}
/* ═══════════════════════════════════════════════════════════════════
DIARY ENTRY SHEET — full-screen detail view with edit button
═══════════════════════════════════════════════════════════════════*/
function DiaryEntrySheet({ entry, onClose, onDelete, onEdit }) {
const store = useStore();
if (!entry) return null;
const mood = ND_MOOD_META[entry.mood] || ND_MOOD_META.okay;
const linkedMovie = entry.movieId ? (store.movies ? store.movies() : []).find(m => m.id === entry.movieId) : null;
const displayTitle = _diaryTitle(entry.title);
const dateLabel = entry.date
? new Date(entry.date + 'T00:00:00').toLocaleDateString(undefined, {
weekday: 'long', month: 'long', day: 'numeric', year: 'numeric',
})
: '';
return (
{/* Mood hero banner */}
{onEdit && (
)}
{mood.emoji}
{/* Body */}
{dateLabel}
{displayTitle || mood.label}
{entry.entryMode === 'quick' && (
⚡ Quick
)}
{entry.tags?.length > 0 && (
{entry.tags.map(t => (
{t}
))}
)}
{linkedMovie && (
🎬 Linked movie
{linkedMovie.title}{linkedMovie.year ? · {linkedMovie.year} : null}
{linkedMovie.watchedDate ? '✓ Watched' : (linkedMovie.watchlist ? 'Planned to watch' : 'In your library')}
{linkedMovie.tmdbRating != null ? ' · ★ ' + (+linkedMovie.tmdbRating).toFixed(1) : ''}
)}
{entry.text ? (
{entry.text}
) : (
No details — quick mood entry
)}
{entry.createdAt && (
Written {new Date(entry.createdAt).toLocaleString()}
)}
{onEdit && (
)}
);
}
/* ═══════════════════════════════════════════════════════════════════
DIARY EDIT SHEET — edit an existing entry (supports full + quick)
═══════════════════════════════════════════════════════════════════*/
function DiaryEditSheet({ entry, onClose, onSave, customTags = [], onAddCustomTag }) {
const initMode = entry.entryMode || ((entry.text && entry.text.trim()) ? 'full' : 'quick');
const [mode, setMode] = React.useState(initMode);
const [title, setTitle] = React.useState(entry.title || '');
const [text, setText] = React.useState(entry.text || '');
const [mood, setMood] = React.useState(entry.mood || 'okay');
const [tags, setTags] = React.useState(entry.tags || []);
const [date, setDate] = React.useState(entry.date || todayISO());
const [movieId, setMovieId] = React.useState(entry.movieId || null);
const [newTag, setNewTag] = React.useState('');
const builtInTags = Object.keys(ND_TAG_COLORS);
const entryExtraTags = (entry.tags || []).filter(t => !ND_TAG_COLORS[t]);
const allTags = [...new Set([...builtInTags, ...customTags.filter(t => !ND_TAG_COLORS[t]), ...entryExtraTags])];
const canSave = mode === 'quick' ? true : !!text.trim();
function handleAddTag() {
const t = newTag.trim();
if (!t) return;
if (!allTags.includes(t) && onAddCustomTag) onAddCustomTag(t);
if (!tags.includes(t)) setTags(prev => [...prev, t]);
setNewTag('');
}
return (
{/* Header */}
Edit entry
{/* Mode toggle */}
{[
{ id: 'full', label: '📖 Full Entry', desc: 'Write your thoughts' },
{ id: 'quick', label: '⚡ Quick Mood', desc: 'Mood & tags only' },
].map(m => (
))}
{/* Date */}
{/* Title */}
setTitle(e.target.value)}
placeholder={mode === 'quick' ? 'Title (optional)…' : 'Title…'}
style={{
width: '100%', border: 0, background: 'transparent', outline: 'none', font: 'inherit',
fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--text)',
marginTop: 8, padding: '8px 0',
}}/>
{/* Mood picker */}
{Object.entries(ND_MOOD_META).map(([k, m]) => (
))}
{/* Textarea — full mode only */}
{mode === 'full' && (