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

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.

packages/web/src/stores/socialStore.ts

@@ -34,6 +34,7 @@ interface SocialState {
   addIncomingRequest: (request: FriendRequest, origin: string) => void;
   addFriendFromAccepted: (friend: Friend, requestId: string, origin: string) => void;
   updateFriendPresence: (userId: string, status: string) => void;
+  updateFriendProfile: (user: User) => void;
   removeFriendLocally: (userId: string, origin: string) => void;
   reset: () => void;
 }
@@ -289,5 +290,19 @@ export const useSocialStore = create<SocialState>((set, get) => ({
     }));
   },
 
+  // Called from WS handler on user_updated to keep friend profile data live
+  updateFriendProfile: (user: User) => {
+    set((state) => ({
+      friends: state.friends.map(f =>
+        f.id === user.id
+          ? { ...f, displayName: user.displayName, avatar: user.avatar,
+              banner: user.banner, accentColor: user.accentColor,
+              avatarColor: user.avatarColor, bio: user.bio,
+              customStatus: user.customStatus, status: user.status }
+          : f
+      ),
+    }));
+  },
+
   reset: () => set({ friends: [], requests: [], isLoading: false, error: null }),
 }));