dvorakmortonxd/freezmo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Aero button glass + homework report control; reduced-motion sheet glitch

Browse source 
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:
Martin Dvořák 2026-10-14 09:19:54 +00:00
commit 7da308fa1e
26 changed files with 155 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

6
components/LibraryScreen.tsx
View file

@ -5,6 +5,7 @@ import Link from "next/link";
import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
import { DeckCard } from "@/components/DeckCard";
import { useAppReducedMotion as useReducedMotion } from "@/lib/motion-pref";
import { FolderBar } from "@/components/FolderBar";
import { HomeworkCard } from "@/components/HomeworkCard";
import { ChatIcon, EllipsisIcon, FolderIcon, UploadIcon } from "@/components/icons";
@ -32,6 +33,7 @@ import { cn } from "@/lib/utils";
* so the two never mix in a single list.
*/
export function LibraryScreen({ initialTab = "decks" }: { initialTab?: "decks" | "homework" }) {
const reduceMotion = useReducedMotion();
const tab = initialTab;
const decks = useSyncExternalStore(deckStore.subscribe, deckStore.getSnapshot, deckStore.getServerSnapshot);
const homeworkRecords = useSyncExternalStore(
@ -576,10 +578,10 @@ export function LibraryScreen({ initialTab = "decks" }: { initialTab?: "decks" |
role="dialog"
aria-modal="true"
aria-label={t("library.moreTitle")}
initial={{ y: 300 }}
initial={reduceMotion ? false : { y: 300 }}
animate={{ y: 0 }}
exit={{ y: 300 }}
transition={springSheet}
transition={reduceMotion ? { duration: 0 } : springSheet}
className="glass-panel glass-sheet relative z-10 rounded-t-3xl px-4 pb-safe pt-3"
>
<div className="sheet-grabber" aria-hidden />