mirror of
https://github.com/jakejarvis/sofa.git
synced 2026-08-29 06:15:39 -04:00
jakeandClaude Opus 4.6
fc982bee1b
- Add global MotionConfig reducedMotion="user" in root layout
- Add color-scheme: dark, theme-color meta, skip-to-main-content link
- Add aria-hidden={true} to ~60+ decorative icons across 33 files
- Add aria-label to all icon-only buttons (logout, star rating, play, delete, etc.)
- Replace transition-all with specific properties (11 files)
- Add motion-safe: prefix for CSS hover transforms and animate-pulse
- Add prefers-reduced-motion: reduce override in globals.css
- Add useReducedMotion guard to status-dot pulsing animation
- Fix focus-visible styles on auth form inputs (focus → focus-visible, stronger ring)
- Add text-balance to all headings (13 files)
- Replace "..." with "…" (U+2026) in all loading/placeholder text
- Add autocomplete, spellCheck, role="alert" to auth form
- Add aria-label to Switch controls and filmography select
- Fix heading hierarchy (h3 → h2 where h2 was skipped)
- Add break-words to title overview, overscroll-contain to drawer
- Add confirmation dialog for destructive library removal
- Add group-focus-within:opacity-100 for keyboard-accessible backup actions
- Add role="radio" + aria-checked to star rating buttons
- Add aria-label to carousel region, role="img" to TMDB logo SVG
- Add text-foreground to native select for dark mode consistency
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { IconSettings } from "@tabler/icons-react";
|
|
import { motion } from "motion/react";
|
|
import { Children, type ReactNode } from "react";
|
|
|
|
const sectionVariants = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: { type: "spring" as const, stiffness: 200, damping: 24 },
|
|
},
|
|
};
|
|
|
|
export function SettingsShell({
|
|
children,
|
|
footer,
|
|
}: {
|
|
children: ReactNode;
|
|
footer?: ReactNode;
|
|
}) {
|
|
return (
|
|
<motion.div
|
|
className="mx-auto max-w-2xl space-y-8"
|
|
initial="hidden"
|
|
animate="visible"
|
|
variants={{
|
|
hidden: {},
|
|
visible: { transition: { staggerChildren: 0.15 } },
|
|
}}
|
|
>
|
|
<motion.div variants={sectionVariants}>
|
|
<div className="flex items-center gap-2">
|
|
<IconSettings aria-hidden={true} className="size-5 text-primary" />
|
|
<h1 className="font-display text-3xl tracking-tight text-balance">
|
|
Settings
|
|
</h1>
|
|
</div>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
Manage your account and preferences
|
|
</p>
|
|
</motion.div>
|
|
|
|
{Children.map(children, (child) => (
|
|
<motion.div variants={sectionVariants}>{child}</motion.div>
|
|
))}
|
|
|
|
{footer && <motion.div variants={sectionVariants}>{footer}</motion.div>}
|
|
</motion.div>
|
|
);
|
|
}
|