Fix invite card avatar pile not reflecting member count (#10891)

src/components/AvatarBubbles.tsx

@@ -31,9 +31,10 @@ export function AvatarBubbles({
   profiles: allProfiles,
   self = false,
   size = 120,
+  count,
 }: {
   animate?: boolean
-  profiles: (bsky.profile.AnyProfileView | undefined)[]
+  profiles: bsky.profile.AnyProfileView[]
   /**
    * By default, when there are more than 2 profiles, the current user is
    * filtered out (so you don't see yourself among your own group's members).
@@ -42,13 +43,22 @@ export function AvatarBubbles({
    */
   self?: boolean
   size?: number
+  /**
+   * The true number of members, used to decide how many bubbles to render when
+   * it exceeds the number of `profiles` we have on hand (e.g. an invite preview
+   * that only carries a few member profiles for a much larger group). Slots
+   * without a profile render as placeholders. Defaults to `profiles.length`.
+   */
+  count?: number
 }) {
   const {currentAccount} = useSession()
   const profiles =
     !self && allProfiles.length > 2
-      ? allProfiles.filter(p => !p || p.did !== currentAccount?.did)
+      ? allProfiles.filter(p => p.did !== currentAccount?.did)
       : allProfiles
 
+  const bubbleCount = Math.max(profiles.length, count ?? 0)
+
   const scale = size / 120
   const marginOffset = size < 120 ? -2 : 0
 
@@ -79,7 +89,7 @@ export function AvatarBubbles({
   }, [animate, p0, p1, p2, p3])
 
   const scales = [p0, p1, p2, p3]
-  const layouts = getLayouts(profiles.length)
+  const layouts = getLayouts(bubbleCount)
 
   return (
     <Animated.View style={[a.p_2xs, {height: size, width: size}]}>

src/components/dms/ChatInvite/Card.tsx

@@ -29,7 +29,12 @@ export function Card({size}: {size: 'large' | 'small'}) {
 
   return (
     <View style={[a.flex_row, a.gap_md, a.align_center]}>
-      <AvatarBubbles size={56} self profiles={avatarProfiles} />
+      <AvatarBubbles
+        size={56}
+        self
+        profiles={avatarProfiles}
+        count={preview.memberCount}
+      />
       <View style={[a.flex_1, size === 'large' ? a.gap_2xs : a.gap_xs]}>
         <Text
           emoji

src/components/intents/GroupChatJoinDialog.tsx

@@ -315,10 +315,8 @@ function GroupChatJoinDialogContent({code}: {code?: string}) {
     <>
       <View style={[a.w_full, a.py_lg, a.align_center]}>
         <AvatarBubbles
-          profiles={[
-            joinLinkPreview.owner,
-            ...Array(joinLinkPreview.memberCount - 1).fill(undefined),
-          ]}
+          profiles={[joinLinkPreview.owner]}
+          count={joinLinkPreview.memberCount}
           self
           size={135}
         />

src/screens/Messages/JoinRequest.tsx

@@ -103,12 +103,8 @@ export function JoinRequest({setScreenState}: Props) {
             ChatBskyGroupDefs.isJoinLinkPreviewView(joinLinkPreview) ? (
             <Wrapper>
               <AvatarBubbles
-                profiles={[
-                  joinLinkPreview.owner,
-                  ...Array(
-                    Math.min(3, Math.max(0, joinLinkPreview.memberCount - 1)),
-                  ).fill(undefined),
-                ]}
+                profiles={[joinLinkPreview.owner]}
+                count={joinLinkPreview.memberCount}
                 size={135}
               />
               <View style={[a.gap_2xs]}>

src/screens/Messages/components/OutgoingRequestListItem.tsx

@@ -63,12 +63,8 @@ export function OutgoingRequestListItem({
               (hovered || pressed || focused) && t.atoms.bg_contrast_25,
             ]}>
             <AvatarBubbles
-              profiles={[
-                convoView?.owner ?? undefined,
-                ...Array(
-                  Math.min(3, Math.max(0, convoView.memberCount - 1)),
-                ).fill(undefined),
-              ]}
+              profiles={[convoView.owner]}
+              count={convoView.memberCount}
               size={48}
             />
             <View style={[a.flex_1]}>