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.
254 lines
9.4 KiB
TypeScript
254 lines
9.4 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
|
|
import { ActivityRenderer } from "@/components/activities";
|
|
import { AiDisclaimer } from "@/components/AiDisclaimer";
|
|
import { XIcon } from "@/components/icons";
|
|
import { ReportQuestionButton } from "@/components/ReportQuestionButton";
|
|
import { ProgressBar } from "@/components/ui";
|
|
import type { Activity, Deck } from "@/lib/schemas";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import { useWakeLock } from "@/lib/use-wake-lock";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export type SessionItem = { deck: Deck; activity: Activity };
|
|
export type SessionResult = { correct: boolean; userAnswer?: string };
|
|
export type SessionRenderResults = (state: {
|
|
results: Record<string, SessionResult>;
|
|
items: SessionItem[];
|
|
correct: number;
|
|
total: number;
|
|
score: number;
|
|
}) => React.ReactNode;
|
|
|
|
/**
|
|
* The scroll-snap activity feed shared by review, mistakes and exam sessions.
|
|
* Same mechanics as the study feed (remount per run, scroll tracking, keyboard
|
|
* navigation) but with a pluggable results slide and an optional timer.
|
|
*/
|
|
export function SessionFeed({
|
|
title,
|
|
items,
|
|
timerSeconds,
|
|
noHints = false,
|
|
testId,
|
|
onExit,
|
|
onAnswered,
|
|
renderResults,
|
|
}: {
|
|
title: string;
|
|
items: SessionItem[];
|
|
timerSeconds?: number;
|
|
noHints?: boolean;
|
|
testId?: string;
|
|
onExit: () => void;
|
|
onAnswered?: (item: SessionItem, correct: boolean, meta?: { userAnswer?: string }) => void;
|
|
renderResults: SessionRenderResults;
|
|
}) {
|
|
const { t } = useI18n();
|
|
useWakeLock(true);
|
|
const [index, setIndex] = useState(0);
|
|
const [results, setResults] = useState<Record<string, SessionResult>>({});
|
|
/** Ids reported during this run: skipped, so they are not "missed". */
|
|
const [skipped, setSkipped] = useState<string[]>([]);
|
|
const [runId] = useState(0);
|
|
const [remaining, setRemaining] = useState(timerSeconds ?? 0);
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
|
|
const total = items.length;
|
|
const slideCount = total + 1;
|
|
|
|
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]);
|
|
|
|
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]);
|
|
|
|
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);
|
|
}
|
|
};
|
|
window.addEventListener("keydown", onKey);
|
|
return () => window.removeEventListener("keydown", onKey);
|
|
}, [goTo, index, next]);
|
|
|
|
// Countdown (exam mode); reaching zero jumps to the results slide.
|
|
useEffect(() => {
|
|
if (!timerSeconds) return;
|
|
const interval = window.setInterval(() => {
|
|
setRemaining((value) => {
|
|
if (value <= 1) {
|
|
window.clearInterval(interval);
|
|
return 0;
|
|
}
|
|
return value - 1;
|
|
});
|
|
}, 1000);
|
|
return () => window.clearInterval(interval);
|
|
}, [timerSeconds]);
|
|
|
|
useEffect(() => {
|
|
if (timerSeconds && remaining === 0) goTo(slideCount - 1);
|
|
}, [remaining, timerSeconds, goTo, slideCount]);
|
|
|
|
const handleAnswered = useCallback(
|
|
(item: SessionItem, correct: boolean, meta?: { userAnswer?: string }) => {
|
|
setResults((current) => {
|
|
if (current[item.activity.id]) return current;
|
|
return { ...current, [item.activity.id]: { correct, userAnswer: meta?.userAnswer } };
|
|
});
|
|
onAnswered?.(item, correct, meta);
|
|
},
|
|
[onAnswered],
|
|
);
|
|
|
|
const finished = index >= total;
|
|
const correct = items.filter((item) => results[item.activity.id]?.correct).length;
|
|
/** What the results slide counts: reported cards were never attempted. */
|
|
const attemptedTotal = Math.max(0, total - skipped.length);
|
|
const score = attemptedTotal > 0 ? Math.round((correct / attemptedTotal) * 100) : 0;
|
|
|
|
return (
|
|
<div className="frost-bg fixed inset-0 flex flex-col fade-in-mobile">
|
|
<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">
|
|
<button
|
|
type="button"
|
|
onClick={onExit}
|
|
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" />
|
|
</button>
|
|
<div className="min-w-0 flex-1">
|
|
<ProgressBar
|
|
value={Math.min(index + 1, slideCount)}
|
|
max={slideCount}
|
|
label={t("feed.activityOf", { n: Math.min(index + 1, total), total })}
|
|
/>
|
|
</div>
|
|
{timerSeconds ? (
|
|
<span
|
|
className={cn(
|
|
"shrink-0 rounded-xl px-2 py-1 text-xs font-extrabold tabular-nums",
|
|
remaining <= 30 ? "tint-peach" : "bg-[var(--surface-sunken)] text-[var(--text-muted)]",
|
|
)}
|
|
aria-label={t("exam.timeLeft", { time: formatClock(remaining) })}
|
|
>
|
|
{formatClock(remaining)}
|
|
</span>
|
|
) : null}
|
|
{!finished && items[index] ? (
|
|
<ReportQuestionButton
|
|
deck={items[index].deck}
|
|
activity={items[index].activity}
|
|
onSkip={() => {
|
|
setSkipped((current) => [...current, items[index].activity.id]);
|
|
goTo(index + 1);
|
|
}}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
<div className="flex items-center justify-between gap-2 text-[11px] font-semibold text-[var(--text-muted)]">
|
|
<span className="min-w-0 truncate">{title}</span>
|
|
<span className="shrink-0 tabular-nums">
|
|
{Math.min(index + 1, total)}/{total}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div
|
|
key={runId}
|
|
ref={scrollRef}
|
|
data-testid={testId ?? "session-feed"}
|
|
className="no-scrollbar h-full snap-y snap-mandatory overflow-y-scroll overscroll-y-contain [overflow-anchor:none]"
|
|
>
|
|
{items.map((item, itemIndex) => (
|
|
<section
|
|
key={`${item.deck.id}-${item.activity.id}-${runId}`}
|
|
aria-label={t("feed.activityOf", { n: itemIndex + 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={item.activity}
|
|
active={index === itemIndex}
|
|
language={item.deck.language}
|
|
noHints={noHints}
|
|
onAnswered={(correct, meta) => handleAnswered(item, correct, meta)}
|
|
onNext={next}
|
|
isLast={itemIndex === total - 1}
|
|
nextLabel={itemIndex === total - 1 ? t("review.seeResults") : undefined}
|
|
/>
|
|
<AiDisclaimer />
|
|
</div>
|
|
</section>
|
|
))}
|
|
|
|
<section
|
|
aria-label={t("review.results")}
|
|
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]">
|
|
{finished
|
|
? (
|
|
<>
|
|
{renderResults({ results, items, correct, total: attemptedTotal, score })}
|
|
<AiDisclaimer />
|
|
</>
|
|
)
|
|
: (
|
|
<div className="card space-y-2 p-5 text-center">
|
|
<p className="text-sm font-semibold text-[var(--text-muted)]">{t("review.results")}</p>
|
|
<p className="text-[13px] text-[var(--text-subtle)]">{t("review.finishFirst")}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function formatClock(seconds: number): string {
|
|
const safe = Math.max(0, seconds);
|
|
const minutes = Math.floor(safe / 60);
|
|
return `${minutes}:${String(safe % 60).padStart(2, "0")}`;
|
|
}
|