Chats: Allow closing a chat

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;
+    }
+  };
+}

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>

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 {