fix: consistent avatar gradient colors across all 17 call sites

Avatar fallback gradients were hashed by display name alone when no
user prop was passed, causing the same person to appear in different
colors across messages, replies, member lists, voice panels, etc.

Added userId prop to Avatar and wired it through all 17 call sites
so the gradient always hashes by user ID.

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

@@ -269,6 +269,7 @@ export function PictureInPicture() {
               <Avatar
                 name={displayParticipant.username}
                 size={64}
+                userId={displayParticipant.userId}
               />
               {speakingParticipantIds.has(displayParticipant.identity) && (
                 <div className="absolute -inset-1 rounded-full ring-2 ring-status-online animate-pulse" />

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

@@ -146,7 +146,7 @@ export function StreamTile({ tile, large }: StreamTileProps) {
       ) : (
         <div className="w-full h-full flex flex-col items-center justify-center gap-3 bg-surface-channel">
           <div className="relative">
-            <Avatar src={null} name={participant.username} size={large ? 80 : 48} />
+            <Avatar src={null} name={participant.username} size={large ? 80 : 48} userId={participant.userId} />
           </div>
           <div className="text-center px-4">
             <p className="text-txt-primary text-sm font-semibold">

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

@@ -67,6 +67,7 @@ export function VoiceChannel({ channelId, channelName, onClick }: VoiceChannelPr
                   name={displayName}
                   size={20}
                   status={status}
+                  userId={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

@@ -95,6 +95,7 @@ export function VoiceUser({ tile, large }: VoiceUserProps) {
               src={null}
               name={participant.username}
               size={large ? 100 : 64}
+              userId={participant.userId}
             />
             {isSpeaking && (
               <div className="absolute -inset-1.5 rounded-full ring-[3px] ring-status-online animate-pulse" />