Martin Dvorak
0ee9e930f0
Retrying the missed items could leave the feed on a stale position: the
retry swaps the queue (8 slides -> 3) and resets the scroll on the OLD
element, while the browser was still finishing a smooth scroll or snap.
Depending on the engine that could strand the viewport past the new
content (blank feed with the header still showing the old counter), and
the results slide kept its inner scroll because it has no key.
- The scroller now carries key={runId}, so every run mounts a brand-new
element: scroll position 0, fresh snap state, no inherited inner
scrolls in any slide.
- The scroll listener re-attaches to the new element (deps [runId]).
New retry suite 12/12: plain retry (fresh element, slide 1, header
Retry 1/N, missed item answerable again), retry fired mid smooth-scroll,
double-tap retry, and retry -> answer -> results -> retry again — all
land on slide 0 with content visible. Regression 74/74, mobile 51/51,
i18n 27/27. Lint + build clean. SW freezmo-v19.
351 lines
14 KiB
TypeScript
351 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import Link from "next/link";
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
|
|
import { ActivityRenderer } from "@/components/activities";
|
|
import { celebrate } from "@/lib/confetti";
|
|
import { ApiError, generateDeck } from "@/lib/client-api";
|
|
import { materialiseActivities } from "@/lib/deck-ops";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import type { Activity, Deck } from "@/lib/schemas";
|
|
import { recordAttempt, upsertDeck } from "@/lib/storage";
|
|
import { cn } from "@/lib/utils";
|
|
import { BoltIcon, FlameIcon, XIcon } from "@/components/icons";
|
|
import { Button, ProgressBar } from "@/components/ui";
|
|
|
|
import { ResultsScreen } from "./ResultsScreen";
|
|
|
|
export type AttemptResult = { correct: boolean; userAnswer?: string };
|
|
|
|
export function StudyFeed({ deck }: { deck: Deck }) {
|
|
const { t } = useI18n();
|
|
const [currentDeck, setCurrentDeck] = useState(deck);
|
|
const [queue, setQueue] = useState<Activity[]>(deck.activities);
|
|
const [index, setIndex] = useState(0);
|
|
const [results, setResults] = useState<Record<string, AttemptResult>>({});
|
|
const [xp, setXp] = useState(0);
|
|
const [streak, setStreak] = useState(0);
|
|
const [bestStreak, setBestStreak] = useState(0);
|
|
const [retryMode, setRetryMode] = useState(false);
|
|
const [regenerating, setRegenerating] = useState(false);
|
|
const [regenerateError, setRegenerateError] = useState<string | null>(null);
|
|
/** Bumped on every restart so the activity components remount fresh. */
|
|
const [runId, setRunId] = useState(0);
|
|
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
const recordedRef = useRef(false);
|
|
|
|
const total = queue.length;
|
|
const slideCount = total + 1; // + results slide
|
|
|
|
const goTo = useCallback((target: number) => {
|
|
const container = scrollRef.current;
|
|
if (!container) return;
|
|
const clamped = Math.max(0, Math.min(target, slideCount - 1));
|
|
container.scrollTo({ top: clamped * container.clientHeight, behavior: "smooth" });
|
|
}, [slideCount]);
|
|
|
|
const next = useCallback(() => goTo(index + 1), [goTo, index]);
|
|
|
|
// Track which slide is visible (works for wheel, touch and programmatic
|
|
// scroll). Re-attached whenever the scroller remounts on a new run (runId).
|
|
useEffect(() => {
|
|
const container = scrollRef.current;
|
|
if (!container) return;
|
|
let frame = 0;
|
|
const onScroll = () => {
|
|
cancelAnimationFrame(frame);
|
|
frame = requestAnimationFrame(() => {
|
|
const height = container.clientHeight || 1;
|
|
const current = Math.round(container.scrollTop / height);
|
|
setIndex((previous) => (previous === current ? previous : current));
|
|
});
|
|
};
|
|
container.addEventListener("scroll", onScroll, { passive: true });
|
|
return () => {
|
|
container.removeEventListener("scroll", onScroll);
|
|
cancelAnimationFrame(frame);
|
|
};
|
|
}, [runId]);
|
|
|
|
// Keyboard navigation.
|
|
useEffect(() => {
|
|
const onKey = (event: KeyboardEvent) => {
|
|
const target = event.target as HTMLElement | null;
|
|
if (target && (/^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName) || target.isContentEditable)) return;
|
|
if (event.metaKey || event.ctrlKey || event.altKey) return;
|
|
if (event.key === "ArrowDown" || event.key === "PageDown" || event.key === "j") {
|
|
event.preventDefault();
|
|
next();
|
|
} else if (event.key === "ArrowUp" || event.key === "PageUp" || event.key === "k") {
|
|
event.preventDefault();
|
|
goTo(index - 1);
|
|
} else if (event.key === "Home") {
|
|
event.preventDefault();
|
|
goTo(0);
|
|
} else if (event.key === "End") {
|
|
event.preventDefault();
|
|
goTo(slideCount - 1);
|
|
}
|
|
};
|
|
window.addEventListener("keydown", onKey);
|
|
return () => window.removeEventListener("keydown", onKey);
|
|
}, [goTo, index, next, slideCount]);
|
|
|
|
const finished = index >= total;
|
|
|
|
useEffect(() => {
|
|
if (!finished) return;
|
|
if (!retryMode && !recordedRef.current) {
|
|
recordedRef.current = true;
|
|
const answered = Object.values(results);
|
|
const correct = answered.filter((entry) => entry.correct).length;
|
|
const score = total > 0 ? (correct / total) * 100 : 0;
|
|
// Only a run with at least one answer counts. Without this, the scroll
|
|
// anchoring shift when a regenerated deck swaps in could fire a bogus
|
|
// 0% attempt before the feed had snapped back to the first slide.
|
|
if (answered.length > 0) {
|
|
recordAttempt(currentDeck.id, { scorePercent: score, correct, total });
|
|
void celebrate("big");
|
|
}
|
|
}
|
|
}, [finished, results, total, currentDeck.id, retryMode]);
|
|
|
|
const handleAnswered = useCallback(
|
|
(activity: Activity, correct: boolean, meta?: { userAnswer?: string }) => {
|
|
setResults((current) => {
|
|
if (current[activity.id]) return current; // first answer counts
|
|
return { ...current, [activity.id]: { correct, userAnswer: meta?.userAnswer } };
|
|
});
|
|
if (correct) {
|
|
const nextStreak = streak + 1;
|
|
setStreak(nextStreak);
|
|
setBestStreak((best) => Math.max(best, nextStreak));
|
|
setXp((value) => value + activity.xp);
|
|
if (nextStreak > 0 && nextStreak % 5 === 0) void celebrate("normal");
|
|
} else {
|
|
setStreak(0);
|
|
}
|
|
},
|
|
[streak],
|
|
);
|
|
|
|
const missed = useMemo(
|
|
() => queue.filter((activity) => !results[activity.id]?.correct),
|
|
[queue, results],
|
|
);
|
|
|
|
const correctCount = useMemo(
|
|
() => queue.filter((activity) => results[activity.id]?.correct).length,
|
|
[queue, results],
|
|
);
|
|
|
|
const restart = useCallback(
|
|
(activities: Activity[], retry: boolean) => {
|
|
setQueue(activities);
|
|
setResults({});
|
|
setStreak(0);
|
|
setRetryMode(retry);
|
|
recordedRef.current = retry; // don't overwrite the best score with a retry run
|
|
// A new run: remount every activity (fresh state) and jump to the top
|
|
// *before* the new slides render, so scroll anchoring can't hold the
|
|
// old results position.
|
|
const container = scrollRef.current;
|
|
if (container) container.scrollTop = 0;
|
|
setRunId((value) => value + 1);
|
|
setIndex(0);
|
|
},
|
|
[],
|
|
);
|
|
|
|
// Whenever a run starts (including the first render), snap back to slide 1.
|
|
useEffect(() => {
|
|
const container = scrollRef.current;
|
|
if (container) container.scrollTop = 0;
|
|
}, [runId]);
|
|
|
|
/** Rebuild the deck from its stored source notes and start it over. */
|
|
const regenerate = useCallback(async () => {
|
|
if (regenerating) return;
|
|
const source = currentDeck.sourceText?.trim();
|
|
if (!source) {
|
|
setRegenerateError(t("deck.noSourceRegenerate"));
|
|
return;
|
|
}
|
|
setRegenerating(true);
|
|
setRegenerateError(null);
|
|
try {
|
|
const { deck: generated } = await generateDeck({
|
|
text: source,
|
|
difficulty: currentDeck.difficulty,
|
|
language: currentDeck.language,
|
|
count: Math.max(8, currentDeck.activities.length),
|
|
});
|
|
const activities = materialiseActivities(generated.activities, currentDeck.difficulty);
|
|
const updated: Deck = {
|
|
...currentDeck,
|
|
title: generated.title || currentDeck.title,
|
|
subject: generated.subject ?? currentDeck.subject,
|
|
summary: generated.summary ?? currentDeck.summary,
|
|
language: generated.language ?? currentDeck.language,
|
|
activities,
|
|
attempts: 0,
|
|
bestScore: undefined,
|
|
updatedAt: Date.now(),
|
|
};
|
|
upsertDeck(updated);
|
|
setCurrentDeck(updated);
|
|
restart(activities, false);
|
|
} catch (error) {
|
|
setRegenerateError(error instanceof ApiError ? error.message : t("deck.couldNotRegenerate"));
|
|
} finally {
|
|
setRegenerating(false);
|
|
}
|
|
}, [currentDeck, regenerating, restart, t]);
|
|
|
|
const progressValue = Math.min(index + 1, slideCount);
|
|
const progressMax = slideCount;
|
|
|
|
return (
|
|
<div className="frost-bg fixed inset-0 flex flex-col">
|
|
{/* Chrome ---------------------------------------------------- */}
|
|
<header className="pt-safe absolute inset-x-0 top-0 z-30 px-3">
|
|
<div className="study-chrome mx-auto max-w-xl space-y-1.5 rounded-full px-3 py-2">
|
|
<div className="flex items-center gap-3">
|
|
<Link
|
|
href="/"
|
|
aria-label={t("feed.back")}
|
|
className="grid size-9 shrink-0 place-items-center rounded-xl bg-[var(--surface-sunken)] text-[var(--text)] transition hover:bg-[var(--hover)]"
|
|
>
|
|
<XIcon className="size-4" />
|
|
</Link>
|
|
<div className="min-w-0 flex-1">
|
|
<ProgressBar
|
|
value={progressValue}
|
|
max={progressMax}
|
|
label={t("feed.activityOf", { n: progressValue, total: progressMax })}
|
|
/>
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-1.5">
|
|
<span
|
|
className={cn(
|
|
"inline-flex items-center gap-1 rounded-xl px-2 py-1 text-xs font-extrabold transition",
|
|
streak >= 3
|
|
? "tint-peach"
|
|
: "bg-[var(--surface-sunken)] text-[var(--text-muted)]",
|
|
)}
|
|
title={t("feed.streak", { n: streak })}
|
|
aria-label={t("feed.streak", { n: streak })}
|
|
>
|
|
<FlameIcon className="size-3.5" />
|
|
{streak}
|
|
</span>
|
|
<span
|
|
className="inline-flex items-center gap-1 rounded-xl bg-[var(--surface-sunken)] px-2 py-1 text-xs font-extrabold text-[var(--text-muted)]"
|
|
title={t("feed.xp", { n: xp })}
|
|
aria-label={t("feed.xp", { n: xp })}
|
|
>
|
|
<BoltIcon className="size-3.5" />
|
|
{xp}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between gap-2 text-[11px] font-semibold text-[var(--text-muted)]">
|
|
<span className="min-w-0 truncate">{currentDeck.title}</span>
|
|
<span className="shrink-0">
|
|
{retryMode ? t("feed.retry") : ""}
|
|
{Math.min(index + 1, total)}/{total}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Feed ------------------------------------------------------ */}
|
|
{/* The scroller remounts on every run (key={runId}) so it always
|
|
starts on the first slide with fresh scroll/snap state: a shrinking
|
|
queue or an interrupted smooth scroll can never leave the feed on a
|
|
stale, half-scrolled or blank position. */}
|
|
<div
|
|
key={runId}
|
|
ref={scrollRef}
|
|
data-testid="study-feed"
|
|
className="no-scrollbar h-full snap-y snap-mandatory overflow-y-scroll overscroll-y-contain [overflow-anchor:none]"
|
|
>
|
|
{queue.map((activity, activityIndex) => (
|
|
<section
|
|
key={`${activity.id}-${runId}`}
|
|
aria-label={t("feed.activityOf", { n: activityIndex + 1, total })}
|
|
className="flex h-full snap-start snap-always items-stretch justify-center overflow-y-auto overscroll-y-contain"
|
|
>
|
|
<div className="mx-auto flex min-h-full w-full max-w-xl flex-col gap-4 px-4 pb-24 pt-24 [justify-content:safe_center]">
|
|
<ActivityRenderer
|
|
activity={activity}
|
|
active={index === activityIndex}
|
|
language={currentDeck.language}
|
|
isLast={activityIndex === total - 1}
|
|
onAnswered={(correct, meta) => handleAnswered(activity, correct, meta)}
|
|
onNext={() => goTo(activityIndex + 1)}
|
|
/>
|
|
</div>
|
|
</section>
|
|
))}
|
|
|
|
<section
|
|
aria-label={t("feed.results")}
|
|
className="h-full snap-start snap-always overflow-y-auto overscroll-y-contain"
|
|
>
|
|
<div className="mx-auto flex min-h-full w-full max-w-xl flex-col gap-4 px-4 pb-24 pt-24 [justify-content:safe_center]">
|
|
<ResultsScreen
|
|
deck={currentDeck}
|
|
xp={xp}
|
|
bestStreak={bestStreak}
|
|
total={total}
|
|
correct={correctCount}
|
|
missed={missed}
|
|
results={results}
|
|
retryMode={retryMode}
|
|
onRetryMissed={() => restart(missed, true)}
|
|
onRestart={() => restart(currentDeck.activities, false)}
|
|
onRegenerate={regenerate}
|
|
regenerating={regenerating}
|
|
regenerateError={regenerateError}
|
|
/>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{/* Swipe hint on the very first screen ----------------------- */}
|
|
<AnimatePresence>
|
|
{index === 0 && Object.keys(results).length === 0 ? (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 12 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0 }}
|
|
className="pointer-events-none absolute inset-x-0 bottom-6 z-20 flex justify-center sm:hidden"
|
|
>
|
|
<span className="rounded-full bg-frost-950/70 px-4 py-2 text-xs font-semibold text-white backdrop-blur">
|
|
{t("feed.swipeUp")}
|
|
</span>
|
|
</motion.div>
|
|
) : null}
|
|
</AnimatePresence>
|
|
|
|
{/* Desktop next/prev buttons --------------------------------- */}
|
|
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 hidden justify-center pb-4 sm:flex">
|
|
<div className="study-chrome pointer-events-auto flex items-center gap-2 rounded-full px-2 py-1.5">
|
|
<Button variant="ghost" size="sm" onClick={() => goTo(index - 1)} disabled={index === 0} aria-label={t("feed.prev")}>
|
|
↑
|
|
</Button>
|
|
<span className="px-2 text-xs font-semibold text-[var(--text)]">
|
|
{index + 1} / {slideCount}
|
|
</span>
|
|
<Button variant="ghost" size="sm" onClick={() => goTo(index + 1)} disabled={index >= slideCount - 1} aria-label={t("feed.next")}>
|
|
↓
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|