Chats: add empty chats message

app/soapbox/features/chats/components/chat_list.js

@@ -10,7 +10,7 @@ import { makeGetChat } from 'soapbox/selectors';
 const mapStateToProps = state => {
   const getChat = makeGetChat();
   return {
-    chats: state.get('chats').map(chat => getChat(state, chat.toJS())),
+    chats: state.get('chats').map(chat => getChat(state, chat.toJS())).toList(),
   };
 };
 
@@ -22,6 +22,7 @@ class ChatList extends ImmutablePureComponent {
     dispatch: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
     onClickChat: PropTypes.func,
+    emptyMessage: PropTypes.node,
   };
 
   componentDidMount() {
@@ -29,12 +30,15 @@ class ChatList extends ImmutablePureComponent {
   }
 
   render() {
-    const { chats } = this.props;
+    const { chats, emptyMessage } = this.props;
 
     return (
       <div className='chat-list'>
         <div className='chat-list__content'>
-          {chats.toList().map(chat => (
+          {chats.count() === 0 &&
+            <div className='empty-column-indicator'>{emptyMessage}</div>
+          }
+          {chats.map(chat => (
             <div key={chat.get('id')} className='chat-list-item'>
               <ChatListAccount
                 chat={chat}

app/soapbox/features/chats/components/chat_panes.js

@@ -54,18 +54,25 @@ class ChatPanes extends ImmutablePureComponent {
     const panes = panesData.get('panes');
     const mainWindow = panesData.get('mainWindow');
 
+    const mainWindowPane = (
+      <div className={`pane pane--main pane--${mainWindow}`}>
+        <div className='pane__header'>
+          <button className='pane__title' onClick={this.handleMainWindowToggle}>
+            <FormattedMessage id='chat_panels.main_window.title' defaultMessage='Chats' />
+          </button>
+        </div>
+        <div className='pane__content'>
+          <ChatList
+            onClickChat={this.handleClickChat}
+            emptyMessage={<FormattedMessage id='chat_panels.main_window.empty' defaultMessage="No chats found. To start a chat, visit a user's profile." />}
+          />
+        </div>
+      </div>
+    );
+
     return (
       <div className='chat-panes'>
-        <div className={`pane pane--main pane--${mainWindow}`}>
+        {mainWindowPane}
-          <div className='pane__header'>
-            <button className='pane__title' onClick={this.handleMainWindowToggle}>
-              <FormattedMessage id='chat_panels.main_window.title' defaultMessage='Chats' />
-            </button>
-          </div>
-          <div className='pane__content'>
-            <ChatList onClickChat={this.handleClickChat} />
-          </div>
-        </div>
         {panes.map((pane, i) =>
           <ChatWindow idx={i} pane={pane} key={pane.get('chat_id')} />
         )}

app/styles/chats.scss

@@ -130,4 +130,16 @@
 
 .chat-list {
   overflow-y: auto;
+  flex: 1;
+
+  &__content {
+    height: 100%;
+  }
+
+  .empty-column-indicator {
+    height: 100%;
+    box-sizing: border-box;
+    background: transparent;
+    align-items: start;
+  }
 }

app/styles/components/columns.scss

@@ -678,7 +678,6 @@
   align-items: center;
   justify-content: center;
   min-height: 160px;
-  border-radius: 0 0 10px 10px;
 
   @supports(display: grid) { // hack to fix Chrome <57
     contain: strict;