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:
Martin Dvořák 2026-10-08 21:26:08 +00:00
commit 8c44f47881
12 changed files with 295 additions and 162 deletions

View file

@ -0,0 +1,97 @@
"use client";
import Link from "next/link";
import { useState } from "react";
import { BoltIcon, PlayIcon, XIcon } from "@/components/icons";
import { Button } from "@/components/ui";
import { useI18n } from "@/lib/i18n";
import type { HomeworkRecord } from "@/lib/schemas";
import { formatDate, truncate } from "@/lib/utils";
/**
* One saved homework result in the library's Homework tab: the finished
* solution or the step-by-step guide, with open + delete.
*/
export function HomeworkCard({ record, onDelete }: { record: HomeworkRecord; onDelete: (id: string) => void }) {
const { t, plural } = useI18n();
const [confirmDelete, setConfirmDelete] = useState(false);
const href = `/homework?open=${record.id}`;
const preview =
record.mode === "make"
? truncate(record.answer.replace(/\s+/g, " ").trim(), 150)
: truncate(
record.steps.map((step) => step.title).join(" · "),
150,
);
return (
<li className="card card-hover group relative flex flex-col p-5">
{/* Desktop: the whole card opens the result; the delete button sits above it. */}
<Link href={href} aria-hidden="true" tabIndex={-1} className="absolute inset-0 hidden rounded-[1.5rem] lg:block" />
<div className="flex items-start justify-between gap-3">
<div className="min-w-0 flex-1">
<h3
className="line-clamp-2 text-[15px] font-semibold leading-snug tracking-[-0.01em] text-[var(--text)]"
title={record.title}
>
{truncate(record.title, 90)}
</h3>
<p className="mt-1 flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[12.5px] text-[var(--text-subtle)]">
<span className="inline-flex items-center gap-1">
{record.mode === "make" ? <BoltIcon className="size-3.5" /> : <PlayIcon className="size-3.5" />}
{t(record.mode === "make" ? "homework.history.made" : "homework.history.guide")}
</span>
<span aria-hidden>·</span>
{formatDate(record.updatedAt)}
{record.mode === "guide" ? (
<>
<span aria-hidden>·</span>
{plural(record.steps.length, "homework.steps")}
</>
) : null}
</p>
</div>
<button
type="button"
aria-label={`${t("common.delete")} — ${record.title}`}
onClick={() => setConfirmDelete(true)}
className="touch-target relative z-10 grid size-8 shrink-0 place-items-center rounded-full text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-rose-600 dark:hover:text-rose-300"
>
<XIcon className="size-4" />
</button>
</div>
{preview ? (
<p className="mt-3 line-clamp-2 text-[13.5px] leading-relaxed text-[var(--text-muted)]">{preview}</p>
) : null}
<div className="mt-5 lg:mt-4">
{confirmDelete ? (
<div className="relative z-10 flex flex-wrap items-center gap-2">
<span className="text-[12.5px] text-[var(--text-muted)]">{t("homework.history.deleteConfirm")}</span>
<Button size="sm" variant="danger" onClick={() => onDelete(record.id)}>
{t("common.delete")}
</Button>
<Button size="sm" variant="ghost" onClick={() => setConfirmDelete(false)}>
{t("common.cancel")}
</Button>
</div>
) : (
<>
<Link href={href} className="btn-primary touch-target h-10 w-full px-4 text-sm lg:hidden">
{t("homework.open")}
</Link>
<div className="relative z-10 hidden lg:flex lg:justify-end">
<Link href={href} className="btn-secondary h-9 px-4 text-[13px]">
{t("homework.open")}
</Link>
</div>
</>
)}
</div>
</li>
);
}