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

frontend/src/components/Messages.tsx

@@ -20,6 +20,7 @@ import NavGrid from "./ui/NavGrid";
 import { navItemAttrs } from "../lib/listNav";
 import { Pressable } from "./ui/Pressable";
 import { Input } from "./ui/Input";
+import { SURFACE } from "./ui/surfaces";
 
 type View =
   | "list"
@@ -146,7 +147,7 @@ function ConversationList({
       ) : q.isLoading && !q.data ? (
         <LoadingState />
       ) : items.length === 0 ? (
-        <div className="glass rounded-2xl p-10 text-center text-muted">{t("messages.empty")}</div>
+        <div className={`${SURFACE.panel} p-10 text-center text-muted`}>{t("messages.empty")}</div>
       ) : (
         // A keyboard list (E11): `j`/`k` walk the conversations, Enter opens the one the name button
         // opens; the pop-out button beside it keeps its own Enter.
@@ -248,7 +249,7 @@ function Directory({ onPick, onBack }: { onPick: (u: MessageUser) => void; onBac
       ) : q.isLoading ? (
         <LoadingState />
       ) : users.length === 0 ? (
-        <div className="glass rounded-2xl p-10 text-center text-muted">
+        <div className={`${SURFACE.panel} p-10 text-center text-muted`}>
           {t("messages.noPeople")}
         </div>
       ) : (