Scaffold chat click

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { fetchChats } from 'soapbox/actions/chats';
-import Account from 'soapbox/components/account';
+import ChatListAccount from './chat_list_account';
 
 const mapStateToProps = state => ({
   chats: state.get('chats'),
@@ -23,6 +23,10 @@ class ChatList extends ImmutablePureComponent {
     this.props.dispatch(fetchChats());
   }
 
+  handleClickChat = () => {
+    // TODO: Open or focus chat panel
+  }
+
   render() {
     const { chats } = this.props;
 
@@ -34,7 +38,10 @@ class ChatList extends ImmutablePureComponent {
         <div className='chat-list__content'>
           {chats.toList().map(chat => (
             <div className='chat-list-item'>
-              <Account account={chat.get('account')} />
+              <ChatListAccount
+                account={chat.get('account')}
+                onClick={this.handleClickChat}
+              />
             </div>
           ))}
         </div>

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import Avatar from '../../../components/avatar';
+import DisplayName from '../../../components/display_name';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+export default class ChatListAccount extends ImmutablePureComponent {
+
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
+    onClick: PropTypes.func,
+  };
+
+  handleClick = () => {
+    this.props.onClick(this.props.account);
+  }
+
+  render() {
+    const { account } = this.props;
+    if (!account) return null;
+
+    return (
+      <div className='account'>
+        <button className='floating-link' onClick={this.handleClick} />
+        <div className='account__wrapper'>
+          <div key={account.get('id')} className='account__display-name'>
+            <div className='account__avatar-wrapper'>
+              <Avatar account={account} size={36} />
+            </div>
+            <DisplayName account={account} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}

app/styles/accounts.scss

@@ -327,9 +327,10 @@
 
 .account {
   padding: 10px;
+  position: relative;
 
   &:not(:last-of-type) {
-  border-bottom: 1px solid var(--brand-color--med);
+    border-bottom: 1px solid var(--brand-color--med);
   }
 
   &.compact {

app/styles/basics.scss

@@ -228,4 +228,8 @@ noscript {
   left: 0;
   position: absolute;
   z-index: 9999;
+  background: transparent;
+  border: 0;
+  margin: 0;
+  padding: 0;
 }

app/styles/chats.scss

@@ -16,7 +16,6 @@
 
   &__content {
     background: var(--foreground-color);
-    padding: 10px;
   }
 
   &__actions {