mirror of
https://github.com/jakejarvis/sofa.git
synced 2026-08-29 00:25:38 -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>
42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { IconCheck } from "@tabler/icons-react";
|
|
import { useAtomValue } from "jotai";
|
|
import {
|
|
titleTypeAtom,
|
|
userRatingAtom,
|
|
userStatusAtom,
|
|
} from "@/lib/atoms/title";
|
|
import { StarRating } from "./star-rating";
|
|
import { StatusButton } from "./status-button";
|
|
import { useTitleActions } from "./use-title-actions";
|
|
|
|
export function TitleActions() {
|
|
const titleType = useAtomValue(titleTypeAtom);
|
|
const userStatus = useAtomValue(userStatusAtom);
|
|
const userRating = useAtomValue(userRatingAtom);
|
|
const { handleStatusChange, handleRating, handleWatchMovie } =
|
|
useTitleActions();
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<StatusButton
|
|
currentStatus={userStatus ?? null}
|
|
onChange={handleStatusChange}
|
|
/>
|
|
{titleType === "movie" && (
|
|
<button
|
|
type="button"
|
|
onClick={handleWatchMovie}
|
|
className="inline-flex h-9 items-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-all active:scale-[0.97] hover:shadow-md hover:shadow-primary/20"
|
|
>
|
|
<IconCheck aria-hidden={true} className="size-3.5" />
|
|
Mark Watched
|
|
</button>
|
|
)}
|
|
<span className="mx-0.5 h-4 w-px bg-border/50" />
|
|
<StarRating value={userRating ?? 0} onChange={handleRating} />
|
|
</div>
|
|
);
|
|
}
|