Merge branch 'hovercard-chat' into 'develop'

Hovercard chat

See merge request soapbox-pub/soapbox-fe!229

app/soapbox/features/chats/chat_room.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { injectIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Avatar from 'soapbox/components/avatar';
 import { acctFull } from 'soapbox/utils/accounts';
@@ -75,12 +76,12 @@ class ChatRoom extends ImmutablePureComponent {
       <Column>
         <div className='chatroom__back'>
           <ColumnBackButton />
-          <div className='chatroom__header'>
+          <Link to={`/@${account.get('acct')}`} className='chatroom__header'>
             <Avatar account={account} size={18} />
             <div className='chatroom__title'>
               @{acctFull(account)}
             </div>
-          </div>
+          </Link>
         </div>
         <ChatBox
           chatId={chat.get('id')}

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

@@ -14,6 +14,7 @@ import {
 } from 'soapbox/actions/chats';
 import ChatBox from './chat_box';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
+import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
 
 const mapStateToProps = (state, { pane }) => ({
   me: state.get('me'),
@@ -79,13 +80,24 @@ class ChatWindow extends ImmutablePureComponent {
     const right = (285 * (idx + 1)) + 20;
     const unreadCount = chat.get('unread');
 
+    const unreadIcon = (
+      <i className='icon-with-badge__badge'>
+        {shortNumberFormat(unreadCount)}
+      </i>
+    );
+
+    const avatar = (
+      <HoverRefWrapper accountId={account.get('id')}>
+        <Link to={`/@${account.get('acct')}`}>
+          <Avatar account={account} size={18} />
+        </Link>
+      </HoverRefWrapper>
+    );
+
     return (
       <div className={`pane pane--${pane.get('state')}`} style={{ right: `${right}px` }}>
         <div className='pane__header'>
-          {unreadCount > 0
-            ? <i className='icon-with-badge__badge'>{shortNumberFormat(unreadCount)}</i>
-            : <Link to={`/@${account.get('acct')}`}><Avatar account={account} size={18} /></Link>
-          }
+          {unreadCount > 0 ? unreadIcon : avatar }
           <button className='pane__title' onClick={this.handleChatToggle(chat.get('id'))}>
             @{acctFull(account)}
           </button>

app/soapbox/features/ui/components/user_panel.js

@@ -56,26 +56,26 @@ class UserPanel extends ImmutablePureComponent {
 
             <div className='user-panel__stats-block'>
 
-              <div className='user-panel-stats-item'>
+              {account.get('statuses_count') && <div className='user-panel-stats-item'>
                 <Link to={`/@${account.get('acct')}`} title={intl.formatNumber(account.get('statuses_count'))}>
                   <strong className='user-panel-stats-item__value'>{shortNumberFormat(account.get('statuses_count'))}</strong>
                   <span className='user-panel-stats-item__label'><FormattedMessage className='user-panel-stats-item__label' id='account.posts' defaultMessage='Posts' /></span>
                 </Link>
-              </div>
+              </div>}
 
-              <div className='user-panel-stats-item'>
+              {account.get('followers_count') && <div className='user-panel-stats-item'>
                 <Link to={`/@${account.get('acct')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
                   <strong className='user-panel-stats-item__value'>{shortNumberFormat(account.get('followers_count'))}</strong>
                   <span className='user-panel-stats-item__label'><FormattedMessage id='account.followers' defaultMessage='Followers' /></span>
                 </Link>
-              </div>
+              </div>}
 
-              <div className='user-panel-stats-item'>
+              {account.get('following_count') && <div className='user-panel-stats-item'>
                 <Link to={`/@${account.get('acct')}/following`} title={intl.formatNumber(account.get('following_count'))}>
                   <strong className='user-panel-stats-item__value'>{shortNumberFormat(account.get('following_count'))}</strong>
                   <span className='user-panel-stats-item__label'><FormattedMessage className='user-panel-stats-item__label' id='account.follows' defaultMessage='Follows' /></span>
                 </Link>
-              </div>
+              </div>}
 
             </div>