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

frontend/src/components/PlexCollectionView.tsx

@@ -25,6 +25,8 @@ import { Button } from "./ui/Button";
 import { IconButton } from "./ui/IconButton";
 import { Input } from "./ui/Input";
 import { useReturnFocus } from "./ui/useReturnFocus";
+import { SURFACE } from "./ui/surfaces";
+import { Badge } from "./ui/Badge";
 
 // The Collection info page (ask B): a hero (art/title/cert/year-range/count/runtime/summary) + the
 // ordered member grid, a Play-all / Shuffle over the playable leaves, and — for a NON-external,
@@ -294,13 +296,10 @@ export default function PlexCollectionView({
               <div className="flex items-center gap-2">
                 <h1 className="text-2xl font-semibold leading-tight">{d.title}</h1>
                 {readOnly && (
-                  <span
-                    className="inline-flex items-center gap-1 rounded-full bg-surface px-2 py-0.5 text-2xs text-muted"
-                    title={t("plex.collection.readOnly")}
-                  >
-                    <Lock className="h-3 w-3" />
+                  <Badge title={t("plex.collection.readOnly")}>
+                    <Lock />
                     {t("plex.collection.readOnly")}
-                  </span>
+                  </Badge>
                 )}
               </div>
             )}
@@ -478,7 +477,7 @@ function AddItemPanel({
   }
 
   return (
-    <div className="glass-card mb-6 rounded-2xl p-4">
+    <div className={`${SURFACE.panel} mb-6 p-4`}>
       <div className="mb-3 flex items-center gap-2">
         <Search className="h-4 w-4 text-muted" />
         <Input