ReactionsDialog: drop email, make rows clickable

CHANGELOG.md

@@ -5,6 +5,8 @@
 ### Added
 
 ### Changed
+- do not display email adresses in reactions dialog #4066
+- click on a row in reactions dialog opens contact profile #4066
 
 ### Fixed
 

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import classNames from 'classnames'
 
 import Dialog, {
   DialogBody,
@@ -19,8 +20,11 @@ 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']
+  onClose?: () => void
 }
 
 type ContactWithReaction = T.Contact & {
@@ -38,7 +42,10 @@ export default function ReactionsDialog({
       <DialogHeader title={tx('reactions')} />
       <DialogBody>
         <DialogContent>
-          <ReactionsDialogList reactionsByContact={reactionsByContact} />
+          <ReactionsDialogList
+            reactionsByContact={reactionsByContact}
+            onClose={onClose}
+          />
         </DialogContent>
       </DialogBody>
       <DialogFooter>
@@ -50,9 +57,10 @@ export default function ReactionsDialog({
   )
 }
 
-function ReactionsDialogList({ reactionsByContact }: Props) {
+function ReactionsDialogList({ reactionsByContact, onClose }: Props) {
   const accountId = selectedAccountId()
   const [contacts, setContacts] = useState<ContactWithReaction[]>([])
+  const openViewProfileDialog = useOpenViewProfileDialog({ onAction: onClose })
 
   useEffect(() => {
     const resolveContacts = async () => {
@@ -84,16 +92,25 @@ function ReactionsDialogList({ reactionsByContact }: Props) {
   return (
     <ul className={styles.reactionsDialogList}>
       {contacts.map(contact => {
+        const notFromSelf = accountId !== contact.id
         return (
-          <li key={contact.id} className={styles.reactionsDialogListItem}>
+          <li
+            key={contact.id}
+            className={classNames(styles.reactionsDialogListItem, {
+              [styles.reactionsDialogListClickable]: notFromSelf,
+            })}
+            onClick={() => {
+              if (notFromSelf) {
+                openViewProfileDialog(accountId, contact.id)
+              }
+            }}
+            role='button'
+          >
             <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,14 @@
   align-items: center;
   display: flex;
   justify-content: space-between;
+  border-radius: 10px;
+}
+
+.reactionsDialogListClickable {
+  cursor: pointer;
+  &:hover {
+    background-color: var(--chatListItemBgHover);
+  }
 }
 
 .reactionsDialogAvatar {

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

@@ -62,9 +62,10 @@ export default function ViewProfile(
   props: {
     contact: T.Contact
     onBack?: () => void
+    onAction?: () => void
   } & DialogProps
 ) {
-  const { onClose, onBack } = props
+  const { onClose, onBack, onAction } = props
 
   const accountId = selectedAccountId()
   const tx = useTranslationFunction()
@@ -110,7 +111,11 @@ export default function ViewProfile(
         onClickBack={onBack}
       />
       <DialogBody className={styles.viewProfileDialogBody}>
-        <ViewProfileInner contact={contact} onClose={onClose} />
+        <ViewProfileInner
+          contact={contact}
+          onClose={onClose}
+          onAction={onAction}
+        />
       </DialogBody>
     </Dialog>
   )
@@ -119,9 +124,11 @@ export default function ViewProfile(
 export function ViewProfileInner({
   contact,
   onClose,
+  onAction,
 }: {
   contact: T.Contact
   onClose: () => void
+  onAction?: () => void
 }) {
   const accountId = selectedAccountId()
   const tx = useTranslationFunction()
@@ -142,6 +149,7 @@ export function ViewProfileInner({
 
   const onChatClick = (chatId: number) => {
     selectChat(accountId, chatId)
+    onAction && onAction()
     onClose()
   }
   const onSendMessage = async () => {

src/renderer/hooks/dialog/useOpenViewProfileDialog.ts

@@ -4,14 +4,16 @@ import ViewProfile from '../../components/dialogs/ViewProfile'
 import useDialog from './useDialog'
 import { BackendRemote } from '../../backend-com'
 
-export default function useOpenViewProfileDialog() {
+export default function useOpenViewProfileDialog(props?: {
+  onAction?: () => void
+}) {
   const { openDialog } = useDialog()
 
   return useCallback(
     async (accountId: number, contactId: number) => {
       const contact = await BackendRemote.rpc.getContact(accountId, contactId)
-      openDialog(ViewProfile, { contact })
+      openDialog(ViewProfile, { contact, onAction: props?.onAction })
     },
-    [openDialog]
+    [openDialog, props?.onAction]
   )
 }