From d6a39b3e0959dc40b21ebd0bf5775d172914b073 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 11 Sep 2020 13:04:31 -0500
Subject: [PATCH] Hovercard: put hovercard on chat window

---
 .../features/chats/components/chat_window.js  | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat_window.js b/app/soapbox/features/chats/components/chat_window.js
index acc5c2e8e..bb1a6346b 100644
--- a/app/soapbox/features/chats/components/chat_window.js
+++ b/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>