Render chats in panes layout

app/soapbox/actions/settings.js

@@ -1,7 +1,7 @@
 import { debounce } from 'lodash';
 import { showAlertForError } from './alerts';
 import { patchMe } from 'soapbox/actions/me';
-import { Map as ImmutableMap } from 'immutable';
+import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 
 export const SETTING_CHANGE = 'SETTING_CHANGE';
 export const SETTING_SAVE   = 'SETTING_SAVE';
@@ -29,6 +29,11 @@ const defaultSettings = ImmutableMap({
   dyslexicFont: false,
   demetricator: false,
 
+  chats: ImmutableMap({
+    panes: ImmutableList(),
+    mainWindow: 'minimized',
+  }),
+
   home: ImmutableMap({
     shows: ImmutableMap({
       reblog: true,

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

@@ -36,9 +36,6 @@ class ChatList extends ImmutablePureComponent {
 
     return (
       <div className='chat-list'>
-        <div className='chat-list__header'>
-          <FormattedMessage id='chat_list.title' defaultMessage='Chats' />
-        </div>
         <div className='chat-list__content'>
           {chats.toList().map(chat => (
             <div key={chat.get('id')} className='chat-list-item'>

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { injectIntl } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { getSettings } from 'soapbox/actions/settings';
+import ChatList from './chat_list';
+import { FormattedMessage } from 'react-intl';
+
+const mapStateToProps = state => ({
+  panesData: getSettings(state).get('chats'),
+});
+
+export default @connect(mapStateToProps)
+@injectIntl
+class ChatPanes extends ImmutablePureComponent {
+
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+    panesData: ImmutablePropTypes.map,
+  }
+
+  renderChatPane = (pane, i) => {
+    // const chat = getChat(pane.get('chat_id'))
+    return (
+      <div key={i} className='pane'>
+        <div className='pane__header'>
+          // {chat.getIn(['account', 'acct'])}
+        </div>
+        <div className='pane__content'>
+          // TODO: Show the chat messages
+          <div className='pane__actions'>
+            <input type='text' />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderChatPanes = (panes) => (
+    panes.map((pane, i) =>
+      this.renderChatPane(pane, i)
+    )
+  )
+
+  render() {
+    const panes = this.props.panesData.get('panes');
+
+    return (
+      <div className='chat-panes'>
+        <div className='pane pane--main'>
+          <div className='pane__header'>
+            <FormattedMessage id='chat_panels.main_window.title' defaultMessage='Chats' />
+          </div>
+          <div className='pane__content'>
+            <ChatList />
+          </div>
+        </div>
+        {this.renderChatPanes(panes)}
+      </div>
+    );
+  }
+
+}

app/soapbox/features/ui/index.js

@@ -36,7 +36,7 @@ import { connectUserStream } from '../../actions/streaming';
 import { Redirect } from 'react-router-dom';
 import Icon from 'soapbox/components/icon';
 import { isStaff } from 'soapbox/utils/accounts';
-import ChatList from 'soapbox/features/chats/components/chat_list';
+import ChatPanes from 'soapbox/features/chats/components/chat_panes';
 
 import {
   Status,
@@ -605,7 +605,7 @@ class UI extends React.PureComponent {
           <ModalContainer />
           <UploadArea active={draggingOver} onClose={this.closeUploadModal} />
           {me && <SidebarMenu />}
-          {me && <ChatList />}
+          {me && <ChatPanes />}
         </div>
       </HotKeys>
     );

app/styles/chats.scss

@@ -1,4 +1,4 @@
-.chat-list {
+.pane {
   position: fixed;
   bottom: 0;
   right: 20px;