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

frontend/src/components/plexDetailUi.tsx

@@ -12,6 +12,9 @@ import { useDismiss } from "../lib/useDismiss";
 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";
+import { Chip } from "./ui/Chip";
 
 // Shared "detail page" UI reused by the movie info page (PlexInfo) and the series show/season pages,
 // so they look consistent (the standing glassy/HTPC brief): the faint fixed art backdrop, the two
@@ -25,13 +28,27 @@ export function Filterable({
   onClick,
   title,
   className,
+  tag = false,
+  onDark = false,
   children,
 }: {
   onClick?: () => void;
   title?: string;
   className?: string;
+  /** A genre / keyword tag rather than a run of text: an edged chip when it filters, a flat badge
+   *  when it doesn't (E28 S3d: edged = pressable). */
+  tag?: boolean;
+  onDark?: boolean;
   children: ReactNode;
 }) {
+  if (tag)
+    return onClick ? (
+      <Chip variant="token" onClick={onClick} title={title}>
+        {children}
+      </Chip>
+    ) : (
+      <Badge onDark={onDark}>{children}</Badge>
+    );
   if (!onClick) return <span className={className}>{children}</span>;
   return (
     <Pressable
@@ -99,7 +116,7 @@ export function DetailCustomizeMenu({
       {open && (
         <div
           ref={menuRef}
-          className="glass-menu absolute right-0 top-full z-menu mt-1 w-52 rounded-xl p-1.5 text-sm"
+          className={`${SURFACE.menu} absolute right-0 top-full z-menu mt-1 w-52 text-sm`}
           style={{ background: "color-mix(in srgb, var(--surface) 58%, transparent)" }}
         >
           <PrefToggle label={t("plex.info.prefArtBg")} on={artBg} onClick={onToggleArtBg} />
@@ -225,7 +242,7 @@ export function DetailHero({
   children: ReactNode;
 }) {
   return (
-    <div className="glass relative rounded-2xl p-4 sm:p-5 mb-8 flex gap-4 sm:gap-5">
+    <div className={`${SURFACE.panel} relative p-4 sm:p-5 mb-8 flex gap-4 sm:gap-5`}>
       <div className="absolute right-3 top-3 z-base">{customizeMenu}</div>
       <Pressable
         onClick={onPosterClick}