Conversations: add account search

app/soapbox/features/conversations/index.js

@@ -7,9 +7,12 @@ import { mountConversations, unmountConversations, expandConversations } from '.
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connectDirectStream } from '../../actions/streaming';
 import ConversationsListContainer from './containers/conversations_list_container';
+import { directComposeById } from 'soapbox/actions/compose';
+import AccountSearch from 'soapbox/components/account_search';
 
 const messages = defineMessages({
   title: { id: 'column.direct', defaultMessage: 'Direct messages' },
+  searchPlaceholder: { id: 'direct.search_placeholder', defaultMessage: 'Search for an account to message…' },
 });
 
 export default @connect()
@@ -39,6 +42,10 @@ class ConversationsTimeline extends React.PureComponent {
     }
   }
 
+  handleSuggestion = accountId => {
+    this.props.dispatch(directComposeById(accountId));
+  }
+
   handleLoadMore = maxId => {
     this.props.dispatch(expandConversations({ maxId }));
   }
@@ -50,6 +57,11 @@ class ConversationsTimeline extends React.PureComponent {
       <Column label={intl.formatMessage(messages.title)}>
         <ColumnHeader icon='envelope' active={hasUnread} title={intl.formatMessage(messages.title)} />
 
+        <AccountSearch
+          placeholder={intl.formatMessage(messages.searchPlaceholder)}
+          onSelected={this.handleSuggestion}
+        />
+
         <ConversationsListContainer
           scrollKey='direct_timeline'
           timelineId='direct'