From c65698d5f18bac81817f0fb261c0125bb356e627 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Fri, 12 Jun 2026 15:55:56 +0300
Subject: [PATCH] pad avatar bubbles to reflect true member count

Invite/request previews only carry the group owner's profile (convo.members
is only present for actual members), so AvatarBubbles only ever rendered the
owner plus a single placeholder. Add a `count` prop so the bubble pile reflects
the real member count, and use it for the invite card and the join/outgoing
request previews that were padding the profiles array by hand.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/AvatarBubbles.tsx                     | 12 +++++++++++-
 src/components/dms/ChatInvite/Card.tsx               |  7 ++++++-
 src/screens/Messages/JoinRequest.tsx                 |  8 ++------
 .../Messages/components/OutgoingRequestListItem.tsx  |  8 ++------
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/components/AvatarBubbles.tsx b/src/components/AvatarBubbles.tsx
index 894e1f34f5..c6672e8e6a 100644
--- a/src/components/AvatarBubbles.tsx
+++ b/src/components/AvatarBubbles.tsx
@@ -31,6 +31,7 @@ export function AvatarBubbles({
   profiles: allProfiles,
   self = false,
   size = 120,
+  count,
 }: {
   animate?: boolean
   profiles: (bsky.profile.AnyProfileView | undefined)[]
@@ -42,6 +43,13 @@ 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 =
@@ -49,6 +57,8 @@ export function AvatarBubbles({
       ? allProfiles.filter(p => !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}]}>
diff --git a/src/components/dms/ChatInvite/Card.tsx b/src/components/dms/ChatInvite/Card.tsx
index 33183f82cb..894e36848d 100644
--- a/src/components/dms/ChatInvite/Card.tsx
+++ b/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
diff --git a/src/screens/Messages/JoinRequest.tsx b/src/screens/Messages/JoinRequest.tsx
index b85a056cb6..6ce57a151b 100644
--- a/src/screens/Messages/JoinRequest.tsx
+++ b/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]}>
diff --git a/src/screens/Messages/components/OutgoingRequestListItem.tsx b/src/screens/Messages/components/OutgoingRequestListItem.tsx
index fc0475aee5..1b601779a6 100644
--- a/src/screens/Messages/components/OutgoingRequestListItem.tsx
+++ b/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 ?? undefined]}
+              count={convoView.memberCount}
               size={48}
             />
             <View style={[a.flex_1]}>