// screens.jsx — Home, Import, Segment, Progress screens
// Practice + Recall + Dictation live in practice.jsx
const { useState, useEffect, useRef, useMemo } = React;
// ═════════════════════════════════════════════════════════════
// Shell pieces
// ═════════════════════════════════════════════════════════════
function StatusBar({ dark, time = '9:41', platform = 'ios' }) {
return ;
}
function TopSpacer({ platform }) {
return ;
}
function AppHeader({ title, subtitle, right, marker, onBack, compact, platform = 'ios' }) {
const topPad = platform === 'ios' ? 54 : 40;
return (
{onBack ? (
) : (
{marker || ''}
)}
{right}
{title && (
{title}
)}
{subtitle && (
{subtitle}
)}
);
}
function BottomNav({ active, onChange, platform }) {
// Hide tab bar when on practice flow screens — those get a full-bleed surface
return (
{[
{ id: 'home', label: 'Practice', Icon: IconHome },
{ id: 'library', label: 'Library', Icon: IconLibrary },
{ id: 'progress', label: 'Progress', Icon: IconChart },
].map(t => (
))}
);
}
// ═════════════════════════════════════════════════════════════
// 1. HOME SCREEN
// ═════════════════════════════════════════════════════════════
function HomeScreen({ onPaste, onOpenItem, onProgress, platform }) {
const { RECENT_ITEMS } = window.GK_DATA;
const [urlValue, setUrlValue] = useState('');
const [error, setError] = useState('');
const [checking, setChecking] = useState(false);
const inputRef = useRef(null);
const active = RECENT_ITEMS[0];
const rest = RECENT_ITEMS.slice(1);
// Auto-focus input on mount
useEffect(() => {
if (inputRef.current) inputRef.current.focus();
}, []);
// Extract YouTube video ID
const getYouTubeId = (url) => {
const m = url.match(/(?:youtu\.be\/|v=|embed\/|shorts\/)([a-zA-Z0-9_-]{11})/);
return m ? m[1] : null;
};
// Check if video is embeddable
const checkEmbeddable = async (videoId) => {
return new Promise((resolve) => {
const img = new Image();
img.onload = () => resolve(img.width > 120); // Blocked thumbnails are 120x90
img.onerror = () => resolve(false);
img.src = `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`;
setTimeout(() => resolve(true), 2000); // Timeout fallback
});
};
const submitUrl = async () => {
setError('');
const url = urlValue.trim();
if (!url) {
onPaste('https://youtube.com/watch?v=sample');
return;
}
// Validate YouTube URL
const videoId = getYouTubeId(url);
if (!videoId) {
setError('Please enter a valid YouTube URL');
return;
}
// Check embeddability
setChecking(true);
const embeddable = await checkEmbeddable(videoId);
setChecking(false);
if (!embeddable) {
setError('This video cannot be embedded. Try another video.');
return;
}
onPaste(url);
};
return (
Sound Knot
12 day streak
{/* Paste URL — the doorway */}
Sound in
Solve the knot
Set out your memory.
{error && (
{error}
)}
{ setUrlValue(e.target.value); setError(''); }}
onKeyDown={e => e.key === 'Enter' && submitUrl()}
style={{
paddingRight: 52,
borderColor: error ? 'var(--gk-negative, #c53030)' : undefined,
}}
/>
{/* Today — pick up where you left off */}
Today
1 / 4 complete
onOpenItem(active)}
style={{
padding: 16,
background: 'var(--gk-paper-2)',
border: '1px solid var(--gk-hair)',
borderRadius: 12,
display: 'flex', gap: 14,
cursor: 'pointer',
position: 'relative', overflow: 'hidden',
}}>
Pass {active.pass} · {active.segment}
{active.title}
{active.channel}
{[0,1,2,3,4].map(i => (
))}
{/* Recent segments */}
Recent knots
{rest.map(item => (
onOpenItem(item)}
style={{
display: 'flex', gap: 12, padding: '12px 0',
borderTop: '1px solid var(--gk-hair)',
cursor: 'pointer',
}}>
{item.title}
{item.segment} · pass {item.pass} · {item.lastPracticed}
{Math.round(item.mastery * 100)}%
))}
);
}
// ═════════════════════════════════════════════════════════════
// 2. IMPORT REVIEW
// ═════════════════════════════════════════════════════════════
// Extract YouTube video ID from a URL (supports youtu.be / watch?v= / embed)
function extractYouTubeId(url) {
if (!url) return 'dQw4w9WgcQ';
const m = url.match(/(?:youtu\.be\/|v=|embed\/|shorts\/)([a-zA-Z0-9_-]{11})/);
return m ? m[1] : 'dQw4w9WgcQ';
}
function ImportScreen({ url, onBack, onConfirm, platform }) {
const { SAMPLE_VIDEO, SEGMENT } = window.GK_DATA;
const [phase, setPhase] = useState('fetching'); // fetching → ready
const [transcriptFound, setTranscriptFound] = useState(true);
const vid = extractYouTubeId(url);
useEffect(() => {
const t = setTimeout(() => setPhase('ready'), 1400);
return () => clearTimeout(t);
}, []);
return (
youtu.be/{vid}
{/* Video card with real YouTube embed */}
{phase === 'fetching' && (
FETCHING METADATA…
)}
{SAMPLE_VIDEO.title}
{SAMPLE_VIDEO.channel} · {SAMPLE_VIDEO.duration}
{phase === 'ready' && !transcriptFound && (
)}
{/* Transcript review */}
Transcript review
{phase === 'ready' ? `${SEGMENT.lines.length} LINES` : '—'}
{SEGMENT.lines.map((line, i) => (
))}
The whole video is your practice target. No need to cut a segment.
);
}
function DetectRow({ label, value, done, fail }) {
return (
);
}
// (SegmentScreen removed — whole video is the practice target)
function SegmentScreen() { return null; }
// ═════════════════════════════════════════════════════════════
// 6. PROGRESS SCREEN
// ═════════════════════════════════════════════════════════════
function ProgressScreen({ onBack, platform = 'ios' }) {
const { PRACTICE_GRID, RECENT_ITEMS } = window.GK_DATA;
return (
{/* Streak stat block */}
{/* Heatmap 12 weeks */}
Last 12 weeks
{PRACTICE_GRID.map((v, i) => {
const isToday = i === PRACTICE_GRID.length - 1;
const cls = isToday ? 'today' : v === 2 ? 'done' : v === 1 ? 'partial' : '';
return
;
})}
{/* Listening indicators */}
Listening indicators · last 30 days
{/* Per-segment mastery */}
Active knots · mastery
{RECENT_ITEMS.map(item => (
{Math.round(item.mastery * 100)}%
))}
);
}
function StatCard({ label, value, unit, accent }) {
return (
{label}
{value}
{unit}
{accent && (
{Array.from({ length: 12 }, (_, i) => (
))}
)}
);
}
function IndicatorRow({ label, from, to, unit, inverted, decimals }) {
const delta = to - from;
const improved = inverted ? delta < 0 : delta > 0;
const fmt = v => decimals ? v.toFixed(1) : Math.round(v);
return (
{label}
{fmt(from)}{unit}
{fmt(to)}{unit}
{delta > 0 ? '+' : ''}{fmt(delta)}{unit}
{/* Sparkline */}
{Array.from({ length: 30 }, (_, i) => {
const p = i / 29;
const val = from + delta * p + (Math.sin(i * 0.9) * Math.abs(delta) * 0.12);
const normMax = Math.max(from, to) * 1.15;
const h = (val / normMax) * 100;
return
25 ? 'var(--gk-ink)' : 'var(--gk-ink-4)',
opacity: i > 25 ? 1 : 0.35,
borderRadius: 1,
}}/>;
})}
);
}
Object.assign(window, {
HomeScreen, ImportScreen, SegmentScreen, ProgressScreen,
BottomNav, AppHeader,
});