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

* show deleted account for `missing.invalid`

* sigh

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}
+              {displayName}
             </Text>
+            {!isDeletedAccount && (
               <Text style={[t.atoms.text_contrast_medium]} numberOfLines={1}>
                 @{profile.handle}
               </Text>
+            )}
           </View>
         ) : (
           <>

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>
+                {!isDeletedAccount && (
                   <Text
                     numberOfLines={1}
                     style={[a.text_sm, t.atoms.text_contrast_medium, a.pb_xs]}>
                     @{otherUser.handle}
                   </Text>
+                )}
                 <Text
                   numberOfLines={2}
                   style={[