[Chat] Moderation stuff (#10610)

src/components/AvatarBubbles.tsx

@@ -1,4 +1,4 @@
-import {useEffect} from 'react'
+import {useEffect, useMemo} from 'react'
 import {View} from 'react-native'
 import Animated, {
   Easing,
@@ -8,6 +8,11 @@ import Animated, {
   withDelay,
   withTiming,
 } from 'react-native-reanimated'
+import {
+  moderateProfile,
+  type ModerationOpts,
+  type ModerationUI,
+} from '@atproto/api'
 
 import {useSession} from '#/state/session'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
@@ -27,18 +32,27 @@ type Props = {
   animate?: boolean
   profiles: bsky.profile.AnyProfileView[]
   size?: number
+  moderationOpts?: ModerationOpts
 }
 
 export function AvatarBubbles({
   animate = false,
   profiles: allProfiles,
   size = 120,
+  moderationOpts,
 }: Props) {
   const {currentAccount} = useSession()
   const profiles =
     allProfiles.length > 2
       ? allProfiles.filter(p => p.did !== currentAccount?.did)
       : allProfiles
+  const moderations = useMemo(() => {
+    if (!moderationOpts) return []
+    return profiles.map(p => {
+      return moderateProfile(p, moderationOpts)
+    })
+  }, [profiles, moderationOpts])
+
   const scale = size / 120
   const marginOffset = size < 120 ? -2 : 0
 
@@ -90,6 +104,7 @@ export function AvatarBubbles({
             y={layout.y}
             zIndex={layout.zIndex}
             includeProfileBorder={layout.border}
+            moderation={moderations[i]?.ui('avatar')}
           />
         ))}
       </View>
@@ -105,6 +120,7 @@ function AvatarBubble({
   y,
   zIndex,
   includeProfileBorder,
+  moderation,
 }: {
   profile?: bsky.profile.AnyProfileView
   scale: SharedValue<number>
@@ -113,6 +129,7 @@ function AvatarBubble({
   y: number
   zIndex?: number
   includeProfileBorder?: boolean
+  moderation?: ModerationUI
 }) {
   const t = useTheme()
 
@@ -140,6 +157,7 @@ function AvatarBubble({
           type="user"
           hideLiveBadge
           noBorder
+          moderation={moderation}
         />
       ) : (
         <AvatarPlaceholder size={size} />

src/components/PostControls/ShareMenu/RecentChats.tsx

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

src/components/dialogs/SearchablePeopleList.tsx

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

src/components/dms/MessagesListBlockedFooter.tsx

@@ -22,10 +22,12 @@ export function MessagesListBlockedFooter({
   recipient: initialRecipient,
   convoId,
   moderation,
+  isGroup,
 }: {
   recipient: bsky.profile.AnyProfileView
   convoId: string
   moderation: ModerationDecision
+  isGroup: boolean
 }) {
   const t = useTheme()
   const {t: l} = useLingui()
@@ -64,9 +66,7 @@ export function MessagesListBlockedFooter({
           a.justify_center,
           a.p_lg,
           t.atoms.bg_contrast_50,
-          {
+          {borderRadius: 40},
-            borderRadius: 40,
-          },
         ]}>
         <PersonXIcon fill={t.atoms.text.color} size="lg" style={[a.mb_xs]} />
         <Text
@@ -77,9 +77,11 @@ export function MessagesListBlockedFooter({
             a.font_semi_bold,
             t.atoms.text,
           ]}>
-          {isBlocking
+          {isGroup
-            ? l`You are blocking this person`
+            ? l`You are blocking the chat owner`
-            : l`This person is blocking you`}
+            : isBlocking
+              ? l`You are blocking this person`
+              : l`This person is blocking you`}
         </Text>
         <Text
           style={[

src/components/dms/MessagesListHeader.tsx

@@ -46,7 +46,7 @@ export function MessagesListHeader({convo}: {convo?: ConvoWithDetails | null}) {
           convo.kind === 'direct' ? (
             <ProfileHeaderReady convo={convo} moderationOpts={moderationOpts} />
           ) : (
-            <GroupHeaderReady convo={convo} />
+            <GroupHeaderReady convo={convo} moderationOpts={moderationOpts} />
           )
         ) : (
           <>
@@ -152,8 +152,10 @@ function ProfileHeaderReady({
 
 function GroupHeaderReady({
   convo,
+  moderationOpts,
 }: {
   convo: Extract<ConvoWithDetails, {kind: 'group'}>
+  moderationOpts: ModerationOpts
 }) {
   const {t: l} = useLingui()
 
@@ -176,7 +178,11 @@ function GroupHeaderReady({
                   },
                 }
           }>
-          <AvatarBubbles size={40} profiles={convo.members} />
+          <AvatarBubbles
+            size={40}
+            profiles={convo.members}
+            moderationOpts={moderationOpts}
+          />
           <View style={[a.flex_row, a.flex_1, a.align_center]}>
             <Text
               style={[a.text_md, a.font_semi_bold, a.flex_shrink]}

src/screens/Messages/Conversation.tsx

@@ -230,11 +230,19 @@ function InnerReady({
   let footer: React.ReactNode = null
   if (isDisabled) {
     footer = <ChatDisabled />
-  } else if (convo && primaryMember && primaryMemberModeration?.blocked) {
+  } else if (
+    convo &&
+    primaryMember &&
+    primaryMemberModeration &&
+    (convo.kind === 'group'
+      ? primaryMemberModeration?.blockCause?.type === 'blocking'
+      : primaryMemberModeration?.blocked)
+  ) {
     footer = (
       <MessagesListBlockedFooter
         recipient={primaryMember}
         convoId={convo.view.id}
+        isGroup={convo.kind === 'group'}
         moderation={primaryMemberModeration}
       />
     )

src/screens/Messages/ConversationSettings/index.tsx

@@ -435,7 +435,10 @@ 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 profiles={convo.members} />
+          <AvatarBubbles
+            profiles={convo.members}
+            moderationOpts={moderationOpts}
+          />
         </View>
         <Text
           style={[

src/screens/Messages/components/ChatListItem.tsx

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

src/screens/Messages/components/MessagesListGroupInfoPanel.tsx

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

src/state/cache/profile-shadow.ts

@@ -10,6 +10,7 @@ import {findAllProfilesInQueryData as findAllProfilesInExploreFeedPreviewsQueryD
 import {findAllProfilesInQueryData as findAllProfilesInContactMatchesQueryData} from '#/state/queries/find-contacts'
 import {findAllProfilesInQueryData as findAllProfilesInKnownFollowersQueryData} from '#/state/queries/known-followers'
 import {findAllProfilesInQueryData as findAllProfilesInListMembersQueryData} from '#/state/queries/list-members'
+import {findAllProfilesInQueryData as findAllProfilesInGetConvoQueryData} from '#/state/queries/messages/conversation'
 import {findAllProfilesInQueryData as findAllProfilesInListConvosQueryData} from '#/state/queries/messages/list-conversations'
 import {findAllProfilesInQueryData as findAllProfilesInMessagesQueryData} from '#/state/queries/messages/list-convo-members'
 import {findAllProfilesInQueryData as findAllProfilesInMyBlockedAccountsQueryData} from '#/state/queries/my-blocked-accounts'
@@ -266,4 +267,5 @@ function* findProfilesInCache(
   yield* findAllProfilesInNotifsQueryData(queryClient, did)
   yield* findAllProfilesInContactMatchesQueryData(queryClient, did)
   yield* findAllProfilesInMessagesQueryData(queryClient, did)
+  yield* findAllProfilesInGetConvoQueryData(queryClient, did)
 }

src/state/queries/messages/conversation.ts

@@ -1,4 +1,8 @@
-import {type ChatBskyConvoDefs} from '@atproto/api'
+import {
+  type ChatBskyActorDefs,
+  type ChatBskyConvoDefs,
+  type ChatBskyConvoGetConvo,
+} from '@atproto/api'
 import {
   type QueryClient,
   useMutation,
@@ -109,3 +113,22 @@ export function useMarkAsReadMutation() {
     },
   })
 }
+
+export function* findAllProfilesInQueryData(
+  queryClient: QueryClient,
+  did: string,
+): Generator<ChatBskyActorDefs.ProfileViewBasic, void> {
+  const queryDatas = queryClient.getQueriesData<
+    ChatBskyConvoGetConvo.OutputSchema['convo']
+  >({
+    queryKey: [RQKEY_ROOT],
+  })
+  for (const [_queryKey, queryData] of queryDatas) {
+    if (!queryData) continue
+    for (const member of queryData.members) {
+      if (member.did === did) {
+        yield member
+      }
+    }
+  }
+}