improvement: show contact avatar for invite link

when pasting an invite link into the search field.

Partially addresses #4158.

CHANGELOG.md

@@ -17,7 +17,7 @@
 - scroll the selected account into view in the accounts sidebar #4137
 - dev: clarify scrolling-related code #4121
 - improved performance a bit #4145, #4188
-- show contact / group name when pasting invite link in the search field #4151
+- show contact / group name & avatar when pasting invite link in the search field #4151, #4178
 - Update local help (2024-10-02) #4165
 - trim whitepaces when reading from clipboard in qr code reader #4169
 - load chat lists faster (the chat list on the main screen, "Forward to..." dialog, etc)

_locales/_untranslated_en.json

@@ -71,5 +71,8 @@
   },
   "edit_name_placeholder": {
     "message": "Nickname for '%1'"
+  },
+  "join_group": {
+    "message": "Join Group"
   }
 }

packages/frontend/src/components/helpers/PseudoListItem.tsx

@@ -12,6 +12,7 @@ import { useSettingsStore } from '../../stores/settings'
 import useProcessQR from '../../hooks/useProcessQr'
 import { BackendRemote } from '../../backend-com'
 import { T } from '@deltachat/jsonrpc-client'
+import { ContactListItem } from '../contact/ContactListItem'
 
 export function PseudoListItem(
   props: PropsWithChildren<{
@@ -152,11 +153,9 @@ export const PseudoListItemAddContactOrGroupFromInviteLink = ({
     }
   }, [accountId, inviteLinkTrimmed])
 
-  const [contactName, setContactName] = useState<'' | T.Contact['displayName']>(
-    ''
-  )
+  const [contact, setContact] = useState<null | T.Contact>(null)
   useEffect(() => {
-    setContactName('')
+    setContact(null)
 
     if (parsedQr?.kind !== 'askVerifyContact') {
       return
@@ -168,7 +167,7 @@ export const PseudoListItemAddContactOrGroupFromInviteLink = ({
       .getContact(accountId, parsedQr.contact_id)
       .then(contact => {
         if (!outdated) {
-          setContactName(contact.displayName)
+          setContact(contact)
         }
       })
 
@@ -177,19 +176,35 @@ export const PseudoListItemAddContactOrGroupFromInviteLink = ({
     }
   }, [accountId, parsedQr])
 
-  return (
+  const onClick = () => processQr(accountId, inviteLinkTrimmed)
+
+  return contact ? (
+    <ContactListItem
+      showCheckbox={false}
+      checked={false}
+      showRemove={false}
+      contact={contact}
+      onClick={onClick}
+    />
+  ) : parsedQr?.kind === 'askVerifyGroup' ? (
     <PseudoListItem
-      id='newcontactorgroupfrominvitelink'
+      id='newgroupfrominvitelink'
       cutoff='+'
-      text={
-        parsedQr?.kind === 'askVerifyGroup' ? parsedQr.grpname : contactName
-      }
-      subText={
-        parsedQr?.kind === 'askVerifyGroup'
-          ? tx('menu_new_group')
-          : tx('menu_new_contact')
-      }
-      onClick={() => processQr(accountId, inviteLinkTrimmed)}
+      text={parsedQr.grpname}
+      subText={tx('join_group')}
+      onClick={onClick}
+    />
+  ) : (
+    // There are many kinds of QRs. For example, if you paste an invite link
+    // of a group that you created yourself, you'll get
+    // `parsedQr.kind === "withdrawVerifyGroup"`.
+    // TODO we probably want to better handle such cases.
+    <PseudoListItem
+      id='otherinvitelinkaction'
+      cutoff='+'
+      text={tx('menu_new_contact')}
+      subText={undefined}
+      onClick={onClick}
     />
   )
 }