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

frontend/src/components/NotificationsPanel.tsx

@@ -45,6 +45,7 @@ import { LoadingState, StateMessage } from "./ui/QueryState";
 import { useNavigationActions } from "./navigationContext";
 import { useChannelsActions } from "./channelsContext";
 import { useFeedFilters, useFeedFiltersActions } from "./feedFiltersContext";
+import { SURFACE } from "./ui/surfaces";
 
 // The single notification center. "System" = durable, server-backed notifications (inbox
 // phase 1). "Activity" = the client-side transient events (action confirmations, errors, with
@@ -142,7 +143,7 @@ export default function NotificationsPanel() {
       {/* The inbox header (title + mark-all / clear-all) is fixed chrome; only the list scrolls. */}
       <PageToolbar>
         <div className="px-4 pt-2 max-w-3xl w-full mx-auto">
-          <div className="glass rounded-2xl p-4 flex items-center gap-3">
+          <div className={`${SURFACE.panel} p-4 flex items-center gap-3`}>
             <Bell className="w-5 h-5 text-accent shrink-0" />
             <div className="flex-1 min-w-0">
               <div className="font-semibold">{t("inbox.title")}</div>
@@ -182,7 +183,7 @@ export default function NotificationsPanel() {
         ) : q.isLoading && !q.data && clientItems.length === 0 ? (
           <LoadingState />
         ) : !hasAny ? (
-          <div className="glass rounded-2xl p-10 text-center text-muted">
+          <div className={`${SURFACE.panel} p-10 text-center text-muted`}>
             <Bell className="w-8 h-8 mx-auto mb-3 opacity-40" />
             {t("inbox.empty")}
           </div>
@@ -299,7 +300,7 @@ function NotificationRow({
   }
   return (
     <div
-      className={`glass-card rounded-xl p-3.5 flex items-start gap-3 transition ${
+      className={`${SURFACE.card} p-3.5 flex items-start gap-3 transition ${
         n.read ? "opacity-70" : ""
       }`}
     >
@@ -385,7 +386,7 @@ function ClientActivityRow({
   const access = n.meta?.kind === "access-requests" ? n.meta : null;
   return (
     <div
-      className={`glass-card rounded-xl p-3.5 flex items-start gap-3 ${needsAction ? "ring-1 ring-accent/30" : ""}`}
+      className={`${SURFACE.card} p-3.5 flex items-start gap-3 ${needsAction ? "ring-1 ring-accent/30" : ""}`}
     >
       <Icon className={`w-4 h-4 shrink-0 mt-0.5 ${color}`} />
       <div className="min-w-0 flex-1">