/* global React */ const { useState: useDMState, useEffect: useDMEffect } = React; const { motion: _dmFm } = window.Motion || {}; const _DMMD = (_dmFm && _dmFm.div) || 'div'; const _dmReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; /* ========================================================= App design tokens — exact match to Recall dark theme ========================================================= */ const C = { bg: 'var(--bg)', surface: 'var(--surface)', s2: 'var(--surface-2)', s3: 'var(--surface-3)', border: 'var(--border)', borderStr: 'var(--border-strong)', fg: 'var(--fg)', fg2: 'var(--fg-2)', fg3: 'var(--fg-3)', fg4: 'var(--fg-4)', green: 'var(--accent)', red: 'var(--surface)', redSoft: 'rgba(255,107,107,0.75)', flame: 'var(--accent-warm)', amber: 'var(--accent-warm)', }; const MONO = "'Geist Mono', 'JetBrains Mono', ui-monospace, monospace"; const DISP = "'Inter', system-ui, -apple-system, sans-serif"; const DM_VIEWS = ['home', 'decks', 'stats', 'import']; const DM_CYCLE_MS = 3500; const DM_FADE_MS = 320; const VIEW_LABELS = { home: 'Home', decks: 'All Decks', stats: 'Stats', import: 'Import' }; /* ---- Flame icon (streak only) ---- */ const MiniFlame = ({ size = 14 }) => ( ); /* ---- StatCard — matches real app: font-mono, 34px, weight 500 ---- */ const StatCard = ({ label, value, sub, sup }) => (
{label}
{value}{sup && {sup}}
{sub &&
{sub}
}
); /* ---- DeckRow — SVG icon, correct button states ---- */ const DeckRow = ({ icon, name, sub, status, pct, due }) => (
{name}
{sub}
{status === 'caught' ? ( caught up ) : ( {due} )} {pct}%
{status === 'caught' ? 'Review' : 'Study'}
); /* ---- Heatmap — gap and cell height match real app ---- */ const Heatmap = ({ weeks = 28 }) => { const rows = 7; const palette = [ C.s3, 'rgba(212,212,212,0.12)', 'rgba(212,212,212,0.26)', 'rgba(212,212,212,0.44)', 'rgba(212,212,212,0.66)', 'rgba(212,212,212,0.88)', ]; return (
{Array.from({ length: weeks * rows }, (_, i) => { const sinVal = Math.sin(i * 12.9898 + 1.1) * 43758.5453; const v = Math.max(0, Math.min(5, Math.abs(Math.floor(sinVal % 6)))); const isToday = i === weeks * rows - 1; return (
); })}
28 weeks Less {[1, 2, 3, 4, 5].map(v => ( ))} More
); }; /* ---- Nav icons (sidebar + misc) ---- */ const NavIcon = ({ name, size = 15 }) => { const paths = { home: <>, book: <>, bar: <>, upload: <>, settings: <>, layers: <>, csv: <>, microscope: <>, globe: <>, graduation: <>, atom: <>, chevron: , plus: <>, search: <>, download: <>, }; return ( {paths[name] || null} ); }; /* ---- Sidebar — matches real Sidebar.tsx ---- */ const Sidebar = ({ view }) => { const items = [ { id: 'home', label: 'Home', icon: 'home', due: 18 }, { id: 'decks', label: 'All decks', icon: 'book', count: 4 }, { id: 'stats', label: 'Stats', icon: 'bar' }, { id: 'import', label: 'Import', icon: 'upload' }, { id: 'settings', label: 'Settings', icon: 'settings' }, ]; const decks = [ { name: 'Biology', due: 0 }, { name: 'Spanish', due: 8 }, { name: 'History', due: 12 }, { name: 'Physics', due: 0 }, ]; return (
{/* Brand */}
Recall Recall
{/* Nav items */} {items.map((it) => { const isActive = view === it.id; return (
{it.label} {it.id === 'home' && it.due > 0 && ( {it.due} due )} {it.id === 'decks' && it.count > 0 && ( {it.count} )}
); })} {/* Decks section */}
Decks
{/* Deck list — dot + name, matches sidebar-deck-item */} {decks.map((d) => (
{d.name} {d.due > 0 && ( {d.due} )}
))}
{/* Profile pill — name + initials + chevron, no trial text */}
AK
Alex
); }; /* ============================================================ Eyebrow — matches .eyebrow class from app ============================================================ */ const Eyebrow = ({ children }) => (
{children}
); /* ============================================================ Slide 1: Home ============================================================ */ const DMHome = () => ( <> {/* Greeting row — title left, chips right (matches real HomeScreen) */}
Monday · June 1
Good evening, Alex.
You have 18 cards due across 4 decks today. About 5 minutes.
{/* Streak + Level chips */}
14 day streak
Level 6 65%
{/* Today's review CTA — radial-gradient surface, matches real HomeScreen */}
Today's review
18 cards due now
Mixed from 4 decks · FSRS-6 scheduled · ~5 min
Start review
{/* Stats row */}
{/* Activity heatmap */}
Activity Active days: 14
); /* ============================================================ Slide 2: All Decks ============================================================ */ const DMDecks = () => ( <> {/* Toolbar */}
Filter decks…
{/* Sort segmented */}
{['Due', 'Recent', 'A–Z', 'Accuracy'].map((s, i) => (
{s}
))}
{/* View segmented */}
{['List', 'Grid'].map((s, i) => (
{s}
))}
{/* Action buttons */}
Export all
Import
New deck
{/* Deck list */}
); /* ============================================================ Slide 3: Stats ============================================================ */ const BAR_H = [45, 62, 38, 71, 55, 83, 47, 66, 52, 78, 43, 69, 57, 100]; const BAR_DAYS = ['T','W','T','F','S','S','M','T','W','T','F','S','S','M']; const DMStats = () => ( <> {/* Title + range */}
Your statistics All Decks
{['7 days', '30 days', '1 year', 'All'].map((s, i) => (
{s}
))}
{/* Headline stats */}
{/* Bar chart + donut — asymmetric 1.6fr : 1fr matches real StatsScreen */}
Reviews per day Last 14 days
{BAR_H.map((h, i) => (
{BAR_DAYS[i]}
))}
86%
Retention Rate
293 / 340 correct
{/* Deck breakdown + answer breakdown — 1.4fr : 1fr matches real */}
Strongest decks By Accuracy
{[['graduation','History',91],['microscope','Biology',87],['atom','Physics',84],['globe','Spanish',79]].map(([icon,n,p]) => (
{n}
{p}%
))}
Answer breakdown All Time
{[ { l: 'Easy', n: 45, p: 13 }, { l: 'Good', n: 198, p: 58 }, { l: 'Hard', n: 62, p: 18 }, { l: 'Again', n: 35, p: 10 }, ].map(({ l, n, p }) => (
{l} {n} · {p}%
))}
); /* ============================================================ Slide 4: Import ============================================================ */ const DMImport = () => ( <> {/* Header — matches real ImportScreen: h3 + mono label */}
Import cards new
{/* Step indicator */}
{[ { n: 1, label: 'Source', active: true }, { n: 2, label: 'Extract', active: false }, { n: 3, label: 'Review', active: false }, ].map((s, i) => (
{s.n}
{s.label}
{i < 2 &&
} ))}
{/* Source cards — icon container 44×44, padding 24, matches ImportScreen */}
{[ { icon: 'book', title: 'Recall file (.recall)', hint: 'Restore a previously exported Recall deck' }, { icon: 'layers', title: 'Anki deck (.apkg)', hint: 'Import your existing Anki decks' }, { icon: 'csv', title: 'CSV / spreadsheet', hint: 'Front,Back columns mapped directly' }, ].map((card) => (
{card.title}
{card.hint}
))}
); const DMBody = ({ view }) => { if (view === 'home') return ; if (view === 'decks') return ; if (view === 'stats') return ; if (view === 'import') return ; return null; }; /* ============================================================ Main DashboardMock ============================================================ */ const DashboardMock = () => { const [idx, setIdx] = useDMState(0); const [showing, setShowing] = useDMState(true); useDMEffect(() => { const id = setInterval(() => { setShowing(false); setTimeout(() => { setIdx((i) => (i + 1) % DM_VIEWS.length); setShowing(true); }, DM_FADE_MS); }, DM_CYCLE_MS); return () => clearInterval(id); }, []); const view = DM_VIEWS[idx]; const floatProps = (!_dmReduced && _dmFm) ? { animate: { y: [0, -6, 0] }, transition: { duration: 4.5, ease: 'easeInOut', repeat: Infinity, repeatType: 'loop' }, } : {}; return ( <_DMMD {...floatProps} style={{ width: 'min(1100px, 94vw)', margin: '0 auto', position: 'relative' }}>
{/* Title bar */}
{['#ff5f57','#febc2e','#28c840'].map((col) => ( ))}
Recall — {VIEW_LABELS[view]}
{/* App body */}
{/* Slide indicators */}
{DM_VIEWS.map((v, i) => ( ))}
); }; Object.assign(window, { DashboardMock, MiniFlame });