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

frontend/src/components/VideoInfoCard.tsx

@@ -10,6 +10,8 @@ import Avatar from "./ui/Avatar";
 import { PopoverSurface } from "./ui/AnchoredPopover";
 import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
 import { IconButton } from "./ui/IconButton";
+import { SURFACE } from "./ui/surfaces";
+import { Badge } from "./ui/Badge";
 
 // The feed card's "more than the card face" hover infobox (E8·S3, decision D3): full (un-clamped)
 // title, channel, views·duration·date, a description snippet, and the channel's tags. It hangs off a
@@ -112,7 +114,7 @@ export default function VideoInfoCard({
       <PopoverSurface
         popover={pop}
         ariaLabel={t("card.info")}
-        className="glass w-85 max-w-[92vw] overflow-y-auto rounded-lg px-3.5 py-3 animate-[fadeIn_0.12s_ease]"
+        className={`${SURFACE.popover} w-85 max-w-[92vw] overflow-y-auto px-3.5 py-3 animate-[fadeIn_0.12s_ease]`}
         style={{ maxHeight: "min(26rem, var(--fit-max-h, 26rem))" }}
       >
         <p className="text-sm font-medium leading-snug wrap-break-word">{video.title}</p>
@@ -135,9 +137,7 @@ export default function VideoInfoCard({
         {tagNames.length > 0 && (
           <div className="mt-3 flex flex-wrap gap-1.5">
             {tagNames.map((tg) => (
-              <span key={tg.id} className="glass-card px-2 py-0.5 rounded-full text-2xs">
-                {tg.name}
-              </span>
+              <Badge key={tg.id}>{tg.name}</Badge>
             ))}
           </div>
         )}