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

frontend/src/components/PlexSearchBox.tsx

@@ -10,6 +10,7 @@ import { qk } from "../lib/queryKeys";
 import { useDebounced } from "../lib/useDebounced";
 import { availablePlexFields, healPlexField, plexFieldLabelKey } from "../lib/plexSearch";
 import { Pressable } from "./ui/Pressable";
+import { SURFACE } from "./ui/surfaces";
 
 // The Plex header search box: the shared SearchBar enriched with the S2 search scope-pill (a
 // GitHub-style field selector inside the box) and an instant typeahead of the top matches attached
@@ -139,7 +140,7 @@ export default function PlexSearchBox() {
             id={listId}
             role="listbox"
             aria-label={t("plex.suggest.aria")}
-            className="glass-menu absolute left-0 right-0 top-full z-20 mt-2 max-h-[70vh] overflow-y-auto rounded-2xl p-1.5 animate-[popIn_0.16s_ease]"
+            className={`${SURFACE.menu} absolute left-0 right-0 top-full z-20 mt-2 max-h-[70vh] overflow-y-auto animate-[popIn_0.16s_ease]`}
           >
             {suggestions.length === 0 && suggestQ.isFetching && (
               <div className="px-3 py-2 text-sm text-muted">{t("plex.loading")}</div>
@@ -154,7 +155,7 @@ export default function PlexSearchBox() {
                 onMouseDown={(e) => e.preventDefault()} // keep input focus through the click
                 onMouseEnter={() => setHi(i)}
                 onClick={() => pick(i)}
-                className={`flex w-full items-center gap-3 rounded-xl p-1.5 transition ${
+                className={`flex w-full items-center gap-3 rounded-lg p-1.5 transition ${
                   hi === i ? "bg-border/60" : "hover:bg-border/40"
                 }`}
               >