refactor(ui): R10 S4 — complete the selection-paint sweep (all pill idioms)

The first S4 pass migrated a subset, which left same-idiom selection pills
hand-rolled and made adjacent controls inconsistent (a /code-review finding).
This completes the sweep so every selected-among-options control shares the
recipe:

- plain pills → .pill (+ aria-pressed): Channels status filters + view tabs,
  Sidebar filter-tag chips + date presets + custom-dates, Stats tabs + ranges.
- glass-card-resting pills → .pill with the resting `glass-card glass-hover` kept
  in the non-pressed branch (solid accent when pressed): PlexSidebar library
  scope + the facet Chip (retired the round-1 "deferred" note — the recipe
  already expresses this via the resting branch, no new variant needed).
- custom-dates aria-pressed is coerced with !! so a date string can't leak into
  the attribute and miss the [aria-pressed="true"] paint.
- drop the dead `border` on ChannelTags' chip-solid (accent border on accent bg).

Out of scope (a separate concern, NOT selection-among-options): primary/action
buttons that share the accent fill — Banner action, ConfirmProvider primary,
PlexBrowse primary, PlayerModal watched-toggle — these want a future .btn-primary
recipe. Left by-design: tableHeader filter options (PopoverItem + keepSelectedPaint,
owned by the popover platform).
This commit is contained in:
2026-08-11 00:27:04 +02:00
parent 7ff1ec1db0
commit 90b33fc325
6 changed files with 21 additions and 42 deletions
+5 -5
View File
@@ -148,8 +148,9 @@ export default function PlexSidebar({ layout, setLayout, collapsed, onToggleColl
<button
key={s}
onClick={() => setScope(s)}
className={`min-w-0 px-1.5 py-1.5 rounded-lg text-xs font-medium truncate transition ${
s === scope ? "bg-accent text-accent-fg" : "glass-card glass-hover"
aria-pressed={s === scope}
className={`pill min-w-0 px-1.5 py-1.5 rounded-lg text-xs font-medium truncate ${
s === scope ? "" : "glass-card glass-hover"
}`}
>
{t(`plex.filter.scopeOpt.${s}`)}
@@ -505,9 +506,8 @@ function Chip({
return (
<button
onClick={onClick}
className={`px-2.5 py-1 rounded-full text-xs transition ${
active ? "bg-accent text-accent-fg" : "glass-card glass-hover"
}`}
aria-pressed={active}
className={`pill px-2.5 py-1 rounded-full text-xs ${active ? "" : "glass-card glass-hover"}`}
>
{children}
</button>