Chats: render independent ChatIndex for mobile

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

@@ -44,7 +44,6 @@ class ChatPanes extends ImmutablePureComponent {
 
   handleClickChat = (chat) => {
     this.props.dispatch(openChat(chat.get('id')));
-    // TODO: Focus chat input
   }
 
   handleMainWindowToggle = () => {

app/soapbox/features/chats/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Column from '../../components/column';
+import ColumnHeader from '../../components/column_header';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import ChatList from './components/chat_list';
+
+const messages = defineMessages({
+  title: { id: 'column.chats', defaultMessage: 'Chats' },
+});
+
+export default @injectIntl
+class ChatIndex extends React.PureComponent {
+
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
+  handleClickChat = (chat) => {
+    this.context.router.history.push(`/chats/${chat.get('id')}`);
+  }
+
+  render() {
+    const { intl } = this.props;
+
+    return (
+      <Column label={intl.formatMessage(messages.title)}>
+        <ColumnHeader
+          icon='comment'
+          title={intl.formatMessage(messages.title)}
+        />
+
+        <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." />}
+        />
+      </Column>
+    );
+  }
+
+}

app/soapbox/features/ui/index.js

@@ -79,6 +79,7 @@ import {
   PasswordReset,
   SecurityForm,
   MfaForm,
+  ChatIndex,
 } from './util/async-components';
 
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
@@ -237,6 +238,9 @@ class SwitchingColumnsArea extends React.PureComponent {
 
         <WrappedRoute path='/search' publicRoute page={SearchPage} component={Search} content={children} />
 
+        <WrappedRoute path='/chats' exact layout={LAYOUT.DEFAULT} component={ChatIndex} content={children} />
+        {/* <WrappedRoute path='/chats/:chatId' layout={LAYOUT.DEFAULT} component={ChatRoom} content={children} /> */}
+
         <WrappedRoute path='/follow_requests' layout={LAYOUT.DEFAULT} component={FollowRequests} content={children} />
         <WrappedRoute path='/blocks' layout={LAYOUT.DEFAULT} component={Blocks} content={children} />
         <WrappedRoute path='/domain_blocks' layout={LAYOUT.DEFAULT} component={DomainBlocks} content={children} />

app/soapbox/features/ui/util/async-components.js

@@ -197,3 +197,7 @@ export function SecurityForm() {
 export function MfaForm() {
   return import(/* webpackChunkName: "features/security/mfa_form" */'../../security/mfa_form');
 }
+
+export function ChatIndex() {
+  return import(/* webpackChunkName: "features/chats" */'../../chats');
+}