diff --git a/src/components/RecallHistory.jsx b/src/components/RecallHistory.jsx new file mode 100644 index 0000000..0dfb618 --- /dev/null +++ b/src/components/RecallHistory.jsx @@ -0,0 +1,47 @@ +// Home: how your weekly recalls have gone — the last eight weeks at a glance, then every recall you've written. +import { useMemo, useState } from 'react'; +import { useApp } from '../context/AppContext.js'; +import { loadProjectById } from '../utils/projectStorage.js'; +import { recallHistory, recallSummary } from '../utils/recall.js'; + +const LABEL = { solid: 'Had it', partly: 'Partly', forgot: 'Slipped' }; +const DOT = { solid: 'bg-[var(--r-accent)] border-[var(--r-accent)]', partly: 'bg-[var(--r-hl)] border-[var(--r-accent)]', forgot: 'border-[var(--r-sub)]' }; + +export default function RecallHistory() { + const { projectIndex, openStudyChunk } = useApp(); + const [open, setOpen] = useState(false); + const history = useMemo(() => recallHistory(projectIndex.map((e) => loadProjectById(e.id)).filter(Boolean)), [projectIndex]); + if (history.length === 0) return null; + const { counts, total, recent } = recallSummary(history); + + return ( +
+ + {open && ( + + )} +
+ ); +} diff --git a/src/components/WeeklyRecall.jsx b/src/components/WeeklyRecall.jsx new file mode 100644 index 0000000..7a30379 --- /dev/null +++ b/src/components/WeeklyRecall.jsx @@ -0,0 +1,77 @@ +// Home card: once a week, write what you remember of a passage you studied, then compare it with your notes. +import { useMemo, useState } from 'react'; +import { useApp } from '../context/AppContext.js'; +import { loadProjectById } from '../utils/projectStorage.js'; +import { pickRecall } from '../utils/recall.js'; + +const RATE = [ + { id: 'solid', label: 'I had it' }, + { id: 'partly', label: 'Partly' }, + { id: 'forgot', label: 'Most of it slipped' }, +]; +const box = 'mb-4 rounded-xl border border-[var(--r-line)] bg-[var(--r-bar)] px-4 py-3 text-sm'; +const noteLabels = [['observation', 'Observe'], ['interpretation', 'Interpret'], ['application', 'Apply']]; + +export default function WeeklyRecall() { + const { projectIndex, saveChunkRecall, openStudyChunk } = useApp(); + const [step, setStep] = useState('card'); // card -> write -> compare -> done + const [text, setText] = useState(''); + const pick = useMemo( + () => pickRecall(projectIndex.map((e) => loadProjectById(e.id)).filter(Boolean)), + [projectIndex], + ); + if (step === 'done') return
Recall saved. See you next week.
; + if (!pick) return null; + + const finish = (rating) => { + saveChunkRecall(pick.projectId, pick.chunk.id, { at: Date.now(), text: text.trim(), rating }); + setStep('done'); + }; + + if (step === 'card') { + return ( +
+ Weekly recall: {pick.reference} · {pick.projectTitle} + +
+ ); + } + return ( +
+

{pick.reference} · {pick.projectTitle}

+ {step === 'write' ? ( + <> +

From memory, no peeking: what did this passage say, what did it mean, and what did it ask of you?

+