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

feat: real-time user profile updates and propagate avatarColor to all Avatar callsites

Browse Source 
Broadcast user_updated events over WebSocket when profile fields change,
updating members, DM participants, friends, and cached messages in real time.
Widen useVoiceParticipantMeta to return the full user object and add a
standalone avatarColor prop to Avatar so all ~16 callsites now resolve
the user's chosen gradient color instead of falling back to hash-based colors.
This commit is contained in:
Jannis Braun
2026-03-11 01:12:12 +01:00
parent 9255683d8c
commit 3790386a5f
16 changed files with 131 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/ui/Avatar.tsx
+3 -2
View File
@@ -13,6 +13,7 @@ interface AvatarProps {
user?: User;
userId?: string;
ring?: { width: number; color: string };
avatarColor?: string | null;
}
const statusColors: Record<string, string> = {
@@ -54,12 +55,12 @@ function getDotMetrics(avatarSize: number, ringWidth: number = 0) {
return { dot, gap, inset: avatarInset + ringWidth };
}
export function Avatar({ src, name, size = 40, status, className = '', onClick, user, userId, ring }: AvatarProps) {
export function Avatar({ src, name, size = 40, status, className = '', onClick, user, userId, ring, avatarColor }: AvatarProps) {
const openUserProfile = useUIStore((s) => s.openUserProfile);
const initials = name.charAt(0).toUpperCase();
// Match prototype: 24px→10px, 32-34px→12px, 40px→15px, 56px+→18px
const fontPx = size <= 24 ? 10 : size <= 34 ? 12 : size <= 44 ? 15 : 18;
const gradient = getAvatarGradient(userId ?? user?.homeUserId ?? user?.id, name, user?.avatarColor);
const gradient = getAvatarGradient(userId ?? user?.homeUserId ?? user?.id, name, avatarColor ?? user?.avatarColor);
const ringWidth = ring?.width ?? 0;
const outerSize = size + ringWidth * 2;