Martin Dvorak
982391ca45
1. Bugs fixed:
- Backup schema now accepts theme: "aero" so backups exported under
Frutiger Aero pass parseBackup on import, and applyImport in "replace"
mode replaces SRS schedules, answer history, and chats instead of
merging into existing SRS or skipping empty arrays.
- Typed FillBlank cards bind the input value to chosen ?? value instead
of chosen ?? "", and normalise() preserves Unicode letters (\p{L}\p{N})
when grading non-ASCII answers.
- OpenAI-compatible vision calls (contentFor in lib/openai-compat.ts)
prefix data:image/jpeg;base64, when routes pass stripped base64.
- Streaming calls (ollamaChatStream, providerChatStream) keep their
AbortController active across the entire body stream and API routes
forward request.signal so stopping a chat or cancelling a run aborts
the upstream request immediately.
- HomeworkCard uses homeworkModeLabelKey so "check" records display the
Checked label instead of Step-by-step guide.
- Desktop dropzones on /create and /homework accept dropped documents as
well as images.
- LibraryScreen filters reported questions out of its due and mistake
counts to match ReviewClient.
- Clearing a provider key resets generation if it pointed at that
provider; chat conversations persist and restore provider; ModelPicker
keys items by provider:name.
- RouteTransition no longer mutates module-level lastPath during render.
- Service worker asset handler falls back to Response.error() when an
uncached asset fetch fails offline.
- Confetti and .ice-orb / .ice-bubble respect the in-app reduce-motion
toggle.
2. Performance & cleanup:
- Deduplicate window storage listeners across all six localStorage
stores (one listener while subscribed instead of N^2 notifications).
- Use todayAnswerCount in LibraryScreen and pass sorted folders to
DeckCard.
- Memoize MessageRow with stable callbacks in ChatScreen and compute
last message IDs in a single pass.
- Close ImageBitmap after drawing in lib/image.ts and destroy pdf.js
documents in finally in lib/documents.ts.
- Avoid re-parsing serialized sync payloads in POST /api/sync.
- Deduplicate copyText (lib/share.ts -> lib/clipboard.ts), chatMessageId,
describeExtraction, ALL_FOLDERS, useIsPhone, and remove unused helpers
and boilerplate public/*.svg files.
Version 0.5.8, SW -> freezmo-v80.
666 lines
27 KiB
TypeScript
666 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 { useAppReducedMotion as useReducedMotion } from "@/lib/motion-pref";
|
|
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 { dueItems, mistakeItems, todayAnswerCount } from "@/lib/learning";
|
|
import { isReported, reportStore } from "@/lib/question-reports";
|
|
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 reduceMotion = useReducedMotion();
|
|
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,
|
|
);
|
|
const reports = useSyncExternalStore(
|
|
reportStore.subscribe,
|
|
reportStore.getSnapshot,
|
|
reportStore.getServerSnapshot,
|
|
);
|
|
/* Smart-review counts resolve against the live deck list and reported set:
|
|
deleting a deck or reporting a question must drop its due schedules and
|
|
its mistakes right away, matching ReviewClient. */
|
|
const deckIds = useMemo(() => new Set(decks.map((deck) => deck.id)), [decks]);
|
|
const due = useMemo(
|
|
() => {
|
|
void reports;
|
|
return dueItems(srs).filter((item) => deckIds.has(item.deck.id) && !isReported(item.deck.id, item.activity.id)).length;
|
|
},
|
|
[srs, deckIds, reports],
|
|
);
|
|
const mistakes = useMemo(
|
|
() => {
|
|
void reports;
|
|
return mistakeItems(answers).filter((item) => deckIds.has(item.deck.id) && !isReported(item.deck.id, item.activity.id)).length;
|
|
},
|
|
[answers, deckIds, reports],
|
|
);
|
|
const todayCount = useMemo(() => todayAnswerCount(answers), [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>
|
|
<div className="page-heading">
|
|
<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>
|
|
</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="glass-pill 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="glass-pill 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="glass-pill 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="hint-line 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}
|
|
folders={folderList}
|
|
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={reduceMotion ? false : { y: 300 }}
|
|
animate={{ y: 0 }}
|
|
exit={{ y: 300 }}
|
|
transition={reduceMotion ? { duration: 0 } : 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>
|
|
);
|
|
}
|