Aero button glass + homework report control; reduced-motion sheet glitch
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.
This commit is contained in:
parent
cb8aeb6100
commit
7da308fa1e
26 changed files with 155 additions and 22 deletions
|
|
@ -1,6 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { useSyncExternalStore } from "react";
|
||||
import { useReducedMotion } from "framer-motion";
|
||||
|
||||
/**
|
||||
* The Settings "reduce motion" toggle (default off). It mirrors the OS
|
||||
|
|
@ -49,3 +50,15 @@ export function useReducedMotionPref() {
|
|||
);
|
||||
return { reduced, setReduced: applyReducedMotion };
|
||||
}
|
||||
|
||||
/**
|
||||
* The OS preference *or* the in-app toggle. MotionConfig only strips transform
|
||||
* animations, so components that branch on `useReducedMotion` (sheets fading
|
||||
* from transparent, etc.) must read this one — otherwise a manual "reduce
|
||||
* motion" still faded a translucent sheet in, ghosting the page through it.
|
||||
*/
|
||||
export function useAppReducedMotion(): boolean {
|
||||
const system = useReducedMotion();
|
||||
const { reduced } = useReducedMotionPref();
|
||||
return Boolean(system) || reduced;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -132,6 +132,23 @@ export function withoutReported(deckId: string, activities: Activity[]): Activit
|
|||
}
|
||||
|
||||
/** Adds (or refreshes) a report and sends a copy to the server, best effort. */
|
||||
/**
|
||||
* A pseudo-activity so a homework result can use the same report flow as a
|
||||
* study card (the report only keeps the flattened question/type/id).
|
||||
*/
|
||||
export function homeworkReportActivity(input: { id: string; title: string; answer: string }): Activity {
|
||||
const body = input.answer.trim().slice(0, 1200) || input.title;
|
||||
return {
|
||||
id: input.id,
|
||||
xp: 0,
|
||||
type: "short_answer",
|
||||
question: input.title.slice(0, 600) || "Homework result",
|
||||
referenceAnswer: body,
|
||||
keyPoints: [body.slice(0, 200) || "Result"],
|
||||
explanation: input.title.slice(0, 600) || "Homework result",
|
||||
};
|
||||
}
|
||||
|
||||
export function reportQuestion(input: {
|
||||
/** A deck id, or the homework record's id for a homework exercise. */
|
||||
deckId: string;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue