Fix the minimized chats toggle

Clicking didn't make the minimized chats appear.
Also turn it into a Lit component

src/plugins/minimize/styles/minimize.scss

@@ -67,6 +67,10 @@
                         width: 100%;
                         max-width: 9em;
                         flex-wrap: nowrap;
+                        background-color: var(--chat-head-color);
+                    }
+                    .chat-head-chatroom {
+                        background-color: var(--chatroom-head-bg-color);
                     }
                     &.minimized {
                         height: auto;

src/plugins/minimize/templates/trimmed_chat.js

@@ -4,12 +4,15 @@ import { __ } from 'i18n';
 
 export default (o) => {
     const i18n_tooltip = __('Click to restore this chat');
+    const close_color = o.type === 'chatroom' ? "var(--chatroom-head-color)" : "var(--chat-head-text-color)";
     return html`
-        <div class="chat-head-${o.type} chat-head row no-gutters">
-            <a class="restore-chat w-100 align-self-center" title="${i18n_tooltip}" @click=${o.restore}>
-                ${o.num_unread ? html`<span class="message-count badge badge-light">${o.num_unread}</span>` : '' }
-                ${o.title}
-            </a>
-            <a class="chatbox-btn close-chatbox-button fa fa-times" @click=${o.close}></a>
-        </div>`;
+    <div class="chat-head-${o.type} chat-head row no-gutters">
+        <a class="restore-chat w-100 align-self-center" title="${i18n_tooltip}" @click=${o.restore}>
+            ${o.num_unread ? html`<span class="message-count badge badge-light">${o.num_unread}</span>` : '' }
+            ${o.title}
+        </a>
+        <a class="chatbox-btn close-chatbox-button" @click=${o.close}>
+            <converse-icon color=${close_color} class="fas fa-times" @click=${o.close} size="1em"></converse-icon>
+        </a>
+    </div>`;
 }

src/plugins/minimize/view.js

@@ -1,25 +1,28 @@
 import MinimizedChatsToggle from './toggle.js';
 import tpl_chats_panel from './templates/chats-panel.js';
-import { ElementView } from '@converse/skeletor/src/element.js';
+import { CustomElement } from 'shared/components/element';
 import { _converse, api } from '@converse/headless/core';
 import { initStorage } from '@converse/headless/utils/storage.js';
-import { render } from 'lit';
 
 
-export default class MinimizedChats extends ElementView {
+export default class MinimizedChats extends CustomElement {
+
+    constructor () {
+        super();
+        this.initialize();
+    }
 
     async initialize () {
         this.model = _converse.chatboxes;
         await this.initToggle();
-        this.render();
-        this.listenTo(this.minchats, 'change:collapsed', this.render)
-        this.listenTo(this.model, 'add', this.render)
-        this.listenTo(this.model, 'change:fullname', this.render)
-        this.listenTo(this.model, 'change:jid', this.render)
-        this.listenTo(this.model, 'change:minimized', this.render)
-        this.listenTo(this.model, 'change:name', this.render)
-        this.listenTo(this.model, 'change:num_unread', this.render)
-        this.listenTo(this.model, 'remove', this.render)
+        this.listenTo(this.minchats, 'change:collapsed', this.requestUpdate)
+        this.listenTo(this.model, 'add', this.requestUpdate)
+        this.listenTo(this.model, 'change:fullname', this.requestUpdate)
+        this.listenTo(this.model, 'change:jid', this.requestUpdate)
+        this.listenTo(this.model, 'change:minimized', this.requestUpdate)
+        this.listenTo(this.model, 'change:name', this.requestUpdate)
+        this.listenTo(this.model, 'change:num_unread', this.requestUpdate)
+        this.listenTo(this.model, 'remove', this.requestUpdate)
     }
 
     render () {
@@ -29,7 +32,7 @@ export default class MinimizedChats extends ElementView {
         const collapsed = this.minchats.get('collapsed');
         const data = { chats, num_unread, num_minimized, collapsed };
         data.toggle = ev => this.toggle(ev);
-        render(tpl_chats_panel(data), this);
+        return tpl_chats_panel(data);
     }
 
     async initToggle () {

src/shared/styles/_core.scss

@@ -10,6 +10,10 @@
     direction: ltr;
     z-index: 1031; // One more than bootstrap navbar
 
+    .flyout {
+      position: absolute;
+    }
+
     textarea:disabled {
         background-color: #EEE !important;
     }