Martin Dvorak
b5269d2844
The note now rides along with the content itself, not only with the generation screens and the chat composer: - Under every card in the study feed and in the review, mistakes and exam sessions (the activity slide's last element — below the card, and below the feedback panel once answered). - On the results slides: the study results screen and the shared session results (review, mistakes, exam). Navigation surfaces (library, deck lists, chat history, settings) still carry no note — it belongs to the moment of generation and to the card being answered, not to browsing (README decision 50 updated). The phase-2 grading check now scopes its placement (the disclaimer right under the graded box) since the same text legitimately appears several times on a session page; three new checks cover the feed, the results slide and the exam (59 checks). SW -> freezmo-v40.
392 lines
16 KiB
TypeScript
392 lines
16 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 { AiDisclaimer } from "@/components/AiDisclaimer";
|
|
import { celebrate } from "@/lib/confetti";
|
|
import { ApiError, generateDeck } from "@/lib/client-api";
|
|
import { materialiseActivities } from "@/lib/deck-ops";
|
|
import { haptic } from "@/lib/haptics";
|
|
import { recordAnswer } from "@/lib/history";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import { withoutReported } from "@/lib/question-reports";
|
|
import type { Activity, Deck } from "@/lib/schemas";
|
|
import { recordAttempt, upsertDeck } from "@/lib/storage";
|
|
import { useWakeLock } from "@/lib/use-wake-lock";
|
|
import { cn } from "@/lib/utils";
|
|
import { BoltIcon, FlameIcon, XIcon } from "@/components/icons";
|
|
import { ReportQuestionButton } from "@/components/ReportQuestionButton";
|
|
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();
|
|
/* Keep the screen awake for the whole study session (feature-detected). */
|
|
useWakeLock(true);
|
|
const [currentDeck, setCurrentDeck] = useState(deck);
|
|
// Reported questions never enter a session; a fully reported deck stays
|
|
// studiable (withoutReported falls back to the full list).
|
|
const [queue, setQueue] = useState<Activity[]>(() => withoutReported(deck.id, deck.activities));
|
|
/** Ids reported during this run: skipped, so they are not "missed". */
|
|
const [skipped, setSkipped] = useState<string[]>([]);
|
|
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 attempted = Math.max(0, total - skipped.length);
|
|
const score = attempted > 0 ? (correct / attempted) * 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 });
|
|
haptic("celebrate");
|
|
void celebrate("big");
|
|
}
|
|
}
|
|
}, [finished, results, total, skipped.length, 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 } };
|
|
});
|
|
// Every answer feeds the history, the SRS schedule and the mistakes set.
|
|
recordAnswer({
|
|
deckId: currentDeck.id,
|
|
deckTitle: currentDeck.title,
|
|
activityId: activity.id,
|
|
type: activity.type,
|
|
topic: activity.topic,
|
|
correct,
|
|
});
|
|
if (correct) {
|
|
haptic("success");
|
|
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 {
|
|
haptic("error");
|
|
setStreak(0);
|
|
}
|
|
},
|
|
[currentDeck.id, currentDeck.title, streak],
|
|
);
|
|
|
|
const missed = useMemo(
|
|
() => queue.filter((activity) => !skipped.includes(activity.id) && !results[activity.id]?.correct),
|
|
[queue, results, skipped],
|
|
);
|
|
|
|
/** What the results screen counts: reported cards were never attempted. */
|
|
const attemptedTotal = Math.max(0, total - skipped.length);
|
|
|
|
const correctCount = useMemo(
|
|
() => queue.filter((activity) => results[activity.id]?.correct).length,
|
|
[queue, results],
|
|
);
|
|
|
|
const restart = useCallback(
|
|
(activities: Activity[], retry: boolean) => {
|
|
setQueue(activities);
|
|
setResults({});
|
|
setSkipped([]);
|
|
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 fade-in-mobile">
|
|
{/* 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>
|
|
{!finished && queue[index] ? (
|
|
<ReportQuestionButton
|
|
deck={currentDeck}
|
|
activity={queue[index]}
|
|
onSkip={() => {
|
|
setSkipped((current) => [...current, queue[index].id]);
|
|
goTo(index + 1);
|
|
}}
|
|
/>
|
|
) : null}
|
|
</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)}
|
|
/>
|
|
<AiDisclaimer />
|
|
</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={attemptedTotal}
|
|
correct={correctCount}
|
|
missed={missed}
|
|
results={results}
|
|
retryMode={retryMode}
|
|
onRetryMissed={() => restart(missed, true)}
|
|
onRestart={() => restart(withoutReported(currentDeck.id, currentDeck.activities), false)}
|
|
onRegenerate={regenerate}
|
|
regenerating={regenerating}
|
|
regenerateError={regenerateError}
|
|
/>
|
|
<AiDisclaimer />
|
|
</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>
|
|
);
|
|
}
|