freezmo/components/ReportQuestionButton.tsx
Martin Dvorak 33c0ad1ed0 Report button moves under the exercise, bottom-right
The red "!" left the top chrome (it read as chrome and was easy to
mis-tap) and now sits in a row under the exercise: the AI disclaimer stays
centred, the report control is right-aligned with the card edge and is a
44px target. Applies to study, Smart Review and exam sessions; the results
slides keep just the disclaimer.

phase-2 suite now asserts the placement (below the card, right-aligned,
not in the header, >=44px) — 60 checks.

README: decision 52 updated. SW -> freezmo-v43.
2026-10-12 12:29:59 +00:00

45 lines
1.3 KiB
TypeScript

"use client";
import { haptic } from "@/lib/haptics";
import { useI18n } from "@/lib/i18n";
import { reportQuestion, unreportQuestion } from "@/lib/question-reports";
import type { Activity, Deck } from "@/lib/schemas";
import { showToast } from "@/lib/toast";
/**
* The red "!" report control that sits under the card (bottom-right of the
* exercise): records the question, sends the operator a copy and skips past
* it. Undo lives in the toast. 44px, because it is a thumb target.
*/
export function ReportQuestionButton({
deck,
activity,
onSkip,
}: {
deck: Deck;
activity: Activity;
onSkip: () => void;
}) {
const { t } = useI18n();
return (
<button
type="button"
onClick={() => {
haptic("tap");
reportQuestion({ deck, activity });
showToast({
message: t("feed.reported"),
actionLabel: t("toast.undo"),
onAction: () => unreportQuestion(deck.id, activity.id),
});
onSkip();
}}
aria-label={t("feed.report")}
title={t("feed.report")}
className="grid size-11 shrink-0 place-items-center rounded-xl border-2 border-rose-400/80 text-base font-black leading-none text-rose-600 transition hover:bg-rose-50 dark:border-rose-400/50 dark:text-rose-300 dark:hover:bg-rose-400/10"
>
<span aria-hidden>!</span>
</button>
);
}