fix(design): an audit of the S3d claims — the float shadow, filter hints, one action size per row (E28 S3d)

- A glass role's shadow is one token (shadow-float); the header search's drop-shadow utility had
  replaced its top highlight, and the debug pill's shadow-lg did the same. The surface-role lint
  rule now refuses a shadow size beside a role.
- Plex: every value that filters carries a hint (genre, certificate, studio had none), and the facts
  panel's year and certificate filter like the header's. filterKeyword -> filterValue.
- Downloads: the row resized its buttons with a [&_button] override that the save link escaped
  (28px beside 32px); the size is the primitive's md rung now.
This commit is contained in:
2026-09-25 01:16:20 +02:00
parent 1615838f33
commit 1833f594cb
15 changed files with 160 additions and 29 deletions
+11 -4
View File
@@ -22,8 +22,9 @@ import { Chip } from "./ui/Chip";
// customize menu that toggles them. The prefs hook, backdrop helpers and epLabel live in plexDetail.ts.
// A metadata value that filters the grid when clicked (if onClick is wired), else plain text. Shared
// by the movie info page (PlexInfo) and the unified grid / show pages (PlexBrowse). The optional
// `title` gives a hover hint (e.g. "Filter by 1998"); callers that don't need it just omit it.
// by the movie info page (PlexInfo) and the unified grid / show pages (PlexBrowse). A filtering value
// always says so on hover: `title` is a caller's specific hint ("Show titles from 1998"), else the
// generic "Filter by …" from the value's own text.
export function Filterable({
onClick,
title,
@@ -41,9 +42,15 @@ export function Filterable({
onDark?: boolean;
children: ReactNode;
}) {
const { t } = useTranslation();
const hint =
title ??
(onClick && (typeof children === "string" || typeof children === "number")
? t("plex.info.filterValue", { name: children })
: undefined);
if (tag)
return onClick ? (
<Chip variant="token" onClick={onClick} title={title}>
<Chip variant="token" onClick={onClick} title={hint}>
{children}
</Chip>
) : (
@@ -53,7 +60,7 @@ export function Filterable({
return (
<Pressable
onClick={onClick}
title={title}
title={hint}
className={`${className ?? ""} cursor-pointer hover:text-accent transition`}
>
{children}