Update chat menu styles and options (#10455)

src/components/dms/ConvoMenu.tsx

@@ -1,9 +1,7 @@
 import {memo, useCallback} from 'react'
 import {Keyboard, View} from 'react-native'
-import {type ChatBskyConvoDefs, type ModerationCause} from '@atproto/api'
+import {ChatBskyConvoDefs, type ModerationCause} from '@atproto/api'
-import {msg} from '@lingui/core/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
 import {useNavigation} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
 
@@ -66,7 +64,7 @@ let ConvoMenu = ({
   latestReportableMessage?: ChatBskyConvoDefs.MessageView
   style?: ViewStyleProp['style']
 }): React.ReactNode => {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const queryClient = useQueryClient()
 
   const leaveConvoControl = Prompt.usePromptControl()
@@ -81,7 +79,7 @@ let ConvoMenu = ({
       <Menu.Root control={control}>
         {!hideTrigger && (
           <View style={[style]}>
-            <Menu.Trigger label={_(msg`Chat settings`)}>
+            <Menu.Trigger label={l`Chat settings`}>
               {({props}) => (
                 <Button
                   label={props.accessibilityLabel}
@@ -114,7 +112,6 @@ let ConvoMenu = ({
           />
         </Menu.Outer>
       </Menu.Root>
-
       <LeaveConvoPrompt
         control={leaveConvoControl}
         convoId={convo.id}
@@ -151,7 +148,6 @@ let ConvoMenu = ({
       ) : (
         <ReportConversationPrompt control={reportControl} />
       )}
-
       <BlockedByListDialog
         control={blockedByListControl}
         listBlocks={listBlocks}
@@ -182,12 +178,13 @@ function MenuContent({
   blockedByListControl: Prompt.PromptControlProps
 }) {
   const navigation = useNavigation<NavigationProp>()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const {mutate: markAsRead} = useMarkAsReadMutation()
 
   const {listBlocks, userBlock} = blockInfo
   const isBlocking = userBlock || !!listBlocks.length
   const isDeletedAccount = profile.handle === 'missing.invalid'
+  const isGroupConvo = ChatBskyConvoDefs.isGroupConvo(initialConvo.kind)
 
   const convoId = initialConvo.id
   const {data: convo} = useConvoQuery({convoId})
@@ -199,13 +196,13 @@ function MenuContent({
   const {mutate: muteConvo} = useMuteConvo(convoId, {
     onSuccess: data => {
       if (data.convo.muted) {
-        Toast.show(_(msg({message: 'Chat muted', context: 'toast'})))
+        Toast.show(l({message: 'Chat muted', context: 'toast'}))
       } else {
-        Toast.show(_(msg({message: 'Chat unmuted', context: 'toast'})))
+        Toast.show(l({message: 'Chat unmuted', context: 'toast'}))
       }
     },
     onError: () => {
-      Toast.show(_(msg`Could not mute chat`), {
+      Toast.show(l`Could not mute chat`, {
         type: 'error',
       })
     },
@@ -228,37 +225,41 @@ function MenuContent({
 
   return isDeletedAccount ? (
     <Menu.Item
-      label={_(msg`Leave conversation`)}
+      destructive
-      onPress={() => leaveConvoControl.open()}>
+      label={l`Leave conversation`}
+      onPress={leaveConvoControl.open}>
+      <Menu.ItemIcon icon={ArrowBoxLeftIcon} />
       <Menu.ItemText>
         <Trans>Leave conversation</Trans>
       </Menu.ItemText>
-      <Menu.ItemIcon icon={ArrowBoxLeftIcon} />
     </Menu.Item>
   ) : (
     <>
       <Menu.Group>
         {showMarkAsRead && (
           <Menu.Item
-            label={_(msg`Mark as read`)}
+            label={l`Mark as read`}
             onPress={() => markAsRead({convoId})}>
+            <Menu.ItemIcon icon={BubbleIcon} />
             <Menu.ItemText>
               <Trans>Mark as read</Trans>
             </Menu.ItemText>
-            <Menu.ItemIcon icon={BubbleIcon} />
+          </Menu.Item>
+        )}
+        {isGroupConvo ? null : (
+          <Menu.Item
+            label={l`Go to user's profile`}
+            onPress={onNavigateToProfile}>
+            <Menu.ItemIcon icon={Person} />
+            <Menu.ItemText>
+              <Trans>Go to profile</Trans>
+            </Menu.ItemText>
           </Menu.Item>
         )}
         <Menu.Item
-          label={_(msg`Go to user's profile`)}
+          label={l`Mute conversation`}
-          onPress={onNavigateToProfile}>
-          <Menu.ItemText>
-            <Trans>Go to profile</Trans>
-          </Menu.ItemText>
-          <Menu.ItemIcon icon={Person} />
-        </Menu.Item>
-        <Menu.Item
-          label={_(msg`Mute conversation`)}
           onPress={() => muteConvo({mute: !convo?.muted})}>
+          <Menu.ItemIcon icon={convo?.muted ? Unmute : Mute} />
           <Menu.ItemText>
             {convo?.muted ? (
               <Trans>Unmute conversation</Trans>
@@ -266,37 +267,41 @@ function MenuContent({
               <Trans>Mute conversation</Trans>
             )}
           </Menu.ItemText>
-          <Menu.ItemIcon icon={convo?.muted ? Unmute : Mute} />
         </Menu.Item>
       </Menu.Group>
       <Menu.Divider />
       <Menu.Group>
+        {isGroupConvo ? null : (
+          <Menu.Item
+            destructive
+            label={isBlocking ? l`Unblock account` : l`Block account`}
+            onPress={toggleBlock}>
+            <Menu.ItemIcon icon={isBlocking ? PersonCheck : PersonX} />
+            <Menu.ItemText>
+              {isBlocking ? l`Unblock account` : l`Block account`}
+            </Menu.ItemText>
+          </Menu.Item>
+        )}
         <Menu.Item
-          label={isBlocking ? _(msg`Unblock account`) : _(msg`Block account`)}
+          destructive
-          onPress={toggleBlock}>
+          label={l`Report conversation`}
-          <Menu.ItemText>
+          onPress={reportControl.open}>
-            {isBlocking ? _(msg`Unblock account`) : _(msg`Block account`)}
+          <Menu.ItemIcon icon={Flag} />
-          </Menu.ItemText>
-          <Menu.ItemIcon icon={isBlocking ? PersonCheck : PersonX} />
-        </Menu.Item>
-        <Menu.Item
-          label={_(msg`Report conversation`)}
-          onPress={() => reportControl.open()}>
           <Menu.ItemText>
             <Trans>Report conversation</Trans>
           </Menu.ItemText>
-          <Menu.ItemIcon icon={Flag} />
         </Menu.Item>
       </Menu.Group>
       <Menu.Divider />
       <Menu.Group>
         <Menu.Item
-          label={_(msg`Leave conversation`)}
+          destructive
-          onPress={() => leaveConvoControl.open()}>
+          label={l`Leave conversation`}
+          onPress={leaveConvoControl.open}>
+          <Menu.ItemIcon icon={ArrowBoxLeftIcon} />
           <Menu.ItemText>
             <Trans>Leave conversation</Trans>
           </Menu.ItemText>
-          <Menu.ItemIcon icon={ArrowBoxLeftIcon} />
         </Menu.Item>
       </Menu.Group>
     </>