From cd3bc727c2ca3e709b0c4bf310025177235830b4 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Wed, 24 Apr 2024 15:29:53 +1000
Subject: [PATCH] feat: updated ContactsListWithBreaks to show text when empty

---
 .../choose-action/ContactsListWithBreaks.tsx  | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
index 5e10e6b7f..5771e90be 100644
--- a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
+++ b/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>
   );
 };