fix: persist homeUserId for federated users to ensure consistent avatar colors

Store the original home snowflake ID (homeUserId) during federation replication
so that avatar gradient colors resolve identically across instances. Previously,
replicated users got new snowflake IDs on each instance, causing different
gradient colors. Now Avatar, UserProfilePopout, VoiceUser, StreamTile, and
VoiceChannel all resolve through homeUserId when available. Includes backfill
logic for existing federated users missing the field.

packages/web/src/components/voice/StreamTile.tsx

@@ -1,7 +1,6 @@
 import React, { useRef, useEffect, useState, useCallback } from 'react';
 import { Avatar } from '../ui/Avatar';
 import { useVoiceStore } from '../../stores/voiceStore';
-import { useAuthStore } from '../../stores/authStore';
 import { getActiveRoom, setStreamSubscription } from '../../hooks/useLiveKit';
 import { ScreenShareSettingsPopover } from './ScreenShareSettingsPopover';
 import { stopScreenShare, changeScreenShare } from '../../utils/screenShare';
@@ -24,8 +23,7 @@ export function StreamTile({ tile, large }: StreamTileProps) {
   const { participant } = tile;
   const isLocal = participant.isLocal;
   const userId = participant.userId;
-  const homeUser = useAuthStore((s) => s.user);
-  const avatarUserId = isLocal ? (homeUser?.id ?? userId) : userId;
+  const avatarUserId = participant.homeUserId ?? userId;
 
   const isWatching = watchingStreams.has(userId);
   const streamVolume = streamVolumes.get(userId) ?? 100;

packages/web/src/components/voice/VoiceChannel.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import { useVoiceStore } from '../../stores/voiceStore';
-import { useAuthStore } from '../../stores/authStore';
-import { isSelf } from '../../utils/identity';
 
 const EMPTY_VOICE_USERS: string[] = [];
 import { useServerStore } from '../../stores/serverStore';
@@ -20,8 +18,11 @@ export function VoiceChannel({ channelId, channelName, onClick }: VoiceChannelPr
   const localIsDeafened = useVoiceStore((s) => s.isDeafened);
   const localIsMuted = useVoiceStore((s) => s.isMuted);
   const voiceUserStates = useVoiceStore((s) => s.voiceUserStates);
-  const authUser = useAuthStore((s) => s.user);
-  const currentUserId = authUser?.id;
+  const currentUserId = useVoiceStore((s) => {
+    // Derive from participants — avoids unnecessary authStore dependency
+    const local = s.participants.find(p => p.isLocal);
+    return local?.userId ?? null;
+  });
   const members = useServerStore((s) => s.members);
   const isActive = currentVoiceChannel === channelId;
 
@@ -75,7 +76,7 @@ export function VoiceChannel({ channelId, channelName, onClick }: VoiceChannelPr
                   name={displayName}
                   size={24}
                   status={status}
-                  userId={(authUser && member?.user && isSelf(member.user, authUser)) ? authUser.id : userId}
+                  userId={member?.user.homeUserId ?? userId}
                 />
                 <span className="text-[13px] text-txt-secondary truncate flex-1 min-w-0">{displayName}</span>
                 {/* Status badges */}

packages/web/src/components/voice/VoiceUser.tsx

@@ -1,7 +1,6 @@
 import React, { useRef, useEffect, useState, useCallback } from 'react';
 import { Avatar } from '../ui/Avatar';
 import { useVoiceStore } from '../../stores/voiceStore';
-import { useAuthStore } from '../../stores/authStore';
 import type { UserTile } from '../../hooks/useLiveKit';
 
 interface VoiceUserProps {
@@ -21,8 +20,7 @@ export function VoiceUser({ tile, large }: VoiceUserProps) {
 
   const perUserVolume = participantVolumes.get(participant.userId) ?? 100;
   const isLocal = participant.isLocal;
-  const homeUser = useAuthStore((s) => s.user);
-  const avatarUserId = isLocal ? (homeUser?.id ?? participant.userId) : participant.userId;
+  const avatarUserId = participant.homeUserId ?? participant.userId;
 
   // --- VIDEO & UI ---