Post-review adjustments

Author: arnautov-anton

src/components/Avatar/Avatar.tsx

@@ -53,6 +53,7 @@ export const Avatar = ({
   className,
   FallbackIcon = IconUser,
   imageUrl,
+  initials: customInitials,
   isOnline,
   size,
   userName,
@@ -63,17 +64,16 @@ export const Avatar = ({
   useEffect(() => () => setError(false), [imageUrl]);
 
   const nameString = userName?.toString().trim() || '';
-  const avatarImageAlt = nameString.trim();
 
   const sizeAwareInitials = useMemo(() => {
-    const initials = rest.initials || getInitials(nameString);
+    const initials = customInitials || getInitials(nameString);
 
     if (size === 'sm' || size === 'xs') {
       return initials.charAt(0);
     }
 
     return initials;
-  }, [nameString, size, rest.initials]);
+  }, [nameString, size, customInitials]);
 
   const showImage = typeof imageUrl === 'string' && imageUrl && !error;
 
@@ -100,7 +100,7 @@ export const Avatar = ({
       )}
       {showImage ? (
         <img
-          alt={avatarImageAlt}
+          alt={nameString}
           className='str-chat__avatar-image'
           data-testid='avatar-img'
           onError={() => setError(true)}

src/components/TextareaComposer/SuggestionList/MentionItem/UserItem.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React, { useMemo } from 'react';
-import type { UserResponse, UserSuggestion } from 'stream-chat';
+import type { UserSuggestion } from 'stream-chat';
 import { Avatar as DefaultAvatar } from '../../../Avatar';
 import { extractDisplayInfo as defaultExtractDisplayInfo } from '../../../Avatar/utils';
 import { ListItemLayout } from '../../../ListItemLayout';
@@ -32,16 +32,15 @@ export const UserItem = ({ entity, focused, ...buttonProps }: UserItemProps) =>
   const hasEntity = !!Object.keys(entity).length;
 
   const titleAttribute = entity.name || entity.id || '';
-  const displayInfo = extractDisplayInfo({ user: entity });
-  const LeadingSlot = useMemo(
-    () =>
-      function UserItemAvatar() {
-        // Decorative: the option's accessible name already carries the user's name (title +
-        // tokenized display name), so the avatar's fallback initials/role would only add noise.
-        return <Avatar {...displayInfo} aria-hidden size='md' />;
-      },
-    [Avatar, displayInfo],
-  );
+  const LeadingSlot = useMemo(() => {
+    const displayInfo = extractDisplayInfo({ user: entity });
+
+    return function UserItemAvatar() {
+      // Decorative: the option's accessible name already carries the user's name (title +
+      // tokenized display name), so the avatar's fallback initials/role would only add noise.
+      return <Avatar {...displayInfo} aria-hidden size='md' />;
+    };
+  }, [Avatar, entity, extractDisplayInfo]);
 
   if (!hasEntity) return null;
 

src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsx

@@ -65,14 +65,15 @@ const ChannelMembersAddViewItem = ({
   const { Avatar = DefaultAvatar, extractDisplayInfo = defaultExtractDisplayInfo } =
     useComponentContext();
   const displayName = getUserDisplayName(user);
-  const displayInfo = extractDisplayInfo({ user });
 
   const LeadingSlot = useMemo(
     () =>
       function MemberAvatar() {
+        const displayInfo = extractDisplayInfo({ user });
+
         return <Avatar {...displayInfo} isOnline={user.online} size='md' />;
       },
-    [Avatar, displayInfo, user.online],
+    [Avatar, extractDisplayInfo, user],
   );
 
   const SelectableTrailingSlot = useMemo(

src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsx

@@ -62,14 +62,15 @@ const ChannelMembersBrowseViewItem = ({
   const user = member.user;
   const displayName = getMemberDisplayName(member);
   const roleTranslation = getMemberRoleTranslation(member, t);
-  const displayInfo = extractDisplayInfo({ user: user ?? undefined });
 
   const LeadingSlot = useMemo(
     () =>
       function MemberAvatar() {
+        const displayInfo = extractDisplayInfo({ user: user ?? undefined });
+
         return <Avatar {...displayInfo} isOnline={user?.online} size='md' />;
       },
-    [Avatar, displayInfo, user],
+    [Avatar, extractDisplayInfo, user],
   );
 
   const TrailingSlot = useMemo(

src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesView.tsx

@@ -87,14 +87,15 @@ const PinnedMessagesViewItem = ({
   const { Avatar = DefaultAvatar, extractDisplayInfo = defaultExtractDisplayInfo } =
     useComponentContext();
   const displayName = getUserDisplayName(message.user ?? undefined);
-  const displayInfo = extractDisplayInfo({ user: message.user ?? undefined });
 
   const LeadingSlot = useMemo(
     () =>
       function MessageAuthorAvatar() {
+        const displayInfo = extractDisplayInfo({ user: message.user ?? undefined });
+
         return <Avatar {...displayInfo} size='md' />;
       },
-    [Avatar, displayInfo],
+    [Avatar, extractDisplayInfo, message.user],
   );
 
   const TrailingSlot = useMemo(