ui(matchmaking): always show your own avatar in the first seat

While searching, seat 0 now shows the current player's avatar/name/level
immediately (server matchmaking only sent a count, so all seats showed "?").
Matched opponents fill the remaining seats as they arrive; the rest stay "?".

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/screens/MatchmakingScreen.tsx

@@ -22,9 +22,18 @@ export function MatchmakingScreen() {
   const goGame = useUIStore((s) => s.goGame);
   const go = useUIStore((s) => s.go);
 
+  const profile = useSessionStore((s) => s.profile);
   const ready = mm.phase === "ready";
   const queued = mm.phase === "queued";
   const searching = mm.phase === "searching";
+
+  // Always show yourself in the first seat while searching; fill the rest with
+  // whoever the server has matched so far (others), else empty "?" slots.
+  const me = profile
+    ? { id: profile.id, displayName: profile.displayName, avatar: profile.avatar, avatarImage: profile.avatarImage, level: profile.level }
+    : null;
+  const others = mm.players.filter((p) => p.id !== profile?.id);
+  const seated = [me, ...others].filter(Boolean).slice(0, 4);
   const slots = [0, 1, 2, 3];
 
   // Elapsed seconds while searching (resets when the search (re)starts).
@@ -132,7 +141,7 @@ export function MatchmakingScreen() {
 
         <div className="grid grid-cols-4 gap-2 sm:gap-3 mt-8 w-full max-w-xs">
           {slots.map((i) => {
-            const p = mm.players[i];
+            const p = seated[i];
             return (
               <div
                 key={i}
@@ -151,7 +160,7 @@ export function MatchmakingScreen() {
                       className="flex flex-col items-center gap-0.5"
                     >
                       <span className="grid size-9 place-items-center rounded-xl bg-navy-900 overflow-hidden">
-                        <Avatar id={p.avatar} size={24} />
+                        <Avatar id={p.avatar} image={"avatarImage" in p ? p.avatarImage : undefined} size={24} />
                       </span>
                       <span className="text-[9px] text-cream/80 max-w-14 truncate">
                         {p.displayName}