render message for empty list

net/web/src/session/cardSelect/CardSelect.jsx

@@ -4,7 +4,7 @@ import { SelectItem } from './selectItem/SelectItem';
 import { useCardSelect } from './useCardSelect.hook';
 import { Logo } from 'logo/Logo';
 
-export function CardSelect({ filter, unknown, select, selected, markup }) {
+export function CardSelect({ filter, unknown, select, selected, markup, emptyMessage }) {
 
   const { state } = useCardSelect(filter);
 
@@ -17,6 +17,9 @@ export function CardSelect({ filter, unknown, select, selected, markup }) {
           )}
         />
       )}
+      { !state.cards?.length && (
+        <div class="empty">{ emptyMessage }</div>
+      )}
       { unknown > 0 && (
         <div class="unknown">
           <Logo img="avatar" width={32} height={32} radius={8} />

net/web/src/session/cardSelect/CardSelect.styled.js

@@ -1,10 +1,20 @@
 import styled from 'styled-components';
+import Colors from 'constants/Colors';
 
 export const CardSelectWrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
 
+  .empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-style: italic;
+    color: ${Colors.grey};
+    padding-top: 16px;
+  }
+
   .unknown {
     height: 48px;
     width: 100%;

net/web/src/session/cards/Cards.jsx

@@ -42,10 +42,15 @@ export function Cards({ closeCards, openContact, openListing }) {
         )}
       </div>
       <div class="view">
-        <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.cards} gutter="0"
+        { state.cards.length > 0 && (
-          renderItem={item => (
+          <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.cards} gutter="0"
-            <CardItem item={item} open={openContact} />
+            renderItem={item => (
-          )} />
+              <CardItem item={item} open={openContact} />
+            )} />
+        )}
+        { state.cards.length == 0 && (
+          <div class="empty">No Contacts</div>
+        )}
       </div>
       { state.display !== 'small' && (
         <div class="bar">

net/web/src/session/cards/Cards.styled.js

@@ -12,6 +12,15 @@ export const CardsWrapper = styled.div`
     min-height: 0;
     overflow: auto;
     flex-grow: 1;
+
+    .empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-style: italic;
+      color: ${Colors.grey};
+      height: 100%;
+    }
   }
   
   .search {

net/web/src/session/channels/Channels.jsx

@@ -47,11 +47,16 @@ export function Channels({ open, active }) {
         )}
       </div>
       <div class="view">
-        <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.channels} gutter="0"
+        { state.channels.length > 0 && (
-          renderItem={item => (
+          <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.channels} gutter="0"
-            <ChannelItem item={item} openChannel={open} active={active} />
+            renderItem={item => (
-          )}
+              <ChannelItem item={item} openChannel={open} active={active} />
-        />
+            )}
+          />
+        )}
+        { state.channels.length == 0 && (
+          <div class="empty">No Topics</div>
+        )}
       </div>
       { state.display !== 'small' && (
         <div class="bar">

net/web/src/session/channels/Channels.styled.js

@@ -12,6 +12,15 @@ export const ChannelsWrapper = styled.div`
     min-height: 0;
     overflow: auto;
     flex-grow: 1;
+
+    .empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-style: italic;
+      color: ${Colors.grey};
+      height: 100%;
+    }
   }
  
   .search {

net/web/src/session/channels/addChannel/AddChannel.jsx

@@ -18,6 +18,7 @@ export function AddChannel({ state, actions }) {
         <CardSelect
           select={actions.onMember}
           selected={state.members}
+          emptyMessage={'No Connected Contacts'}
           filter={(card) => card?.data?.cardDetail?.status === 'connected'} 
           unknown={0}
         />

net/web/src/session/listing/Listing.jsx

@@ -42,10 +42,15 @@ export function Listing({ closeListing, openContact }) {
         </div>
       </div>
       <div class="view">
-        <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.contacts} gutter="0"
+        { state.contacts.length > 0 && (
-          renderItem={item => (
+          <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.contacts} gutter="0"
-            <ListingItem item={item} node={state.node} open={openContact} />
+            renderItem={item => (
-          )} />
+              <ListingItem item={item} node={state.node} open={openContact} />
+            )} />
+        )}
+        { state.contacts.length == 0 && (
+          <div class="empty">No Contacts</div>
+        )}
       </div>
     </ListingWrapper>
   );

net/web/src/session/listing/Listing.styled.js

@@ -12,6 +12,15 @@ export const ListingWrapper = styled.div`
     min-height: 0;
     overflow: auto;
     flex-grow: 1;
+
+    .empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-style: italic;
+      color: ${Colors.grey};
+      height: 100%;
+    }
   }
   
   .search {