Chats: display recipient name in ChatRoom

app/soapbox/features/chats/chat_room.js

@@ -4,14 +4,22 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import Avatar from 'soapbox/components/avatar';
+import { acctFull } from 'soapbox/utils/accounts';
 import { fetchChat } from 'soapbox/actions/chats';
 import ChatBox from './components/chat_box';
-import Column from 'soapbox/features/ui/components/column';
+import Column from 'soapbox/components/column';
+import ColumnBackButton from 'soapbox/components/column_back_button';
+import { makeGetChat } from 'soapbox/selectors';
 
-const mapStateToProps = (state, { params }) => ({
-  me: state.get('me'),
-  chat: state.getIn(['chats', params.chatId]),
-});
+const mapStateToProps = (state, { params }) => {
+  const getChat = makeGetChat();
+
+  return {
+    me: state.get('me'),
+    chat: getChat(state, { id: params.chatId }),
+  };
+};
 
 export default @connect(mapStateToProps)
 @injectIntl
@@ -42,9 +50,19 @@ class ChatRoom extends ImmutablePureComponent {
   render() {
     const { chat } = this.props;
     if (!chat) return null;
+    const account = chat.get('account');
 
     return (
       <Column>
+        <div className='chatroom__back'>
+          <ColumnBackButton />
+          <div className='chatroom__header'>
+            <Avatar account={account} size={18} />
+            <div className='chatroom__title'>
+              @{acctFull(account)}
+            </div>
+          </div>
+        </div>
         <ChatBox
           chatId={chat.get('id')}
           onSetInputRef={this.handleInputRef}

app/styles/chats.scss

@@ -216,3 +216,40 @@
     display: none;
   }
 }
+
+.chatroom__header {
+  display: flex;
+  margin-left: auto;
+  padding-right: 15px;
+  overflow: hidden;
+
+  .account__avatar {
+    margin-right: 7px;
+  }
+
+  .chatroom__title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+    height: 100%;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    color: #fff;
+    font-weight: bold;
+    text-align: left;
+    font-size: 14px;
+  }
+}
+
+.chatroom__back {
+  display: flex;
+  align-items: center;
+  background: var(--accent-color--faint);
+  border-radius: 10px 10px 0 0;
+
+  .column-back-button {
+    background: transparent;
+  }
+}