Turn MinimizedChatsView into an ElementView subclass

src/plugins/minimize/index.js

@@ -8,7 +8,7 @@ import 'plugins/chatview/index.js';
 import MinimizedChats from './view.js';
 import MinimizedChatsToggle from './toggle.js';
 import { _converse, api, converse } from '@converse/headless/core';
-import { addMinimizeButtonToChat, addMinimizeButtonToMUC, initMinimizedChats, trimChats } from './utils.js';
+import { addMinimizeButtonToChat, addMinimizeButtonToMUC, trimChats } from './utils.js';
 import { debounce } from 'lodash-es';
 import { minimizableChatBox, minimizableChatBoxView } from './mixins.js';
 
@@ -127,7 +127,6 @@ converse.plugins.add('converse-minimize', {
         /************************ BEGIN Event Handlers ************************/
         api.listen.on('chatBoxViewInitialized', view => _converse.minimize.trimChats(view));
         api.listen.on('chatRoomViewInitialized', view => _converse.minimize.trimChats(view));
-        api.listen.on('connected', () => initMinimizedChats());
         api.listen.on('controlBoxOpened', view => _converse.minimize.trimChats(view));
         api.listen.on('chatBoxViewInitialized', v => v.listenTo(v.model, 'change:minimized', v.onMinimizedChanged));
 

src/plugins/minimize/utils.js

@@ -101,17 +101,6 @@ function getOldestMaximizedChat (exclude_ids) {
     return model;
 }
 
-export function initMinimizedChats () {
-    _converse.minimized_chats?.remove();
-    _converse.minimized_chats = new _converse.MinimizedChats({model: _converse.chatboxes});
-    /**
-     * Triggered once the _converse.MinimizedChats instance has been initialized
-     * @event _converse#minimizedChatsInitialized
-     * @example _converse.api.listen.on('minimizedChatsInitialized', () => { ... });
-     */
-    api.trigger('minimizedChatsInitialized');
-}
-
 export function addMinimizeButtonToChat (view, buttons) {
     const data = {
         'a_class': 'toggle-chatbox-button',

src/plugins/minimize/view.js

@@ -1,13 +1,13 @@
 import tpl_chats_panel from './templates/chats-panel.js';
-import { View } from '@converse/skeletor/src/view';
+import { ElementView } from '@converse/skeletor/src/element.js';
+import { _converse, api } from '@converse/headless/core';
 import { render } from 'lit-html';
-import { _converse } from '@converse/headless/core';
 
 
-const MinimizedChats = View.extend({
+class MinimizedChats extends ElementView {
-    tagName: 'span',
 
     async initialize () {
+        this.model = _converse.chatboxes;
         await this.initToggle();
         this.render();
         this.listenTo(this.minchats, 'change:collapsed', this.render)
@@ -18,7 +18,7 @@ const MinimizedChats = View.extend({
         this.listenTo(this.model, 'change:name', this.render)
         this.listenTo(this.model, 'change:num_unread', this.render)
         this.listenTo(this.model, 'remove', this.render)
-    },
+    }
 
     render () {
         const chats = this.model.where({'minimized': true});
@@ -27,24 +27,20 @@ const MinimizedChats = View.extend({
         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.el);
+        render(tpl_chats_panel(data), this);
-
+    }
-        if (!this.el.parentElement) {
-            _converse.chatboxviews.insertRowColumn(this.el);
-        }
-    },
 
     async initToggle () {
         const id = `converse.minchatstoggle-${_converse.bare_jid}`;
         this.minchats = new _converse.MinimizedChatsToggle({id});
         this.minchats.browserStorage = _converse.createStore(id);
         await new Promise(resolve => this.minchats.fetch({'success': resolve, 'error': resolve}));
-    },
+    }
 
     toggle (ev) {
         ev?.preventDefault();
         this.minchats.save({'collapsed': !this.minchats.get('collapsed')});
     }
-});
+}
 
-export default MinimizedChats;
+api.elements.define('converse-minimized-chats', MinimizedChats);