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.
933 lines
38 KiB
TypeScript
933 lines
38 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { useAppReducedMotion as useReducedMotion } from "@/lib/motion-pref";
|
|
import { useRouter } from "next/navigation";
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
import { AiDisclaimer } from "@/components/AiDisclaimer";
|
|
import { CameraIcon, CheckCircleIcon, FolderIcon, PlayIcon, PlusIcon, SparklesIcon } from "@/components/icons";
|
|
import { Button } from "@/components/ui";
|
|
import { WizardActionBar } from "@/components/WizardActionBar";
|
|
import {
|
|
DOCUMENT_ACCEPT_ATTR,
|
|
describeExtraction,
|
|
documentsToText,
|
|
} from "@/lib/documents";
|
|
import type { HomeworkMode, HomeworkRecord } from "@/lib/schemas";
|
|
import { ACCEPTED_TYPES, formatBytes, imageFilesFromDataTransfer } from "@/lib/image";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import { stepVariants } from "@/lib/motion";
|
|
import { modelErrorCopy } from "@/lib/model-errors";
|
|
import { takePendingShare } from "@/lib/share-pending";
|
|
import { useBackClose } from "@/lib/use-back-close";
|
|
import type { useNotesIntake } from "@/lib/use-notes-intake";
|
|
import { useIsPhone } from "@/lib/use-phone";
|
|
import { useOnline } from "@/lib/use-online";
|
|
import { clearWizardDraft, loadWizardDraft, saveWizardDraft } from "@/lib/wizard-draft";
|
|
import { openSettings } from "@/lib/ui-events";
|
|
import { ModelErrorActions } from "@/components/ModelErrorActions";
|
|
import { cn, truncate } from "@/lib/utils";
|
|
|
|
import { HomeworkHistory } from "./HomeworkHistory";
|
|
|
|
const MODES: Array<{ id: HomeworkMode; icon: React.ReactNode; titleKey: string; subtitleKey: string }> = [
|
|
{ id: "make", icon: <SparklesIcon className="size-5" />, titleKey: "homework.mode.make.title", subtitleKey: "homework.mode.make.subtitle" },
|
|
{ id: "guide", icon: <PlayIcon className="size-5" />, titleKey: "homework.mode.guide.title", subtitleKey: "homework.mode.guide.subtitle" },
|
|
{ id: "check", icon: <CheckCircleIcon className="size-5" />, titleKey: "homework.mode.check", subtitleKey: "homework.mode.checkDesc" },
|
|
];
|
|
|
|
export function HomeworkInput({
|
|
mode,
|
|
onModeChange,
|
|
text,
|
|
onTextChange,
|
|
solution,
|
|
onSolutionChange,
|
|
intake,
|
|
solutionIntake,
|
|
onSubmit,
|
|
error,
|
|
history,
|
|
onOpen,
|
|
onDelete,
|
|
}: {
|
|
mode: HomeworkMode;
|
|
onModeChange: (mode: HomeworkMode) => void;
|
|
text: string;
|
|
onTextChange: (text: string) => void;
|
|
/** Mode "check": the student's own attempt. */
|
|
solution: string;
|
|
onSolutionChange: (solution: string) => void;
|
|
intake: ReturnType<typeof useNotesIntake>;
|
|
/** Mode "check": photos/documents of the attempt itself. */
|
|
solutionIntake: ReturnType<typeof useNotesIntake>;
|
|
/** `modeOverride` lets the phone mode cards start the run they tapped. */
|
|
onSubmit: (modeOverride?: HomeworkMode) => void;
|
|
error: { message: string; kind?: string } | null;
|
|
history: HomeworkRecord[];
|
|
onOpen: (record: HomeworkRecord) => void;
|
|
onDelete: (id: string) => void;
|
|
}) {
|
|
const { t, plural } = useI18n();
|
|
const router = useRouter();
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const cameraInputRef = useRef<HTMLInputElement>(null);
|
|
const solutionFileRef = useRef<HTMLInputElement>(null);
|
|
const solutionCameraRef = useRef<HTMLInputElement>(null);
|
|
const [step, setStep] = useState(1);
|
|
const [stepDir, setStepDir] = useState<1 | -1>(1);
|
|
const [pasteOpen, setPasteOpen] = useState(false);
|
|
/** Phones: the check card reveals the solution field instead of starting. */
|
|
const [checkOpen, setCheckOpen] = useState(false);
|
|
const [dragging, setDragging] = useState(false);
|
|
const isPhone = useIsPhone();
|
|
const reduceMotion = useReducedMotion();
|
|
const online = useOnline();
|
|
const [clipboardAvailable, setClipboardAvailable] = useState(false);
|
|
|
|
/* System Back goes one wizard step back (phones), then leaves the page. */
|
|
useBackClose(isPhone && step > 1, () => {
|
|
setStepDir(-1);
|
|
setStep(1);
|
|
});
|
|
|
|
useEffect(() => {
|
|
setClipboardAvailable(
|
|
typeof navigator !== "undefined" && typeof navigator.clipboard?.readText === "function",
|
|
);
|
|
}, []);
|
|
|
|
/* Restore a draft after an OS kill / reload. */
|
|
useEffect(() => {
|
|
const draft = loadWizardDraft("homework");
|
|
if (draft?.text) onTextChange(draft.text);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps -- restore once on mount
|
|
}, []);
|
|
|
|
/* Content shared in from another app (share target) lands here. */
|
|
useEffect(() => {
|
|
const pending = takePendingShare();
|
|
if (!pending) return;
|
|
if (pending.text) onTextChange(pending.text);
|
|
if (pending.files.length > 0) void intake.addFiles(pending.files);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps -- once on mount
|
|
}, [intake.addFiles]);
|
|
|
|
/* Persist the typed assignment while the user works (debounced). */
|
|
useEffect(() => {
|
|
const timer = window.setTimeout(() => saveWizardDraft("homework", { text }), 400);
|
|
return () => window.clearTimeout(timer);
|
|
}, [text]);
|
|
|
|
// Clipboard: screenshots become photos, long copied text becomes the assignment.
|
|
useEffect(() => {
|
|
const onPaste = (event: ClipboardEvent) => {
|
|
const target = event.target as HTMLElement | null;
|
|
const isTextField = target && /^(INPUT|TEXTAREA)$/.test(target.tagName);
|
|
const files = imageFilesFromDataTransfer(event.clipboardData);
|
|
if (files.length > 0) {
|
|
event.preventDefault();
|
|
void intake.addFiles(files);
|
|
return;
|
|
}
|
|
if (!isTextField) {
|
|
const pasted = event.clipboardData?.getData("text/plain")?.trim();
|
|
if (pasted && pasted.length > 40) {
|
|
event.preventDefault();
|
|
onTextChange(text ? `${text}\n${pasted}` : pasted);
|
|
}
|
|
}
|
|
};
|
|
window.addEventListener("paste", onPaste);
|
|
return () => window.removeEventListener("paste", onPaste);
|
|
}, [intake, onTextChange, text]);
|
|
|
|
const readyDocuments = intake.documents.filter((entry) => entry.status === "ready" && entry.extracted);
|
|
const documentsBusy = intake.documents.some((entry) => entry.status === "extracting");
|
|
const documentImages = readyDocuments.flatMap((entry) => entry.extracted!.images);
|
|
const documentText = documentsToText(readyDocuments.map((entry) => entry.extracted!));
|
|
const totalBytes = intake.images.reduce((sum, image) => sum + image.bytes, 0);
|
|
|
|
/* Mode "check": attachments of the attempt itself. */
|
|
const solutionReadyDocuments = solutionIntake.documents.filter(
|
|
(entry) => entry.status === "ready" && entry.extracted,
|
|
);
|
|
const solutionBusy = solutionIntake.busy || solutionIntake.documents.some((entry) => entry.status === "extracting");
|
|
const solutionDocumentText = documentsToText(solutionReadyDocuments.map((entry) => entry.extracted!));
|
|
const solutionHasContent =
|
|
solution.trim().length > 0 || solutionIntake.images.length > 0 || solutionDocumentText.trim().length > 0;
|
|
|
|
const hasContent =
|
|
intake.images.length > 0 || documentImages.length > 0 || text.trim().length > 0 || documentText.trim().length > 0;
|
|
const canSubmit = hasContent && !intake.busy && !documentsBusy;
|
|
const modelCopy = modelErrorCopy(error?.kind);
|
|
const keyError = error?.kind === "needs_key" || error?.kind === "auth";
|
|
|
|
const errorCard = error ? (
|
|
<div
|
|
role="alert"
|
|
className="animate-rise rounded-3xl border-2 border-rose-300 bg-rose-50/95 p-4 text-sm text-rose-900 dark:border-rose-400/40 dark:bg-rose-400/10 dark:text-rose-100"
|
|
>
|
|
<p className="font-bold">{modelCopy?.title ?? (keyError ? t("upload.errAuth") : t("homework.error.title"))}</p>
|
|
<p className="mt-1">{modelCopy?.body ?? (error.message || t("homework.error.body"))}</p>
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|
{keyError ? (
|
|
<Button size="sm" onClick={() => openSettings("key")}>
|
|
{t("upload.openSettings")}
|
|
</Button>
|
|
) : null}
|
|
<ModelErrorActions kind={error.kind} />
|
|
<Button size="sm" variant={keyError ? "secondary" : "primary"} onClick={() => onSubmit()}>
|
|
{t("common.retry")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : null;
|
|
|
|
/* Shared solution field (mode "check"): type it, paste it, or attach photos
|
|
and documents of the work itself. Documents are read in the browser; the
|
|
photos are transcribed by the server before the check runs. */
|
|
const solutionField = (
|
|
<div className="space-y-1.5">
|
|
<label className="text-[12px] font-semibold text-[var(--text)]" htmlFor="homework-solution">
|
|
{t("homework.solution.label")}
|
|
</label>
|
|
<textarea
|
|
id="homework-solution"
|
|
value={solution}
|
|
onChange={(event) => onSolutionChange(event.target.value)}
|
|
rows={5}
|
|
placeholder={t("homework.solution.placeholder")}
|
|
inputMode="text"
|
|
enterKeyHint="done"
|
|
autoComplete="off"
|
|
autoCapitalize="sentences"
|
|
spellCheck
|
|
className="w-full resize-y rounded-2xl border border-white/60 bg-white/55 px-4 py-3 text-sm text-frost-950 outline-none backdrop-blur-xl transition placeholder:text-frost-400 focus:border-accent-400 dark:border-white/12 dark:bg-white/[0.07] dark:text-frost-50"
|
|
/>
|
|
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
className="touch-target"
|
|
onClick={() => solutionFileRef.current?.click()}
|
|
>
|
|
<FolderIcon className="size-4" /> {t("homework.solution.add")}
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
className="touch-target"
|
|
onClick={() => solutionCameraRef.current?.click()}
|
|
>
|
|
<CameraIcon className="size-4" /> {t("upload.camera")}
|
|
</Button>
|
|
{solutionBusy ? (
|
|
<span className="text-[11.5px] text-[var(--text-subtle)]">{t("upload.reading")}</span>
|
|
) : null}
|
|
</div>
|
|
|
|
<input
|
|
ref={solutionFileRef}
|
|
type="file"
|
|
aria-hidden="true"
|
|
tabIndex={-1}
|
|
accept={`${ACCEPTED_TYPES.join(",")},${DOCUMENT_ACCEPT_ATTR}`}
|
|
multiple
|
|
className="sr-only"
|
|
onChange={(event) => {
|
|
void solutionIntake.addFiles(Array.from(event.target.files ?? []));
|
|
event.target.value = "";
|
|
}}
|
|
/>
|
|
<input
|
|
ref={solutionCameraRef}
|
|
type="file"
|
|
aria-hidden="true"
|
|
tabIndex={-1}
|
|
accept="image/*"
|
|
capture="environment"
|
|
className="sr-only"
|
|
onChange={(event) => {
|
|
void solutionIntake.addFiles(Array.from(event.target.files ?? []));
|
|
event.target.value = "";
|
|
}}
|
|
/>
|
|
|
|
{solutionIntake.images.length > 0 || solutionIntake.documents.length > 0 ? (
|
|
<div className="space-y-2 pt-0.5">
|
|
{solutionIntake.images.length > 0 ? (
|
|
<div className="flex flex-wrap gap-2">
|
|
{solutionIntake.images.map((image) => (
|
|
<span key={image.id} className="relative">
|
|
{/* eslint-disable-next-line @next/next/no-img-element -- local thumbnail, no optimisation needed */}
|
|
<img
|
|
src={image.dataUrl}
|
|
alt=""
|
|
className="size-14 rounded-xl border border-[var(--hairline)] object-cover"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => solutionIntake.removeImage(image.id)}
|
|
aria-label={t("upload.remove", { name: image.name })}
|
|
className="absolute -right-1.5 -top-1.5 grid size-6 place-items-center rounded-full bg-frost-950/80 text-[11px] font-bold text-white"
|
|
>
|
|
✕
|
|
</button>
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
{solutionIntake.documents.length > 0 ? (
|
|
<ul className="space-y-2">
|
|
{solutionIntake.documents.map((entry) => (
|
|
<li
|
|
key={entry.id}
|
|
className="flex items-center gap-3 rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] p-2.5"
|
|
>
|
|
<span className="rounded-md bg-[var(--surface-sunken)] px-1.5 py-0.5 text-[10px] font-bold uppercase text-[var(--text-muted)]">
|
|
{entry.name.split(".").pop()?.slice(0, 4) ?? "doc"}
|
|
</span>
|
|
<span className="min-w-0 flex-1">
|
|
<span className="block truncate text-[13px] font-medium text-[var(--text)]">{entry.name}</span>
|
|
<span className="block text-[11.5px] text-[var(--text-subtle)]">
|
|
{entry.status === "extracting"
|
|
? (entry.progress ?? t("upload.reading"))
|
|
: entry.status === "error"
|
|
? entry.error
|
|
: entry.extracted
|
|
? describeExtraction(entry.extracted, t, plural)
|
|
: ""}
|
|
</span>
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => solutionIntake.removeDocument(entry.id)}
|
|
aria-label={t("upload.remove", { name: entry.name })}
|
|
className="touch-target grid size-8 shrink-0 place-items-center rounded-lg text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
|
|
>
|
|
✕
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
|
|
{solutionIntake.fileError ? (
|
|
<p role="alert" className="text-[12px] font-medium text-rose-700 dark:text-rose-300">
|
|
{solutionIntake.fileError}
|
|
</p>
|
|
) : null}
|
|
<p className="text-[11px] leading-snug text-[var(--text-subtle)]">{t("homework.solution.note")}</p>
|
|
</div>
|
|
);
|
|
|
|
/* Shared mode card: desktop toggles the selection, the phone flow starts it. */
|
|
const modeCard = (option: (typeof MODES)[number], onPick: () => void) => {
|
|
const selected = mode === option.id;
|
|
return (
|
|
<button
|
|
key={option.id}
|
|
type="button"
|
|
aria-pressed={selected}
|
|
onClick={onPick}
|
|
className={cn(
|
|
"flex min-h-24 items-start gap-3 rounded-2xl border p-4 text-left transition",
|
|
selected
|
|
? "border-accent-400 bg-accent-50/70 ring-2 ring-accent-400/40 dark:bg-accent-500/15"
|
|
: "border-[var(--hairline)] bg-[var(--surface-strong)] hover:bg-[var(--hover)]",
|
|
)}
|
|
>
|
|
<span
|
|
aria-hidden
|
|
className={cn(
|
|
"grid size-10 shrink-0 place-items-center rounded-xl",
|
|
selected ? "grad-ice text-[#06111f]" : "bg-[var(--surface-sunken)] text-[var(--text-muted)]",
|
|
)}
|
|
>
|
|
{option.icon}
|
|
</span>
|
|
<span className="min-w-0">
|
|
<span className="block text-[15px] font-semibold leading-snug text-[var(--text)]">
|
|
{t(option.titleKey)}
|
|
</span>
|
|
<span className="mt-0.5 block text-[12.5px] leading-relaxed text-[var(--text-subtle)]">
|
|
{t(option.subtitleKey)}
|
|
</span>
|
|
</span>
|
|
</button>
|
|
);
|
|
};
|
|
|
|
const fileInput = (
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
aria-hidden="true"
|
|
tabIndex={-1}
|
|
accept={`${ACCEPTED_TYPES.join(",")},${DOCUMENT_ACCEPT_ATTR}`}
|
|
multiple
|
|
className="sr-only"
|
|
onChange={(event) => {
|
|
void intake.addFiles(Array.from(event.target.files ?? []));
|
|
event.target.value = "";
|
|
}}
|
|
/>
|
|
);
|
|
const cameraInput = (
|
|
<input
|
|
ref={cameraInputRef}
|
|
type="file"
|
|
aria-hidden="true"
|
|
tabIndex={-1}
|
|
accept="image/*"
|
|
capture="environment"
|
|
className="sr-only"
|
|
onChange={(event) => {
|
|
void intake.addFiles(Array.from(event.target.files ?? []));
|
|
event.target.value = "";
|
|
}}
|
|
/>
|
|
);
|
|
|
|
/* Phones: the 2-step flow. Same intake and mode state as the desktop page. */
|
|
if (isPhone) {
|
|
const stepLabel = step === 1 ? t("homework.phone.assignment") : t("homework.phone.mode");
|
|
const fileSummary = [
|
|
intake.images.length > 0 ? plural(intake.images.length, "upload.photoCount") : "",
|
|
intake.documents.length > 0 ? plural(intake.documents.length, "upload.docSummary") : "",
|
|
]
|
|
.filter(Boolean)
|
|
.join(" · ");
|
|
const preview = text.trim()
|
|
? truncate(text.replace(/\s+/g, " ").trim(), 140)
|
|
: fileSummary || t("homework.source.need");
|
|
const showPaste = pasteOpen || text.trim().length > 0;
|
|
|
|
const stepDesc =
|
|
step === 1
|
|
? t("upload.phone.notesDesc", { images: 8, documents: 6 })
|
|
: t("homework.phone.modeDesc");
|
|
|
|
return (
|
|
<div className="relative">
|
|
{errorCard}
|
|
|
|
{/* progress: thin bar + “1 / 2” */}
|
|
<div className="mt-1 flex items-center gap-3">
|
|
<div
|
|
role="progressbar"
|
|
aria-label={stepLabel}
|
|
aria-valuemin={1}
|
|
aria-valuemax={2}
|
|
aria-valuenow={step}
|
|
className="h-1 flex-1 overflow-hidden rounded-full bg-[var(--track)]"
|
|
>
|
|
<div
|
|
className="grad-ice h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none"
|
|
style={{ width: `${(step / 2) * 100}%` }}
|
|
/>
|
|
</div>
|
|
<span className="shrink-0 text-[11px] font-semibold tabular-nums text-[var(--text-subtle)]">
|
|
{t("common.stepOf", { n: step, total: 2 })}
|
|
</span>
|
|
</div>
|
|
|
|
{/* the step name is the headline; the page title lives in the chrome */}
|
|
<h1 className="mt-4 text-[26px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text)]">
|
|
{stepLabel}
|
|
</h1>
|
|
<p className="mt-1 text-[14px] text-frost-600 dark:text-frost-300">{stepDesc}</p>
|
|
|
|
<motion.div
|
|
key={step}
|
|
initial="initial"
|
|
animate="animate"
|
|
variants={stepVariants(stepDir, !!reduceMotion)}
|
|
className="mt-5"
|
|
>
|
|
{step === 1 ? (
|
|
<div className="space-y-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => fileInputRef.current?.click()}
|
|
className="press flex min-h-32 w-full flex-col items-center justify-center gap-2 rounded-3xl border-2 border-dashed border-[var(--glass-border)] bg-[var(--surface-strong)] px-4 py-6 text-center transition hover:border-accent-400"
|
|
>
|
|
<span
|
|
aria-hidden
|
|
className="grid size-12 place-items-center rounded-2xl bg-[var(--surface-sunken)] text-accent-600 dark:text-accent-200"
|
|
>
|
|
<PlusIcon className="size-6" />
|
|
</span>
|
|
<span className="text-[15px] font-semibold text-[var(--text)]">{t("homework.source.add")}</span>
|
|
</button>
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<Button
|
|
variant="secondary"
|
|
size="lg"
|
|
className="touch-target"
|
|
onClick={() => cameraInputRef.current?.click()}
|
|
>
|
|
<CameraIcon className="size-4" /> {t("upload.camera")}
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
size="lg"
|
|
className="touch-target"
|
|
aria-expanded={showPaste}
|
|
onClick={() => setPasteOpen((value) => !value)}
|
|
>
|
|
{t("upload.pasteInstead")}
|
|
</Button>
|
|
</div>
|
|
{clipboardAvailable ? (
|
|
<Button
|
|
variant="ghost"
|
|
size="lg"
|
|
className="touch-target w-full"
|
|
onClick={() => {
|
|
void (async () => {
|
|
try {
|
|
const clip = await navigator.clipboard.readText();
|
|
if (clip) {
|
|
onTextChange(text ? `${text}\n${clip}` : clip);
|
|
setPasteOpen(true);
|
|
}
|
|
} catch {
|
|
/* denied — the textarea still works */
|
|
}
|
|
})();
|
|
}}
|
|
>
|
|
{t("upload.pasteClipboard")}
|
|
</Button>
|
|
) : null}
|
|
{showPaste ? (
|
|
<textarea
|
|
id="homework-assignment-phone"
|
|
value={text}
|
|
onChange={(event) => onTextChange(event.target.value)}
|
|
onKeyDown={(event) => {
|
|
event.stopPropagation();
|
|
if (event.key === "Enter" && !event.shiftKey) {
|
|
event.preventDefault();
|
|
if (canSubmit) {
|
|
setStepDir(1);
|
|
setStep(2);
|
|
}
|
|
}
|
|
}}
|
|
rows={6}
|
|
placeholder={t("homework.source.placeholder")}
|
|
aria-label={t("homework.source.textLabel")}
|
|
inputMode="text"
|
|
enterKeyHint="done"
|
|
autoComplete="off"
|
|
autoCapitalize="sentences"
|
|
spellCheck
|
|
className="w-full resize-y rounded-2xl border border-white/60 bg-white/55 px-4 py-3 text-sm text-frost-950 outline-none backdrop-blur-xl transition placeholder:text-frost-400 focus:border-accent-400 dark:border-white/12 dark:bg-white/[0.07] dark:text-frost-50"
|
|
/>
|
|
) : null}
|
|
|
|
{intake.images.length > 0 ? (
|
|
<ul className="flex flex-wrap items-center gap-2">
|
|
{intake.images.map((image) => (
|
|
<li key={image.id} className="relative">
|
|
{/* eslint-disable-next-line @next/next/no-img-element -- local thumbnail, no optimisation needed */}
|
|
<img
|
|
src={image.dataUrl}
|
|
alt=""
|
|
className="size-14 rounded-xl border border-[var(--hairline)] object-cover"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => intake.removeImage(image.id)}
|
|
aria-label={t("upload.remove", { name: image.name })}
|
|
className="absolute -right-1.5 -top-1.5 grid size-6 place-items-center rounded-full bg-frost-950/80 text-[11px] font-bold text-white"
|
|
>
|
|
✕
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : null}
|
|
|
|
{intake.documents.length > 0 ? (
|
|
<ul className="flex flex-wrap items-center gap-2">
|
|
{intake.documents.map((entry) => (
|
|
<li
|
|
key={entry.id}
|
|
className="inline-flex max-w-full items-center gap-1.5 rounded-full border border-[var(--hairline)] bg-[var(--surface-strong)] py-1 pl-2 pr-1"
|
|
>
|
|
<span className="rounded-md bg-[var(--surface-sunken)] px-1.5 py-0.5 text-[10px] font-bold uppercase text-[var(--text-muted)]">
|
|
{entry.name.split(".").pop()?.slice(0, 4) ?? "doc"}
|
|
</span>
|
|
<span className="max-w-32 truncate text-[12.5px] font-medium text-[var(--text)]" title={entry.name}>
|
|
{entry.name}
|
|
</span>
|
|
{entry.status === "extracting" ? (
|
|
<span className="text-[11px] text-[var(--text-subtle)]" title={entry.progress ?? t("upload.reading")}>
|
|
…
|
|
</span>
|
|
) : null}
|
|
{entry.status === "error" ? (
|
|
<span className="text-[11px] font-bold text-rose-600 dark:text-rose-300" title={entry.error}>
|
|
!
|
|
</span>
|
|
) : null}
|
|
<button
|
|
type="button"
|
|
onClick={() => intake.removeDocument(entry.id)}
|
|
aria-label={t("upload.remove", { name: entry.name })}
|
|
className="grid size-6 place-items-center rounded-full text-[11px] font-bold text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
|
|
>
|
|
✕
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : null}
|
|
|
|
{intake.images.length === 0 && intake.documents.length === 0 ? (
|
|
<p className="rounded-2xl border border-dashed border-[var(--hairline)] px-4 py-3 text-center text-[12.5px] text-[var(--text-subtle)]">
|
|
{t("upload.nothingAdded")}
|
|
</p>
|
|
) : null}
|
|
|
|
{intake.documents
|
|
.filter((entry) => entry.status === "error")
|
|
.map((entry) => (
|
|
<p key={entry.id} className="text-[12px] font-medium text-rose-600 dark:text-rose-300">
|
|
{entry.name}: {entry.error}
|
|
</p>
|
|
))}
|
|
|
|
{intake.busy ? (
|
|
<p className="text-[12.5px] font-medium text-[var(--text-muted)]">{t("upload.compressing")}</p>
|
|
) : null}
|
|
{intake.fileError ? (
|
|
<p role="alert" className="text-xs font-semibold text-rose-600 dark:text-rose-300">
|
|
{intake.fileError}
|
|
</p>
|
|
) : null}
|
|
|
|
{fileInput}
|
|
{cameraInput}
|
|
</div>
|
|
) : null}
|
|
|
|
{step === 2 ? (
|
|
<div className="space-y-3">
|
|
<div className="rounded-2xl border border-[var(--hairline)] bg-[var(--surface-sunken)] p-3">
|
|
<p className="text-[11px] font-semibold uppercase tracking-wide text-[var(--text-subtle)]">
|
|
{t("homework.phone.preview")}
|
|
</p>
|
|
<p className="mt-1 text-[13px] leading-relaxed text-[var(--text)]">{preview}</p>
|
|
</div>
|
|
<div className="grid gap-3">
|
|
{MODES.map((option) =>
|
|
modeCard(option, () => {
|
|
if (!canSubmit || !online) return;
|
|
if (option.id === "check") {
|
|
// Needs the solution first: reveal the field instead of
|
|
// starting the run.
|
|
onModeChange("check");
|
|
setCheckOpen(true);
|
|
return;
|
|
}
|
|
clearWizardDraft("homework");
|
|
onModeChange(option.id);
|
|
onSubmit(option.id);
|
|
}),
|
|
)}
|
|
</div>
|
|
{checkOpen ? (
|
|
<div className="space-y-3">
|
|
{solutionField}
|
|
<Button
|
|
size="lg"
|
|
className="touch-target w-full"
|
|
disabled={!canSubmit || !solutionHasContent || solutionBusy}
|
|
onClick={() => {
|
|
clearWizardDraft("homework");
|
|
onSubmit("check");
|
|
}}
|
|
>
|
|
{t("homework.mode.check")}
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
<p className="text-center text-[12px] text-[var(--text-subtle)]">
|
|
{online ? t("homework.phone.startHint") : t("offline.generate")}
|
|
</p>
|
|
<AiDisclaimer />
|
|
</div>
|
|
) : null}
|
|
</motion.div>
|
|
|
|
<HomeworkHistory records={history} onOpen={onOpen} onDelete={onDelete} />
|
|
|
|
{/* The action bar is portalled to <body> — never inside the animated
|
|
content wrapper, where a transform would break position: fixed. */}
|
|
<WizardActionBar>
|
|
{step === 1 ? (
|
|
<Button
|
|
variant="secondary"
|
|
size="lg"
|
|
className="touch-target flex-1"
|
|
onClick={() => router.push("/")}
|
|
>
|
|
{t("common.cancel")}
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
variant="secondary"
|
|
size="lg"
|
|
className="touch-target flex-1"
|
|
onClick={() => {
|
|
setStepDir(-1);
|
|
setStep(1);
|
|
}}
|
|
>
|
|
{t("common.back")}
|
|
</Button>
|
|
)}
|
|
{step === 1 ? (
|
|
<Button
|
|
size="lg"
|
|
className="touch-target flex-[1.5]"
|
|
onClick={() => {
|
|
setStepDir(1);
|
|
setStep(2);
|
|
}}
|
|
disabled={!canSubmit}
|
|
>
|
|
{t("common.next")}
|
|
</Button>
|
|
) : null}
|
|
</WizardActionBar>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="relative space-y-6">
|
|
<section className="space-y-2">
|
|
<h1 className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[28px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text)] text-balance sm:text-[32px]">
|
|
<SparklesIcon className="size-8 shrink-0 text-frost-500 dark:text-frost-200" />
|
|
<span>{t("homeworkHeroTitle")}</span>
|
|
</h1>
|
|
<p className="max-w-xl text-[15px] text-frost-600 dark:text-frost-300">{t("homework.subtitle")}</p>
|
|
</section>
|
|
|
|
{errorCard}
|
|
|
|
{/* ------------------------------------------------ the assignment */}
|
|
<section
|
|
onDragOver={(event) => {
|
|
event.preventDefault();
|
|
setDragging(true);
|
|
}}
|
|
onDragLeave={() => setDragging(false)}
|
|
onDrop={(event) => {
|
|
event.preventDefault();
|
|
setDragging(false);
|
|
const dropped = Array.from(event.dataTransfer?.files ?? []);
|
|
void intake.addFiles(dropped.length > 0 ? dropped : imageFilesFromDataTransfer(event.dataTransfer));
|
|
}}
|
|
className={cn(
|
|
"card p-4 transition-all sm:p-5",
|
|
dragging && "border-frost-400 bg-frost-50 ring-4 ring-frost-200 dark:bg-frost-500/10 dark:ring-frost-500/30",
|
|
)}
|
|
>
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<h2 className="text-[15px] font-semibold tracking-[-0.01em] text-[var(--text)]">
|
|
{t("homework.source.title")}
|
|
</h2>
|
|
<p className="text-[12.5px] text-[var(--text-subtle)]">{t("homework.source.help")}</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button variant="secondary" size="sm" className="touch-target" onClick={() => fileInputRef.current?.click()}>
|
|
<FolderIcon className="size-4" /> {t("homework.source.add")}
|
|
</Button>
|
|
<Button variant="secondary" size="sm" className="touch-target" onClick={() => cameraInputRef.current?.click()}>
|
|
<CameraIcon className="size-4" /> {t("upload.camera")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
aria-hidden="true"
|
|
tabIndex={-1}
|
|
accept={`${ACCEPTED_TYPES.join(",")},${DOCUMENT_ACCEPT_ATTR}`}
|
|
multiple
|
|
className="sr-only"
|
|
onChange={(event) => {
|
|
void intake.addFiles(Array.from(event.target.files ?? []));
|
|
event.target.value = "";
|
|
}}
|
|
/>
|
|
<input
|
|
ref={cameraInputRef}
|
|
type="file"
|
|
aria-hidden="true"
|
|
tabIndex={-1}
|
|
accept="image/*"
|
|
capture="environment"
|
|
className="sr-only"
|
|
onChange={(event) => {
|
|
void intake.addFiles(Array.from(event.target.files ?? []));
|
|
event.target.value = "";
|
|
}}
|
|
/>
|
|
|
|
{intake.images.length === 0 && intake.documents.length === 0 ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => fileInputRef.current?.click()}
|
|
className="mt-4 flex w-full flex-col items-center gap-2 rounded-2xl border-2 border-dashed border-white/70 bg-white/40 px-4 py-10 text-center backdrop-blur-xl transition hover:border-accent-300 hover:bg-white/65 dark:border-white/15 dark:bg-white/[0.05] dark:hover:bg-white/[0.09]"
|
|
>
|
|
<span aria-hidden className="text-frost-500 dark:text-frost-200">
|
|
<PlusIcon className="size-10" />
|
|
</span>
|
|
<span className="text-[14px] font-medium text-[var(--text)]">{t("homework.source.drop")}</span>
|
|
<span className="text-[12px] text-[var(--text-subtle)]">{t("homework.source.formats")}</span>
|
|
</button>
|
|
) : (
|
|
<div className="mt-4 space-y-2">
|
|
{intake.images.length > 0 ? (
|
|
<div className="flex flex-wrap gap-2">
|
|
{intake.images.map((image) => (
|
|
<span key={image.id} className="relative">
|
|
{/* eslint-disable-next-line @next/next/no-img-element -- local thumbnail, no optimisation needed */}
|
|
<img
|
|
src={image.dataUrl}
|
|
alt=""
|
|
className="size-14 rounded-xl border border-[var(--hairline)] object-cover"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => intake.removeImage(image.id)}
|
|
aria-label={t("upload.remove", { name: image.name })}
|
|
className="absolute -right-1.5 -top-1.5 grid size-6 place-items-center rounded-full bg-frost-950/80 text-[11px] font-bold text-white"
|
|
>
|
|
✕
|
|
</button>
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
{intake.documents.length > 0 ? (
|
|
<ul className="space-y-2">
|
|
{intake.documents.map((entry) => (
|
|
<li
|
|
key={entry.id}
|
|
className="flex items-center gap-3 rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] p-2.5"
|
|
>
|
|
<span className="rounded-md bg-[var(--surface-sunken)] px-1.5 py-0.5 text-[10px] font-bold uppercase text-[var(--text-muted)]">
|
|
{entry.name.split(".").pop()?.slice(0, 4) ?? "doc"}
|
|
</span>
|
|
<span className="min-w-0 flex-1">
|
|
<span className="block truncate text-[13px] font-medium text-[var(--text)]">{entry.name}</span>
|
|
<span className="block text-[11.5px] text-[var(--text-subtle)]">
|
|
{entry.status === "extracting"
|
|
? (entry.progress ?? t("upload.reading"))
|
|
: entry.status === "error"
|
|
? entry.error
|
|
: entry.extracted
|
|
? describeExtraction(entry.extracted, t, plural)
|
|
: ""}
|
|
</span>
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => intake.removeDocument(entry.id)}
|
|
aria-label={t("upload.remove", { name: entry.name })}
|
|
className="touch-target grid size-8 shrink-0 place-items-center rounded-lg text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
|
|
>
|
|
✕
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
|
|
<label
|
|
htmlFor="homework-assignment"
|
|
className="mt-4 block text-[11px] font-semibold uppercase tracking-wider text-[var(--text-subtle)]"
|
|
>
|
|
{t("homework.source.textLabel")}
|
|
</label>
|
|
<textarea
|
|
id="homework-assignment"
|
|
value={text}
|
|
onChange={(event) => onTextChange(event.target.value)}
|
|
onKeyDown={(event) => event.stopPropagation()}
|
|
placeholder={t("homework.source.placeholder")}
|
|
rows={4}
|
|
className="mt-1.5 w-full resize-y rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] px-3 py-2.5 text-sm leading-relaxed text-[var(--text)] outline-none transition placeholder:text-[var(--text-subtle)] focus:border-accent-500"
|
|
/>
|
|
|
|
{intake.images.length > 0 || documentImages.length > 0 ? (
|
|
<p className="mt-2 text-[12px] text-[var(--text-subtle)]">
|
|
{intake.images.length > 0
|
|
? plural(intake.images.length, "upload.photoSummary", { size: formatBytes(totalBytes) })
|
|
: ""}
|
|
{intake.images.length > 0 && documentImages.length > 0 ? " · " : ""}
|
|
{documentImages.length > 0 ? plural(documentImages.length, "upload.docImages") : ""}
|
|
</p>
|
|
) : null}
|
|
|
|
{intake.busy ? (
|
|
<p className="mt-2 text-[12.5px] font-medium text-[var(--text-muted)]">{t("upload.compressing")}</p>
|
|
) : null}
|
|
{intake.fileError ? (
|
|
<p role="alert" className="mt-2 text-[12.5px] font-medium text-rose-700 dark:text-rose-300">
|
|
{intake.fileError}
|
|
</p>
|
|
) : null}
|
|
</section>
|
|
|
|
{/* ------------------------------------------------------- mode */}
|
|
<section className="space-y-3">
|
|
<h2 className="text-[15px] font-semibold tracking-[-0.01em] text-[var(--text)]">{t("homework.mode.title")}</h2>
|
|
<div className="grid gap-3 sm:grid-cols-3">
|
|
{MODES.map((option) => modeCard(option, () => onModeChange(option.id)))}
|
|
</div>
|
|
{mode === "check" ? solutionField : null}
|
|
</section>
|
|
|
|
{/* -------------------------------------------------------- CTA */}
|
|
<div className="space-y-2">
|
|
<Button
|
|
size="lg"
|
|
className="touch-target w-full"
|
|
onClick={() => onSubmit()}
|
|
disabled={!canSubmit || (mode === "check" && (!solutionHasContent || solutionBusy))}
|
|
loading={intake.busy}
|
|
>
|
|
<SparklesIcon className="size-5" />
|
|
{mode === "make" ? t("homework.start.make") : mode === "guide" ? t("homework.start.guide") : t("homework.mode.check")}
|
|
</Button>
|
|
<p className="text-center text-[12px] text-[var(--text-subtle)]">
|
|
{canSubmit ? t("homework.source.ready") : t("homework.source.need")}
|
|
</p>
|
|
<AiDisclaimer />
|
|
</div>
|
|
|
|
<HomeworkHistory records={history} onOpen={onOpen} onDelete={onDelete} />
|
|
</div>
|
|
);
|
|
}
|