Context menu for left pane list items

ts/components/conversation/MessageRequestActions.tsx

@@ -15,6 +15,7 @@ import type { LocalizerType } from '../../types/Util';
 
 export type Props = {
   i18n: LocalizerType;
+  isHidden?: boolean;
 } & Omit<ContactNameProps, 'module'> &
   Omit<
     MessageRequestActionsConfirmationProps,
@@ -30,6 +31,7 @@ export function MessageRequestActions({
   deleteConversation,
   firstName,
   i18n,
+  isHidden,
   isBlocked,
   title,
 }: Props): JSX.Element {
@@ -44,6 +46,43 @@ export function MessageRequestActions({
     </strong>
   );
 
+  let message: JSX.Element | undefined;
+  if (conversationType === 'direct') {
+    if (isBlocked) {
+      message = (
+        <Intl
+          i18n={i18n}
+          id="icu:MessageRequests--message-direct-blocked"
+          components={{ name }}
+        />
+      );
+    } else if (isHidden) {
+      message = (
+        <Intl
+          i18n={i18n}
+          id="icu:MessageRequests--message-direct-hidden"
+          components={{ name }}
+        />
+      );
+    } else {
+      message = (
+        <Intl
+          i18n={i18n}
+          id="icu:MessageRequests--message-direct"
+          components={{ name }}
+        />
+      );
+    }
+  } else if (conversationType === 'group') {
+    if (isBlocked) {
+      message = (
+        <Intl i18n={i18n} id="icu:MessageRequests--message-group-blocked" />
+      );
+    } else {
+      message = <Intl i18n={i18n} id="icu:MessageRequests--message-group" />;
+    }
+  }
+
   return (
     <>
       {mrState !== MessageRequestState.default ? (
@@ -61,28 +100,7 @@ export function MessageRequestActions({
         />
       ) : null}
       <div className="module-message-request-actions">
-        <p className="module-message-request-actions__message">
-          {conversationType === 'direct' && isBlocked && (
-            <Intl
-              i18n={i18n}
-              id="icu:MessageRequests--message-direct-blocked"
-              components={{ name }}
-            />
-          )}
-          {conversationType === 'direct' && !isBlocked && (
-            <Intl
-              i18n={i18n}
-              id="icu:MessageRequests--message-direct"
-              components={{ name }}
-            />
-          )}
-          {conversationType === 'group' && isBlocked && (
-            <Intl i18n={i18n} id="icu:MessageRequests--message-group-blocked" />
-          )}
-          {conversationType === 'group' && !isBlocked && (
-            <Intl i18n={i18n} id="icu:MessageRequests--message-group" />
-          )}
-        </p>
+        <p className="module-message-request-actions__message">{message}</p>
         <div className="module-message-request-actions__buttons">
           <Button
             onClick={() => {

ts/components/conversation/TimelineItem.stories.tsx

@@ -153,6 +153,10 @@ export function Notification(): JSX.Element {
     {
       type: 'chatSessionRefreshed',
     },
+    {
+      type: 'contactRemovedNotification',
+      data: null,
+    },
     {
       type: 'safetyNumberNotification',
       data: {

ts/components/conversation/TimelineItem.tsx

@@ -50,6 +50,7 @@ import type { PropsType as PaymentEventNotificationPropsType } from './PaymentEv
 import { PaymentEventNotification } from './PaymentEventNotification';
 import type { PropsDataType as ConversationMergeNotificationPropsType } from './ConversationMergeNotification';
 import { ConversationMergeNotification } from './ConversationMergeNotification';
+import { SystemMessage } from './SystemMessage';
 import type { FullJSXType } from '../Intl';
 import { TimelineMessage } from './TimelineMessage';
 
@@ -81,6 +82,10 @@ type UniversalTimerNotificationType = {
   type: 'universalTimerNotification';
   data: null;
 };
+type ContactRemovedNotificationType = {
+  type: 'contactRemovedNotification';
+  data: null;
+};
 type ChangeNumberNotificationType = {
   type: 'changeNumberNotification';
   data: ChangeNumberNotificationProps;
@@ -137,6 +142,7 @@ export type TimelineItemType = (
   | SafetyNumberNotificationType
   | TimerNotificationType
   | UniversalTimerNotificationType
+  | ContactRemovedNotificationType
   | UnsupportedMessageType
   | VerificationNotificationType
   | PaymentEventType
@@ -266,6 +272,13 @@ export class TimelineItem extends React.PureComponent<PropsType> {
         );
       } else if (item.type === 'universalTimerNotification') {
         notification = renderUniversalTimerNotification();
+      } else if (item.type === 'contactRemovedNotification') {
+        notification = (
+          <SystemMessage
+            icon="info"
+            contents={i18n('icu:ContactRemovedNotification__text')}
+          />
+        );
       } else if (item.type === 'changeNumberNotification') {
         notification = (
           <ChangeNumberNotification