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

frontend/src/components/PlexPlaylistView.tsx

@@ -43,6 +43,7 @@ import {
 } from "./ui/sortableA11y";
 import { Input } from "./ui/Input";
 import { useReturnFocus } from "./ui/useReturnFocus";
+import { SURFACE } from "./ui/surfaces";
 
 // A playlist's items, grouped for readability: movies stay standalone, while a run of episodes from the
 // same show collapses into a season/show group so a whole series doesn't sprawl into an endless flat
@@ -147,7 +148,7 @@ function EpisodeRow({ ep, ctx, dense }: { ep: PlexCard; ctx: Ctx; dense: boolean
     <div
       ref={setNodeRef}
       style={style}
-      className={`flex items-center gap-2.5 rounded-lg ${dense ? "px-1.5 py-1" : "glass-card p-1.5"}`}
+      className={`flex items-center gap-2.5 ${dense ? "rounded-lg px-1.5 py-1" : `${SURFACE.card} p-1.5`}`}
     >
       <DragHandle
         label={t("plex.playlist.reorderItem", { title: ep.title })}
@@ -202,11 +203,7 @@ function MovieRow({ item, ctx }: { item: PlexCard; ctx: Ctx }) {
   };
   const dense = ctx.layout === "tree";
   return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className="glass-card flex items-center gap-3 rounded-xl p-2"
-    >
+    <div ref={setNodeRef} style={style} className={`${SURFACE.card} flex items-center gap-3 p-2`}>
       <DragHandle
         label={t("plex.playlist.reorderItem", { title: item.title })}
         {...attributes}
@@ -256,7 +253,7 @@ function ShowGroup({ block, ctx }: { block: Extract<Block, { kind: "show" }>; ct
       : t("plex.playlist.seasonUnknown");
 
   return (
-    <div ref={setNodeRef} style={style} className="glass-card overflow-hidden rounded-xl">
+    <div ref={setNodeRef} style={style} className={`${SURFACE.card} overflow-hidden`}>
       {/* Group header — drag moves the whole show; chevron collapses; X removes the whole show. */}
       <div className="flex items-center gap-2.5 p-2">
         <DragHandle
@@ -524,7 +521,7 @@ export default function PlexPlaylistView({
         {t("plex.backToLibrary")}
       </Button>
 
-      <div className="glass rounded-2xl p-4 sm:p-6">
+      <div className={`${SURFACE.panel} p-4 sm:p-6`}>
         <div className="mb-4 flex flex-wrap items-center gap-3">
           <div className="min-w-0 flex-1">
             {renaming ? (