/* polish/leren-shared.jsx Cross-view Leren-componenten. Wordt door alle 4 Leren-HTMLs geladen, na shared.jsx en leren-components.jsx. Bevat: - LerenPage (page-shell wrapper: Sidebar + Topbar + main) - ChapterHeader (breadcrumb + subject-chip + titel + mastery) - FlashcardDeck (vraag/antwoord-flip + grade-knoppen — gebruikt in hoofdstuk-flashcards-tab én herhaalsessie) - ChatPanel + ChatBubble + ChatComposer (gebruikt in hoofdstuk-pulse-tab én bibliotheek-pulse-entry) - LerenTabs (kleine tab-strip; gebruikt in hoofdstuk én bibliotheek) */ /* ─── LerenPage — page shell ─────────────────────────────── */ function LerenPage({ t, children, subtitle, title = 'Leren', snaps = 1240, streak = 12, level = 7, streakFrozen = false, activeNav = 'leren', url = 'snapsnel.nl/leren', rightExtra }) { const user = { name: 'sam_bakker', level, xp: 73, xpMax: 272, streak, snaps, }; return (
{children}
); } /* ─── LerenTabs ────────────────────────────────────────────── Smalle horizontale tab-strip. Active = onderlijn in pijler-kleur, inactive = fgMute. Counts optioneel rechts in tab. ──────────────────────────────────────────────────────────── */ function LerenTabs({ t, tabs = [], active, accent }) { const c = accent || t.primary; return (
{tabs.map(tab => { const isActive = tab.id === active; return (
{tab.icon && ( )} {tab.label} {tab.count != null && ( {tab.count} )}
); })}
); } /* ─── ChapterHeader ───────────────────────────────────────── Breadcrumb + subject-chip + grote Fredoka-titel + MasteryDots + planner-handoff-badge. Hergebruikt in hoofdstuk-detail en eventueel later in herhaalsessie-context. ──────────────────────────────────────────────────────────── */ function ChapterHeader({ t, subject, breadcrumb = [], chapter, source, masteryLevel, fromPlannen, toetsContext, rightExtra }) { return (
{/* breadcrumb */}
{breadcrumb.map((bc, i) => ( {i > 0 && } {bc} ))}
{/* main row: subject-chip + title + meta */}
{fromPlannen && ( )} {toetsContext && ( {toetsContext} )}

{chapter}

{source && (
{source}
)}
{rightExtra &&
{rightExtra}
}
{/* mastery rail */} {masteryLevel != null && (
Beheersing
)}
); } /* ─── FlashcardDeck ───────────────────────────────────────── Eén kaart-in-beeld pattern. Toont: - Subject-bron-context bovenaan - Voortgang (3 / 12) - Front- of back-state (controle via prop `flipped`) - 4 grade-knoppen post-flip met tijdsindicaties (wanneer je deze kaart weer ziet) Statische compositie — geen click-handling. ──────────────────────────────────────────────────────────── */ function FlashcardDeck({ t, card, flipped = true, idx = 1, total = 12, showStackHint = false, flipCtaSub, onGrade }) { return (
{/* Context-rail */}
{card.source} Kaart {idx} / {total}
{/* Card itself, with optional stack-hint */}
{showStackHint && ( <>
)}
{/* Side label */}
{flipped ? 'Antwoord' : 'Vraag'}
{/* Question */}
{card.front}
{/* Answer (only when flipped) */} {flipped && (
{card.back}
{card.note && (
{card.note}
)}
)}
{/* Grade buttons or flip-CTA */} {flipped ? ( ) : (
Toon antwoord {flipCtaSub && ( {flipCtaSub} )}
)}
); } /* Tweeregelige header + 4-koloms grade-grid. Eén consistente eenheid die de "hoe goed kende je deze kaart" framing levert. */ function GradeButtonRow({ t }) { return (

Hoe goed kende je deze kaart?

Pulse plant op basis hiervan wanneer je 'm weer ziet.
); } function GradeButton({ t, grade, label, due }) { const dark = t.mode === 'dark'; const palette = { opnieuw: { c: dark ? '#F87171' : '#DC2626', bg: dark ? 'rgba(248,113,113,0.12)' : 'rgba(220,38,38,0.06)' }, moeilijk: { c: dark ? '#FBBF24' : '#B45309', bg: dark ? 'rgba(251,191,36,0.12)' : 'rgba(180,83,9,0.06)' }, goed: { c: dark ? '#22C55E' : '#15803D', bg: dark ? 'rgba(34,197,94,0.12)' : 'rgba(21,128,61,0.06)' }, makkelijk: { c: dark ? '#22D3EE' : '#0369A1', bg: dark ? 'rgba(34,211,238,0.12)' : 'rgba(3,105,161,0.06)' }, }[grade]; return ( ); } /* ─── ChatPanel ────────────────────────────────────────────── RAG-chat-paneel. Toont een stack van bubbles + composer onderaan. Source-context-badge bovenaan. Voorbeeld-vraag-chips boven composer wanneer er nog geen geschiedenis is. ──────────────────────────────────────────────────────────── */ function ChatPanel({ t, source, messages = [], suggestions = [], placeholder = 'Stel een vraag…', height = 520 }) { const dark = t.mode === 'dark'; const purple = dark ? '#9D4EDD' : '#7C3AED'; return (
{/* Header */}
Pulse — vraag iets
{source && (
Antwoorden uit: {source}
)}
RAG
{/* Messages */}
{messages.length === 0 ? (
Wat zou je willen weten?
Ik antwoord op basis van je lesmateriaal. Bronnen staan altijd onder het antwoord.
) : ( messages.map((m, i) => ) )}
{/* Suggestion chips */} {suggestions.length > 0 && (
{suggestions.map((s, i) => ( ))}
)} {/* Composer */}
{placeholder}
); } function ChatBubble({ t, role, body, citations = [] }) { const dark = t.mode === 'dark'; const isUser = role === 'user'; return (
{body}
{citations.length > 0 && (
{citations.map((c, i) => ( {c} ))}
)}
); } /* ─── TestJezelfTab ────────────────────────────────────────── Two-mode Active Recall + Feynman tab rendered inside chapter-detail. Quick Recall: 3 questions, score each, overview at end. Feynman: topic pick → free-write → AI rubric feedback. Feynman is gated behind hasFeature('feynman') (premium-plus only). ──────────────────────────────────────────────────────────── */ function TestJezelfTab({ t, hasFeature }) { const { useState, useRef } = React; const dark = t.mode === 'dark'; /* shared mode state */ const [mode, setMode] = useState(null); // null | 'recall' | 'feynman' const [feynmanUnlocked, setFeynmanUnlocked] = useState(false); if (!mode) { return { if (m === 'feynman' && !hasFeature('feynman') && !feynmanUnlocked) { /* preview trial — unlock once */ setFeynmanUnlocked(true); } setMode(m); }} />; } if (mode === 'recall') { return setMode(null)} />; } if (mode === 'feynman') { return setMode(null)} />; } return null; } /* ─── TestJezelf: mode keuze ───────────────────────────────── */ function TestJezelfModeKeuze({ t, dark, hasFeature, feynmanUnlocked, onStart }) { const amber = dark ? '#FBBF24' : '#B45309'; const violet = dark ? '#A78BFA' : '#7C3AED'; const feynmanLocked = !hasFeature('feynman') && !feynmanUnlocked; return (
Test jezelf
Kies hoe je wilt oefenen
{/* Quick Recall card */}
Quick recall

Korte vraag, kort antwoord. Pulse scoort je direct.

3 vragen · ~ 30 sec per vraag · 1 credit per 3 vragen
onStart('recall')}> Start
{/* Feynman card */}
Leg het uit (Feynman) {feynmanLocked && ( Premium+ )}

