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 ( 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 ( - + 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, ]}>