Separate Study Decks and Homework in the library; drop the /create mode switch
Library ("Your icebox")
- Two tabs, never mixed: Study Decks (the folder + card library) and Homework
(saved solutions and step-by-step guides). The active tab lives in the URL
(/?tab=homework), so the sections are linkable and survive a reload.
- Decks tab keeps Import, the folder bar, stats and its own empty state — now
a single decks-only CTA.
- Homework tab lists saved results as cards (mode icon, date, step count,
preview) with Open and delete-with-confirm; its empty state has its own CTA
("Homework Solver") that opens the solver directly. Opening a card
deep-links to /homework?open=<id>, which the screen opens on arrival.
- .segmented now also styles link segments (same control as settings).
/create
- The redundant "Study Deck | Homework Solver" toggle is gone: /create is the
deck uploader only, and the bottom bar's + goes straight to it. Homework has
its own screen, reached from the library tab, the drawer and CTAs.
Copy
- New keys (en + cs): tabDecks, tabHomework, homeworkHeroTitle, plus homework
empty-state/open/step-count strings. The homework hero is now "Solve your
homework" / "Vyřeš svůj úkol" — no study-deck text in the homework flow.
- Removed the now-unused ModeSwitch component and homework.title key.
Service worker: freezmo-v10.
Verified: library-tabs suite 37/37 (tab switching, context empty states,
deep-link opening, deletion, no switch on /create, heroes, redirects, desktop
grid, 360px + 44px targets, axe contrast en+cs light+dark), mobile 49/49,
i18n 27/27, desktop regression 74/74. Lint + build clean.
This commit is contained in:
parent
461dd2ffcf
commit
8c44f47881
12 changed files with 295 additions and 162 deletions
|
|
@ -5,9 +5,11 @@ import { useMemo, useRef, useState, useSyncExternalStore } from "react";
|
|||
|
||||
import { DeckCard } from "@/components/DeckCard";
|
||||
import { FolderBar } from "@/components/FolderBar";
|
||||
import { HomeworkCard } from "@/components/HomeworkCard";
|
||||
import { FolderIcon, SnowflakeIcon, SparklesIcon, UploadIcon } from "@/components/icons";
|
||||
import { Button, EmptyState } from "@/components/ui";
|
||||
import { folderStore, renameFolder } from "@/lib/folders";
|
||||
import { deleteHomework, homeworkStore, sortHomework } from "@/lib/homework";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import { ALL_FOLDERS, folderSelection, useSelectedFolder } from "@/lib/nav";
|
||||
import { openSettings } from "@/lib/ui-events";
|
||||
|
|
@ -16,11 +18,19 @@ import { deckStore, deleteFolder, importDeck, sortDecks, upsertDeck } from "@/li
|
|||
import { cn } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
* Dashboard: page title, folder pills, then a spacious responsive grid of
|
||||
* deck cards grouped by folder.
|
||||
* 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() {
|
||||
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,
|
||||
|
|
@ -119,38 +129,57 @@ export function LibraryScreen() {
|
|||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{/* With nothing in the library, Import drops to a quiet text link
|
||||
so the single primary action is “Make your first deck”. */}
|
||||
{isEmpty ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => importRef.current?.click()}
|
||||
className="inline-flex items-center gap-1.5 text-[13px] font-medium text-[var(--text-muted)] transition hover:text-[var(--text)] hover:underline"
|
||||
>
|
||||
<UploadIcon className="size-4" />
|
||||
{t("library.import")}
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="md"
|
||||
className="touch-target lg:hidden"
|
||||
onClick={() => importRef.current?.click()}
|
||||
>
|
||||
<UploadIcon className="size-4" />
|
||||
{t("library.import")}
|
||||
</Button>
|
||||
{/* Context action: Import for decks (a quiet link while the pool
|
||||
is empty), start-a-new-solve for homework. */}
|
||||
{tab === "decks" ? (
|
||||
isEmpty ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => importRef.current?.click()}
|
||||
className="hidden items-center gap-1.5 text-[13px] font-medium text-[var(--text-muted)] transition hover:text-[var(--text)] hover:underline lg:inline-flex"
|
||||
className="inline-flex items-center gap-1.5 text-[13px] font-medium text-[var(--text-muted)] transition hover:text-[var(--text)] hover:underline"
|
||||
>
|
||||
<UploadIcon className="size-4" />
|
||||
{t("library.import")}
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="md"
|
||||
className="touch-target lg:hidden"
|
||||
onClick={() => importRef.current?.click()}
|
||||
>
|
||||
<UploadIcon className="size-4" />
|
||||
{t("library.import")}
|
||||
</Button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => importRef.current?.click()}
|
||||
className="hidden items-center gap-1.5 text-[13px] font-medium text-[var(--text-muted)] transition hover:text-[var(--text)] hover:underline lg:inline-flex"
|
||||
>
|
||||
<UploadIcon className="size-4" />
|
||||
{t("library.import")}
|
||||
</button>
|
||||
</>
|
||||
)
|
||||
) : homework.length > 0 ? (
|
||||
<>
|
||||
<Link
|
||||
href="/homework?mode=homework"
|
||||
className="btn-secondary touch-target h-10 px-4 text-sm lg:hidden"
|
||||
>
|
||||
<SparklesIcon className="size-4" />
|
||||
{t("actionHomework")}
|
||||
</Link>
|
||||
<Link
|
||||
href="/homework?mode=homework"
|
||||
className="hidden items-center gap-1.5 text-[13px] font-medium text-[var(--text-muted)] transition hover:text-[var(--text)] hover:underline lg:inline-flex"
|
||||
>
|
||||
<SparklesIcon className="size-4" />
|
||||
{t("actionHomework")}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
) : null}
|
||||
<input
|
||||
ref={importRef}
|
||||
type="file"
|
||||
|
|
@ -162,11 +191,21 @@ export function LibraryScreen() {
|
|||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Two pools, never mixed: study decks and saved homework. */}
|
||||
<div className="segmented w-full sm:max-w-sm">
|
||||
<Link href="/" aria-current={tab === "decks" ? "page" : undefined}>
|
||||
{t("tabDecks")}
|
||||
</Link>
|
||||
<Link href="/?tab=homework" aria-current={tab === "homework" ? "page" : undefined}>
|
||||
{t("tabHomework")}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Secondary stats folded into the header as quiet text on desktop,
|
||||
where the sidebar already shows per-folder counts. */}
|
||||
{decks.length > 0 ? (
|
||||
{tab === "decks" && decks.length > 0 ? (
|
||||
<p className="text-[13px] text-[var(--text-subtle)] lg:hidden">
|
||||
{plural(decks.length, "stats.decks")}
|
||||
<span aria-hidden> · </span>
|
||||
|
|
@ -185,7 +224,7 @@ export function LibraryScreen() {
|
|||
{/* Mobile folder switcher; the sidebar covers desktop. With an empty
|
||||
library there is nothing to filter, and the pills would compete
|
||||
with the empty state's single call to action. */}
|
||||
{!isEmpty ? (
|
||||
{tab === "decks" && !isEmpty ? (
|
||||
<FolderBar
|
||||
className="lg:hidden"
|
||||
folders={folderList}
|
||||
|
|
@ -206,7 +245,7 @@ export function LibraryScreen() {
|
|||
) : null}
|
||||
|
||||
|
||||
{message ? (
|
||||
{tab === "decks" && message ? (
|
||||
<p
|
||||
role="status"
|
||||
className={cn(
|
||||
|
|
@ -219,43 +258,25 @@ export function LibraryScreen() {
|
|||
) : null}
|
||||
</section>
|
||||
|
||||
{/* deck grid ------------------------------------------------------ */}
|
||||
{isEmpty ? (
|
||||
{/* decks: folders + card grid, or a decks-only empty state --------- */}
|
||||
{tab === "decks" && isEmpty ? (
|
||||
<EmptyState
|
||||
title={t("library.noDecks")}
|
||||
action={
|
||||
/* Two ways in: build a study deck from notes, or hand over an
|
||||
assignment. Stacked on phones, side by side from 640px up. */
|
||||
<div className="grid w-[min(24rem,calc(100vw_-_3rem))] gap-3 sm:w-[36rem] sm:grid-cols-2">
|
||||
<Link
|
||||
href="/create?mode=deck"
|
||||
className="card card-hover touch-target flex items-center gap-3 border-accent-400/60 p-3.5 text-left sm:p-4"
|
||||
<Link
|
||||
href="/create?mode=deck"
|
||||
className="card card-hover touch-target flex w-[min(24rem,calc(100vw_-_3rem))] items-center gap-3 border-accent-400/60 p-3.5 text-left sm:p-4"
|
||||
>
|
||||
<span
|
||||
aria-hidden
|
||||
className="grad-ice grid size-11 shrink-0 place-items-center rounded-2xl text-[#06111f]"
|
||||
>
|
||||
<span
|
||||
aria-hidden
|
||||
className="grad-ice grid size-11 shrink-0 place-items-center rounded-2xl text-[#06111f]"
|
||||
>
|
||||
<SnowflakeIcon className="size-5" />
|
||||
</span>
|
||||
<span className="min-w-0 text-[14px] font-semibold leading-snug text-[var(--text)]">
|
||||
{t("emptyStateCreateDeck")}
|
||||
</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/homework?mode=homework"
|
||||
className="card card-hover touch-target flex items-center gap-3 p-3.5 text-left sm:p-4"
|
||||
>
|
||||
<span
|
||||
aria-hidden
|
||||
className="grid size-11 shrink-0 place-items-center rounded-2xl bg-[var(--surface-sunken)] text-[var(--text-muted)]"
|
||||
>
|
||||
<SparklesIcon className="size-5" />
|
||||
</span>
|
||||
<span className="min-w-0 text-[14px] font-semibold leading-snug text-[var(--text)]">
|
||||
{t("emptyStateHomework")}
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
<SnowflakeIcon className="size-5" />
|
||||
</span>
|
||||
<span className="min-w-0 text-[14px] font-semibold leading-snug text-[var(--text)]">
|
||||
{t("emptyStateCreateDeck")}
|
||||
</span>
|
||||
</Link>
|
||||
}
|
||||
>
|
||||
{t("library.emptyBody")}
|
||||
|
|
@ -271,7 +292,10 @@ export function LibraryScreen() {
|
|||
.
|
||||
</span>
|
||||
</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;
|
||||
|
|
@ -393,7 +417,40 @@ export function LibraryScreen() {
|
|||
);
|
||||
})}
|
||||
</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="card card-hover touch-target flex w-[min(24rem,calc(100vw_-_3rem))] items-center gap-3 border-accent-400/60 p-3.5 text-left sm:p-4"
|
||||
>
|
||||
<span
|
||||
aria-hidden
|
||||
className="grad-ice grid size-11 shrink-0 place-items-center rounded-2xl text-[#06111f]"
|
||||
>
|
||||
<SparklesIcon className="size-5" />
|
||||
</span>
|
||||
<span className="min-w-0 text-[14px] font-semibold leading-snug text-[var(--text)]">
|
||||
{t("emptyStateHomework")}
|
||||
</span>
|
||||
</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))]">
|
||||
{homework.map((record) => (
|
||||
<HomeworkCard key={record.id} record={record} onDelete={deleteHomework} />
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue