From f79575ffa7e762f29c893957858f66b754704726 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Mon, 2 Mar 2026 01:16:58 +0100
Subject: [PATCH] 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/chat/FriendsPage.tsx        | 4 ++--
 packages/web/src/components/chat/MentionPopover.tsx     | 1 +
 packages/web/src/components/chat/Message.tsx            | 2 +-
 packages/web/src/components/chat/MessageList.tsx        | 2 +-
 packages/web/src/components/layout/ActivityPanel.tsx    | 1 +
 packages/web/src/components/layout/ChannelSidebar.tsx   | 4 ++--
 packages/web/src/components/layout/MemberSidebar.tsx    | 1 +
 packages/web/src/components/modals/AddDmMemberModal.tsx | 2 +-
 packages/web/src/components/modals/NewDmModal.tsx       | 2 +-
 packages/web/src/components/modals/ServerSettings.tsx   | 1 +
 packages/web/src/components/modals/UserSettings.tsx     | 1 +
 packages/web/src/components/ui/Avatar.tsx               | 5 +++--
 packages/web/src/components/voice/PictureInPicture.tsx  | 1 +
 packages/web/src/components/voice/StreamTile.tsx        | 2 +-
 packages/web/src/components/voice/VoiceChannel.tsx      | 1 +
 packages/web/src/components/voice/VoiceUser.tsx         | 1 +
 16 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/web/src/components/chat/FriendsPage.tsx b/packages/web/src/components/chat/FriendsPage.tsx
