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

frontend/src/components/ui/SortControl.tsx

@@ -4,6 +4,7 @@ import { SelectTrigger } from "./SelectTrigger";
 import { pickSort, type SortOption, type SortState } from "../../lib/columnSort";
 import { PopoverItem, PopoverSurface } from "./AnchoredPopover";
 import { useAnchoredPopover } from "./anchoredPopoverHooks";
+import { SURFACE } from "./surfaces";
 
 // The one sort control for every content surface (YT feed, Plex library, channel manager + its card
 // view, channel discovery, playlists): a labeled dropdown pill matching FilterSelect — `Label: key ↓ ▾`
@@ -93,7 +94,7 @@ export default function SortControl({
       <PopoverSurface
         popover={pop}
         ariaLabel={label}
-        className="glass-menu min-w-56 rounded-xl p-1.5 shadow-lg animate-[popIn_0.16s_ease]"
+        className={`${SURFACE.menu} min-w-56 animate-[popIn_0.16s_ease]`}
       >
         {/* One exclusive choice of sort key (radios), scoped by a group so AT announces which is
             checked — the surface is a menu (see the mode above), never a listbox with orphaned options. */}
@@ -107,7 +108,7 @@ export default function SortControl({
                 setOpen(false); // "no sort" is a final choice — nothing left to direct
               }}
               label={defaultLabel}
-              className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition ${
+              className={`flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition ${
                 active === null ? "text-fg" : "text-muted"
               }`}
             >
@@ -126,7 +127,7 @@ export default function SortControl({
                 checked={on}
                 onSelect={() => onChange(pickSort(options, active, o.key))} // keep open to set direction
                 label={o.label}
-                className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition ${
+                className={`flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition ${
                   on ? "text-fg" : "text-muted"
                 }`}
               >