feat: updated ContactsListWithBreaks to show text when empty

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

@@ -10,8 +10,8 @@ import {
 } from '../../../../state/selectors/conversations';
 import { leftPaneListWidth } from '../../LeftPane';
 import { StyledLeftPaneList } from '../../LeftPaneList';
+import { StyledChooseActionTitle } from './ActionRow';
 import { ContactRow, ContactRowBreak } from './ContactRow';
-import { StyledChooseActionTitle } from './OverlayChooseAction';
 
 const StyledContactSection = styled.div`
   display: flex;
@@ -38,6 +38,15 @@ const StyledContactSection = styled.div`
   }
 `;
 
+const StyledContactsTitle = styled(StyledChooseActionTitle)`
+  padding: var(--margins-xs) var(--margins-lg);
+`;
+
+const StyledContactsEmpty = styled.div`
+  color: var(--text-secondary-color);
+  padding: var(--margins-xs) var(--margins-lg);
+`;
+
 const renderRow = (props: ListRowProps) => {
   const { index, key, style, parent } = props;
 
@@ -108,22 +117,17 @@ const ContactListItemSection = () => {
   );
 };
 
-const ContactsTitle = () => {
+export const ContactsListWithBreaks = () => {
   const contactsCount = useSelector(getDirectContactsCount);
-  if (contactsCount <= 0) {
-    return null;
-  }
-
-  return (
-    <StyledChooseActionTitle tabIndex={0}>{window.i18n('contactsHeader')}</StyledChooseActionTitle>
-  );
-};
 
-export const ContactsListWithBreaks = () => {
   return (
     <StyledContactSection>
-      <ContactsTitle />
-      <ContactListItemSection />
+      <StyledContactsTitle tabIndex={0}>{window.i18n('contactsHeader')}</StyledContactsTitle>
+      {contactsCount > 0 ? (
+        <ContactListItemSection />
+      ) : (
+        <StyledContactsEmpty>{window.i18n('contactsNone')}</StyledContactsEmpty>
+      )}
     </StyledContactSection>
   );
 };