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>
89 lines
2.4 KiB
TypeScript
89 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import type { AvailabilityOffer } from "@/lib/types/title";
|
|
|
|
const offerLabels: Record<string, string> = {
|
|
flatrate: "Stream",
|
|
rent: "Rent",
|
|
buy: "Buy",
|
|
free: "Free",
|
|
ads: "With Ads",
|
|
};
|
|
|
|
function ProviderBadge({
|
|
name,
|
|
logoPath,
|
|
}: {
|
|
name: string;
|
|
logoPath: string | null;
|
|
}) {
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-lg border border-border/30 bg-card motion-safe:transition-transform motion-safe:hover:scale-105">
|
|
{logoPath ? (
|
|
<Image
|
|
src={logoPath}
|
|
alt={name}
|
|
width={40}
|
|
height={40}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
) : (
|
|
<span className="text-[8px] font-medium text-muted-foreground">
|
|
{name.slice(0, 2)}
|
|
</span>
|
|
)}
|
|
</TooltipTrigger>
|
|
<TooltipContent className="bg-popover px-2 py-1 text-[10px] font-medium text-popover-foreground shadow-md [&>:last-child]:bg-popover [&>:last-child]:fill-popover">
|
|
{name}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
export function TitleAvailability({
|
|
availability,
|
|
}: {
|
|
availability: AvailabilityOffer[];
|
|
}) {
|
|
const availByType: Record<string, AvailabilityOffer[]> = {};
|
|
for (const offer of availability) {
|
|
if (!availByType[offer.offerType]) availByType[offer.offerType] = [];
|
|
availByType[offer.offerType].push(offer);
|
|
}
|
|
|
|
if (Object.keys(availByType).length === 0) return null;
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<h2 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
|
Where to Watch
|
|
</h2>
|
|
<div className="flex flex-wrap gap-4">
|
|
{Object.entries(availByType).map(([type, offers]) => (
|
|
<div key={type} className="space-y-1.5">
|
|
<span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground/60">
|
|
{offerLabels[type] ?? type}
|
|
</span>
|
|
<div className="flex gap-1.5">
|
|
{offers.map((offer) => (
|
|
<ProviderBadge
|
|
key={offer.providerId}
|
|
name={offer.providerName}
|
|
logoPath={offer.logoPath}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|