add a show user details option in the menu

Fixes #1971

_locales/en/messages.json

@@ -422,6 +422,7 @@
   "unpinConversation": "Unpin Conversation",
   "pinConversationLimitTitle": "Pinned conversations limit",
   "pinConversationLimitToastDescription": "You can only pin $number$ conversations",
+  "showUserDetails": "Show User Details",
   "latestUnreadIsAbove": "First unread message is above",
   "sendRecoveryPhraseTitle": "Sending Recovery Phrase",
   "sendRecoveryPhraseMessage": "You are attempting to send your recovery phrase which can be used to access your account. Are you sure you want to send this message?",

ts/components/ConversationListItem.tsx

@@ -356,6 +356,9 @@ const ConversationListItem = (props: Props) => {
           left={!!left}
           type={type}
           currentNotificationSetting={currentNotificationSetting || 'all'}
+          avatarPath={avatarPath || null}
+          name={name}
+          profileName={profileName}
         />
       </Portal>
     </div>

ts/components/conversation/ConversationHeader.tsx

@@ -360,6 +360,9 @@ export const ConversationHeaderWithDetails = () => {
           left={left}
           hasNickname={hasNickname}
           currentNotificationSetting={currentNotificationSetting}
+          avatarPath={avatarPath}
+          name={name}
+          profileName={profileName}
         />
       </div>
 

ts/components/dialog/UserDetailsDialog.tsx

@@ -6,6 +6,7 @@ import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
 import useKey from 'react-use/lib/useKey';
 import { ConversationTypeEnum } from '../../models/conversation';
 import { getConversationController } from '../../session/conversations';
+import { ToastUtils } from '../../session/utils';
 import { openConversationWithMessages } from '../../state/ducks/conversations';
 import { updateUserDetailsModal } from '../../state/ducks/modalDialog';
 import { Avatar, AvatarSize } from '../Avatar';
@@ -77,6 +78,7 @@ export const UserDetailsDialog = (props: Props) => {
           buttonColor={SessionButtonColor.Primary}
           onClick={() => {
             copyToClipboard(props.conversationId);
+            ToastUtils.pushCopiedToClipBoard();
           }}
         />
         <SessionButton

ts/components/session/menu/ConversationHeaderMenu.tsx

@@ -15,6 +15,7 @@ import {
   getNotificationForConvoMenuItem,
   getPinConversationMenuItem,
   getRemoveModeratorsMenuItem,
+  getShowUserDetailsMenuItem,
   getStartCallMenuItem,
   getUpdateGroupNameMenuItem,
 } from './Menu';
@@ -34,6 +35,9 @@ export type PropsConversationHeaderMenu = {
   isPrivate: boolean;
   isBlocked: boolean;
   hasNickname: boolean;
+  name: string | undefined;
+  profileName: string | undefined;
+  avatarPath: string | null;
 };
 
 const ConversationHeaderMenu = (props: PropsConversationHeaderMenu) => {
@@ -50,7 +54,11 @@ const ConversationHeaderMenu = (props: PropsConversationHeaderMenu) => {
     left,
     hasNickname,
     currentNotificationSetting,
+    name,
+    profileName,
+    avatarPath,
   } = props;
+  const userName = name || profileName || conversationId;
 
   return (
     <Menu id={triggerId} animation={animation.fade}>
@@ -75,9 +83,9 @@ const ConversationHeaderMenu = (props: PropsConversationHeaderMenu) => {
       {getRemoveModeratorsMenuItem(weAreAdmin, isPublic, isKickedFromGroup, conversationId)}
       {getUpdateGroupNameMenuItem(weAreAdmin, isKickedFromGroup, left, conversationId)}
       {getLeaveGroupMenuItem(isKickedFromGroup, left, isGroup, isPublic, conversationId)}
-      {/* TODO: add delete group */}
       {getInviteContactMenuItem(isGroup, isPublic, conversationId)}
       {getDeleteContactMenuItem(isGroup, isPublic, left, isKickedFromGroup, conversationId)}
+      {getShowUserDetailsMenuItem(isPrivate, conversationId, avatarPath, userName)}
     </Menu>
   );
 };

ts/components/session/menu/ConversationListItemContextMenu.tsx

@@ -18,6 +18,7 @@ import {
   getMarkAllReadMenuItem,
   getNotificationForConvoMenuItem,
   getPinConversationMenuItem,
+  getShowUserDetailsMenuItem,
 } from './Menu';
 
 export type PropsContextConversationItem = {
@@ -33,6 +34,9 @@ export type PropsContextConversationItem = {
   left: boolean;
   theme?: any;
   currentNotificationSetting: ConversationNotificationSettingType;
+  name: string | undefined;
+  profileName: string | undefined;
+  avatarPath: string | null;
 };
 
 const ConversationListItemContextMenu = (props: PropsContextConversationItem) => {
@@ -48,9 +52,14 @@ const ConversationListItemContextMenu = (props: PropsContextConversationItem) =>
     isKickedFromGroup,
     currentNotificationSetting,
     isPrivate,
+    name,
+    profileName,
+    avatarPath,
   } = props;
 
   const isGroup = type === 'group';
+  const userName = name || profileName || conversationId;
+
   return (
     <Menu id={triggerId} animation={animation.fade}>
       {getNotificationForConvoMenuItem({
@@ -71,6 +80,7 @@ const ConversationListItemContextMenu = (props: PropsContextConversationItem) =>
       {getInviteContactMenuItem(isGroup, isPublic, conversationId)}
       {getDeleteContactMenuItem(isGroup, isPublic, left, isKickedFromGroup, conversationId)}
       {getLeaveGroupMenuItem(isKickedFromGroup, left, isGroup, isPublic, conversationId)}
+      {getShowUserDetailsMenuItem(isPrivate, conversationId, avatarPath, userName)}
     </Menu>
   );
 };

ts/components/session/menu/Menu.tsx

@@ -12,7 +12,11 @@ import {
   ConversationNotificationSettingType,
 } from '../../../models/conversation';
 import { useDispatch, useSelector } from 'react-redux';
-import { changeNickNameModal, updateConfirmModal } from '../../../state/ducks/modalDialog';
+import {
+  changeNickNameModal,
+  updateConfirmModal,
+  updateUserDetailsModal,
+} from '../../../state/ducks/modalDialog';
 import { SectionType } from '../../../state/ducks/section';
 import { getConversationController } from '../../../session/conversations';
 import {
@@ -241,6 +245,35 @@ export function getLeaveGroupMenuItem(
   return null;
 }
 
+export function getShowUserDetailsMenuItem(
+  isPrivate: boolean | undefined,
+  conversationId: string,
+  avatarPath: string | null,
+  userName: string
+): JSX.Element | null {
+  const dispatch = useDispatch();
+
+  if (isPrivate) {
+    return (
+      <Item
+        onClick={() => {
+          dispatch(
+            updateUserDetailsModal({
+              conversationId: conversationId,
+              userName,
+              authorAvatarPath: avatarPath,
+            })
+          );
+        }}
+      >
+        {window.i18n('showUserDetails')}
+      </Item>
+    );
+  }
+
+  return null;
+}
+
 export function getUpdateGroupNameMenuItem(
   isAdmin: boolean | undefined,
   isKickedFromGroup: boolean | undefined,