Chats: add account search

app/soapbox/actions/chats.js

@@ -167,13 +167,13 @@ export function deleteChatMessage(chatId, messageId) {
 }
 
 /** Start a chat and launch it in the UI */
-export function launchChat(account, router) {
+export function launchChat(accountId, router, forceNavigate = false) {
   const isMobile = width => width <= 1190;
 
   return (dispatch, getState) => {
     // TODO: make this faster
-    return dispatch(startChat(account.get('id'))).then(chat => {
+    return dispatch(startChat(accountId)).then(chat => {
-      if (isMobile(window.innerWidth)) {
+      if (forceNavigate || isMobile(window.innerWidth)) {
         router.push(`/chats/${chat.id}`);
       } else {
         dispatch(openChat(chat.id));

app/soapbox/containers/status_container.js

@@ -153,7 +153,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 
   onChat(account, router) {
-    dispatch(launchChat(account, router));
+    dispatch(launchChat(account.get('id'), router));
   },
 
   onMention(account, router) {

app/soapbox/features/account_timeline/containers/header_container.js

@@ -162,7 +162,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 
   onChat(account, router) {
-    dispatch(launchChat(account, router));
+    dispatch(launchChat(account.get('id'), router));
   },
 
   onDeactivateUser(account) {

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

@@ -6,12 +6,18 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { getSettings } from 'soapbox/actions/settings';
 import ChatList from './chat_list';
 import { FormattedMessage } from 'react-intl';
-import { openChat, toggleMainWindow } from 'soapbox/actions/chats';
+import { openChat, launchChat, toggleMainWindow } from 'soapbox/actions/chats';
 import ChatWindow from './chat_window';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 import AudioToggle from 'soapbox/features/chats/components/audio_toggle';
 import { List as ImmutableList } from 'immutable';
 import { createSelector } from 'reselect';
+import AccountSearch from 'soapbox/components/account_search';
+import { injectIntl, defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Start a chat with…' },
+});
 
 const getChatsUnreadCount = state => {
   const chats = state.get('chats');
@@ -43,9 +49,15 @@ const makeMapStateToProps = () => {
 };
 
 export default @connect(makeMapStateToProps)
+@injectIntl
 class ChatPanes extends ImmutablePureComponent {
 
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
   static propTypes = {
+    intl: PropTypes.object.isRequired,
     dispatch: PropTypes.func.isRequired,
     mainWindowState: PropTypes.string,
     panes: ImmutablePropTypes.list,
@@ -55,12 +67,16 @@ class ChatPanes extends ImmutablePureComponent {
     this.props.dispatch(openChat(chat.get('id')));
   }
 
+  handleSuggestion = accountId => {
+    this.props.dispatch(launchChat(accountId, this.context.router.history));
+  }
+
   handleMainWindowToggle = () => {
     this.props.dispatch(toggleMainWindow());
   }
 
   render() {
-    const { panes, mainWindowState, unreadCount } = this.props;
+    const { intl, panes, mainWindowState, unreadCount } = this.props;
     const open = mainWindowState === 'open';
 
     const mainWindowPane = (
@@ -73,10 +89,18 @@ class ChatPanes extends ImmutablePureComponent {
           <AudioToggle />
         </div>
         <div className='pane__content'>
-          {open && <ChatList
+          {open && (
+            <>
+              <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." />}
-          />}
+              />
+              <AccountSearch
+                placeholder={intl.formatMessage(messages.searchPlaceholder)}
+                onSelected={this.handleSuggestion}
+              />
+            </>
+          )}
         </div>
       </div>
     );

app/soapbox/features/chats/index.js

@@ -1,26 +1,36 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import Column from '../../components/column';
 import ColumnHeader from '../../components/column_header';
+import { launchChat } from 'soapbox/actions/chats';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ChatList from './components/chat_list';
 import AudioToggle from 'soapbox/features/chats/components/audio_toggle';
+import AccountSearch from 'soapbox/components/account_search';
 
 const messages = defineMessages({
   title: { id: 'column.chats', defaultMessage: 'Chats' },
+  searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Start a chat with…' },
 });
 
-export default @injectIntl
+export default @connect()
+@injectIntl
 class ChatIndex extends React.PureComponent {
 
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-  };
-
   static contextTypes = {
     router: PropTypes.object,
   };
 
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    dispatch: PropTypes.func.isRequired,
+  };
+
+  handleSuggestion = accountId => {
+    this.props.dispatch(launchChat(accountId, this.context.router.history, true));
+  }
+
   handleClickChat = (chat) => {
     this.context.router.history.push(`/chats/${chat.get('id')}`);
   }
@@ -34,7 +44,15 @@ class ChatIndex extends React.PureComponent {
           icon='comment'
           title={intl.formatMessage(messages.title)}
         />
-        <div className='column__switch'><AudioToggle /></div>
+
+        <div className='column__switch'>
+          <AudioToggle />
+        </div>
+
+        <AccountSearch
+          placeholder={intl.formatMessage(messages.searchPlaceholder)}
+          onSelected={this.handleSuggestion}
+        />
 
         <ChatList
           onClickChat={this.handleClickChat}

app/soapbox/features/status/containers/detailed_status_container.js

@@ -143,7 +143,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 
   onChat(account, router) {
-    dispatch(launchChat(account, router));
+    dispatch(launchChat(account.get('id'), router));
   },
 
   onMention(account, router) {

app/soapbox/features/status/index.js

@@ -257,7 +257,7 @@ class Status extends ImmutablePureComponent {
   }
 
   handleChatClick = (account, router) => {
-    this.props.dispatch(launchChat(account, router));
+    this.props.dispatch(launchChat(account.get('id'), router));
   }
 
   handleMentionClick = (account, router) => {

app/styles/chats.scss

@@ -24,6 +24,15 @@
     height: 31px;
   }
 
+  .search--account {
+    border-top: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
+
+    .autosuggest-textarea__suggestions {
+      top: auto;
+      bottom: 100%;
+    }
+  }
+
   &__header {
     box-sizing: border-box;
     background: var(--brand-color);