Adding empty state for request list.

_locales/en/messages.json

@@ -472,5 +472,6 @@
   "respondingToRequestWarning": "Sending a message to this user will automatically accept their message request and reveal your Session ID.",
   "hideRequestBanner": "Hide Message Request Banner",
   "openMessageRequestInbox": "View Message Requests",
+  "noMessageRequestsPending": "No pending message requests",
   "openMessageRequestInboxDescription": "View your Message Request inbox"
 }

ts/components/leftpane/overlay/OverlayMessageRequest.tsx

@@ -57,14 +57,16 @@ export const OverlayMessageRequest = () => {
   function closeOverlay() {
     dispatch(setOverlayMode(undefined));
   }
+  const hasRequests = useSelector(getConversationRequests).length > 0;
 
   const buttonText = window.i18n('clearAll');
 
   return (
     <div className="module-left-pane-overlay">
+      {hasRequests ? (
+        <>
           <MessageRequestList />
           <SpacerLG />
-
           <SessionButton
             buttonColor={SessionButtonColor.Danger}
             buttonType={SessionButtonType.BrandOutline}
@@ -73,10 +75,23 @@ export const OverlayMessageRequest = () => {
               void handleBlockAllRequestsClick();
             }}
           />
+        </>
+      ) : (
+        <>
+          <SpacerLG />
+          <MessageRequestListPlaceholder>
+            {window.i18n('noMessageRequestsPending')}
+          </MessageRequestListPlaceholder>
+        </>
+      )}
     </div>
   );
 };
 
+const MessageRequestListPlaceholder = styled.div`
+  color: var(--color-text);
+`;
+
 const MessageRequestListContainer = styled.div`
   width: 100%;
   overflow-y: auto;

ts/types/LocalizerKeys.ts

@@ -475,4 +475,5 @@ export type LocalizerKeys =
   | 'openMessageRequestInbox'
   | 'openMessageRequestInboxDescription'
   | 'hideRequestBanner'
+  | 'noMessageRequestsPending'
   | 'reportIssue';