From 31a716d256730a7c04e9f57e77f425c6d7dca75b Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Mon, 20 May 2024 16:16:29 -0500
Subject: [🐴] Handle deleted accounts, restructure ChatListItem (#4114)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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/screens/Messages/List/ChatListItem.tsx | 219 ++++++++++++++++-------------
 1 file changed, 120 insertions(+), 99 deletions(-)

(limited to 'src/screens/Messages/List/ChatListItem.tsx')

diff --git a/src/screens/Messages/List/ChatListItem.tsx b/src/screens/Messages/List/ChatListItem.tsx
index 027e4aae3..314bd4756 100644
--- a/src/screens/Messages/List/ChatListItem.tsx
+++ b/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}>
-      <Button
-        onPress={onPress}
-        style={[a.flex_1]}
-        onLongPress={isNative ? onLongPress : undefined}
-        label={profile.displayName || profile.handle}
-        accessibilityHint={_(msg`Go to conversation with ${profile.handle}`)}
+      onBlur={onMouseLeave}
+      style={[a.relative]}>
+      <Link
+        to={`/messages/${convo.id}`}
+        label={displayName}
+        accessibilityHint={
+          !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,85 +182,85 @@ 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.flex_row,
-                    a.align_end,
-                    a.pb_2xs,
-                    web([{marginTop: -2}]),
-                  ]}>
+
+            <View style={[a.flex_1, a.justify_center]}>
+              <View style={[a.w_full, a.flex_row, a.align_end, a.pb_2xs]}>
+                <Text
+                  numberOfLines={1}
+                  style={[{maxWidth: '85%'}, web([a.leading_normal])]}>
                   <Text
-                    numberOfLines={1}
-                    style={[{maxWidth: '85%'}, web([a.leading_normal])]}>
-                    <Text style={[a.text_md, t.atoms.text, a.font_bold]}>
-                      {displayName}
-                    </Text>
+                    style={[
+                      a.text_md,
+                      t.atoms.text,
+                      a.font_bold,
+                      {lineHeight: 21},
+                      isDimStyle && t.atoms.text_contrast_medium,
+                    ]}>
+                    {displayName}
                   </Text>
-                  {lastMessageSentAt && (
-                    <TimeElapsed timestamp={lastMessageSentAt}>
-                      {({timeElapsed}) => (
-                        <Text
-                          style={[
-                            a.text_sm,
-                            web([a.leading_normal, {whiteSpace: 'pre'}]),
-                            t.atoms.text_contrast_medium,
-                          ]}>
-                          {' '}
-                          &middot; {timeElapsed}
-                        </Text>
-                      )}
-                    </TimeElapsed>
-                  )}
-                  {(convo.muted || moderation.blocked) && (
-                    <Text
-                      style={[
-                        a.text_sm,
-                        web([a.leading_normal, {whiteSpace: 'pre'}]),
-                        t.atoms.text_contrast_medium,
-                      ]}>
-                      {' '}
-                      &middot;{' '}
-                      <BellStroke
-                        size="xs"
-                        style={t.atoms.text_contrast_medium}
-                      />
-                    </Text>
-                  )}
-                </View>
-                {!isDeletedAccount && (
+                </Text>
+                {lastMessageSentAt && (
+                  <TimeElapsed timestamp={lastMessageSentAt}>
+                    {({timeElapsed}) => (
+                      <Text
+                        style={[
+                          a.text_sm,
+                          {lineHeight: 21},
+                          t.atoms.text_contrast_medium,
+                        ]}>
+                        {' '}
+                        &middot; {timeElapsed}
+                      </Text>
+                    )}
+                  </TimeElapsed>
+                )}
+                {(convo.muted || moderation.blocked) && (
                   <Text
-                    numberOfLines={1}
-                    style={[a.text_sm, t.atoms.text_contrast_medium, a.pb_xs]}>
-                    @{profile.handle}
+                    style={[
+                      a.text_sm,
+                      {lineHeight: 21},
+                      t.atoms.text_contrast_medium,
+                    ]}>
+                    {' '}
+                    &middot;{' '}
+                    <BellStroke
+                      size="xs"
+                      style={[t.atoms.text_contrast_medium]}
+                    />
                   </Text>
                 )}
+              </View>
+
+              {!isDeletedAccount && (
                 <Text
-                  numberOfLines={2}
-                  style={[
-                    a.text_sm,
-                    a.leading_snug,
-                    convo.unreadCount > 0
-                      ? a.font_bold
-                      : t.atoms.text_contrast_high,
-                    (convo.muted || moderation.blocked) &&
-                      t.atoms.text_contrast_medium,
-                  ]}>
-                  {lastMessage}
+                  numberOfLines={1}
+                  style={[a.text_sm, t.atoms.text_contrast_medium, a.pb_xs]}>
+                  @{profile.handle}
                 </Text>
-              </View>
+              )}
+
+              <Text
+                numberOfLines={2}
+                style={[
+                  a.text_sm,
+                  a.leading_snug,
+                  convo.unreadCount > 0
+                    ? a.font_bold
+                    : t.atoms.text_contrast_high,
+                  isDimStyle && t.atoms.text_contrast_medium,
+                ]}>
+                {lastMessage}
+              </Text>
+
               {convo.unreadCount > 0 && (
                 <View
                   style={[
                     a.absolute,
                     a.rounded_full,
                     {
-                      backgroundColor:
-                        convo.muted || moderation.blocked
-                          ? t.palette.contrast_200
-                          : t.palette.primary_500,
+                      backgroundColor: isDimStyle
+                        ? t.palette.contrast_200
+                        : t.palette.primary_500,
                       height: 7,
                       width: 7,
                     },
@@ -263,22 +276,30 @@ function ChatListItemReady({
                   ]}
                 />
               )}
-              <ConvoMenu
-                convo={convo}
-                profile={profile}
-                control={menuControl}
-                currentScreen="list"
-                showMarkAsRead={convo.unreadCount > 0}
-                hideTrigger={isNative}
-                triggerOpacity={
-                  !gtMobile || showActions || menuControl.isOpen ? 1 : 0
-                }
-                blockInfo={blockInfo}
-              />
             </View>
           </View>
         )}
-      </Button>
+      </Link>
+
+      <ConvoMenu
+        convo={convo}
+        profile={profile}
+        control={menuControl}
+        currentScreen="list"
+        showMarkAsRead={convo.unreadCount > 0}
+        hideTrigger={isNative}
+        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>
   )
 }
-- 
cgit 1.4.1