// Ideas.jsx — "Idea board": browse suggested learning tasks, select several as
// goals, add your own, and collect your own notes & links for each goal.
const IDEA_SEED = [
{ id: 'i-photo', domain: 'bio', title: 'Photosynthesis, end to end', blurb: 'How plants turn sunlight, water, and air into sugar.' },
{ id: 'i-exo', domain: 'astro', title: 'Hunting for exoplanets', blurb: 'How we find and read worlds around other stars.' },
{ id: 'i-aqua', domain: 'rome', title: 'Roman aqueducts & engineering', blurb: 'How Rome moved water across mountains and miles.' },
{ id: 'i-trans', domain: 'ml', title: 'How transformers power LLMs', blurb: 'Attention, tokens, and the modern AI stack.' },
{ id: 'i-silk', domain: 'hist', title: 'The Silk Road', blurb: 'The trade routes that linked distant civilizations.' },
{ id: 'i-rhythm', domain: 'mus', title: 'Rhythm, meter & syncopation', blurb: 'How time signatures give music its groove.' },
{ id: 'i-subj', domain: 'esp', title: 'The Spanish subjunctive', blurb: 'Expressing doubt, wishes, and emotion.' },
{ id: 'i-sky', domain: 'sci', title: 'Why the sky is blue', blurb: 'How sunlight scatters in the atmosphere.' },
{ id: 'i-gps', domain: 'tech', title: 'How GPS finds you', blurb: 'Satellites, precise timing, and trilateration.' }];
const ideaAccent = (domain) => (domainById(domain) || {}).accent || 'var(--blue)';
const ideaTag = (domain) => (domainById(domain) || {}).name || 'Idea';
function IdeaBoard({ toast, openGenerate }) {
const load = (k, fb) => {try {return JSON.parse(localStorage.getItem(k)) || fb;} catch (e) {return fb;}};
const [custom, setCustom] = React.useState(() => load('pl-idea-custom', []));
const [goals, setGoals] = React.useState(() => load('pl-goals', []));
const [sel, setSel] = React.useState(() => new Set());
const [draft, setDraft] = React.useState('');
const [draftDom, setDraftDom] = React.useState('sci');
const [openGoal, setOpenGoal] = React.useState(null);
// Newly captured ideas glow until the user hovers them (so they're easy to spot).
const [newIds, setNewIds] = React.useState(() => new Set(load('pl-idea-new', [])));
// Inline edits to any idea's words (title/blurb), keyed by idea id, persisted.
const [edits, setEdits] = React.useState(() => load('pl-idea-edits', {}));
const persistEdits = (obj) => {setEdits(obj);try {localStorage.setItem('pl-idea-edits', JSON.stringify(obj));} catch (e) {}};
const titleOf = (i) => (edits[i.id] && edits[i.id].title != null) ? edits[i.id].title : i.title;
const blurbOf = (i) => (edits[i.id] && edits[i.id].blurb != null) ? edits[i.id].blurb : i.blurb;
const editField = (id, field, val) => {const cur = edits[id] || {};persistEdits({ ...edits, [id]: { ...cur, [field]: val } });};
const persistCustom = (list) => {setCustom(list);try {localStorage.setItem('pl-idea-custom', JSON.stringify(list));} catch (e) {}};
const persistGoals = (list) => {setGoals(list);try {localStorage.setItem('pl-goals', JSON.stringify(list));} catch (e) {}};
// Reflect notes captured via Quick capture while this page is already open,
// and make the fresh card glow.
React.useEffect(() => {
const onAdd = (e) => {
setCustom(load('pl-idea-custom', []));
const id = e && e.detail && e.detail.id;
if (id) setNewIds((s) => new Set(s).add(id));
};
window.addEventListener('pl-idea-added', onAdd);
return () => window.removeEventListener('pl-idea-added', onAdd);
}, []);
// Once a glowing card is hovered, it has been "seen" — drop the highlight for good.
const clearNew = (id) => {
if (!newIds.has(id)) return;
setNewIds((s) => {const n = new Set(s);n.delete(id);return n;});
try {
const rest = load('pl-idea-new', []).filter((x) => x !== id);
localStorage.setItem('pl-idea-new', JSON.stringify(rest));
} catch (e) {}
};
const ideas = [...IDEA_SEED, ...custom];
const goalIdeaIds = new Set(goals.map((g) => g.ideaId).filter(Boolean));
const toggle = (id) => {
if (goalIdeaIds.has(id)) return;
setSel((s) => {const n = new Set(s);n.has(id) ? n.delete(id) : n.add(id);return n;});
};
const addCustom = () => {
const title = draft.trim();
if (!title) return;
const idea = { id: 'i-c' + Date.now(), domain: draftDom, title, blurb: 'Your own idea to explore.', custom: true };
persistCustom([idea, ...custom]);
setSel((s) => new Set(s).add(idea.id));
setDraft('');
};
const removeCustom = (id) => {persistCustom(custom.filter((c) => c.id !== id));setSel((s) => {const n = new Set(s);n.delete(id);return n;});};
const commitGoals = () => {
const picks = ideas.filter((i) => sel.has(i.id));
if (!picks.length) return;
const added = picks.map((i) => ({
id: 'g' + Date.now() + Math.random().toString(36).slice(2, 6),
ideaId: i.id, title: titleOf(i), blurb: blurbOf(i), domain: i.domain,
notes: '', links: [], done: false, created: Date.now()
}));
persistGoals([...added, ...goals]);
setSel(new Set());
if (toast) toast(added.length === 1 ? 'Added 1 goal' : 'Added ' + added.length + ' goals');
};
const patchGoal = (id, patch) => persistGoals(goals.map((g) => g.id === id ? { ...g, ...patch } : g));
const removeGoal = (id) => {persistGoals(goals.filter((g) => g.id !== id));if (openGoal === id) setOpenGoal(null);};
const doneCount = goals.filter((g) => g.done).length;
return (
{ideas.map((i) => {
const on = sel.has(i.id);
const isGoal = goalIdeaIds.has(i.id);
const ac = ideaAccent(i.domain);
const isNew = newIds.has(i.id) && !on;
return (
toggle(i.id)} role="button" tabIndex={0}
onMouseEnter={() => clearNew(i.id)} onFocus={() => clearNew(i.id)}
onKeyDown={(e) => {if (e.key === 'Enter' || e.key === ' ') {e.preventDefault();toggle(i.id);}}}
title={isGoal ? 'Already one of your goals' : on ? 'Selected — click to remove' : 'Click to select'}
style={{ '--glow': ac, borderColor: on ? ac : undefined, boxShadow: on ? '0 0 0 2px ' + ac + '33' : undefined, cursor: isGoal ? 'default' : 'pointer' }}>
{ideaTag(i.domain)}
{on && }
{isGoal && !on && }
e.stopPropagation()} onClick={(e) => e.stopPropagation()}
onKeyDown={(e) => {e.stopPropagation();if (e.key === 'Enter') {e.preventDefault();e.currentTarget.blur();}}}
onBlur={(e) => editField(i.id, 'title', e.currentTarget.textContent.trim() || i.title)}>{titleOf(i)}
e.stopPropagation()} onClick={(e) => e.stopPropagation()}
onKeyDown={(e) => {e.stopPropagation();if (e.key === 'Enter') {e.preventDefault();e.currentTarget.blur();}}}
onBlur={(e) => editField(i.id, 'blurb', e.currentTarget.textContent.trim() || i.blurb)}>{blurbOf(i)}
{isGoal &&
In your goals
}
{i.custom && !isGoal &&
}
);
})}
{sel.size > 0 &&
{sel.size} idea{sel.size > 1 ? 's' : ''} selected
}
My goals {goals.length}
{goals.length > 0 && {doneCount}/{goals.length} done}
{goals.length === 0 ?
No goals yet
Select ideas above and hit “Set as goals” — each goal gives you a space to collect your own notes and links.
:
{goals.map((g) => {
const ac = ideaAccent(g.domain);
const open = openGoal === g.id;
return (
setOpenGoal(open ? null : g.id)}>
{g.title}
{ideaTag(g.domain)}
{g.links.length > 0 && {g.links.length}}
{g.notes.trim() && notes}
{g.done && openGenerate &&
}
{open &&
patchGoal(g.id, patch)} toast={toast} />}
);
})}
}
);
}
// The per-goal "collect info" panel: a local draft of notes + a pending link,
// saved together with one explicit Save button.
function GoalCollect({ goal, onSave, toast }) {
const [notes, setNotes] = React.useState(goal.notes || '');
const [label, setLabel] = React.useState('');
const [url, setUrl] = React.useState('');
React.useEffect(() => {setNotes(goal.notes || '');}, [goal.id]);
const dirty = notes !== (goal.notes || '') || !!url.trim();
const save = () => {
const patch = { notes };
if (url.trim()) patch.links = [...goal.links, { label: label.trim(), url: url.trim() }];
onSave(patch);
setLabel('');setUrl('');
if (toast) toast('Saved to “' + goal.title + '”');
};
return (