Shorten/Reorder MessageContextMenu items to match mobile

_locales/en/messages.json

@@ -2400,10 +2400,30 @@
     "messageformat": "Delete message for everyone",
     "description": "(deleted 04/06/2023) Shown on the drop-down menu for an individual message, deletes single message for everyone"
   },
+  "icu:MessageContextMenu__reply": {
+    "messageformat": "Reply",
+    "description": "Shown on the drop-down menu for an individual message when there isnt room for a dedicated button, focuses the composer with a reply to the current message"
+  },
+  "icu:MessageContextMenu__react": {
+    "messageformat": "React",
+    "description": "Shown on the drop-down menu for an individual message when there isnt room for a dedicated button, opens the react picker for the current message"
+  },
+  "icu:MessageContextMenu__download": {
+    "messageformat": "Download",
+    "description": "Shown on the drop-down menu for an individual message when there isnt room for a dedicated button and when there's only a single attachment, downloads an attachment"
+  },
   "icu:MessageContextMenu__deleteMessage": {
-    "messageformat": "Delete message",
+    "messageformat": "Delete",
     "description": "Show on the drop-down menu for an individual message, opens a modal to select if you want to 'delete for me' or 'delete for everyone'"
   },
+  "icu:MessageContextMenu__forward": {
+    "messageformat": "Forward",
+    "description": "Show on the drop-down menu for an individual message, opens a modal to forward a message"
+  },
+  "icu:MessageContextMenu__info": {
+    "messageformat": "Info",
+    "description": "Shown on the drop-down menu for an individual message, takes you to message detail screen"
+  },
   "deleteMessages": {
     "message": "Delete",
     "description": "(deleted 03/29/2023) Menu item for deleting messages, title case."

ts/components/conversation/TimelineMessage.tsx

@@ -587,7 +587,7 @@ const MessageContextMenu = ({
               }}
               onClick={onDownload}
             >
-              {i18n('icu:downloadAttachment')}
+              {i18n('icu:MessageContextMenu__download')}
             </MenuItem>
           )}
           {onReplyToMessage && (
@@ -603,7 +603,7 @@ const MessageContextMenu = ({
                 onReplyToMessage();
               }}
             >
-              {i18n('icu:replyToMessage')}
+              {i18n('icu:MessageContextMenu__reply')}
             </MenuItem>
           )}
           {onReact && (
@@ -619,11 +619,54 @@ const MessageContextMenu = ({
                 onReact();
               }}
             >
-              {i18n('icu:reactToMessage')}
+              {i18n('icu:MessageContextMenu__react')}
             </MenuItem>
           )}
         </>
       )}
+      {onForward && (
+        <MenuItem
+          attributes={{
+            className:
+              'module-message__context--icon module-message__context__forward-message',
+          }}
+          onClick={(event: React.MouseEvent) => {
+            event.stopPropagation();
+            event.preventDefault();
+
+            onForward();
+          }}
+        >
+          {i18n('icu:MessageContextMenu__forward')}
+        </MenuItem>
+      )}
+      {onEdit && (
+        <MenuItem
+          attributes={{
+            className:
+              'module-message__context--icon module-message__context__edit-message',
+          }}
+          onClick={(event: React.MouseEvent) => {
+            event.stopPropagation();
+            event.preventDefault();
+
+            onEdit();
+          }}
+        >
+          {i18n('icu:edit')}
+        </MenuItem>
+      )}
+      <MenuItem
+        attributes={{
+          className:
+            'module-message__context--icon module-message__context__select',
+        }}
+        onClick={() => {
+          onSelect();
+        }}
+      >
+        {i18n('icu:MessageContextMenu__select')}
+      </MenuItem>
       <MenuItem
         attributes={{
           className:
@@ -636,18 +679,21 @@ const MessageContextMenu = ({
           onMoreInfo();
         }}
       >
-        {i18n('icu:moreInfo')}
+        {i18n('icu:MessageContextMenu__info')}
       </MenuItem>
       <MenuItem
         attributes={{
           className:
-            'module-message__context--icon module-message__context__select',
+            'module-message__context--icon module-message__context__delete-message',
         }}
-        onClick={() => {
+        onClick={(event: React.MouseEvent) => {
-          onSelect();
+          event.stopPropagation();
+          event.preventDefault();
+
+          onDeleteMessage();
         }}
       >
-        {i18n('icu:MessageContextMenu__select')}
+        {i18n('icu:MessageContextMenu__deleteMessage')}
       </MenuItem>
       {onRetryMessageSend && (
         <MenuItem
@@ -681,52 +727,6 @@ const MessageContextMenu = ({
           {i18n('icu:retryDeleteForEveryone')}
         </MenuItem>
       )}
-      {onForward && (
-        <MenuItem
-          attributes={{
-            className:
-              'module-message__context--icon module-message__context__forward-message',
-          }}
-          onClick={(event: React.MouseEvent) => {
-            event.stopPropagation();
-            event.preventDefault();
-
-            onForward();
-          }}
-        >
-          {i18n('icu:forwardMessage')}
-        </MenuItem>
-      )}
-      {onEdit && (
-        <MenuItem
-          attributes={{
-            className:
-              'module-message__context--icon module-message__context__edit-message',
-          }}
-          onClick={(event: React.MouseEvent) => {
-            event.stopPropagation();
-            event.preventDefault();
-
-            onEdit();
-          }}
-        >
-          {i18n('icu:edit')}
-        </MenuItem>
-      )}
-      <MenuItem
-        attributes={{
-          className:
-            'module-message__context--icon module-message__context__delete-message',
-        }}
-        onClick={(event: React.MouseEvent) => {
-          event.stopPropagation();
-          event.preventDefault();
-
-          onDeleteMessage();
-        }}
-      >
-        {i18n('icu:MessageContextMenu__deleteMessage')}
-      </MenuItem>
     </ContextMenu>
   );