[🐴] Handle deleted accounts, restructure ChatListItem (#4114)

* Handle deleted accounts, restructure ChatListItem

* Remove triggerOpacity option

* account for handle change in screen reader

* simplify the check

---------

Co-authored-by: Hailey <me@haileyok.com>

src/components/dms/ConvoMenu.tsx

@@ -18,7 +18,7 @@ import {
 import {useMuteConvo} from '#/state/queries/messages/mute-conversation'
 import {useProfileBlockMutationQueue} from '#/state/queries/profile'
 import * as Toast from '#/view/com/util/Toast'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
 import {BlockedByListDialog} from '#/components/dms/BlockedByListDialog'
 import {LeaveConvoPrompt} from '#/components/dms/LeaveConvoPrompt'
 import {ReportConversationPrompt} from '#/components/dms/ReportConversationPrompt'
@@ -41,8 +41,8 @@ let ConvoMenu = ({
   currentScreen,
   showMarkAsRead,
   hideTrigger,
-  triggerOpacity,
   blockInfo,
+  style,
 }: {
   convo: ChatBskyConvoDefs.ConvoView
   profile: Shadow<AppBskyActorDefs.ProfileViewBasic>
@@ -50,11 +50,11 @@ let ConvoMenu = ({
   currentScreen: 'list' | 'conversation'
   showMarkAsRead?: boolean
   hideTrigger?: boolean
-  triggerOpacity?: number
   blockInfo: {
     listBlocks: ModerationCause[]
     userBlock?: ModerationCause
   }
+  style?: ViewStyleProp['style']
 }): React.ReactNode => {
   const navigation = useNavigation<NavigationProp>()
   const {_} = useLingui()
@@ -66,6 +66,7 @@ let ConvoMenu = ({
 
   const {listBlocks, userBlock} = blockInfo
   const isBlocking = userBlock || !!listBlocks.length
+  const isDeletedAccount = profile.handle === 'missing.invalid'
 
   const {data: convo} = useConvoQuery(initialConvo)
 
@@ -105,7 +106,7 @@ let ConvoMenu = ({
     <>
       <Menu.Root control={control}>
         {!hideTrigger && (
-          <View style={{opacity: triggerOpacity}}>
+          <View style={[style]}>
             <Menu.Trigger label={_(msg`Chat settings`)}>
               {({props, state}) => (
                 <Pressable
@@ -128,6 +129,19 @@ let ConvoMenu = ({
             </Menu.Trigger>
           </View>
         )}
+
+        {isDeletedAccount ? (
+          <Menu.Outer>
+            <Menu.Item
+              label={_(msg`Leave conversation`)}
+              onPress={leaveConvoControl.open}>
+              <Menu.ItemText>
+                <Trans>Leave conversation</Trans>
+              </Menu.ItemText>
+              <Menu.ItemIcon icon={ArrowBoxLeft} />
+            </Menu.Item>
+          </Menu.Outer>
+        ) : (
           <Menu.Outer>
             <Menu.Group>
               {showMarkAsRead && (
@@ -198,6 +212,7 @@ let ConvoMenu = ({
               </Menu.Item>
             </Menu.Group>
           </Menu.Outer>
+        )}
       </Menu.Root>
 
       <LeaveConvoPrompt

src/screens/Messages/List/ChatListItem.tsx

@@ -8,9 +8,7 @@ import {
 } from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useNavigation} from '@react-navigation/native'
 
-import {NavigationProp} from '#/lib/routes/types'
 import {isNative} from '#/platform/detection'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
@@ -19,9 +17,9 @@ import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {TimeElapsed} from '#/view/com/util/TimeElapsed'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
-import {Button} from '#/components/Button'
 import {ConvoMenu} from '#/components/dms/ConvoMenu'
 import {Bell2Off_Filled_Corner0_Rounded as BellStroke} from '#/components/icons/Bell2'
+import {Link} from '#/components/Link'
 import {useMenuControl} from '#/components/Menu'
 import {Text} from '#/components/Typography'
 
@@ -91,6 +89,8 @@ function ChatListItemReady({
         moderation.ui('displayName'),
       )
 
+  const isDimStyle = convo.muted || moderation.blocked || isDeletedAccount
+
   let lastMessage = _(msg`No messages yet`)
   let lastMessageSentAt: string | null = null
   if (ChatBskyConvoDefs.isMessageView(convo.lastMessage)) {
@@ -102,10 +102,9 @@ function ChatListItemReady({
     lastMessageSentAt = convo.lastMessage.sentAt
   }
   if (ChatBskyConvoDefs.isDeletedMessageView(convo.lastMessage)) {
-    lastMessage = _(msg`Message deleted`)
+    lastMessage = _(msg`Conversation deleted`)
   }
 
-  const navigation = useNavigation<NavigationProp>()
   const [showActions, setShowActions] = useState(false)
 
   const onMouseEnter = useCallback(() => {
@@ -121,12 +120,6 @@ function ChatListItemReady({
     setShowActions(true)
   }, [])
 
-  const onPress = useCallback(() => {
-    navigation.push('MessagesConversation', {
-      conversation: convo.id,
-    })
-  }, [convo.id, navigation])
-
   const onLongPress = useCallback(() => {
     menuControl.open()
   }, [menuControl])
@@ -137,13 +130,16 @@ function ChatListItemReady({
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       onFocus={onFocus}
-      onBlur={onMouseLeave}>
+      onBlur={onMouseLeave}
-      <Button
+      style={[a.relative]}>
-        onPress={onPress}
+      <Link
-        style={[a.flex_1]}
+        to={`/messages/${convo.id}`}
-        onLongPress={isNative ? onLongPress : undefined}
+        label={displayName}
-        label={profile.displayName || profile.handle}
+        accessibilityHint={
-        accessibilityHint={_(msg`Go to conversation with ${profile.handle}`)}
+          !isDeletedAccount
+            ? _(msg`Go to conversation with ${profile.handle}`)
+            : undefined
+        }
         accessibilityActions={
           isNative
             ? [
@@ -152,16 +148,33 @@ function ChatListItemReady({
               ]
             : undefined
         }
-        onAccessibilityAction={onLongPress}>
+        onAccessibilityAction={onLongPress}
+        onPress={
+          isDeletedAccount
+            ? e => {
+                e.preventDefault()
+                return false
+              }
+            : undefined
+        }
+        style={[
+          web({
+            cursor: isDeletedAccount ? 'default' : 'pointer',
+          }),
+        ]}
+        onLongPress={isNative ? menuControl.open : undefined}>
         {({hovered, pressed, focused}) => (
           <View
             style={[
               a.flex_row,
+              isDeletedAccount ? a.align_center : a.align_start,
               a.flex_1,
               a.px_lg,
               a.py_md,
               a.gap_md,
-              (hovered || pressed || focused) && t.atoms.bg_contrast_25,
+              (hovered || pressed || focused) &&
+                !isDeletedAccount &&
+                t.atoms.bg_contrast_25,
               t.atoms.border_contrast_low,
             ]}>
             <UserAvatar
@@ -169,20 +182,20 @@ function ChatListItemReady({
               size={52}
               moderation={moderation.ui('avatar')}
             />
-            <View style={[a.flex_1, a.flex_row, a.align_center]}>
+
-              <View style={[a.flex_1]}>
+            <View style={[a.flex_1, a.justify_center]}>
-                <View
+              <View style={[a.w_full, a.flex_row, a.align_end, a.pb_2xs]}>
-                  style={[
-                    a.flex_1,
-                    a.flex_row,
-                    a.align_end,
-                    a.pb_2xs,
-                    web([{marginTop: -2}]),
-                  ]}>
                 <Text
                   numberOfLines={1}
                   style={[{maxWidth: '85%'}, web([a.leading_normal])]}>
-                    <Text style={[a.text_md, t.atoms.text, a.font_bold]}>
+                  <Text
+                    style={[
+                      a.text_md,
+                      t.atoms.text,
+                      a.font_bold,
+                      {lineHeight: 21},
+                      isDimStyle && t.atoms.text_contrast_medium,
+                    ]}>
                     {displayName}
                   </Text>
                 </Text>
@@ -192,7 +205,7 @@ function ChatListItemReady({
                       <Text
                         style={[
                           a.text_sm,
-                            web([a.leading_normal, {whiteSpace: 'pre'}]),
+                          {lineHeight: 21},
                           t.atoms.text_contrast_medium,
                         ]}>
                         {' '}
@@ -205,18 +218,19 @@ function ChatListItemReady({
                   <Text
                     style={[
                       a.text_sm,
-                        web([a.leading_normal, {whiteSpace: 'pre'}]),
+                      {lineHeight: 21},
                       t.atoms.text_contrast_medium,
                     ]}>
                     {' '}
                     &middot;{' '}
                     <BellStroke
                       size="xs"
-                        style={t.atoms.text_contrast_medium}
+                      style={[t.atoms.text_contrast_medium]}
                     />
                   </Text>
                 )}
               </View>
+
               {!isDeletedAccount && (
                 <Text
                   numberOfLines={1}
@@ -224,6 +238,7 @@ function ChatListItemReady({
                   @{profile.handle}
                 </Text>
               )}
+
               <Text
                 numberOfLines={2}
                 style={[
@@ -232,20 +247,18 @@ function ChatListItemReady({
                   convo.unreadCount > 0
                     ? a.font_bold
                     : t.atoms.text_contrast_high,
-                    (convo.muted || moderation.blocked) &&
+                  isDimStyle && t.atoms.text_contrast_medium,
-                      t.atoms.text_contrast_medium,
                 ]}>
                 {lastMessage}
               </Text>
-              </View>
+
               {convo.unreadCount > 0 && (
                 <View
                   style={[
                     a.absolute,
                     a.rounded_full,
                     {
-                      backgroundColor:
+                      backgroundColor: isDimStyle
-                        convo.muted || moderation.blocked
                         ? t.palette.contrast_200
                         : t.palette.primary_500,
                       height: 7,
@@ -263,6 +276,11 @@ function ChatListItemReady({
                   ]}
                 />
               )}
+            </View>
+          </View>
+        )}
+      </Link>
+
       <ConvoMenu
         convo={convo}
         profile={profile}
@@ -270,15 +288,18 @@ function ChatListItemReady({
         currentScreen="list"
         showMarkAsRead={convo.unreadCount > 0}
         hideTrigger={isNative}
-                triggerOpacity={
-                  !gtMobile || showActions || menuControl.isOpen ? 1 : 0
-                }
         blockInfo={blockInfo}
+        style={[
+          a.absolute,
+          a.h_full,
+          a.self_end,
+          a.justify_center,
+          {
+            right: a.px_lg.paddingRight,
+            opacity: !gtMobile || showActions || menuControl.isOpen ? 1 : 0,
+          },
+        ]}
       />
     </View>
-          </View>
-        )}
-      </Button>
-    </View>
   )
 }