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

frontend/src/components/PlexInfo.tsx

@@ -18,6 +18,8 @@ import { navItemAttrs } from "../lib/listNav";
 import { Button } from "./ui/Button";
 import { IconButton } from "./ui/IconButton";
 import { Pressable } from "./ui/Pressable";
+import { SURFACE } from "./ui/surfaces";
+import { Badge } from "./ui/Badge";
 
 // The rich "media info" surface for a Plex item — poster/art, IMDb score + link, content rating,
 // genres, director, cast (with photos), summary. Reused in TWO places: a full-page view opened from
@@ -196,7 +198,7 @@ function FactsPanel({
     });
   if (rows.length === 0) return null;
   return (
-    <div className="glass-card rounded-2xl p-4 sm:p-5">
+    <div className={`${SURFACE.panel} p-4 sm:p-5`}>
       <h2 className="mb-3 text-sm font-semibold">{t("plex.info.facts.title")}</h2>
       <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-sm">
         {rows.map((r) => (
@@ -221,13 +223,13 @@ function KeywordsPanel({
   const { t } = useTranslation();
   if (keywords.length === 0) return null;
   return (
-    <div className="glass-card rounded-2xl p-4 sm:p-5">
+    <div className={`${SURFACE.panel} p-4 sm:p-5`}>
       <h2 className="mb-3 text-sm font-semibold">{t("plex.info.keywords")}</h2>
       <div className="flex flex-wrap gap-1.5">
         {keywords.map((k) => (
           <Filterable
             key={k}
-            className="rounded-full bg-surface px-2.5 py-1 text-xs text-muted hover:text-accent"
+            tag
             title={onFilter ? t("plex.info.filterKeyword", { name: k }) : undefined}
             onClick={onFilter ? () => onFilter({ keywords: [k] }) : undefined}
           >
@@ -251,7 +253,7 @@ function CrewPanel({
   const { t } = useTranslation();
   if (crew.length === 0) return null;
   return (
-    <div className="glass-card rounded-2xl p-4 sm:p-5">
+    <div className={`${SURFACE.panel} p-4 sm:p-5`}>
       <h2 className="mb-3 text-sm font-semibold">{t("plex.info.crew")}</h2>
       {/* Two columns inside the (now narrow) side box — viewport media-queries can't see the box width,
           so a fixed small column count keeps names from over-spreading. */}
@@ -291,16 +293,11 @@ function PlaybackChip({ detail, overlay }: { detail: PlexItemDetail; overlay: bo
     .filter(Boolean)
     .join(" · ");
   return (
-    <span
-      className={`inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs ${
-        overlay ? "bg-white/10 text-white/90" : "bg-surface text-muted"
-      }`}
-      title={t(`plex.playable.${cls}`)}
-    >
+    <Badge onDark={overlay} title={t(`plex.playable.${cls}`)}>
       <span className={`h-2 w-2 shrink-0 rounded-full ${PLAYABLE_TINT[cls] ?? "bg-gray-400"}`} />
       <span className="font-medium">{t(`plex.filter.playableOpt.${cls}`)}</span>
       {sub && <span className="opacity-70">{sub}</span>}
-    </span>
+    </Badge>
   );
 }
 
@@ -416,7 +413,7 @@ export default function PlexInfo({
     <div className={overlay ? "relative w-full max-w-3xl" : "relative glass-media"}>
       <div className={overlay ? "p-5" : "flex flex-col gap-3 p-3 sm:p-4"}>
         {/* Hero block: floats as a frosted glass panel over the fixed art backdrop (page variant). */}
-        <div className={overlay ? "" : "glass rounded-2xl p-4 sm:p-6"}>
+        <div className={overlay ? "" : `${SURFACE.panel} p-4 sm:p-6`}>
           {/* Header: close (overlay) / customize */}
           <div className="mb-4 flex items-start gap-3">
             <div className="min-w-0 flex-1">
@@ -557,7 +554,8 @@ export default function PlexInfo({
                   {detail.genres.map((g) => (
                     <Filterable
                       key={g}
-                      className={`rounded-full px-2 py-0.5 text-xs ${overlay ? "bg-white/10" : "bg-surface text-muted"}`}
+                      tag
+                      onDark={overlay}
                       onClick={onFilter ? () => onFilter({ genres: [g] }) : undefined}
                     >
                       {g}
@@ -653,7 +651,7 @@ export default function PlexInfo({
 
         {/* Cast row (toggleable), circular photos. */}
         {cast.length > 0 && (
-          <div className={overlay ? "mt-5" : "glass-card rounded-2xl p-4 sm:p-5"}>
+          <div className={overlay ? "mt-5" : `${SURFACE.panel} p-4 sm:p-5`}>
             <h2 className={`mb-2 text-sm font-semibold ${overlay ? "text-white/80" : ""}`}>
               {t("plex.info.cast")}
             </h2>
@@ -729,7 +727,7 @@ export default function PlexInfo({
         {detail.collections
           ?.filter((col) => !hiddenSources.includes(col.source))
           .map((col) => (
-            <div key={col.id} className={overlay ? "mt-6" : "glass-card rounded-2xl p-4 sm:p-5"}>
+            <div key={col.id} className={overlay ? "mt-6" : `${SURFACE.panel} p-4 sm:p-5`}>
               <div className="mb-2 flex items-center justify-between gap-3">
                 <h2 className={`text-sm font-semibold ${overlay ? "text-white/80" : ""}`}>
                   {col.title}