Martin Dvorak
4369ba1a17
Mobile only (<=639px / coarse pointers); desktop keeps its behaviour. System integration - Manifest: id, display_override, monochrome icon, Make my homework shortcut and a share target (text/URL via GET, files via POST). iOS startup images for the common iPhone sizes. Pinch-zoom is allowed again (double-tap zoom is disabled via touch-action instead). - Share target: /share chooser with New deck / Make my homework; POSTed files wait in a 10-minute in-memory store, reach the wizard through sessionStorage and never touch disk. - Web Share: Share rows for decks (JSON file where supported) and the homework result, with a clipboard fallback and a toast. - Offline: a quiet pill appears and Freeze / mode cards are disabled with a clear reason; input is never lost (error cards keep Retry). - State: wizard drafts (text, options, photos up to a size budget) survive reloads and OS kills and are cleared on success; re-tapping the active tab scrolls to the top; the deck page shows a skeleton instead of a spinner. Navigation and gestures - System Back closes the topmost layer first: a small history-entry stack (lib/use-back-close.ts) covers the drawer, Settings sheet, install sheet, deck actions panel and one wizard step; navigations are never rewound and stale entries are skipped. - Destructive-but-reversible actions use Undo toasts: deleting a deck (no confirm) and removing a file in the wizard. Irreversible ones keep their confirm. Input and feedback - Every phone input got inputmode / enterkeyhint / autocomplete / autocapitalize / spellcheck; Enter on the last field advances the wizard; a clipboard-paste button appears where the API exists. - Haptics behind a Settings toggle (on by default): tab switches, toggles, correct/wrong, completion; Vibration API + the iOS hidden switch tick, throttled and silent everywhere else. - Wake lock during the study feed and homework guide, released on leave and re-acquired when the tab returns. Verified: new native suite 35/35 (manifest/head/viewport, offline, share target GET + POST, back-gesture layers, undo, share fallback, tab re-tap, haptics persistence, draft restore), regression 74/74, mobile 52/52, wizard 80/80, declutter 116/116, animation 8/8, i18n 25/25. Lint + build clean. SW freezmo-v23. Needs a real device (documented in the README): iOS haptic tick, system share sheet entry, wake-lock grant, iPhone startup images, iOS edge-swipe back, install prompts. Pull-to-refresh and the app badge were skipped on purpose.
78 lines
2.5 KiB
TypeScript
78 lines
2.5 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>
|
|
<StudyFeed key={deck.id} deck={deck} />
|
|
</ApiKeyGate>
|
|
);
|
|
}
|