Leg een onderwerp uit alsof je het aan een onderbouwer vertelt. Pulse geeft pedagogische feedback.

~ 2 min · diepgaande analyse
{feynmanLocked ? (
onStart('feynman')}> 1 gratis preview-trial console.log('[chapter] → premium plus upgrade')}> Bekijk Premium+
) : ( onStart('feynman')}> Start )}
); } /* ─── Quick Recall flow ────────────────────────────────────── */ function QuickRecallFlow({ t, dark, onExit }) { const { useState } = React; const [phase, setPhase] = useState('question'); // question | score | overview const [qIdx, setQIdx] = useState(0); const [answer, setAnswer] = useState(''); const [results, setResults] = useState([]); const [thinking, setThinking] = useState(false); const [expanded, setExpanded] = useState(false); const [checked, setChecked] = useState({}); const RECALL_QUESTIONS = [ { q: 'Wat is mitose?', sample: 'Een soort celdeling waarbij twee identieke cellen ontstaan', score: 8, klopt: 'Celdeling — correct', mist: "'identieke dochtercellen' detail" }, { q: 'Wat is osmose?', sample: 'Water beweegt door een membraan van lage naar hoge concentratie', score: 7, klopt: 'Bewegingsrichting van water — correct', mist: "'semipermeabel membraan' expliciet noemen" }, { q: 'Wat is meiose?', sample: 'Celdeling voor geslachtscellen, waarbij het DNA gehalveerd wordt', score: 9, klopt: 'Halvering chromosomen + geslachtscellen — goed', mist: 'tweede deling zonder DNA-verdubbeling niet benoemd' }, ]; const total = RECALL_QUESTIONS.length; const current = RECALL_QUESTIONS[qIdx % total]; function handleSubmit() { if (!answer.trim()) return; setThinking(true); setTimeout(() => { setResults(rs => [...rs, { q: current.q, answer, score: current.score, klopt: current.klopt, mist: current.mist }]); setThinking(false); setPhase('score'); }, 600); } function handleNextQuestion() { if (qIdx + 1 >= total) { setPhase('overview'); } else { setQIdx(i => i + 1); setAnswer(''); setPhase('question'); } } function handleDoMore() { setResults([]); setQIdx(0); setAnswer(''); setPhase('question'); } const scoreColor = s => s >= 8 ? (dark ? '#22C55E' : '#15803D') : s >= 5 ? (dark ? '#FBBF24' : '#B45309') : (dark ? '#F87171' : '#DC2626'); if (phase === 'question') { const charLeft = 200 - answer.length; return (
{/* Context rail */}
Biologie voor jou · H3 Vraag {qIdx + 1} / {total}
{current.q}