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.
81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useParams } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { ApiKeyGate } from "@/components/ApiKeyGate";
|
|
import { StudyFeed } from "@/components/StudyFeed";
|
|
import { Button } from "@/components/ui";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import type { Deck } from "@/lib/schemas";
|
|
import { getDeck } from "@/lib/storage";
|
|
|
|
export default function DeckPage() {
|
|
const params = useParams<{ id: string }>();
|
|
const id = typeof params.id === "string" ? params.id : "";
|
|
const [deck, setDeck] = useState<Deck | null>(null);
|
|
const [loaded, setLoaded] = useState(false);
|
|
const { t } = useI18n();
|
|
|
|
useEffect(() => {
|
|
if (!id) {
|
|
setLoaded(true);
|
|
return;
|
|
}
|
|
setDeck(getDeck(id) ?? null);
|
|
setLoaded(true);
|
|
}, [id]);
|
|
|
|
if (!loaded) {
|
|
return (
|
|
<main className="frost-bg grid min-h-dvh place-items-center px-4">
|
|
<div className="w-full max-w-xl space-y-4" aria-busy="true" aria-label={t("deckPage.loading")}>
|
|
<div className="flex items-center gap-3">
|
|
<div className="skeleton size-9 rounded-xl" />
|
|
<div className="skeleton h-2 flex-1 rounded-full" />
|
|
</div>
|
|
<div className="skeleton h-24 rounded-3xl" />
|
|
<div className="skeleton h-12 rounded-2xl" />
|
|
<div className="skeleton h-12 w-2/3 rounded-2xl" />
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
if (!deck) {
|
|
return (
|
|
<main className="frost-bg grid min-h-dvh place-items-center px-4">
|
|
<div className="card relative max-w-md space-y-3 p-6 text-center">
|
|
<p className="text-4xl" aria-hidden>
|
|
🧊
|
|
</p>
|
|
<h1 className="text-xl font-extrabold text-frost-950 dark:text-frost-50">{t("deckPage.notFound")}</h1>
|
|
<p className="text-sm text-frost-600 dark:text-frost-300">
|
|
{t("deckPage.notFoundBody")}
|
|
</p>
|
|
<div className="flex justify-center gap-2 pt-1">
|
|
<Link
|
|
href="/"
|
|
className="inline-flex items-center gap-2 rounded-2xl bg-accent-600 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-accent-700"
|
|
>
|
|
{t("deckPage.back")}
|
|
</Link>
|
|
<Link href="/create">
|
|
<Button variant="secondary">{t("deckPage.create")}</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ApiKeyGate>
|
|
{/* The feed is a fixed overlay, but its content still needs a landmark. */}
|
|
<main>
|
|
<StudyFeed key={deck.id} deck={deck} />
|
|
</main>
|
|
</ApiKeyGate>
|
|
);
|
|
}
|