Update chat presentation (#10444)

src/screens/Messages/ConversationSettings/AddMembersLink.tsx

@@ -1,6 +1,8 @@
 import {View} from 'react-native'
+import {plural} from '@lingui/core/macro'
 import {Trans, useLingui} from '@lingui/react/macro'
 
+import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
 import {logger} from '#/logger'
 import {useAddGroupMembers} from '#/state/queries/messages/add-group-members'
 import {atoms as a, useTheme} from '#/alf'
@@ -30,8 +32,28 @@ export function AddMembersLink({
   const {mutate: addGroupMembers, isPending: isAddPending} = useAddGroupMembers(
     convoId,
     {
-      onSuccess: () => {
-        addMembersControl.close()
+      onSuccess: data => {
+        addMembersControl.close(() => {
+          const members = data.addedMembers ?? []
+
+          let names = null
+          if (members.length === 1) {
+            names = l`${createSanitizedDisplayName(members[0])} added to chat`
+          } else if (members.length === 2) {
+            names = l`${createSanitizedDisplayName(members[0])} and ${createSanitizedDisplayName(members[1])} added to chat`
+          } else if (members.length > 2) {
+            const memberCount = convo.details.memberCount - 2
+            names = l`${createSanitizedDisplayName(members[0])}, ${createSanitizedDisplayName(members[1])}and ${plural(
+              memberCount,
+              {
+                one: '# other',
+                other: '# others',
+              },
+            )} added to chat`
+          }
+
+          if (names) Toast.show(names)
+        })
       },
       onError: e => {
         logger.error('Failed to add group chat members', {message: e})

src/screens/Messages/ConversationSettings/Member.tsx

@@ -51,9 +51,7 @@ export function Member({
     requireAuth(async () => {
       try {
         await queueFollow()
-        Toast.show(l`Following ${displayName}`, {
-          type: 'info',
-        })
+        Toast.show(l`Following ${displayName}`)
       } catch (err) {
         const e = err as Error
         if (e?.name !== 'AbortError') {

src/screens/Messages/ConversationSettings/MemberMenu.tsx

@@ -181,14 +181,6 @@ export function MemberMenu({
         </Menu.Trigger>
         <Menu.Outer>
           <Menu.Group>
-            <Menu.Item
-              label={l`Message ${displayName}`}
-              onPress={handleMessageMember}>
-              <Menu.ItemIcon icon={MessageIcon} />
-              <Menu.ItemText>
-                <Trans context="action">Message</Trans>
-              </Menu.ItemText>
-            </Menu.Item>
             <Menu.Item
               label={l`View ${displayName}’s profile`}
               onPress={() => {
@@ -199,6 +191,14 @@ export function MemberMenu({
                 <Trans>Go to profile</Trans>
               </Menu.ItemText>
             </Menu.Item>
+            <Menu.Item
+              label={l`Message ${displayName}`}
+              onPress={handleMessageMember}>
+              <Menu.ItemIcon icon={MessageIcon} />
+              <Menu.ItemText>
+                <Trans context="action">Message</Trans>
+              </Menu.ItemText>
+            </Menu.Item>
           </Menu.Group>
           <Menu.Divider />
           <Menu.Group>

src/screens/Messages/ConversationSettings/index.tsx

@@ -176,6 +176,8 @@ function GroupSettings({
   moderationOpts: ModerationOpts
   isReady: boolean
 }) {
+  const [isPTRing, setIsPTRing] = useState(false)
+
   const initialNumToRender = useInitialNumToRender({minItemHeight: 68})
   const bottomBarOffset = useBottomBarOffset()
 
@@ -184,7 +186,7 @@ function GroupSettings({
   const primaryMember = convo.primaryMember
   const isOwner = !!primaryMember && primaryMember.did === currentAccount?.did
 
-  const {data: memberListData = []} = useListConvoMembersQuery({
+  const {data: memberListData = [], refetch} = useListConvoMembersQuery({
     convoId: convo.view.id,
     placeholderData: convo.members,
   })
@@ -269,6 +271,16 @@ function GroupSettings({
     }
   }
 
+  const onRefresh = async () => {
+    setIsPTRing(true)
+    try {
+      await refetch()
+    } catch (err) {
+      logger.error('Failed to refresh group chat members', {message: err})
+    }
+    setIsPTRing(false)
+  }
+
   return (
     <List
       data={items}
@@ -289,6 +301,8 @@ function GroupSettings({
       renderItem={renderItem}
       sideBorders={false}
       windowSize={11}
+      refreshing={isPTRing}
+      onRefresh={() => void onRefresh()}
     />
   )
 }

src/screens/Messages/ConversationSettings/prompts.tsx

@@ -21,31 +21,33 @@ export function EditNamePrompt({
 
   return (
     <Prompt.Outer control={control}>
-      <Prompt.Content>
-        <Prompt.TitleText>
-          <Trans>Edit group name</Trans>
-        </Prompt.TitleText>
-        <View style={[a.my_sm]}>
-          <TextField.Root isInvalid={false}>
-            <TextField.Input
-              label={l`Edit group name`}
-              placeholder={l`Group name`}
-              value={value}
-              onChangeText={onChangeText}
-              returnKeyType="done"
-              autoCapitalize="none"
-              autoComplete="off"
-              autoCorrect={false}
-              autoFocus
-              onSubmitEditing={onConfirm}
-            />
-          </TextField.Root>
-        </View>
-      </Prompt.Content>
-      <Prompt.Actions>
-        <Prompt.Action cta={l`Save`} onPress={onConfirm} />
-        <Prompt.Cancel />
-      </Prompt.Actions>
+      <>
+        <Prompt.Content>
+          <Prompt.TitleText>
+            <Trans>Edit group name</Trans>
+          </Prompt.TitleText>
+          <View style={[a.my_sm]}>
+            <TextField.Root isInvalid={false}>
+              <TextField.Input
+                label={l`Edit group name`}
+                placeholder={l`Group name`}
+                value={value}
+                onChangeText={onChangeText}
+                returnKeyType="done"
+                autoCapitalize="none"
+                autoComplete="off"
+                autoCorrect={false}
+                autoFocus
+                onSubmitEditing={onConfirm}
+              />
+            </TextField.Root>
+          </View>
+        </Prompt.Content>
+        <Prompt.Actions>
+          <Prompt.Action cta={l`Save`} onPress={onConfirm} />
+          <Prompt.Cancel />
+        </Prompt.Actions>
+      </>
     </Prompt.Outer>
   )
 }