style(viewswitcher): unify the ViewSwitcher trigger with the FilterSelect pill

The user prefers FilterSelect's rounded-full glass pill over the ViewSwitcher's squarer
rounded-lg trigger. Give the ViewSwitcher trigger the same look — glass-card/glass-hover,
rounded-full, px-3 py-1, open→border-accent, and a 16px label (was text-sm) — so the two read
as one control family. Applies to every ViewSwitcher consumer (feed, channel manager, Plex
playlists).

Native <select>s, the Combobox input box, and playlist/list cards are a different control class
(form fields / variable-height inputs / cards) and keep their own shape.
This commit is contained in:
2026-08-21 19:49:10 +02:00
parent ddb171fca3
commit f1e14c94c5
+5 -3
View File
@@ -65,12 +65,14 @@ export default function ViewSwitcher<T extends string>({
// nicety for wide windows, not the accessible name.
aria-label={`${label}: ${current.label}`}
title={`${label}: ${current.label}`}
className="shrink-0 inline-flex items-center gap-1 pl-2 pr-1 py-1.5 rounded-lg border border-border bg-card text-fg hover:border-accent hover:text-accent active:translate-y-px transition"
className={`shrink-0 glass-card glass-hover inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-base transition ${
open ? "border-accent" : "border-border"
}`}
>
<CurrentIcon className="w-4 h-4 shrink-0" />
<span className={clsx("text-sm whitespace-nowrap", labelClassName)}>{current.label}</span>
<span className={clsx("whitespace-nowrap", labelClassName)}>{current.label}</span>
<ChevronDown
className={`w-3 h-3 shrink-0 transition-transform ${open ? "rotate-180" : ""}`}
className={`h-3.5 w-3.5 shrink-0 text-muted transition-transform ${open ? "rotate-180" : ""}`}
/>
</button>
<PopoverSurface