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.
This commit is contained in:
Martin Dvořák 2026-10-12 12:29:59 +00:00
commit 33c0ad1ed0
6 changed files with 88 additions and 37 deletions

View file

@ -7,8 +7,9 @@ import type { Activity, Deck } from "@/lib/schemas";
import { showToast } from "@/lib/toast";
/**
* The red "!" report control in the feed chrome: records the question, sends
* the operator a copy and skips past it. Undo lives in the 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,
@ -36,7 +37,7 @@ export function ReportQuestionButton({
}}
aria-label={t("feed.report")}
title={t("feed.report")}
className="grid size-9 shrink-0 place-items-center rounded-xl border-2 border-rose-400/80 text-[15px] 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"
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>

View file

@ -174,16 +174,6 @@ export function SessionFeed({
{formatClock(remaining)}
</span>
) : null}
{!finished && items[index] ? (
<ReportQuestionButton
deck={items[index].deck}
activity={items[index].activity}
onSkip={() => {
setSkipped((current) => [...current, items[index].activity.id]);
goTo(index + 1);
}}
/>
) : null}
</div>
<div className="flex items-center justify-between gap-2 text-[11px] font-semibold text-[var(--text-muted)]">
<span className="min-w-0 truncate">{title}</span>
@ -217,7 +207,26 @@ export function SessionFeed({
isLast={itemIndex === total - 1}
nextLabel={itemIndex === total - 1 ? t("review.seeResults") : undefined}
/>
<AiDisclaimer />
{/* Under the card: disclaimer centred, report control in the
bottom-right corner (it used to sit in the top chrome). */}
{!finished && index === itemIndex ? (
<div className="grid grid-cols-[2.75rem_1fr_2.75rem] items-center gap-3">
<span aria-hidden />
<AiDisclaimer />
<div className="flex justify-end">
<ReportQuestionButton
deck={item.deck}
activity={item.activity}
onSkip={() => {
setSkipped((current) => [...current, item.activity.id]);
goTo(itemIndex + 1);
}}
/>
</div>
</div>
) : (
<AiDisclaimer />
)}
</div>
</section>
))}

View file

@ -279,16 +279,6 @@ export function StudyFeed({ deck }: { deck: Deck }) {
<BoltIcon className="size-3.5" />
{xp}
</span>
{!finished && queue[index] ? (
<ReportQuestionButton
deck={currentDeck}
activity={queue[index]}
onSkip={() => {
setSkipped((current) => [...current, queue[index].id]);
goTo(index + 1);
}}
/>
) : null}
</div>
</div>
<div className="flex items-center justify-between gap-2 text-[11px] font-semibold text-[var(--text-muted)]">
@ -327,7 +317,26 @@ export function StudyFeed({ deck }: { deck: Deck }) {
onAnswered={(correct, meta) => handleAnswered(activity, correct, meta)}
onNext={() => goTo(activityIndex + 1)}
/>
<AiDisclaimer />
{/* Under the card: disclaimer centred, report control in the
bottom-right corner (it used to sit in the top chrome). */}
{!finished && index === activityIndex ? (
<div className="grid grid-cols-[2.75rem_1fr_2.75rem] items-center gap-3">
<span aria-hidden />
<AiDisclaimer />
<div className="flex justify-end">
<ReportQuestionButton
deck={currentDeck}
activity={activity}
onSkip={() => {
setSkipped((current) => [...current, activity.id]);
goTo(activityIndex + 1);
}}
/>
</div>
</div>
) : (
<AiDisclaimer />
)}
</div>
</section>
))}