Add “Make my homework”, and finish the mobile polish pass
Homework (/homework — entry points in the drawer and on the create screen) - Assignment intake reuses the study pipeline: pasted text, photos (camera/picker, compressed in the browser) and documents (PDF/DOCX/PPTX/ ODT/text) through lib/image + lib/documents, the same vision step and the same language guard. Raw files never leave the device — only text and JPEG data URLs reach the server. - Two large choice cards: “Just make it” returns the finished homework (answer only, plain text, copy + make it again); “Explain how to make this homework” builds an interactive guide. - The guide is one step per screen in the study-feed snap layout: explanation, three progressive hints (nudge -> hint -> the answer) and an optional checkpoint rendered by the existing activity components (graded through /api/grade). The last screen assembles the solution from the step answers, with a copy button. Checkpoints carry xp 0 so the guide stays free of XP/streak chrome. - Results live in freezmo.homework.v1 with a small history (open/delete); “Make it again” re-runs from the stored assignment text (the vision transcription when photos were used) — no original files are stored. - The answer and the guide are written in the assignment's language, never translated into the UI language. Server - POST /api/homework: NDJSON stage events like /api/generate, the same http-guard, auth checked before parsing, and its own RATE_LIMIT_HOMEWORK (documented in .env.example + the README table). - New prompts in lib/prompts.ts and zod schemas in lib/schemas.ts with the same single repair retry; TEXT_MODEL for content, VISION_MODEL only for photos. New shared client pieces: useNotesIntake, lib/homework store, lib/clipboard, and a shared NDJSON reader in lib/client-api. Also finishing the mobile polish pass from the previous request - Phone ice scene: the top-left orb moved behind the glass header (it sat behind the page heading/subtitle). The settings sheet's scroll cue is now a bare chevron inside a content fade (mask) instead of a chip over the status banner, and the API key card's note/disclosure/actions are tightened. - theme-color now follows the in-app theme (SSR metas still fall back to the OS preference); apple-mobile-web-app-status-bar-style stays “default” because iOS fixes the status-bar text colour at launch. Verified: 78/78 homework checks (text/photo/PDF, both modes, EN+CS, dark+light, 360/390px, copy, history persistence, storage privacy, API language, axe), plus the existing suites re-run (mobile 47/47, pixel contrast 0 below AA, i18n 27/27, desktop regression 72/72). Lint + build clean; service worker freezmo-v6.
This commit is contained in:
parent
9fb728d735
commit
ef2a6a3589
35 changed files with 2334 additions and 100 deletions
253
components/homework/HomeworkGuide.tsx
Normal file
253
components/homework/HomeworkGuide.tsx
Normal file
|
|
@ -0,0 +1,253 @@
|
|||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
|
||||
import { ActivityRenderer } from "@/components/activities";
|
||||
import { PromptCard, QuestionText } from "@/components/activities/shared";
|
||||
import { XIcon } from "@/components/icons";
|
||||
import { Button, ProgressBar } from "@/components/ui";
|
||||
import { assembleSolution } from "@/lib/homework";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import type { HomeworkGuideRecord, HomeworkStep } from "@/lib/schemas";
|
||||
|
||||
import { CopyButton } from "./CopyButton";
|
||||
|
||||
/**
|
||||
* Mode 2: one step per screen in the same snap-feed as the study feed.
|
||||
* Each step explains what to do, reveals hints one at a time (nudge → hint →
|
||||
* the full answer), and can carry a checkpoint rendered by the shared activity
|
||||
* components. The last screen assembles the solution from the step answers.
|
||||
*/
|
||||
export function HomeworkGuide({
|
||||
record,
|
||||
onClose,
|
||||
onAgain,
|
||||
onNew,
|
||||
againLoading,
|
||||
}: {
|
||||
record: HomeworkGuideRecord;
|
||||
onClose: () => void;
|
||||
onAgain: () => void;
|
||||
onNew: () => void;
|
||||
againLoading: boolean;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const steps = record.steps;
|
||||
const slideCount = steps.length + 1; // + the solution slide
|
||||
const [index, setIndex] = useState(0);
|
||||
const [revealed, setRevealed] = useState<Record<number, number>>({});
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const goTo = useCallback(
|
||||
(target: number) => {
|
||||
const container = scrollRef.current;
|
||||
if (!container) return;
|
||||
const clamped = Math.max(0, Math.min(target, slideCount - 1));
|
||||
container.scrollTo({ top: clamped * container.clientHeight, behavior: "smooth" });
|
||||
},
|
||||
[slideCount],
|
||||
);
|
||||
|
||||
// Track the visible slide (wheel, touch and programmatic scroll).
|
||||
useEffect(() => {
|
||||
const container = scrollRef.current;
|
||||
if (!container) return;
|
||||
let frame = 0;
|
||||
const onScroll = () => {
|
||||
cancelAnimationFrame(frame);
|
||||
frame = requestAnimationFrame(() => {
|
||||
const height = container.clientHeight || 1;
|
||||
const current = Math.round(container.scrollTop / height);
|
||||
setIndex((previous) => (previous === current ? previous : current));
|
||||
});
|
||||
};
|
||||
container.addEventListener("scroll", onScroll, { passive: true });
|
||||
return () => {
|
||||
container.removeEventListener("scroll", onScroll);
|
||||
cancelAnimationFrame(frame);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Keyboard navigation, like the study feed.
|
||||
useEffect(() => {
|
||||
const onKey = (event: KeyboardEvent) => {
|
||||
const target = event.target as HTMLElement | null;
|
||||
if (target && (/^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName) || target.isContentEditable)) return;
|
||||
if (event.metaKey || event.ctrlKey || event.altKey) return;
|
||||
if (event.key === "ArrowDown" || event.key === "PageDown" || event.key === "j") {
|
||||
event.preventDefault();
|
||||
goTo(index + 1);
|
||||
} else if (event.key === "ArrowUp" || event.key === "PageUp" || event.key === "k") {
|
||||
event.preventDefault();
|
||||
goTo(index - 1);
|
||||
} else if (event.key === "Escape") {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => window.removeEventListener("keydown", onKey);
|
||||
}, [goTo, index, onClose]);
|
||||
|
||||
const solution = useMemo(() => assembleSolution(record), [record]);
|
||||
const progressValue = Math.min(index + 1, slideCount);
|
||||
const onSolution = index >= steps.length;
|
||||
|
||||
const revealedCount = (stepIndex: number) => revealed[stepIndex] ?? 0;
|
||||
|
||||
const revealNext = (stepIndex: number, hints: string[]) =>
|
||||
setRevealed((current) => ({
|
||||
...current,
|
||||
[stepIndex]: Math.min((current[stepIndex] ?? 0) + 1, hints.length),
|
||||
}));
|
||||
|
||||
const hintButtonLabel = (step: HomeworkStep, stepIndex: number) => {
|
||||
const count = revealedCount(stepIndex);
|
||||
if (count === 0) return t("homework.guide.hint");
|
||||
if (count === step.hints.length - 1) return t("homework.guide.hintAnswer");
|
||||
return t("homework.guide.hintMore");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="frost-bg fixed inset-0 z-[45] flex flex-col">
|
||||
{/* chrome ------------------------------------------------------- */}
|
||||
<header className="pt-safe absolute inset-x-0 top-0 z-30 px-3">
|
||||
<div className="study-chrome mx-auto max-w-xl space-y-1.5 rounded-full px-3 py-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
aria-label={t("homework.guide.close")}
|
||||
className="grid size-9 shrink-0 place-items-center rounded-xl bg-[var(--surface-sunken)] text-[var(--text)] transition hover:bg-[var(--hover)]"
|
||||
>
|
||||
<XIcon className="size-4" />
|
||||
</button>
|
||||
<div className="min-w-0 flex-1">
|
||||
<ProgressBar
|
||||
value={progressValue}
|
||||
max={slideCount}
|
||||
label={t("homework.guide.stepOf", { n: progressValue, total: slideCount })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-2 text-[11px] font-semibold text-[var(--text-muted)]">
|
||||
<span className="min-w-0 truncate">{record.title}</span>
|
||||
<span className="shrink-0">
|
||||
{onSolution ? t("homework.guide.solution") : t("homework.guide.stepOf", { n: index + 1, total: steps.length })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* slides ------------------------------------------------------- */}
|
||||
<div
|
||||
ref={scrollRef}
|
||||
data-testid="homework-guide"
|
||||
className="no-scrollbar h-full snap-y snap-mandatory overflow-y-scroll overscroll-y-contain [overflow-anchor:none]"
|
||||
>
|
||||
{steps.map((step, stepIndex) => (
|
||||
<section
|
||||
key={stepIndex}
|
||||
aria-label={t("homework.guide.stepOf", { n: stepIndex + 1, total: steps.length })}
|
||||
className="flex h-full snap-start snap-always items-stretch justify-center overflow-y-auto overscroll-y-contain"
|
||||
>
|
||||
<div className="mx-auto flex min-h-full w-full max-w-xl flex-col gap-4 px-4 pb-24 pt-24 [justify-content:safe_center]">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="tint-sky inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold ring-1 ring-white/50 backdrop-blur-sm">
|
||||
{t("homework.guide.stepOf", { n: stepIndex + 1, total: steps.length })}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<PromptCard>
|
||||
<QuestionText>{step.title}</QuestionText>
|
||||
<p className="mt-2 text-[15px] leading-relaxed text-frost-700 dark:text-frost-200">
|
||||
{step.explanation}
|
||||
</p>
|
||||
</PromptCard>
|
||||
|
||||
{/* progressive hints */}
|
||||
<div className="space-y-2">
|
||||
{step.hints.slice(0, revealedCount(stepIndex)).map((hint, hintIndex) => (
|
||||
<motion.div
|
||||
key={hintIndex}
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="glass-chip rounded-2xl p-3 text-sm leading-relaxed text-[var(--text)]"
|
||||
>
|
||||
<span className="font-bold">{t("homework.guide.hintN", { n: hintIndex + 1 })}: </span>
|
||||
{hint}
|
||||
</motion.div>
|
||||
))}
|
||||
{revealedCount(stepIndex) < step.hints.length ? (
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="touch-target"
|
||||
onClick={() => revealNext(stepIndex, step.hints)}
|
||||
>
|
||||
{hintButtonLabel(step, stepIndex)}
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* checkpoint or a plain next button */}
|
||||
{step.checkpoint ? (
|
||||
<div className="space-y-2">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-wider text-[var(--text-subtle)]">
|
||||
{t("homework.guide.tryIt")}
|
||||
</p>
|
||||
<ActivityRenderer
|
||||
activity={step.checkpoint}
|
||||
active={index === stepIndex}
|
||||
language={record.language}
|
||||
isLast={stepIndex === steps.length - 1}
|
||||
nextLabel={
|
||||
stepIndex === steps.length - 1 ? t("homework.guide.showSolution") : t("homework.guide.next")
|
||||
}
|
||||
onAnswered={() => {
|
||||
/* checkpoints are for the student, not for scoring */
|
||||
}}
|
||||
onNext={() => goTo(stepIndex + 1)}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<Button className="touch-target self-start" onClick={() => goTo(stepIndex + 1)}>
|
||||
{stepIndex === steps.length - 1 ? t("homework.guide.showSolution") : t("homework.guide.next")}
|
||||
<span aria-hidden>→</span>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
|
||||
{/* the assembled solution -------------------------------------- */}
|
||||
<section
|
||||
aria-label={t("homework.guide.solution")}
|
||||
className="h-full snap-start snap-always overflow-y-auto overscroll-y-contain"
|
||||
>
|
||||
<div className="mx-auto flex min-h-full w-full max-w-xl flex-col gap-4 px-4 pb-24 pt-24 [justify-content:safe_center]">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="tint-mint inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold ring-1 ring-white/50 backdrop-blur-sm">
|
||||
{t("homework.guide.solution")}
|
||||
</span>
|
||||
</div>
|
||||
<PromptCard>
|
||||
<p className="whitespace-pre-wrap break-words text-[14.5px] leading-relaxed text-[var(--text)]">
|
||||
{solution}
|
||||
</p>
|
||||
</PromptCard>
|
||||
<p className="text-[12.5px] text-[var(--text-subtle)]">{t("homework.guide.solutionNote")}</p>
|
||||
<div className="flex flex-wrap items-start gap-2">
|
||||
<CopyButton text={solution} />
|
||||
<Button variant="secondary" className="touch-target" onClick={onAgain} loading={againLoading}>
|
||||
{t("homework.result.again")}
|
||||
</Button>
|
||||
<Button variant="ghost" className="touch-target" onClick={onNew}>
|
||||
{t("homework.result.new")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue