From 072aed02da128cdea8c704f8d63f263b1c7dd99a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 25 Aug 2020 18:11:48 -0500
Subject: [PATCH] Chats: Allow closing a chat

---
 app/soapbox/actions/chats.js                       | 13 +++++++++++++
 .../features/chats/components/chat_panes.js        | 12 +++++++++++-
 app/styles/chats.scss                              | 14 ++++++++++++++
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/actions/chats.js b/app/soapbox/actions/chats.js
index 49ab6c782..d6ecfa11d 100644
--- a/app/soapbox/actions/chats.js
+++ b/app/soapbox/actions/chats.js
@@ -32,3 +32,16 @@ export function openChat(chatId) {
     }
   };
 }
+
+export function closeChat(chatId) {
+  return (dispatch, getState) => {
+    const panes = getSettings(getState()).getIn(['chats', 'panes']);
+    const idx = panes.findIndex(pane => pane.get('chat_id') === chatId);
+
+    if (idx > -1) {
+      return dispatch(changeSetting(['chats', 'panes'], panes.delete(idx)));
+    } else {
+      return false;
+    }
+  };
+}
diff --git a/app/soapbox/features/chats/components/chat_panes.js b/app/soapbox/features/chats/components/chat_panes.js
index 43cb1b442..8c4dd2b90 100644
--- a/app/soapbox/features/chats/components/chat_panes.js
+++ b/app/soapbox/features/chats/components/chat_panes.js
@@ -10,7 +10,8 @@ import { FormattedMessage } from 'react-intl';
 import { makeGetChat } from 'soapbox/selectors';
 import Avatar from 'soapbox/components/avatar';
 import { acctFull } from 'soapbox/utils/accounts';
-import { openChat } from 'soapbox/actions/chats';
+import { openChat, closeChat } from 'soapbox/actions/chats';
+import IconButton from 'soapbox/components/icon_button';
 
 const addChatsToPanes = (state, panesData) => {
   const getChat = makeGetChat();
@@ -46,6 +47,12 @@ class ChatPanes extends ImmutablePureComponent {
     // TODO: Focus chat input
   }
 
+  handleChatClose = (chatId) => {
+    return (e) => {
+      this.props.dispatch(closeChat(chatId));
+    };
+  }
+
   renderChatPane = (pane, i) => {
     const chat = pane.get('chat');
     const account = pane.getIn(['chat', 'account']);
@@ -58,6 +65,9 @@ class ChatPanes extends ImmutablePureComponent {
         <div className='pane__header'>
           <Avatar account={account} size={18} />
           <div className='display-name__account'>@{acctFull(account)}</div>
+          <div className='pane__close'>
+            <IconButton icon='close' title='Close chat' onClick={this.handleChatClose(chat.get('id'))} />
+          </div>
         </div>
         <div className='pane__content'>
           <div style={{ padding: '10px' }}>TODO: Show the chat messages</div>
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 8cfe06532..a45cb9e30 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -33,6 +33,20 @@
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
+    .icon-button {
+      color: #fff;
+
+      > div {
+        height: auto !important;
+        width: auto !important;
+        margin-right: -6px;
+      }
+    }
+
+    .pane__close {
+      margin-left: auto;
+    }
   }
 
   &__content {