devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 40 Packages Projects Releases 1 Wiki Activity

fix: consistent avatar gradient colors across all 17 call sites

Browse Source 
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.
This commit is contained in:
Jannis Braun
2026-03-02 01:16:58 +01:00
parent 95fc6f0693
commit f79575ffa7
16 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/chat/FriendsPage.tsx
+2 -2
View File
@@ -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>
packages/web/src/components/chat/MentionPopover.tsx
+1
View File
@@ -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"
packages/web/src/components/chat/Message.tsx
+1 -1
View File
@@ -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}
packages/web/src/components/chat/MessageList.tsx
+1 -1
View File
@@ -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">
packages/web/src/components/layout/ActivityPanel.tsx
+1
View File
@@ -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'}`}>
packages/web/src/components/layout/ChannelSidebar.tsx
+2 -2
View File
@@ -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 ${
packages/web/src/components/layout/MemberSidebar.tsx
+1
View File
@@ -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
packages/web/src/components/modals/AddDmMemberModal.tsx
+1 -1
View File
@@ -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}
packages/web/src/components/modals/NewDmModal.tsx
+1 -1
View File
@@ -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}
packages/web/src/components/modals/ServerSettings.tsx
+1
View File
@@ -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>
packages/web/src/components/modals/UserSettings.tsx
+1
View File
@@ -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>
packages/web/src/components/ui/Avatar.tsx
+3 -2
View File
@@ -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) {
packages/web/src/components/voice/PictureInPicture.tsx
+1
View File
@@ -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
+1 -1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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" />