Martin Dvorak
df34337b4a
- axe is clean across every screen in both themes, phone and desktop. Fixed: the hidden file inputs (aria-hidden + tabIndex -1 — they are opened by labelled buttons, so they should not be in the accessibility tree), the heading order (deck/homework/smart-review cards are h2 under the page h1; LearningSection takes a level so it stays h2 on the library and h3 inside the settings dialog) and landmarks around the study and review feeds. - tests/contrast.mjs (new diagnostic): samples rendered pixels, because axe cannot judge text on blurred glass — it reports those nodes as incomplete. It skips disabled controls (1.4.3 exempts them) and content behind an open sheet. Result: no below-minimum text on any scanned screen. - The report control exists in the homework guide too: under each "Try it yourself" exercise, labelled "Report exercise", without a skip (there is no queue to skip). lib/question-reports now takes deckId/deckTitle directly. - The rail's two creation actions are buttons now (.nav-action) rather than quiet nav rows — once the library is full they were the only way to start something on desktop and read as just more navigation. "Make my homework" is "New homework" wherever it is an action (rail, empty state, share chooser, manifest shortcut); the page title and mode switch keep their wording. Version 0.1.6 (three task bumps), SW -> freezmo-v52.
270 lines
10 KiB
TypeScript
270 lines
10 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 overlay-open fixed inset-0 z-[45] flex flex-col fade-in-mobile">
|
|
{/* Same pill as the study feed: round close button, title + position
|
|
above the bar, timer at the other end (nothing crowds the ends). */}
|
|
<header className="pt-safe absolute inset-x-0 top-0 z-30 px-3">
|
|
<div className="study-chrome mx-auto flex max-w-xl items-center gap-2.5 rounded-full px-2.5 py-2">
|
|
<button
|
|
type="button"
|
|
onClick={onExit}
|
|
aria-label={t("feed.back")}
|
|
title={t("feed.back")}
|
|
className="grid size-10 shrink-0 place-items-center rounded-full bg-[var(--surface-sunken)] text-[var(--text)] transition hover:bg-[var(--hover)]"
|
|
>
|
|
<XIcon className="size-4" />
|
|
</button>
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-baseline justify-between gap-3">
|
|
<span className="min-w-0 truncate text-[13px] font-semibold leading-tight text-[var(--text)]">
|
|
{title}
|
|
</span>
|
|
<span className="shrink-0 text-[11.5px] font-bold tabular-nums text-[var(--text-muted)]">
|
|
{Math.min(index + 1, total)}/{total}
|
|
</span>
|
|
</div>
|
|
<ProgressBar
|
|
className="mt-1.5"
|
|
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-full px-3 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}
|
|
</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}
|
|
/>
|
|
{/* Under the card: disclaimer centred, report control in the
|
|
bottom-right corner (it used to sit in the top chrome). */}
|
|
{!finished && index === itemIndex ? (
|
|
<div className="grid grid-cols-[2.75rem_1fr_2.75rem] items-center gap-3">
|
|
<span aria-hidden />
|
|
<AiDisclaimer />
|
|
<div className="flex justify-end">
|
|
<ReportQuestionButton
|
|
deckId={item.deck.id}
|
|
deckTitle={item.deck.title}
|
|
activity={item.activity}
|
|
onSkip={() => {
|
|
setSkipped((current) => [...current, item.activity.id]);
|
|
goTo(itemIndex + 1);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<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")}`;
|
|
}
|