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.
97 lines
3.2 KiB
TypeScript
97 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
import { Button } from "@/components/ui";
|
|
import { AskButton } from "@/components/chat/AskButton";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import type { HomeworkMakeRecord } from "@/lib/schemas";
|
|
import { shareHomework } from "@/lib/share";
|
|
|
|
import { ReportQuestionButton } from "@/components/ReportQuestionButton";
|
|
import { homeworkReportActivity } from "@/lib/question-reports";
|
|
|
|
import { CopyButton } from "./CopyButton";
|
|
import { FollowUpBar } from "./FollowUpBar";
|
|
|
|
/** Mode 1 result: the finished homework, nothing else. */
|
|
export function HomeworkResult({
|
|
record,
|
|
onAgain,
|
|
onNew,
|
|
onToDeck,
|
|
againLoading,
|
|
}: {
|
|
record: HomeworkMakeRecord;
|
|
onAgain: () => void;
|
|
onNew: () => void;
|
|
onToDeck: () => void;
|
|
againLoading: boolean;
|
|
}) {
|
|
const { t } = useI18n();
|
|
const [answer, setAnswer] = useState(record.answer);
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
<header className="space-y-1">
|
|
<p className="text-[11px] font-semibold uppercase tracking-wider text-[var(--text-subtle)]">
|
|
{t("homework.result.title")}
|
|
</p>
|
|
<h1 className="text-[22px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text)] text-balance">
|
|
{record.title}
|
|
</h1>
|
|
</header>
|
|
|
|
<article className="card space-y-3 p-4 sm:p-5">
|
|
<p className="whitespace-pre-wrap break-words text-[15px] leading-relaxed text-[var(--text)]">{answer}</p>
|
|
<FollowUpBar
|
|
text={answer}
|
|
context={record.sourceText}
|
|
onReplace={setAnswer}
|
|
onRestore={() => setAnswer(record.answer)}
|
|
canRestore={answer !== record.answer}
|
|
/>
|
|
</article>
|
|
|
|
<div className="flex flex-wrap items-start gap-2">
|
|
<CopyButton text={answer} />
|
|
<Button variant="secondary" className="touch-target" onClick={() => void shareHomework({ ...record, answer })}>
|
|
{t("deck.share")}
|
|
</Button>
|
|
<AskButton
|
|
seed={{
|
|
label: record.title,
|
|
text: [
|
|
`${t("chat.seedAssignment")}:`,
|
|
record.sourceText,
|
|
"",
|
|
`${t("chat.seedAnswer")}:`,
|
|
answer,
|
|
].join("\n"),
|
|
}}
|
|
/>
|
|
<Button variant="secondary" className="touch-target" onClick={onAgain} loading={againLoading}>
|
|
{t("homework.followup.redo")}
|
|
</Button>
|
|
<Button variant="secondary" className="touch-target" onClick={onToDeck}>
|
|
{t("homework.toDeck")}
|
|
</Button>
|
|
<Button variant="ghost" className="touch-target" onClick={onNew}>
|
|
{t("homework.result.new")}
|
|
</Button>
|
|
</div>
|
|
<p className="text-[11.5px] text-[var(--text-subtle)]">{t("homework.toDeckNote")}</p>
|
|
|
|
{/* Same report control as the study feeds and the guide, under the
|
|
result (the homework record is the "deck" here). */}
|
|
<div className="flex justify-end">
|
|
<ReportQuestionButton
|
|
deckId={record.id}
|
|
deckTitle={record.title}
|
|
activity={homeworkReportActivity({ id: record.id, title: record.title, answer })}
|
|
labelKey="homework.report"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|