fix: remove options menu from convo header

in favour of right panel

stylesheets/_session_conversation.scss

@@ -40,14 +40,6 @@
 }
 
 .conversation-header {
-  &--items-wrapper {
-    display: flex;
-    flex-grow: 1;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-  }
-
   .message-selection-overlay {
     position: absolute;
     display: flex;

ts/components/conversation/header/ConversationHeader.tsx

@@ -8,12 +8,11 @@ import {
 
 import { closeMessageDetailsView, openRightPanel } from '../../../state/ducks/conversations';
 
+import { useSelectedConversationKey } from '../../../state/selectors/selectedConversation';
 import { Flex } from '../../basic/Flex';
-import { ConversationHeaderMenu } from '../../menu/ConversationHeaderMenu';
-import { AvatarHeader, BackButton, CallButton, TripleDotsMenu } from './ConversationHeaderItems';
+import { AvatarHeader, BackButton, CallButton } from './ConversationHeaderItems';
 import { SelectionOverlay } from './ConversationHeaderSelectionOverlay';
 import { ConversationHeaderTitle } from './ConversationHeaderTitle';
-import { useSelectedConversationKey } from '../../../state/selectors/selectedConversation';
 
 export const ConversationHeaderWithDetails = () => {
   const isSelectionMode = useSelector(isMessageSelectionMode);
@@ -25,18 +24,21 @@ export const ConversationHeaderWithDetails = () => {
     return null;
   }
 
-  const triggerId = 'conversation-header';
-
   return (
     <div className="module-conversation-header">
-      <div className="conversation-header--items-wrapper">
+      <Flex
+        container={true}
+        justifyContent={isMessageDetailOpened ? 'space-between' : 'flex-end'}
+        alignItems="center"
+        width="100%"
+        flexGrow={1}
+      >
         <BackButton
           onGoBack={() => {
             dispatch(closeMessageDetailsView());
           }}
           showBackButton={isMessageDetailOpened}
         />
-        <TripleDotsMenu triggerId={triggerId} showBackButton={isMessageDetailOpened} />
         <ConversationHeaderTitle />
 
         {!isSelectionMode && (
@@ -57,9 +59,7 @@ export const ConversationHeaderWithDetails = () => {
             />
           </Flex>
         )}
-
-        <ConversationHeaderMenu triggerId={triggerId} />
-      </div>
+      </Flex>
 
       {isSelectionMode && <SelectionOverlay />}
     </div>

ts/components/conversation/header/ConversationHeaderItems.tsx

@@ -1,12 +1,8 @@
-import React, { KeyboardEvent } from 'react';
-import { contextMenu, TriggerEvent } from 'react-contexify';
+import React from 'react';
 import { useSelector } from 'react-redux';
-import styled from 'styled-components';
 import { callRecipient } from '../../../interactions/conversationInteractions';
 import { getHasIncomingCall, getHasOngoingCall } from '../../../state/selectors/call';
 
-import { Avatar, AvatarSize } from '../../avatar/Avatar';
-import { SessionIconButton } from '../../icon';
 import {
   useSelectedConversationKey,
   useSelectedIsActive,
@@ -15,49 +11,8 @@ import {
   useSelectedIsPrivate,
   useSelectedIsPrivateFriend,
 } from '../../../state/selectors/selectedConversation';
-
-const TripleDotContainer = styled.div`
-  user-select: none;
-  flex-grow: 0;
-  flex-shrink: 0;
-`;
-export const TripleDotsMenu = (props: { triggerId: string; showBackButton: boolean }) => {
-  const { showBackButton } = props;
-
-  const isPrivateFriend = useSelectedIsPrivateFriend();
-  const isPrivate = useSelectedIsPrivate();
-  if (showBackButton) {
-    return null;
-  }
-  if (isPrivate && !isPrivateFriend) {
-    return null;
-  }
-
-  const handleOnClick = (e: TriggerEvent) => {
-    contextMenu.show({
-      id: props.triggerId,
-      event: e,
-    });
-  };
-
-  const handleOnKeyPress = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === 'Enter') {
-      e.stopPropagation();
-      handleOnClick(e);
-    }
-  };
-  return (
-    <TripleDotContainer
-      role="button"
-      onKeyPress={handleOnKeyPress}
-      onClick={handleOnClick}
-      tabIndex={0}
-      data-testid="three-dots-conversation-options"
-    >
-      <SessionIconButton iconType="ellipses" iconSize="medium" />
-    </TripleDotContainer>
-  );
-};
+import { Avatar, AvatarSize } from '../../avatar/Avatar';
+import { SessionIconButton } from '../../icon';
 
 export const AvatarHeader = (props: {
   pubkey: string;

ts/components/menu/ConversationHeaderMenu.tsx

@@ -1,84 +0,0 @@
-import React from 'react';
-import { Menu } from 'react-contexify';
-import { useSelector } from 'react-redux';
-import { isSearching } from '../../state/selectors/search';
-import {
-  useSelectedConversationKey,
-  useSelectedIsPrivate,
-  useSelectedIsPrivateFriend,
-} from '../../state/selectors/selectedConversation';
-
-import { ContextConversationProvider } from '../leftpane/conversation-list-item/ConvoIdContext';
-import { SessionContextMenuContainer } from '../SessionContextMenuContainer';
-import {
-  AddModeratorsMenuItem,
-  BanMenuItem,
-  BlockMenuItem,
-  ChangeNicknameMenuItem,
-  ClearNicknameMenuItem,
-  CopyMenuItem,
-  DeleteGroupOrCommunityMenuItem,
-  DeleteMessagesMenuItem,
-  DeletePrivateContactMenuItem,
-  DeletePrivateConversationMenuItem,
-  InviteContactMenuItem,
-  LeaveGroupMenuItem,
-  MarkAllReadMenuItem,
-  NotificationForConvoMenuItem,
-  RemoveModeratorsMenuItem,
-  ShowUserDetailsMenuItem,
-  UnbanMenuItem,
-  UpdateGroupNameMenuItem,
-} from './Menu';
-
-export type PropsConversationHeaderMenu = {
-  triggerId: string;
-};
-
-export const ConversationHeaderMenu = (props: PropsConversationHeaderMenu) => {
-  const { triggerId } = props;
-
-  const convoId = useSelectedConversationKey();
-  const isPrivateFriend = useSelectedIsPrivateFriend();
-  const isPrivate = useSelectedIsPrivate();
-  const isSearchingMode = useSelector(isSearching);
-
-  if (!convoId) {
-    throw new Error('convoId must be set for a header to be visible!');
-  }
-  if (isSearchingMode) {
-    return null;
-  }
-
-  // we do not want the triple dots menu at all if this is not a friend at all
-  if (isPrivate && !isPrivateFriend) {
-    return null;
-  }
-
-  return (
-    <ContextConversationProvider value={convoId}>
-      <SessionContextMenuContainer>
-        <Menu id={triggerId} animation="fade">
-          <NotificationForConvoMenuItem />
-          <BlockMenuItem />
-          <CopyMenuItem />
-          <MarkAllReadMenuItem />
-          <ChangeNicknameMenuItem />
-          <ClearNicknameMenuItem />
-          <AddModeratorsMenuItem />
-          <RemoveModeratorsMenuItem />
-          <BanMenuItem />
-          <UnbanMenuItem />
-          <UpdateGroupNameMenuItem />
-          <LeaveGroupMenuItem />
-          <InviteContactMenuItem />
-          <DeleteMessagesMenuItem />
-          <DeletePrivateConversationMenuItem />
-          <DeletePrivateContactMenuItem />
-          <DeleteGroupOrCommunityMenuItem />
-          <ShowUserDetailsMenuItem />
-        </Menu>
-      </SessionContextMenuContainer>
-    </ContextConversationProvider>
-  );
-};