Chats: Toggle pane open and minimized

app/soapbox/actions/chats.js

@@ -45,3 +45,17 @@ export function closeChat(chatId) {
     }
   };
 }
+
+export function toggleChat(chatId) {
+  return (dispatch, getState) => {
+    const panes = getSettings(getState()).getIn(['chats', 'panes']);
+    const [idx, pane] = panes.findEntry(pane => pane.get('chat_id') === chatId);
+
+    if (idx > -1) {
+      const state = pane.get('state') === 'minimized' ? 'open' : 'minimized';
+      return dispatch(changeSetting(['chats', 'panes', idx, 'state'], state));
+    } else {
+      return false;
+    }
+  };
+}

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

@@ -10,7 +10,7 @@ import { FormattedMessage } from 'react-intl';
 import { makeGetChat } from 'soapbox/selectors';
 import Avatar from 'soapbox/components/avatar';
 import { acctFull } from 'soapbox/utils/accounts';
-import { openChat, closeChat } from 'soapbox/actions/chats';
+import { openChat, closeChat, toggleChat } from 'soapbox/actions/chats';
 import IconButton from 'soapbox/components/icon_button';
 
 const addChatsToPanes = (state, panesData) => {
@@ -53,6 +53,12 @@ class ChatPanes extends ImmutablePureComponent {
     };
   }
 
+  handleChatToggle = (chatId) => {
+    return (e) => {
+      this.props.dispatch(toggleChat(chatId));
+    };
+  }
+
   renderChatPane = (pane, i) => {
     const chat = pane.get('chat');
     const account = pane.getIn(['chat', 'account']);
@@ -61,10 +67,14 @@ class ChatPanes extends ImmutablePureComponent {
     const right = (285 * (i + 1)) + 20;
 
     return (
-      <div key={i} className='pane' style={{ right: `${right}px` }}>
+      <div key={i} className={`pane pane--${pane.get('state')}`} style={{ right: `${right}px` }}>
         <div className='pane__header'>
           <Avatar account={account} size={18} />
-          <div className='display-name__account'>@{acctFull(account)}</div>
+          <div className='display-name__account'>
+            <a onClick={this.handleChatToggle(chat.get('id'))}>
+              @{acctFull(account)}
+            </a>
+          </div>
           <div className='pane__close'>
             <IconButton icon='close' title='Close chat' onClick={this.handleChatClose(chat.get('id'))} />
           </div>

app/styles/chats.scss

@@ -14,7 +14,12 @@
     height: calc(100vh - 70px);
   }
 
+  &--minimized {
+    top: calc(100% - 31px);
+  }
+
   &__header {
+    box-sizing: border-box;
     background: var(--brand-color);
     color: #fff;
     padding: 6px 10px;
@@ -23,6 +28,7 @@
     border-radius: 6px 6px 0 0;
     display: flex;
     align-items: center;
+    height: 31px;
 
     .account__avatar {
       margin-right: 7px;