Drop email from ReactionsDialog, rows are clickable

- don't show email in reactions dialog unless user has no display name
- clicking on a row in reactions dialog opens a user profile

CHANGELOG.md

@@ -31,6 +31,8 @@
 - upgrade `electron` from `30.0.2` to `30.3.1`
 - truncate message previews in chat list #4059
 - renderElementPreview calls renderElementPreview for message element children #4059
+- do not display email adresses in reactions dialog #4066
+- click on a row in reactions dialog opens contact profile #4066
 
 ### Fixed
 - Fix crash on "Settings" click when not on main screen (e.g. no account selected): hide the "settings" button

src/renderer/components/ContactName/index.tsx

@@ -6,7 +6,7 @@ import styles from './styles.module.scss'
 
 type Props = {
   displayName: string
-  address: string
+  address?: string
   isVerified?: boolean
 }
 
@@ -17,7 +17,9 @@ export default function ContactName(props: Props) {
         <span className={styles.contactNameTruncated}>{props.displayName}</span>
         {props.isVerified && <InlineVerifiedIcon />}
       </div>
-      <div className={styles.contactNameAddress}>{props.address}</div>
+      {!!props.address && (
+        <div className={styles.contactNameAddress}>{props.address}</div>
+      )}
     </div>
   )
 }

src/renderer/components/dialogs/ReactionsDialog/index.tsx

@@ -19,6 +19,8 @@ import styles from './styles.module.scss'
 import type { DialogProps } from '../../../contexts/DialogContext'
 import type { T } from '@deltachat/jsonrpc-client'
 
+import useOpenViewProfileDialog from '../../../hooks/dialog/useOpenViewProfileDialog'
+
 export type Props = {
   reactionsByContact: T.Reactions['reactionsByContact']
 }
@@ -53,6 +55,7 @@ export default function ReactionsDialog({
 function ReactionsDialogList({ reactionsByContact }: Props) {
   const accountId = selectedAccountId()
   const [contacts, setContacts] = useState<ContactWithReaction[]>([])
+  const openViewProfileDialog = useOpenViewProfileDialog()
 
   useEffect(() => {
     const resolveContacts = async () => {
@@ -81,19 +84,26 @@ function ReactionsDialogList({ reactionsByContact }: Props) {
     resolveContacts()
   }, [accountId, reactionsByContact])
 
+  const contactClickGen = (contactId: number) => {
+    return () => {
+      openViewProfileDialog(accountId, contactId)
+    }
+  }
+
   return (
     <ul className={styles.reactionsDialogList}>
       {contacts.map(contact => {
         return (
-          <li key={contact.id} className={styles.reactionsDialogListItem}>
+          <li
+            key={contact.id}
+            className={styles.reactionsDialogListItem}
+            onClick={contactClickGen(contact.id)}
+          >
             <div className={styles.reactionsDialogAvatar}>
               <AvatarFromContact contact={contact} />
             </div>
             <div className={styles.reactionsDialogContactName}>
-              <ContactName
-                displayName={contact.displayName}
-                address={contact.address}
-              />
+              <ContactName displayName={contact.displayName} />
             </div>
             <div className={styles.reactionsDialogEmoji}>{contact.emoji}</div>
           </li>

src/renderer/components/dialogs/ReactionsDialog/styles.module.scss

@@ -6,6 +6,12 @@
   align-items: center;
   display: flex;
   justify-content: space-between;
+  cursor: pointer;
+  border-radius: 10px;
+
+  &:hover {
+    background-color: var(--chatListItemBgHover);
+  }
 }
 
 .reactionsDialogAvatar {