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

frontend/src/components/ui/Badge.tsx

@@ -0,0 +1,32 @@
+import clsx from "clsx";
+import type { ReactNode } from "react";
+
+// A static label (a topic, a keyword, a genre, a status): flat and tonal, with NO edge (owner, E28 S3d).
+// Every chip that does something has an edge, so "edged = pressable, flat = just says" holds at a
+// glance; a static tag painted like a chip is clicked and does nothing. The tint is the text colour
+// at 8%, so it reads on the dark schemes and on white alike; `onDark` is the always-dark player's.
+export function Badge({
+  onDark = false,
+  title,
+  className,
+  children,
+}: {
+  onDark?: boolean;
+  title?: string;
+  /** Layout only (margin); the paint is the primitive's. */
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <span
+      title={title}
+      className={clsx(
+        "inline-flex h-5 max-w-full shrink-0 items-center gap-1 truncate rounded-full px-2 text-xs whitespace-nowrap [&>svg]:size-3 [&>svg]:shrink-0",
+        onDark ? "bg-white/10 text-white/90" : "bg-fg/8 text-muted",
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}