[IMP] mail: display user avatar in chat-box header

PURPOSE

We are currently working toward turning every user avatar (i.e. the round
picture of the user) in a shortcut to open the chatbox to that user. It only
makes sense to also have the user avatar in the header of the chatbox
(like in Facebook)

SPECIFICATION

Replace the current IM status colored dot of the chatbox header by the same
avatar/im_status compound currently used in the chatter.

LINKS

Closes https://github.com/odoo/odoo/pull/51258
Task-2256061

closes odoo/odoo#51258

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

addons/mail/static/src/js/models/threads/abstract_thread.js

@@ -98,6 +98,7 @@ var AbstractThread = Class.extend(Mixins.EventDispatcherMixin, {
     getTitle: function () {
         return this.getName();
     },
+    getType: function () {},
     /**
      * @returns {integer}
      */

addons/mail/static/src/scss/abstract_thread_window.scss

@@ -29,6 +29,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
     }
 
     .o_thread_window_header {
+        align-items: center;
         display: flex;
         flex: 0 0 auto;
         color: white;
@@ -55,6 +56,25 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
                 color: white;
             }
         }
+        .o_thread_window_avatar {
+            margin: -6px 6px -6px 0;
+            position: relative;
+
+            img {
+                height: 25px;
+                width: 25px;
+                border-radius: 50%;
+            }
+            span {
+                bottom: -4px;
+                right: -2px;
+                position: absolute;
+
+                .fa-circle-o {
+                    display: none;
+                }
+            }
+        }
 
         .o_thread_window_title {
             cursor: pointer;

addons/mail/static/src/xml/abstract_thread_window.xml

@@ -68,8 +68,11 @@
         <span t-if="widget.isMobile()">
             <a href="#" class="o_thread_window_close fa fa-1x fa-arrow-left" aria-label="Close chat window" title="Close chat window"/>
         </span>
+        <div t-if="thread and thread.getType() === 'dm_chat'" class="o_thread_window_avatar">
+            <img alt="" t-att-src="'/web/image/res.partner/' + thread.getDirectPartnerID() + '/image_128'"/>
+            <t t-call="mail.UserStatus"/>
+        </div>
         <span class="o_thread_window_title">
-            <t t-if="status" t-call="mail.UserStatus"/>
             <t t-esc="title"/>
             <span t-if="unreadCounter"> (<t t-esc="unreadCounter"/>)</span>
             <t t-if="thread and thread.hasTypingNotification() and thread.isSomeoneTyping()" t-call="mail.ThreadTypingIcon"/>