separating out the container to be mapping

packages/desktop/src/tree/FooterControls.tsx

@@ -262,32 +262,11 @@ function OverlayConversation({
         }}
       />
 
-      <AvatarGroup
+      <OverlayConversationAvatars
-        variant={'rounded'}
+        conversationUserMembers={masterConversation.members}
-        sx={{
+        isConversationSelected={isSelected}
-          display: 'flex',
+        tunedInUserIds={masterConversation.tunedInUsers}
-          flexDirection: 'column',
+      />
-          '& >:first-child': {
-            marginTop: 0,
-          },
-          '& > *': {
-            marginLeft: '0 !important' as any,
-            marginTop: -2,
-          },
-        }}
-        max={3}
-      >
-        {masterConversation.members?.map((conversationUserMember, index) => (
-          <OverlayConversationAvatar
-            key={`${masterConversation._id.toString()}-${conversationUserMember._id.toString()}-overlayConvoAvatar`}
-            isTunedIn={masterConversation.tunedInUsers?.includes(
-              conversationUserMember._id.toString(),
-            )}
-            isConversationSelected={isSelected}
-            conversationUserMember={conversationUserMember}
-          />
-        ))}
-      </AvatarGroup>
 
       {isSelected && (
         <>
@@ -331,6 +310,43 @@ function OverlayConversation({
   );
 }
 
+function OverlayConversationAvatars({
+  conversationUserMembers,
+  tunedInUserIds,
+  isConversationSelected,
+}: {
+  isConversationSelected: boolean;
+  tunedInUserIds: string[];
+  conversationUserMembers: ConversationUserMember[];
+}) {
+  return (
+    <AvatarGroup
+      variant={'rounded'}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        '& >:first-child': {
+          marginTop: 0,
+        },
+        '& > *': {
+          marginLeft: '0 !important' as any,
+          marginTop: -2,
+        },
+      }}
+      max={3}
+    >
+      {conversationUserMembers?.map((conversationUserMember, index) => (
+        <OverlayConversationAvatar
+          key={`${conversationUserMember._id.toString()}-overlayConvoAvatar`}
+          isTunedIn={tunedInUserIds?.includes(conversationUserMember._id.toString())}
+          isConversationSelected={isConversationSelected}
+          conversationUserMember={conversationUserMember}
+        />
+      ))}
+    </AvatarGroup>
+  );
+}
+
 function OverlayConversationAvatar({
   conversationUserMember,
   isTunedIn,
@@ -366,15 +382,13 @@ function OverlayConversationAvatar({
   }
 
   return (
-    (conversationUserMember._id.toString() !== user._id.toString() || isConversationSelected) && (
+    <Avatar
-      <Avatar
+      alt={conversationUserMember?.givenName}
-        alt={conversationUserMember?.givenName}
+      src={conversationUserMember?.picture}
-        src={conversationUserMember?.picture}
+      sx={{
-        sx={{
+        opacity: isTunedIn ? '100%' : '20%',
-          opacity: isTunedIn ? '100%' : '20%',
+      }}
-        }}
+    />
-      />
-    )
   );
   return <></>;
 }