Martin Dvorak
374752c59e
Mobile only (<=639px / coarse pointers); desktop keeps its behaviour. Foundation - lib/motion.ts owns the spring presets (snappy/gentle/sheet), durations, easings and variants (screens, tabs, wizard steps, list stagger). - Native-feel CSS: press feedback scales every button, card, chip, tab, row and summary to 0.96 with a spring-like cubic-bezier on transform (scoped to phones/coarse pointers), tap-highlight off, touch-action manipulation, chrome text non-selectable, reduced motion drops it. - App shell fades in once on launch; the study feed fades in on phones. Applied - Tab bar: sliding active pill (shared layoutId) + icon bounce. - Study Decks/Homework, language toggle, difficulty and size pickers: the same gliding highlight, gated so desktop keeps the old styling. - Route content enters direction-aware (deeper = from the right, back = from the left, same-depth = crossfade) via RouteTransition on the library/create/homework content columns; library tab switches crossfade; wizard steps slide forward/backward (reduced motion safe). - Library: cards fade up in a capped stagger on first load, glide with layout animations and shrink away on delete (AnimatePresence). - Study feed: correct feedback pulses, wrong shakes, the progress bar settles with a spring curve, score and XP count up on the results. - Settings sheet uses the sheet spring; the drawer now follows the finger and closes on release velocity, like the sheet. - Generation progress: the stage message fades/slides between stages; the icon keeps its gentle wobble; the feed fades in on hand-off. Skipped, on purpose: LazyMotion (the sliding highlights need layout animations = domMax, same features the current import already has); route exit animations (the App Router unmounts the outgoing page — exits are handled by in-page AnimatePresence); replacing the study feed's native scroll-snap with finger-follow drag (would fight the platform scroller); finger-follow height animation for native <details> expanders. Verified: animation suite 8/8 (reduced motion + 4x-CPU-throttled trace: no long tasks, CLS 0.0000), regression 74/74, mobile 52/52, declutter 116/116, i18n 25/25. Lint + build clean. SW freezmo-v21.
96 lines
3.2 KiB
TypeScript
96 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { motion, useReducedMotion } from "framer-motion";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
import { GearIcon, HomeIcon, PlusIcon } from "@/components/icons";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import { springSnappy } from "@/lib/motion";
|
|
import { openSettings } from "@/lib/ui-events";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* iOS-style bottom tab bar. Rendered on the library and create screens on
|
|
* phones; hidden on desktop (the header carries the same actions there) and on
|
|
* the full-screen study feed.
|
|
*
|
|
* The active item sits on a sliding pill (shared `layoutId`), and its icon
|
|
* gives a small bounce when you land on it.
|
|
*/
|
|
export function TabBar() {
|
|
const pathname = usePathname();
|
|
const { t } = useI18n();
|
|
const reduceMotion = useReducedMotion();
|
|
|
|
const item =
|
|
"relative flex flex-1 flex-col items-center justify-center gap-1 py-2 text-[11px] font-medium transition-colors";
|
|
const active = "text-[var(--text)]";
|
|
const idle = "text-[var(--text-subtle)]";
|
|
|
|
/** The pill glides between items; hidden under reduced motion. */
|
|
const pill = (isActive: boolean) =>
|
|
isActive && !reduceMotion ? (
|
|
<motion.span
|
|
aria-hidden
|
|
layoutId="tabbar-active"
|
|
transition={springSnappy}
|
|
className="absolute inset-x-2 inset-y-0.5 rounded-2xl bg-[var(--nav-active-bg)] shadow-[inset_0_0_0_1px_var(--nav-active-border)]"
|
|
/>
|
|
) : null;
|
|
|
|
/** Small icon bounce on the item you just selected. */
|
|
const icon = (children: React.ReactNode, isActive: boolean, key: string) => (
|
|
<motion.span
|
|
key={`${key}-${isActive ? pathname : "idle"}`}
|
|
animate={isActive && !reduceMotion ? { scale: [1, 1.16, 1] } : { scale: 1 }}
|
|
transition={springSnappy}
|
|
className="relative z-10 grid place-items-center"
|
|
>
|
|
{children}
|
|
</motion.span>
|
|
);
|
|
|
|
const label = (text: string, isActive: boolean) => (
|
|
<span className={cn("relative z-10", isActive ? active : idle)}>{text}</span>
|
|
);
|
|
|
|
const libraryActive = pathname === "/";
|
|
const createActive = pathname === "/create";
|
|
|
|
return (
|
|
<nav
|
|
aria-label={t("tabbar.main")}
|
|
className="tabbar fixed inset-x-0 bottom-0 z-40 flex items-stretch pb-safe sm:hidden"
|
|
>
|
|
<Link
|
|
href="/"
|
|
aria-current={libraryActive ? "page" : undefined}
|
|
className={cn(item, libraryActive ? active : idle)}
|
|
>
|
|
{pill(libraryActive)}
|
|
{icon(<HomeIcon className="size-6" />, libraryActive, "library")}
|
|
{label(t("common.library"), libraryActive)}
|
|
</Link>
|
|
<Link
|
|
href="/create"
|
|
aria-current={createActive ? "page" : undefined}
|
|
className={cn(item, createActive ? active : idle)}
|
|
>
|
|
{pill(createActive)}
|
|
{icon(
|
|
<span className="grad-ice grid size-6 place-items-center rounded-full text-[#06111f]">
|
|
<PlusIcon className="size-4" />
|
|
</span>,
|
|
createActive,
|
|
"create",
|
|
)}
|
|
{label(t("common.newDeck"), createActive)}
|
|
</Link>
|
|
<button type="button" onClick={openSettings} className={cn(item, idle)}>
|
|
{icon(<GearIcon className="size-6" />, false, "settings")}
|
|
{label(t("common.settings"), false)}
|
|
</button>
|
|
</nav>
|
|
);
|
|
}
|