Martin Dvorak
7da308fa1e
Buttons: the recipe's thin veils let btn-secondary/btn-ghost/glass-pill blend into the grass and sky - they now carry a stronger pale-glass veil (the Ask-pill look) over the blurred scene, ghosts plus a rim and full-contrast text. Homework make/check results gained the same red "!" report control as the feeds and the guide (a synthetic short-answer activity maps into the report flow; pinned in phase3). Reduced motion: the manual toggle only fed framer's MotionConfig, which strips transform animations - while components branched on the OS-only useReducedMotion - so translucent sheets still spring-faded their opacity in over the page (the "ugly visual glitch with the settings panel"). All 16 components now read useAppReducedMotion() (OS or toggle), and the settings sheet/scrim and the library's phone sheet go instant. Verified frame by frame: opacity 1.00 from the first frame. Contrast 0 findings, axe clean; mobile 126/126, chat 102/102, providers 20/20, wizard 95/95, phase3 31/31, bubbles 34/34, i18n 13/13, native 33/33. Version 0.5.4, SW -> freezmo-v76.
932 lines
38 KiB
TypeScript
932 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,
|
|
documentsToText,
|
|
type ExtractedDocument,
|
|
} 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";
|
|
|
|
/** Same wording the create screen uses for an extracted document. */
|
|
function describeExtraction(
|
|
document: ExtractedDocument,
|
|
tr: (key: string, vars?: Record<string, string | number>) => string,
|
|
pl: (n: number, base: string, vars?: Record<string, string | number>) => string,
|
|
): string {
|
|
const parts = [
|
|
pl(document.words, "upload.words", { n: document.words.toLocaleString() }),
|
|
document.pages ? pl(document.pages, "upload.pages") : "",
|
|
document.images.length ? pl(document.images.length, "upload.pageImages") : "",
|
|
document.truncated ? tr("upload.truncated") : "",
|
|
];
|
|
return parts.filter(Boolean).join(" · ");
|
|
}
|
|
|
|
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 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(() => {
|
|
if (!isPhone) return;
|
|
const timer = window.setTimeout(() => saveWizardDraft("homework", { text }), 400);
|
|
return () => window.clearTimeout(timer);
|
|
}, [text, isPhone]);
|
|
|
|
// 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 className="card p-4 sm:p-5">
|
|
<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>
|
|
);
|
|
}
|