feat(design): glass surfaces by role, the static Badge, LinkButton, user pickers on the Combobox (E28 S3d1)

frontend/src/components/plexViews.tsx

@@ -29,6 +29,7 @@ import { LoadingState, StateMessage } from "./ui/QueryState";
 import NavGrid from "./ui/NavGrid";
 import { Chip } from "./ui/Chip";
 import { Pressable } from "./ui/Pressable";
+import { SURFACE } from "./ui/surfaces";
 
 // The Plex sub-router's view branches, split out of PlexBrowse. Each is invoked by PlexBrowse with
 // shell callbacks as props (onBack/onPlay/onFilter/…) — no view reaches back into the shell's state,
@@ -186,7 +187,7 @@ export function PlexPersonView({
       ) : (
         <div className="p-4">
           {/* Hero: headshot + name + TMDB bio/birth facts (E5 S6) + a "filter the library" action. */}
-          <section className="glass-card rounded-2xl p-4 sm:p-5 mb-6">
+          <section className={`${SURFACE.panel} p-4 sm:p-5 mb-6`}>
             <div className="flex items-start gap-4">
               <div className="h-24 w-24 shrink-0 overflow-hidden rounded-full border border-border bg-surface">
                 {d.photo ? (
@@ -445,7 +446,7 @@ export function PlexShowView({
                 {show.genres.map((g) => (
                   <Filterable
                     key={g}
-                    className="text-2xs rounded-full bg-surface px-2 py-0.5 text-muted"
+                    tag
                     onClick={onFilter ? () => onFilter({ genres: [g] }) : undefined}
                   >
                     {g}
@@ -501,7 +502,7 @@ export function PlexShowView({
 
           {/* Seasons — in a glassy panel like the movie info-page strips. */}
           <section
-            className="glass-card rounded-2xl p-4 sm:p-5 mb-6"
+            className={`${SURFACE.panel} p-4 sm:p-5 mb-6`}
             style={{ background: "color-mix(in srgb, var(--card) 55%, transparent)" }}
           >
             <h2 className="text-sm font-semibold mb-3">{t("plex.series.seasons")}</h2>