index 2b3cd0eb..8e5be27e 100644
--- a/packages/web/src/components/chat/FriendsPage.tsx
+++ b/packages/web/src/components/chat/FriendsPage.tsx
@@ -231,7 +231,7 @@ function FriendItem({ friend, onRemove, onDm }: { friend: Friend, onRemove: () =
   return (
     <div className="flex items-center justify-between px-3 h-[62px] rounded-[8px] hover:bg-interactive-hover group transition-colors border-t border-interactive-muted mx-2">
       <div className="flex items-center gap-3">
-        <Avatar src={friend.avatar} name={friend.displayName ?? friend.username} size={32} status={friend.status} />
+        <Avatar src={friend.avatar} name={friend.displayName ?? friend.username} size={32} status={friend.status} userId={friend.id} />
         <div className="flex flex-col leading-tight">
           <div className="flex items-center gap-1.5">
             <span className="text-txt-primary font-semibold text-[15px]">{friend.displayName ?? friend.username}</span>
@@ -277,7 +277,7 @@ function RequestItem({ request, type, onAccept, onDecline, onCancel }: {
   return (
     <div className="flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-interactive-hover group transition-colors border-t border-interactive-muted mx-2">
       <div className="flex items-center gap-3">
-        <Avatar src={user.avatar} name={user.displayName ?? user.username} size={32} status={user.status as any} />
+        <Avatar src={user.avatar} name={user.displayName ?? user.username} size={32} status={user.status as any} userId={user.id} />
         <div className="flex flex-col">
           <div className="flex items-center gap-1.5">
             <span className="text-txt-primary font-bold text-sm">{user.displayName ?? user.username}</span>
diff --git a/packages/web/src/components/chat/MentionPopover.tsx b/packages/web/src/components/chat/MentionPopover.tsx
index 1b745dc6..b2579ea1 100644
--- a/packages/web/src/components/chat/MentionPopover.tsx
+++ b/packages/web/src/components/chat/MentionPopover.tsx
@@ -71,6 +71,7 @@ export function MentionPopover({ query, selectedIndex, onSelect }: MentionPopove
                 name={displayName}
                 size={24}
                 status={member.user.status}
+                userId={member.user.id}
               />
               <span
                 className="text-[14px] font-medium truncate"
diff --git a/packages/web/src/components/chat/Message.tsx b/packages/web/src/components/chat/Message.tsx
index 9167c3c5..70ab0811 100644
--- a/packages/web/src/components/chat/Message.tsx
+++ b/packages/web/src/components/chat/Message.tsx
@@ -182,7 +182,7 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
       <div className="flex-1 min-w-0 pr-4">
         {message.replyTo && (
           <div className="flex items-center gap-1 mb-1 ml-[-4px] opacity-80 hover:opacity-100 cursor-pointer group/reply">
-            <Avatar src={message.replyTo.user.avatar} name={message.replyTo.user.username} size={16} />
+            <Avatar src={message.replyTo.user.avatar} name={message.replyTo.user.username} size={16} user={message.replyTo.user} />
             <span 
               className="text-[14px] font-bold text-txt-primary hover:underline"
               style={message.replyTo ? replyRoleColor(message.replyTo) : undefined}
diff --git a/packages/web/src/components/chat/MessageList.tsx b/packages/web/src/components/chat/MessageList.tsx
index a8be308c..d20491f2 100644
--- a/packages/web/src/components/chat/MessageList.tsx
+++ b/packages/web/src/components/chat/MessageList.tsx
@@ -173,7 +173,7 @@ function WelcomeHeader({ channelId }: { channelId: string }) {
     return (
       <div className="px-4 pt-8 pb-4">
         <div className="mb-2">
-          <Avatar src={otherUser?.avatar} name={displayName} size={80} />
+          <Avatar src={otherUser?.avatar} name={displayName} size={80} userId={otherUser?.id} />
         </div>
         <h3 className="text-[32px] leading-10 font-bold text-txt-primary">{displayName}</h3>
         <p className="text-txt-secondary text-[14px] mt-1">
diff --git a/packages/web/src/components/layout/ActivityPanel.tsx b/packages/web/src/components/layout/ActivityPanel.tsx
index c8a1a4e5..698217b3 100644
--- a/packages/web/src/components/layout/ActivityPanel.tsx
+++ b/packages/web/src/components/layout/ActivityPanel.tsx
@@ -54,6 +54,7 @@ export function ActivityPanel() {
         size={32}
         status={isOffline ? 'offline' : friend.status}
         className={isOffline ? 'opacity-60' : undefined}
+        userId={friend.id}
       />
       <div className="flex-1 min-w-0">
         <div className={`text-[13.5px] leading-[1.2] font-medium truncate ${isOffline ? 'text-txt-tertiary' : 'text-txt-primary'}`}>
diff --git a/packages/web/src/components/layout/ChannelSidebar.tsx b/packages/web/src/components/layout/ChannelSidebar.tsx
index 47cb5827..029f75c7 100644
--- a/packages/web/src/components/layout/ChannelSidebar.tsx
+++ b/packages/web/src/components/layout/ChannelSidebar.tsx
@@ -215,12 +215,12 @@ export function ChannelSidebar() {
                             zIndex: 2 - i,
                           }}
                         >
-                          <Avatar src={m.avatar} name={m.displayName ?? m.username} size={22} />
+                          <Avatar src={m.avatar} name={m.displayName ?? m.username} size={22} userId={m.id} />
                         </div>
                       ))}
                     </div>
                   ) : (
-                    <Avatar src={otherMembers[0]?.avatar} name={otherMembers[0]?.displayName ?? otherMembers[0]?.username ?? ''} size={32} status={otherMembers[0]?.status as any} />
+                    <Avatar src={otherMembers[0]?.avatar} name={otherMembers[0]?.displayName ?? otherMembers[0]?.username ?? ''} size={32} status={otherMembers[0]?.status as any} userId={otherMembers[0]?.id} />
                   )}
                   <div className="flex-1 min-w-0">
                     <div className={`text-[15px] truncate leading-tight ${
diff --git a/packages/web/src/components/layout/MemberSidebar.tsx b/packages/web/src/components/layout/MemberSidebar.tsx
index 37054702..1f4b6ae0 100644
--- a/packages/web/src/components/layout/MemberSidebar.tsx
+++ b/packages/web/src/components/layout/MemberSidebar.tsx
@@ -108,6 +108,7 @@ export function MemberSidebar() {
           size={32}
           status={isOffline ? 'offline' : member.user.status}
           className={isOffline ? 'opacity-60' : undefined}
+          user={member.user}
         />
         <div className="flex-1 min-w-0">
           <div
diff --git a/packages/web/src/components/modals/AddDmMemberModal.tsx b/packages/web/src/components/modals/AddDmMemberModal.tsx
index 0e703c3c..ecd26e71 100644
--- a/packages/web/src/components/modals/AddDmMemberModal.tsx
+++ b/packages/web/src/components/modals/AddDmMemberModal.tsx
@@ -122,7 +122,7 @@ export function AddDmMemberModal() {
               disabled={isAdding}
               className="w-full flex items-center gap-3 px-3 py-2 rounded-[4px] hover:bg-interactive-hover transition-colors text-left disabled:opacity-50"
             >
-              <Avatar src={user.avatar} name={user.displayName ?? user.username} size={36} status={user.status as any} />
+              <Avatar src={user.avatar} name={user.displayName ?? user.username} size={36} status={user.status as any} userId={user.id} />
               <div className="flex-1 min-w-0">
                 <div className="text-[14px] font-medium text-txt-primary truncate">
                   {user.displayName ?? user.username}
diff --git a/packages/web/src/components/modals/NewDmModal.tsx b/packages/web/src/components/modals/NewDmModal.tsx
index f47ed057..36c04110 100644
--- a/packages/web/src/components/modals/NewDmModal.tsx
+++ b/packages/web/src/components/modals/NewDmModal.tsx
@@ -100,7 +100,7 @@ export function NewDmModal() {
               onClick={() => handleSelectUser(user)}
               className="w-full flex items-center gap-3 px-3 py-2 rounded-[4px] hover:bg-interactive-hover transition-colors text-left"
             >
-              <Avatar src={user.avatar} name={user.displayName ?? user.username} size={36} status={user.status as any} />
+              <Avatar src={user.avatar} name={user.displayName ?? user.username} size={36} status={user.status as any} userId={user.id} />
               <div className="flex-1 min-w-0">
                 <div className="text-[14px] font-medium text-txt-primary truncate">
                   {user.displayName ?? user.username}
diff --git a/packages/web/src/components/modals/ServerSettings.tsx b/packages/web/src/components/modals/ServerSettings.tsx
index 9b4f9323..b6ff1849 100644
--- a/packages/web/src/components/modals/ServerSettings.tsx
+++ b/packages/web/src/components/modals/ServerSettings.tsx
@@ -428,6 +428,7 @@ export function ServerSettingsModal() {
                           name={displayName}
                           size={32}
                           status={member.user.status}
+                          user={member.user}
                         />
                         <div>
                           <div className="text-sm font-medium">{displayName}</div>
diff --git a/packages/web/src/components/modals/UserSettings.tsx b/packages/web/src/components/modals/UserSettings.tsx
index 093f393f..baee273b 100644
--- a/packages/web/src/components/modals/UserSettings.tsx
+++ b/packages/web/src/components/modals/UserSettings.tsx
@@ -64,6 +64,7 @@ export function UserSettingsModal() {
             name={user.displayName ?? user.username}
             size={64}
             status={user.status}
+            userId={user.id}
           />
           <div>
             <div className="font-bold text-lg">{user.displayName ?? user.username}</div>
diff --git a/packages/web/src/components/ui/Avatar.tsx b/packages/web/src/components/ui/Avatar.tsx
index 3c5105b0..f970419a 100644
--- a/packages/web/src/components/ui/Avatar.tsx
+++ b/packages/web/src/components/ui/Avatar.tsx
@@ -11,6 +11,7 @@ interface AvatarProps {
   className?: string;
   onClick?: (e: React.MouseEvent) => void;
   user?: User;
+  userId?: string;
 }
 
 const statusColors: Record<string, string> = {
@@ -20,11 +21,11 @@ const statusColors: Record<string, string> = {
   offline: 'bg-status-offline',
 };
 
-export function Avatar({ src, name, size = 40, status, className = '', onClick, user }: AvatarProps) {
+export function Avatar({ src, name, size = 40, status, className = '', onClick, user, userId }: AvatarProps) {
   const openUserProfile = useUIStore((s) => s.openUserProfile);
   const initials = name.charAt(0).toUpperCase();
   const fontSize = size < 32 ? 'text-xs' : size < 48 ? 'text-sm' : 'text-lg';
-  const gradient = getAvatarGradient(user?.id, name);
+  const gradient = getAvatarGradient(userId ?? user?.id, name);
 
   const handleClick = (e: React.MouseEvent) => {
     if (onClick) {
diff --git a/packages/web/src/components/voice/PictureInPicture.tsx b/packages/web/src/components/voice/PictureInPicture.tsx
index d5433597..fd7ff3c7 100644
--- a/packages/web/src/components/voice/PictureInPicture.tsx
+++ b/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" />
diff --git a/packages/web/src/components/voice/StreamTile.tsx b/packages/web/src/components/voice/StreamTile.tsx
index 2f2ba951..b9dc25a9 100644
--- a/packages/web/src/components/voice/StreamTile.tsx
+++ b/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">
diff --git a/packages/web/src/components/voice/VoiceChannel.tsx b/packages/web/src/components/voice/VoiceChannel.tsx
index e66c9ba2..11854d2b 100644
--- a/packages/web/src/components/voice/VoiceChannel.tsx
+++ b/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 */}
diff --git a/packages/web/src/components/voice/VoiceUser.tsx b/packages/web/src/components/voice/VoiceUser.tsx
index f32618f8..d538ec7c 100644
--- a/packages/web/src/components/voice/VoiceUser.tsx
+++ b/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" />