Simplify rendering of trimmed chats

Also fix issue where trimmed headline chatboxes don't show the proper
color

sass/_headline.scss

@@ -1,4 +1,8 @@
 #conversejs {
+    .chat-head-headline {
+        background-color: var(--headline-head-color);
+    }
+
     .chatbox.headlines {
         .chat-head {
             &.chat-head-chatbox {

spec/headline.js

@@ -24,7 +24,7 @@
              *  </message
              */
             sinon.spy(utils, 'isHeadlineMessage');
-            var stanza = $msg({
+            const stanza = $msg({
                     'xmlns': 'jabber:client',
                     'to': 'dummy@localhost',
                     'type': 'chat',
@@ -56,7 +56,7 @@
              *  </message>
              */
             sinon.spy(utils, 'isHeadlineMessage');
-            var stanza = $msg({
+            const stanza = $msg({
                     'type': 'headline',
                     'from': 'notify.example.com',
                     'to': 'dummy@localhost',
@@ -77,7 +77,7 @@
             expect(utils.isHeadlineMessage.returned(true)).toBeTruthy();
             utils.isHeadlineMessage.restore(); // unwraps
             // Headlines boxes don't show an avatar
-            var view = _converse.chatboxviews.get('notify.example.com');
+            const view = _converse.chatboxviews.get('notify.example.com');
             expect(view.model.get('show_avatar')).toBeFalsy();
             expect(view.el.querySelector('img.avatar')).toBe(null);
             done();

src/converse-minimize.js

@@ -173,19 +173,10 @@ converse.plugins.add('converse-minimize', {
         /* The initialize function gets called as soon as the plugin is
          * loaded by Converse.js's plugin machinery.
          */
-        const { _converse } = this,
-              { __ } = _converse;
-
-        // Add new HTML templates.
-        _converse.templates.chatbox_minimize = tpl_chatbox_minimize;
-        _converse.templates.toggle_chats = tpl_toggle_chats;
-        _converse.templates.trimmed_chat = tpl_trimmed_chat;
-        _converse.templates.chats_panel = tpl_chats_panel;
-
-        _converse.api.settings.update({
-            'no_trimming': false, // Set to true for tests
-        });
+        const { _converse } = this;
+        const { __ } = _converse;
 
+        _converse.api.settings.update({'no_trimming': false});
 
         const minimizableChatBox = {
             maximize () {
@@ -360,7 +351,6 @@ converse.plugins.add('converse-minimize', {
 
         _converse.MinimizedChatBoxView = Backbone.NativeView.extend({
             tagName: 'div',
-            className: 'chat-head row no-gutters',
             events: {
                 'click .close-chatbox-button': 'close',
                 'click .restore-chat': 'restore'
@@ -368,21 +358,20 @@ converse.plugins.add('converse-minimize', {
 
             initialize () {
                 this.model.on('change:num_unread', this.render, this);
+                this.model.on('change:name', this.render, this);
+                this.model.on('change:fullname', this.render, this);
+                this.model.on('change:jid', this.render, this);
+                this.model.on('destroy', this.remove, this);
             },
 
             render () {
                 const data = Object.assign(
-                    this.model.toJSON(),
-                    { 'tooltip': __('Click to restore this chat') }
-                );
-                if (this.model.get('type') === 'chatroom') {
-                    data.title = this.model.get('name');
-                    u.addClass('chat-head-chatroom', this.el);
-                } else {
-                    data.title = this.model.get('fullname');
-                    u.addClass('chat-head-chatbox', this.el);
-                }
+                    this.model.toJSON(), {
+                        'tooltip': __('Click to restore this chat'),
+                        'title': this.model.getDisplayName()
+                    });
                 this.el.innerHTML = tpl_trimmed_chat(data);
+                this.setElement(this.el.firstElementChild);
                 return this.el;
             },
 

src/headless/converse-mam.js

@@ -12,7 +12,6 @@ import converse from "./converse-core";
 import sizzle from "sizzle";
 
 
-const CHATROOMS_TYPE = 'chatroom';
 const { Promise, Strophe, $iq, _, dayjs } = converse.env;
 const u = converse.env.utils;
 
@@ -89,7 +88,7 @@ converse.plugins.add('converse-mam', {
                 if (this.disable_mam) {
                     return;
                 }
-                const is_groupchat = this.get('type') === CHATROOMS_TYPE;
+                const is_groupchat = this.get('type') === _converse.CHATROOMS_TYPE;
                 const mam_jid = is_groupchat ? this.get('jid') : _converse.bare_jid;
                 if (!(await _converse.api.disco.supports(Strophe.NS.MAM, mam_jid))) {
                     return;

src/templates/trimmed_chat.html

@@ -1,7 +1,9 @@
-<a href="#" class="restore-chat w-100 align-self-center" title="{{{o.tooltip}}}">
-    {[ if (o.num_unread) { ]} 
-        <span class="message-count badge badge-light">{{{o.num_unread}}}</span>
-    {[ } ]}
-    {{{o.title || o.jid }}}
-</a>
-<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
+<div class="chat-head-{{{o.type}}} chat-head row no-gutters">
+    <a href="#" class="restore-chat w-100 align-self-center" title="{{{o.tooltip}}}">
+        {[ if (o.num_unread) { ]}
+            <span class="message-count badge badge-light">{{{o.num_unread}}}</span>
+        {[ } ]}
+        {{{o.title}}}
+    </a>
+    <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
+</div>