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

frontend/src/components/ui/SidePanel.tsx

@@ -5,6 +5,7 @@ import { useScrollFade } from "../../lib/useScrollFade";
 import { useHoverFocusWithin } from "../../lib/useHoverFocusWithin";
 import { IconButton } from "./IconButton";
 import { Pressable } from "./Pressable";
+import { SURFACE } from "./surfaces";
 
 // The shared floating side panel — one shell for the Feed / Plex / Playlists rails so they read as
 // one system, and the same peek-open model as the nav rail: unpinned it sits as a small tab docked
@@ -77,7 +78,7 @@ export default function SidePanel({
         {...peek.hoverHandlers}
         onClick={onToggleCollapse}
         aria-label={pinned ? t("sidebar.unpin") : t("sidebar.pin")}
-        className={`glass glass-hover absolute top-3 left-0 z-paneltab flex flex-col items-center gap-2 px-1.5 py-3 rounded-l-none rounded-r-xl transition-opacity ${
+        className={`${SURFACE.edgeTab} glass-hover absolute top-3 left-0 z-paneltab flex flex-col items-center gap-2 px-1.5 py-3 transition-opacity ${
           expanded ? "opacity-0" : ""
         } ${count > 0 ? "ring-1 ring-accent/40" : ""}`}
       >
@@ -98,7 +99,7 @@ export default function SidePanel({
       {expanded && (
         <aside
           {...peek.hoverHandlers}
-          className="glass absolute top-3 bottom-3 left-0 z-panel w-64 rounded-2xl flex flex-col overflow-hidden"
+          className={`${SURFACE.panel} absolute top-3 bottom-3 left-0 z-panel w-64 flex flex-col overflow-hidden`}
         >
           {/* Row 1 — identity only: pin, icon, title (flexes + truncates last), count, customize.
               Module actions live on their own row below so the title always has room. */}