Martin Dvorak
e56653dae1
Frutiger Aero (Settings -> Theme): a third theme, not a dark/light variant. A sky gradient with a strip of grass, the glacier blobs become clouds, the orbs soap bubbles, glass gets the classic horizon gloss and the buttons a glossy aqua. The light/dark toggles (header, rail, chat header) hide while it is on and the picker says why; the pre-paint script applies the class before first paint and the PWA status bar follows (#3fa3e0). Its muted/frost text is darker than Light's because those labels sit directly on the sky. Contrast, measured on real pixels (tests/contrast.mjs, now covering aero): - The light settings sheet was translucent over a dark scrim, so its muted text measured ~2.8:1. Sheets and dialogs now use --glass-sheet-bg (a more opaque surface), and Light's --text-muted is a touch darker. - Result: 0 below-minimum findings and 0 axe violations across every screen, all three themes, phone and desktop. Also: the suites now seed the cookie notice as already dismissed (they run as a returning user); the regression suite opts out to test the notice itself — the previous deploy failed its gate because the notice blocked a chat chip click. The notice also hides during immersive sessions (overlay-open), so it can never cover a study feed. Version 0.1.8, SW -> freezmo-v54.
647 lines
27 KiB
TypeScript
647 lines
27 KiB
TypeScript
"use client";
|
|
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import Link from "next/link";
|
|
import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
|
|
|
|
import { DeckCard } from "@/components/DeckCard";
|
|
import { FolderBar } from "@/components/FolderBar";
|
|
import { HomeworkCard } from "@/components/HomeworkCard";
|
|
import { ChatIcon, EllipsisIcon, FolderIcon, UploadIcon } from "@/components/icons";
|
|
import { LinkLoadingScreen } from "@/components/LinkLoadingScreen";
|
|
import { SegmentedPill } from "@/components/SegmentedPill";
|
|
import { Button, EmptyState, ProgressBar } from "@/components/ui";
|
|
import { createFolder, folderStore, renameFolder } from "@/lib/folders";
|
|
import { deleteHomework, homeworkStore, sortHomework } from "@/lib/homework";
|
|
import { learningStore } from "@/lib/history";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import { computeStats, dueItems, mistakeItems } from "@/lib/learning";
|
|
import { settingsStore } from "@/lib/settings";
|
|
import { ALL_FOLDERS, folderSelection, useSelectedFolder } from "@/lib/nav";
|
|
import { springGentle, springSheet } from "@/lib/motion";
|
|
import { UNORGANIZED_ID, type Deck } from "@/lib/schemas";
|
|
import { deckStore, deleteFolder, importDeck, sortDecks, upsertDeck } from "@/lib/storage";
|
|
import { backupNudgeDue, downloadBackup, snoozeBackupNudge } from "@/lib/backup";
|
|
import { useBackClose } from "@/lib/use-back-close";
|
|
import { useIsPhone } from "@/lib/use-phone";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* Dashboard with two separate pools: study decks (folders + card grid) and
|
|
* saved homework (solutions and step-by-step guides). The tab bar picks one,
|
|
* so the two never mix in a single list.
|
|
*/
|
|
export function LibraryScreen({ initialTab = "decks" }: { initialTab?: "decks" | "homework" }) {
|
|
const tab = initialTab;
|
|
const decks = useSyncExternalStore(deckStore.subscribe, deckStore.getSnapshot, deckStore.getServerSnapshot);
|
|
const homeworkRecords = useSyncExternalStore(
|
|
homeworkStore.subscribe,
|
|
homeworkStore.getSnapshot,
|
|
homeworkStore.getServerSnapshot,
|
|
);
|
|
const homework = useMemo(() => sortHomework(homeworkRecords), [homeworkRecords]);
|
|
const folders = useSyncExternalStore(
|
|
folderStore.subscribe,
|
|
folderStore.getSnapshot,
|
|
folderStore.getServerSnapshot,
|
|
);
|
|
const selected = useSelectedFolder();
|
|
const setSelected = folderSelection.set;
|
|
const { t, plural } = useI18n();
|
|
const isPhone = useIsPhone();
|
|
const [message, setMessage] = useState<{ tone: "ok" | "error"; text: string } | null>(null);
|
|
const [editingFolder, setEditingFolder] = useState<{ id: string; name: string } | null>(null);
|
|
const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
|
|
const [nudgeDue, setNudgeDue] = useState(false);
|
|
/** Phone "⋯" sheet: Import JSON + New folder. */
|
|
const [sheetOpen, setSheetOpen] = useState(false);
|
|
const [folderCreating, setFolderCreating] = useState(false);
|
|
const [folderDraft, setFolderDraft] = useState("");
|
|
const [folderError, setFolderError] = useState<string | null>(null);
|
|
|
|
useBackClose(sheetOpen, () => setSheetOpen(false));
|
|
|
|
useEffect(() => {
|
|
if (!sheetOpen) return;
|
|
const onKey = (event: KeyboardEvent) => {
|
|
if (event.key === "Escape") setSheetOpen(false);
|
|
};
|
|
window.addEventListener("keydown", onKey);
|
|
return () => window.removeEventListener("keydown", onKey);
|
|
}, [sheetOpen]);
|
|
|
|
const closeSheet = () => {
|
|
setSheetOpen(false);
|
|
setFolderCreating(false);
|
|
setFolderDraft("");
|
|
setFolderError(null);
|
|
};
|
|
|
|
const submitFolderFromSheet = () => {
|
|
const result = createFolder(folderDraft);
|
|
if ("error" in result) {
|
|
setFolderError(result.error);
|
|
return;
|
|
}
|
|
setSelected(result.folder.id);
|
|
setMessage({ tone: "ok", text: t("library.folderCreated") });
|
|
closeSheet();
|
|
};
|
|
|
|
useEffect(() => {
|
|
setNudgeDue(backupNudgeDue(decks.length));
|
|
}, [decks.length]);
|
|
|
|
/* Learning strip: SRS due count, open mistakes, today's goal. */
|
|
const answers = useSyncExternalStore(
|
|
learningStore.subscribe,
|
|
learningStore.getAnswersSnapshot,
|
|
learningStore.getServerAnswers,
|
|
);
|
|
const srs = useSyncExternalStore(
|
|
learningStore.subscribe,
|
|
learningStore.getSrsSnapshot,
|
|
learningStore.getServerSrs,
|
|
);
|
|
const dailyGoal = useSyncExternalStore(
|
|
settingsStore.subscribe,
|
|
() => settingsStore.getSnapshot().dailyGoal,
|
|
() => 20,
|
|
);
|
|
/* Smart-review counts resolve against the live deck list: deleting a deck
|
|
must drop its due schedules and its mistakes right away. `dueCount` is not
|
|
used directly because it counts raw schedules, including decks that no
|
|
longer exist. */
|
|
const deckIds = useMemo(() => new Set(decks.map((deck) => deck.id)), [decks]);
|
|
const due = useMemo(() => dueItems(srs).filter((item) => deckIds.has(item.deck.id)).length, [srs, deckIds]);
|
|
const mistakes = useMemo(
|
|
() => mistakeItems(answers).filter((item) => deckIds.has(item.deck.id)).length,
|
|
[answers, deckIds],
|
|
);
|
|
const todayCount = useMemo(() => computeStats(answers).todayCount, [answers]);
|
|
const importRef = useRef<HTMLInputElement>(null);
|
|
|
|
const sorted = useMemo(() => sortDecks(decks), [decks]);
|
|
const folderList = useMemo(
|
|
() => [...folders].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" })),
|
|
[folders],
|
|
);
|
|
|
|
const counts = useMemo(() => {
|
|
const map: Record<string, number> = {};
|
|
for (const folder of folderList) map[folder.id] = 0;
|
|
for (const deck of decks) {
|
|
const key = deck.folderId && map[deck.folderId] !== undefined ? deck.folderId : UNORGANIZED_ID;
|
|
map[key] = (map[key] ?? 0) + 1;
|
|
}
|
|
return map;
|
|
}, [decks, folderList]);
|
|
|
|
const groups = useMemo(() => {
|
|
const unorganized: { id: string; name: string; decks: Deck[]; virtual: boolean } = {
|
|
id: UNORGANIZED_ID,
|
|
name: t("common.unorganized"),
|
|
decks: sorted.filter((deck) => !deck.folderId),
|
|
virtual: true,
|
|
};
|
|
|
|
if (selected === UNORGANIZED_ID) return [unorganized];
|
|
if (selected !== ALL_FOLDERS) {
|
|
const folder = folderList.find((entry) => entry.id === selected);
|
|
if (!folder) return [unorganized];
|
|
return [
|
|
{ id: folder.id, name: folder.name, decks: sorted.filter((deck) => deck.folderId === folder.id), virtual: false },
|
|
];
|
|
}
|
|
|
|
const named = folderList.map((folder) => ({
|
|
id: folder.id,
|
|
name: folder.name,
|
|
decks: sorted.filter((deck) => deck.folderId === folder.id),
|
|
virtual: false,
|
|
}));
|
|
return [...named, unorganized];
|
|
}, [folderList, selected, sorted, t]);
|
|
|
|
const handleImport = async (file: File | undefined) => {
|
|
if (!file) return;
|
|
try {
|
|
const text = await file.text();
|
|
const result = importDeck(text);
|
|
if ("error" in result) setMessage({ tone: "error", text: result.error });
|
|
else setMessage({ tone: "ok", text: t("library.imported", { title: result.deck.title }) });
|
|
} catch {
|
|
setMessage({ tone: "error", text: t("library.couldNotRead") });
|
|
}
|
|
};
|
|
|
|
const removeFolderEverywhere = (folderId: string) => {
|
|
deleteFolder(folderId);
|
|
setConfirmDelete(null);
|
|
setSelected(ALL_FOLDERS);
|
|
setMessage({ tone: "ok", text: t("library.folderDeleted") });
|
|
};
|
|
|
|
const isEmpty = sorted.length === 0 && folderList.length === 0;
|
|
// Group headings only earn their keep once real folders exist; with none,
|
|
// desktop shows a single quiet “All decks” label instead of “Unorganized”.
|
|
const hasFolders = folderList.length > 0;
|
|
|
|
return (
|
|
<div className="relative">
|
|
{/* page header ---------------------------------------------------- */}
|
|
<section className="mb-6 space-y-5">
|
|
<div>
|
|
<h1 className="text-[24px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text)] sm:text-[26px]">
|
|
{t("library.title")}
|
|
</h1>
|
|
<p className="mt-1.5 text-[13.5px] text-[var(--text-subtle)]">
|
|
{t("library.subtitle")}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Desktop keeps Import above the tabs; phones get a small icon
|
|
button in the tab row instead. */}
|
|
<div className="hidden flex-wrap items-center gap-2 sm:flex">
|
|
<Link href="/chat" className="touch-target inline-flex items-center gap-2 rounded-2xl border border-[var(--glass-border)] bg-[var(--surface-strong)] px-4 py-2.5 text-sm font-semibold text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]">
|
|
<ChatIcon className="size-4" />
|
|
{t("chat.ask")}
|
|
</Link>
|
|
<Button
|
|
variant="secondary"
|
|
size="md"
|
|
className="touch-target"
|
|
onClick={() => importRef.current?.click()}
|
|
>
|
|
<UploadIcon className="size-4" />
|
|
{t("library.import")}
|
|
</Button>
|
|
</div>
|
|
<input
|
|
ref={importRef}
|
|
type="file"
|
|
aria-hidden="true"
|
|
tabIndex={-1}
|
|
accept="application/json,.json"
|
|
className="sr-only"
|
|
onChange={(event) => {
|
|
void handleImport(event.target.files?.[0]);
|
|
event.target.value = "";
|
|
}}
|
|
/>
|
|
|
|
{/* Two pools, never mixed: study decks and saved homework. */}
|
|
<div className="flex items-center gap-2">
|
|
<div className="segmented min-w-0 flex-1 sm:max-w-sm">
|
|
<Link
|
|
href="/"
|
|
aria-current={tab === "decks" ? "page" : undefined}
|
|
className={cn("relative", isPhone && "seg-slide")}
|
|
>
|
|
{isPhone && tab === "decks" ? <SegmentedPill layoutId="library-tabs" /> : null}
|
|
<span className="seg-label relative z-10">{t("tabDecks")}</span>
|
|
</Link>
|
|
<Link
|
|
href="/?tab=homework"
|
|
aria-current={tab === "homework" ? "page" : undefined}
|
|
className={cn("relative", isPhone && "seg-slide")}
|
|
>
|
|
{isPhone && tab === "homework" ? <SegmentedPill layoutId="library-tabs" /> : null}
|
|
<span className="seg-label relative z-10">{t("tabHomework")}</span>
|
|
</Link>
|
|
</div>
|
|
<Link
|
|
href="/chat"
|
|
aria-label={t("chat.ask")}
|
|
title={t("chat.ask")}
|
|
className="touch-target grid size-11 shrink-0 place-items-center rounded-2xl border border-[var(--glass-border)] bg-[var(--surface-strong)] text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)] sm:hidden"
|
|
>
|
|
<ChatIcon className="size-5" />
|
|
</Link>
|
|
<button
|
|
type="button"
|
|
onClick={() => setSheetOpen(true)}
|
|
aria-label={t("library.moreActions")}
|
|
title={t("library.moreActions")}
|
|
className="touch-target grid size-11 shrink-0 place-items-center rounded-2xl border border-[var(--glass-border)] bg-[var(--surface-strong)] text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)] sm:hidden"
|
|
>
|
|
<EllipsisIcon className="size-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile folder switcher; the desktop rail covers desktop. Shown only
|
|
once at least one folder exists — creating one lives in the ⋯ sheet
|
|
and in the New deck options step. */}
|
|
{tab === "decks" && hasFolders ? (
|
|
<FolderBar
|
|
className="lg:hidden"
|
|
folders={folderList}
|
|
counts={counts}
|
|
selected={selected}
|
|
onSelect={(id) => {
|
|
setSelected(id);
|
|
setConfirmDelete(null);
|
|
}}
|
|
onCreated={(id) => {
|
|
setSelected(id);
|
|
setMessage({
|
|
tone: "ok",
|
|
text: t("library.folderCreated"),
|
|
});
|
|
}}
|
|
/>
|
|
) : null}
|
|
|
|
|
|
{tab === "decks" && message ? (
|
|
<p
|
|
role="status"
|
|
className={cn(
|
|
"flex items-center gap-2 rounded-xl border border-[var(--hairline)] bg-[var(--surface)] px-3.5 py-2.5 text-[13px] font-medium",
|
|
message.tone === "ok" ? "text-emerald-700 dark:text-emerald-300" : "text-rose-700 dark:text-rose-300",
|
|
)}
|
|
>
|
|
{message.text}
|
|
</p>
|
|
) : null}
|
|
</section>
|
|
|
|
{/* Phones: switching pools crossfades the content. */}
|
|
<AnimatePresence mode="wait" initial={false}>
|
|
<motion.div
|
|
key={isPhone ? tab : "static"}
|
|
initial={isPhone ? { opacity: 0, y: 8 } : false}
|
|
animate={isPhone ? { opacity: 1, y: 0 } : undefined}
|
|
exit={isPhone ? { opacity: 0, y: -6, transition: { duration: 0.16 } } : undefined}
|
|
transition={springGentle}
|
|
>
|
|
{/* learning: review due, mistakes, exam, daily goal ---------------- */}
|
|
<section className="card mb-5 space-y-3 p-4">
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|
<p className="text-[11px] font-semibold uppercase tracking-wide text-[var(--text-subtle)]">
|
|
{t("review.cardTitle")}
|
|
</p>
|
|
<p className="text-[11.5px] font-medium text-[var(--text-muted)]">
|
|
{t("library.learningToday", { n: todayCount, goal: dailyGoal })}
|
|
</p>
|
|
</div>
|
|
<ProgressBar value={Math.min(todayCount, dailyGoal)} max={dailyGoal} label={t("stats.today")} />
|
|
<div className="flex flex-wrap gap-2">
|
|
<Link
|
|
href="/review"
|
|
prefetch
|
|
aria-disabled={due === 0}
|
|
className={cn(
|
|
"touch-target inline-flex h-10 items-center rounded-xl px-3.5 text-[13px] font-semibold transition",
|
|
due > 0 ? "btn-primary" : "btn-secondary pointer-events-none opacity-60",
|
|
)}
|
|
>
|
|
{t("review.title")} · {plural(due, "review.due")}
|
|
<LinkLoadingScreen messageKey="review.preparing" />
|
|
</Link>
|
|
<Link
|
|
href="/review?mistakes=1"
|
|
prefetch
|
|
aria-disabled={mistakes === 0}
|
|
className={cn(
|
|
"touch-target inline-flex h-10 items-center rounded-xl px-3.5 text-[13px] font-semibold transition",
|
|
mistakes > 0 ? "btn-secondary" : "btn-secondary pointer-events-none opacity-60",
|
|
)}
|
|
>
|
|
{t("review.mistakesTitle")} · {plural(mistakes, "review.mistakes")}
|
|
<LinkLoadingScreen messageKey="review.preparing" />
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
|
|
{/* gentle backup nudge — dismissible, never blocks ---------------- */}
|
|
{nudgeDue ? (
|
|
<div className="mb-5 flex flex-wrap items-center gap-3 rounded-2xl border border-[var(--hairline)] bg-[var(--surface-sunken)] px-3.5 py-3">
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-[13px] font-semibold text-[var(--text)]">{t("settings.backupNudgeTitle")}</p>
|
|
<p className="text-[12px] leading-snug text-[var(--text-subtle)]">{t("settings.backupNudgeBody")}</p>
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
<Button
|
|
size="sm"
|
|
onClick={() => {
|
|
downloadBackup();
|
|
setNudgeDue(false);
|
|
}}
|
|
>
|
|
{t("settings.backupNow")}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => {
|
|
snoozeBackupNudge();
|
|
setNudgeDue(false);
|
|
}}
|
|
>
|
|
{t("settings.backupLater")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{/* decks: folders + card grid, or a decks-only empty state --------- */}
|
|
{tab === "decks" && isEmpty ? (
|
|
<EmptyState
|
|
title={t("library.noDecks")}
|
|
action={
|
|
<Link href="/create?mode=deck" className="btn-primary touch-target h-11 px-5 text-sm">
|
|
{t("emptyStateCreateDeck")}
|
|
</Link>
|
|
}
|
|
>
|
|
{t("library.emptyBody")}
|
|
</EmptyState>
|
|
) : null}
|
|
|
|
{/* deck grid (the decks tab, once there is something to show) ------- */}
|
|
{tab === "decks" && !isEmpty ? (
|
|
<div className="space-y-8">
|
|
{groups.map((group) => {
|
|
const isEditing = editingFolder?.id === group.id;
|
|
return (
|
|
<section key={group.id} aria-label={group.name}>
|
|
{/* group header -------------------------------------- */}
|
|
<div className={cn("mb-4 flex items-center gap-2", !hasFolders && "hidden")}>
|
|
<FolderIcon className="size-4 shrink-0 text-[var(--text-subtle)]" />
|
|
|
|
{isEditing && editingFolder ? (
|
|
<span className="flex flex-1 items-center gap-2">
|
|
<input
|
|
autoFocus
|
|
value={editingFolder.name}
|
|
onChange={(event) => setEditingFolder({ ...editingFolder, name: event.target.value })}
|
|
onKeyDown={(event) => {
|
|
event.stopPropagation();
|
|
if (event.key === "Enter") {
|
|
const result = renameFolder(editingFolder.id, editingFolder.name);
|
|
if ("error" in result) setMessage({ tone: "error", text: result.error });
|
|
else setEditingFolder(null);
|
|
}
|
|
if (event.key === "Escape") setEditingFolder(null);
|
|
}}
|
|
aria-label={t("library.renameFolderAria")}
|
|
maxLength={60}
|
|
className="min-w-32 max-w-xs flex-1 rounded-lg border border-[var(--hairline)] bg-[var(--surface-strong)] px-2.5 py-1.5 text-[15px] font-semibold text-[var(--text)] outline-none focus:border-accent-400"
|
|
/>
|
|
<Button
|
|
size="sm"
|
|
onClick={() => {
|
|
const result = renameFolder(editingFolder.id, editingFolder.name);
|
|
if ("error" in result) setMessage({ tone: "error", text: result.error });
|
|
else setEditingFolder(null);
|
|
}}
|
|
>
|
|
{t("common.save")}
|
|
</Button>
|
|
</span>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelected(group.virtual ? UNORGANIZED_ID : group.id)}
|
|
className="truncate text-[15px] font-semibold tracking-[-0.01em] text-[var(--text)]"
|
|
>
|
|
{group.name}
|
|
<span className="ml-2 text-[13px] font-normal tabular-nums text-[var(--text-subtle)]">
|
|
{group.decks.length}
|
|
</span>
|
|
</button>
|
|
)}
|
|
|
|
{!group.virtual && !isEditing ? (
|
|
<div className="flex items-center gap-0.5">
|
|
<button
|
|
type="button"
|
|
onClick={() => setEditingFolder({ id: group.id, name: group.name })}
|
|
className="rounded-lg px-2 py-1 text-[12.5px] font-medium text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
|
|
>
|
|
{t("common.rename")}
|
|
</button>
|
|
{confirmDelete === group.id ? (
|
|
<>
|
|
<Button size="sm" variant="danger" onClick={() => removeFolderEverywhere(group.id)}>
|
|
{t("common.delete")}
|
|
</Button>
|
|
<Button size="sm" variant="ghost" onClick={() => setConfirmDelete(null)}>
|
|
{t("common.cancel")}
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={() => setConfirmDelete(group.id)}
|
|
className="rounded-lg px-2 py-1 text-[12.5px] font-medium text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-rose-600 dark:hover:text-rose-300"
|
|
>
|
|
{t("common.delete")}
|
|
</button>
|
|
)}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
{/* One quiet label replaces the redundant single-group heading. */}
|
|
{!hasFolders ? (
|
|
<p className="mb-4 hidden text-[12px] font-medium text-[var(--text-subtle)] lg:block">
|
|
{t("common.allDecks")}
|
|
</p>
|
|
) : null}
|
|
|
|
{confirmDelete === group.id ? (
|
|
<p className="mb-3 text-[12.5px] text-[var(--text-muted)]">
|
|
{plural(group.decks.length, "library.deleteWarning")}
|
|
</p>
|
|
) : null}
|
|
|
|
{group.decks.length === 0 ? (
|
|
<div className="rounded-2xl border border-dashed border-[var(--hairline)] px-5 py-8 text-center text-[13px] text-[var(--text-subtle)]">
|
|
{group.virtual ? t("library.nothingUnfiled") : t("library.emptyFolder")}
|
|
</div>
|
|
) : (
|
|
<ul className="grid list-none grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4 lg:grid-cols-[repeat(auto-fill,minmax(320px,1fr))]">
|
|
<AnimatePresence initial={false}>
|
|
{group.decks.map((deck, index) => (
|
|
<DeckCard
|
|
key={deck.id}
|
|
deck={deck}
|
|
index={index}
|
|
onMove={(folderId) => {
|
|
upsertDeck({ ...deck, folderId });
|
|
setMessage({
|
|
tone: "ok",
|
|
text: folderId ? t("library.deckMoved") : t("library.deckMovedUnorganized"),
|
|
});
|
|
}}
|
|
/>
|
|
))}
|
|
</AnimatePresence>
|
|
</ul>
|
|
)}
|
|
</section>
|
|
);
|
|
})}
|
|
</div>
|
|
) : null}
|
|
|
|
{/* homework: saved solutions and guides, or a homework-only empty state */}
|
|
{tab === "homework" && homework.length === 0 ? (
|
|
<EmptyState
|
|
title={t("homework.emptyTitle")}
|
|
action={
|
|
<Link href="/homework?mode=homework" className="btn-primary touch-target h-11 px-5 text-sm">
|
|
{t("emptyStateHomework")}
|
|
</Link>
|
|
}
|
|
>
|
|
{t("homework.emptyBody")}
|
|
</EmptyState>
|
|
) : null}
|
|
|
|
{tab === "homework" && homework.length > 0 ? (
|
|
<ul className="grid list-none grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4 lg:grid-cols-[repeat(auto-fill,minmax(320px,1fr))]">
|
|
<AnimatePresence initial={false}>
|
|
{homework.map((record, index) => (
|
|
<HomeworkCard key={record.id} record={record} onDelete={deleteHomework} index={index} />
|
|
))}
|
|
</AnimatePresence>
|
|
</ul>
|
|
) : null}
|
|
|
|
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
|
|
{/* phone "⋯" sheet: Import JSON + New folder ---------------------- */}
|
|
<AnimatePresence>
|
|
{sheetOpen ? (
|
|
<motion.div
|
|
className="fixed inset-0 z-50 flex flex-col justify-end sm:hidden"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
>
|
|
<button
|
|
type="button"
|
|
aria-label={t("common.cancel")}
|
|
onClick={closeSheet}
|
|
className="absolute inset-0 bg-black/40 backdrop-blur-sm"
|
|
/>
|
|
<motion.div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label={t("library.moreTitle")}
|
|
initial={{ y: 300 }}
|
|
animate={{ y: 0 }}
|
|
exit={{ y: 300 }}
|
|
transition={springSheet}
|
|
className="glass-panel glass-sheet relative z-10 rounded-t-3xl px-4 pb-safe pt-3"
|
|
>
|
|
<div className="sheet-grabber" aria-hidden />
|
|
<h2 className="mb-3 text-[15px] font-semibold text-[var(--text)]">{t("library.moreTitle")}</h2>
|
|
|
|
{folderCreating ? (
|
|
<div className="space-y-2 pb-4">
|
|
<input
|
|
autoFocus
|
|
value={folderDraft}
|
|
onChange={(event) => setFolderDraft(event.target.value)}
|
|
onKeyDown={(event) => {
|
|
event.stopPropagation();
|
|
if (event.key === "Enter") submitFolderFromSheet();
|
|
}}
|
|
placeholder={t("common.folderName")}
|
|
aria-label={t("common.newFolderName")}
|
|
maxLength={60}
|
|
className="w-full rounded-xl border border-[var(--hairline)] bg-[var(--surface)] px-3 py-2.5 text-[15px] text-[var(--text)] outline-none focus:border-accent-400"
|
|
/>
|
|
{folderError ? (
|
|
<p className="text-[12px] font-medium text-rose-600 dark:text-rose-300">{folderError}</p>
|
|
) : null}
|
|
<div className="flex gap-2">
|
|
<Button className="touch-target flex-1" onClick={submitFolderFromSheet}>
|
|
{t("common.add")}
|
|
</Button>
|
|
<Button variant="ghost" className="touch-target" onClick={() => setFolderCreating(false)}>
|
|
{t("common.cancel")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-1 pb-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
closeSheet();
|
|
importRef.current?.click();
|
|
}}
|
|
className="nav-row touch-target"
|
|
>
|
|
<UploadIcon className="size-4 shrink-0 opacity-70" />
|
|
<span className="flex-1 text-left">{t("library.import")}</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setFolderDraft("");
|
|
setFolderError(null);
|
|
setFolderCreating(true);
|
|
}}
|
|
className="nav-row touch-target"
|
|
>
|
|
<FolderIcon className="size-4 shrink-0 opacity-70" />
|
|
<span className="flex-1 text-left">{t("common.newFolder")}</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
</motion.div>
|
|
) : null}
|
|
</AnimatePresence>
|
|
|
|
</div>
|
|
);
|
|
}
|