fix: allow right click on contactrow

Author: Bilb

ts/components/leftpane/overlay/choose-action/ContactRow.tsx

@@ -1,8 +1,18 @@
+import { createPortal } from 'react-dom';
+import { contextMenu } from 'react-contexify';
+import type { ReactNode } from 'react';
 import styled, { CSSProperties } from 'styled-components';
+
 import { openConversationWithMessages } from '../../../../state/ducks/conversations';
 import { Avatar, AvatarSize } from '../../../avatar/Avatar';
 import { useShowUserDetailsCbFromConversation } from '../../../menuAndSettingsHooks/useShowUserDetailsCb';
 import { ContactName } from '../../../conversation/ContactName/ContactName';
+import { MemoConversationListItemContextMenu } from '../../../menu/ConversationListItemContextMenu';
+import { ContextConversationProvider } from '../../../../contexts/ConvoIdContext';
+
+const Portal = ({ children }: { children: ReactNode }) => {
+  return createPortal(children, document.querySelector('.inbox.index') as Element);
+};
 
 type Props = { id: string; displayName?: string; style: CSSProperties };
 
@@ -56,23 +66,35 @@ export const ContactRowBreak = (props: { char: string; key: string; style: CSSPr
 
 export const ContactRow = (props: Props) => {
   const { id, style } = props;
+  const triggerId = `contact-row-${id}-ctxmenu`;
 
   return (
-    <StyledRowContainer
-      style={style}
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises
-      onClick={async () => openConversationWithMessages({ conversationKey: id, messageId: null })}
-    >
-      <AvatarItem id={id} />
-      <ContactName
-        data-testid="module-conversation__user__profile-name"
-        pubkey={id}
-        contactNameContext="contact-list-row"
-        extraNameStyle={{
-          color: 'var(--text-primary-color)',
-          fontSize: 'var(--font-size-lg)',
+    <ContextConversationProvider value={id}>
+      <StyledRowContainer
+        style={style}
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        onClick={async () => openConversationWithMessages({ conversationKey: id, messageId: null })}
+        onContextMenu={e => {
+          contextMenu.show({
+            id: triggerId,
+            event: e,
+          });
         }}
-      />
-    </StyledRowContainer>
+      >
+        <AvatarItem id={id} />
+        <ContactName
+          data-testid="module-conversation__user__profile-name"
+          pubkey={id}
+          contactNameContext="contact-list-row"
+          extraNameStyle={{
+            color: 'var(--text-primary-color)',
+            fontSize: 'var(--font-size-lg)',
+          }}
+        />
+        <Portal>
+          <MemoConversationListItemContextMenu triggerId={triggerId} />
+        </Portal>
+      </StyledRowContainer>
+    </ContextConversationProvider>
   );
 };