Clean up props/typechecks for AvatarBubbles

src/components/AvatarBubbles.tsx

@@ -129,40 +129,46 @@ function AvatarBubble({
   includeProfileBorder?: boolean
 }) {
   const t = useTheme()
-  const profile = useProfileShadow(profileUnshadowed)
-  const moderationOpts = useModerationOpts()
-  const moderation = moderationOpts
-    ? moderateProfile(profile, moderationOpts)
-    : undefined
   const animatedStyle = useAnimatedStyle(() => ({
     transform: [{translateX: x}, {translateY: y}, {scale: scale.get()}],
   }))
 
-  return (
+  const style = [
-    <Animated.View
+    a.absolute,
-      style={[
+    a.rounded_full,
-        a.absolute,
+    a.flex_grow_0,
-        a.rounded_full,
+    includeProfileBorder && {
-        a.flex_grow_0,
+      borderColor: t.atoms.text_inverted.color,
-        includeProfileBorder && {
+      borderWidth: 2,
-          borderColor: t.atoms.text_inverted.color,
+    },
-          borderWidth: 2,
+    zIndex != null && {zIndex},
-        },
+    animatedStyle,
-        zIndex != null && {zIndex},
+  ]
-        animatedStyle,
+
-      ]}>
+  const profile = useProfileShadow(profileUnshadowed)
-      {profile ? (
+  const moderationOpts = useModerationOpts()
-        <UserAvatar
+
-          avatar={profile.avatar}
+  if (!moderationOpts) {
-          size={size}
+    return (
-          type="user"
+      <Animated.View style={style}>
-          hideLiveBadge
-          noBorder
-          moderation={moderation?.ui('avatar')}
-        />
-      ) : (
         <AvatarPlaceholder size={size} />
-      )}
+      </Animated.View>
+    )
+  }
+
+  const moderation = moderateProfile(profile, moderationOpts)
+  const avatarModeration = moderation.ui('avatar')
+
+  return (
+    <Animated.View style={style}>
+      <UserAvatar
+        avatar={profile.avatar}
+        size={size}
+        type="user"
+        hideLiveBadge
+        noBorder
+        moderation={avatarModeration}
+      />
     </Animated.View>
   )
 }

src/components/PostControls/ShareMenu/RecentChats.tsx

@@ -152,11 +152,7 @@ function RecentChatItem({
         a.align_center,
       ]}>
       {convo.kind === 'group' ? (
-        <AvatarBubbles
+        <AvatarBubbles profiles={convo.members} size={WIDTH - 8} />
-          profiles={convo.members}
-          size={WIDTH - 8}
-          moderationOpts={moderationOpts}
-        />
       ) : (
         <UserAvatar
           avatar={primaryProfile.avatar}

src/components/dialogs/SearchablePeopleList.tsx

@@ -514,11 +514,7 @@ function ExistingChatCard({
           ]}>
           <ProfileCard.Header>
             {convo.kind === 'group' ? (
-              <AvatarBubbles
+              <AvatarBubbles profiles={convo.members} size={40} />
-                profiles={convo.members}
-                size={40}
-                moderationOpts={moderationOpts}
-              />
             ) : (
               <ProfileCard.Avatar
                 profile={convo.primaryMember}

src/screens/Messages/ConversationSettings/index.tsx

@@ -461,10 +461,7 @@ function SettingsHeader({
       <View
         style={[a.px_xl, a.py_4xl, a.border_b, t.atoms.border_contrast_low]}>
         <View style={[a.align_center, a.justify_center]}>
-          <AvatarBubbles
+          <AvatarBubbles profiles={convo.members} />
-            profiles={convo.members}
-            moderationOpts={moderationOpts}
-          />
         </View>
         {isOwner ? (
           <Pressable

src/screens/Messages/components/ChatListItem.tsx

@@ -206,7 +206,6 @@ function GroupChatItem({
         <AvatarBubbles
           profiles={convo.members}
           size={isWithinLeftPanel ? 48 : 52}
-          moderationOpts={moderationOpts}
         />
       }
       title={chatName}

src/screens/Messages/components/MessagesListGroupInfoPanel.tsx

@@ -87,11 +87,7 @@ export function MessagesListGroupInfoPanel({
   return (
     <>
       <View style={[a.align_center, a.justify_center]}>
-        <AvatarBubbles
+        <AvatarBubbles animate={true} profiles={convo.members} />
-          animate={true}
-          profiles={convo.members}
-          moderationOpts={moderationOpts}
-        />
         {convo.details.name ? (
           <Text
             style={[a.text_2xl, a.font_bold, a.mt_lg, a.px_xl, a.text_center]}

src/screens/Messages/components/OutgoingRequestListItem.tsx

@@ -6,7 +6,6 @@ import {
 import {Trans, useLingui} from '@lingui/react/macro'
 
 import {isNetworkError} from '#/lib/strings/errors'
-import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useWithdrawJoinGroupChatRequest} from '#/state/queries/messages/withdraw-join-group-chat'
 import {TimeElapsed} from '#/view/com/util/TimeElapsed'
 import {atoms as a, useTheme, web} from '#/alf'
@@ -26,8 +25,6 @@ export function OutgoingRequestListItem({
 
   const prompt = Prompt.usePromptControl()
 
-  const moderationOpts = useModerationOpts()
-
   const {mutate: withdrawRequest, isPending: isWithdrawPending} =
     useWithdrawJoinGroupChatRequest({
       onSuccess: () => {
@@ -73,7 +70,6 @@ export function OutgoingRequestListItem({
                 ).fill(undefined),
               ]}
               size={48}
-              moderationOpts={moderationOpts}
             />
             <View style={[a.flex_1]}>
               <View