From 1c6c9f0f5d2cdcd2f95b0ced2199d5feb7c7992e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 25 Aug 2020 18:45:05 -0500
Subject: [PATCH] Chats: Toggle pane open and minimized

---
 app/soapbox/actions/chats.js                     | 14 ++++++++++++++
 .../features/chats/components/chat_panes.js      | 16 +++++++++++++---
 app/styles/chats.scss                            |  6 ++++++
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/actions/chats.js b/app/soapbox/actions/chats.js
index d6ecfa11d..732e8f34f 100644
--- a/app/soapbox/actions/chats.js
+++ b/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;
+    }
+  };
+}
diff --git a/app/soapbox/features/chats/components/chat_panes.js b/app/soapbox/features/chats/components/chat_panes.js
index 8c4dd2b90..d93de925f 100644
--- a/app/soapbox/features/chats/components/chat_panes.js
+++ b/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>
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index a45cb9e30..cae548683 100644
--- a/app/styles/chats.scss
+++ b/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;