Turn the controlbox toggle into a lit-element component

src/plugins/controlbox/toggle.js

@@ -1,47 +1,29 @@
 import tpl_controlbox_toggle from "./templates/toggle.js";
-import { ElementView } from '@converse/skeletor/src/element.js';
-import { _converse, api, converse } from "@converse/headless/core";
-import { addControlBox } from './utils.js';
-import { render } from 'lit-html';
+import { CustomElement } from 'components/element.js';
+import { _converse, api } from "@converse/headless/core";
+import { showControlBox } from './utils.js';
 
-const u = converse.env.utils;
 
+class ControlBoxToggle extends CustomElement {
 
-class ControlBoxToggle extends ElementView {
-
-    async initialize () {
-        await api.waitUntil('initialized');
-        this.render();
+    async connectedCallback () {
+        super.connectedCallback();
+        await api.waitUntil('initialized')
+        this.model = _converse.chatboxes.get('controlbox');
+        this.listenTo(this.model, 'change:closed', () => this.requestUpdate());
+        this.requestUpdate();
     }
 
     render () {
-        const controlbox = _converse.chatboxes.get('controlbox');
-        render(tpl_controlbox_toggle({
-            'onClick': (ev) => this.onClick(ev),
-            'hide': !controlbox.get('closed')
-        }), this);
-    }
-
-    showControlBox () { // eslint-disable-line class-methods-use-this
-        let controlbox = _converse.chatboxes.get('controlbox');
-        if (!controlbox) {
-            controlbox = addControlBox();
-        }
-        u.safeSave(controlbox, {'closed': false});
+        return tpl_controlbox_toggle({
+            'onClick': ev => this.onClick(ev),
+            'hide': !this.model?.get('closed')
+        });
     }
 
-    onClick (e) {
+    onClick (e) { // eslint-disable-line class-methods-use-this
         e.preventDefault();
-        if (u.isVisible(_converse.root.querySelector("#controlbox"))) {
-            const controlbox = _converse.chatboxes.get('controlbox');
-            if (api.connection.connected) {
-                controlbox.save({closed: true});
-            } else {
-                controlbox.trigger('hide');
-            }
-        } else {
-            this.showControlBox();
-        }
+        showControlBox();
     }
 }
 

src/plugins/controlbox/utils.js

@@ -1,7 +1,14 @@
-import { _converse } from "@converse/headless/core";
+import { _converse, converse } from "@converse/headless/core";
+
+const u = converse.env.utils;
 
 export function addControlBox () {
     const m = _converse.chatboxes.add(new _converse.ControlBox({'id': 'controlbox'}));
      _converse.chatboxviews.get('controlbox')?.setModel();
     return m;
 }
+
+export function showControlBox () {
+    const controlbox = _converse.chatboxes.get('controlbox') || addControlBox();
+    u.safeSave(controlbox, {'closed': false});
+}