[🐴] show deleted account for `missing.invalid` (#4014)

* show deleted account for `missing.invalid`

* sigh

2 files changed, 26 insertions, 14 deletions

diff --git a/src/screens/Messages/Conversation/index.tsx b/src/screens/Messages/Conversation/index.tsx
index 01c205ac8..f382647a5 100644
--- a/src/screens/Messages/Conversation/index.tsx
+++ b/src/screens/Messages/Conversation/index.tsx
@@ -147,6 +147,11 @@ let Header = ({
   const navigation = useNavigation<NavigationProp>()
   const convoState = useConvo()
 
+  const isDeletedAccount = profile?.handle === 'missing.invalid'
+  const displayName = isDeletedAccount
+    ? 'Deleted Account'
+    : profile?.displayName
+
   const onPressBack = useCallback(() => {
     if (isWeb) {
       navigation.replace('Messages')
@@ -197,11 +202,13 @@ let Header = ({
             <Text
               style={[a.text_lg, a.font_bold, a.pt_sm, a.pb_2xs]}
               numberOfLines={1}>
-              {profile.displayName}
-            </Text>
-            <Text style={[t.atoms.text_contrast_medium]} numberOfLines={1}>
-              @{profile.handle}
+              {displayName}
             </Text>
+            {!isDeletedAccount && (
+              <Text style={[t.atoms.text_contrast_medium]} numberOfLines={1}>
+                @{profile.handle}
+              </Text>
+            )}
           </View>
         ) : (
           <>
diff --git a/src/screens/Messages/List/ChatListItem.tsx b/src/screens/Messages/List/ChatListItem.tsx
index f7d115ed0..57a8e0348 100644
--- a/src/screens/Messages/List/ChatListItem.tsx
+++ b/src/screens/Messages/List/ChatListItem.tsx
@@ -29,6 +29,13 @@ export function ChatListItem({
   const {currentAccount} = useSession()
   const menuControl = useMenuControl()
   const {gtMobile} = useBreakpoints()
+  const otherUser = convo.members.find(
+    member => member.did !== currentAccount?.did,
+  )
+  const isDeletedAccount = otherUser?.handle === 'missing.invalid'
+  const displayName = isDeletedAccount
+    ? 'Deleted Account'
+    : otherUser?.displayName || otherUser?.handle
 
   let lastMessage = _(msg`No messages yet`)
   let lastMessageSentAt: string | null = null
@@ -44,10 +51,6 @@ export function ChatListItem({
     lastMessage = _(msg`Message deleted`)
   }
 
-  const otherUser = convo.members.find(
-    member => member.did !== currentAccount?.did,
-  )
-
   const navigation = useNavigation<NavigationProp>()
   const [showActions, setShowActions] = React.useState(false)
 
@@ -113,7 +116,7 @@ export function ChatListItem({
                     numberOfLines={1}
                     style={[{maxWidth: '85%'}, web([a.leading_normal])]}>
                     <Text style={[a.text_md, t.atoms.text, a.font_bold]}>
-                      {otherUser.displayName || otherUser.handle}
+                      {displayName}
                     </Text>
                   </Text>
                   {lastMessageSentAt && (
@@ -147,11 +150,13 @@ export function ChatListItem({
                     </Text>
                   )}
                 </View>
-                <Text
-                  numberOfLines={1}
-                  style={[a.text_sm, t.atoms.text_contrast_medium, a.pb_xs]}>
-                  @{otherUser.handle}
-                </Text>
+                {!isDeletedAccount && (
+                  <Text
+                    numberOfLines={1}
+                    style={[a.text_sm, t.atoms.text_contrast_medium, a.pb_xs]}>
+                    @{otherUser.handle}
+                  </Text>
+                )}
                 <Text
                   numberOfLines={2}
                   style={[