Add new component for navigating back to controlbox

in small viewports

sass/_chatbox.scss

@@ -1,6 +1,6 @@
 #conversejs {
 
-    .chatbox-navback {
+    converse-controlbox-navback {
         display: none;
     }
     .flyout {
@@ -639,13 +639,13 @@
         converse-chats.converse-fullscreen {
             .chatbox {
                 .box-flyout {
-                    .chatbox-navback {
+                    converse-controlbox-navback {
                         margin: auto 0;
                         margin-right: 1em;
                         display: flex;
                         .fa-arrow-left {
                             &:before {
-                                color: white;
+                                color: var(--chat-head-text-color);
                             }
                         }
                     }

spec/controlbox.js

@@ -11,15 +11,8 @@ describe("The Controlbox", function () {
     it("can be opened by clicking a DOM element with class 'toggle-controlbox'",
             mock.initConverse([], {}, function (done, _converse) {
 
-        const toggle = document.querySelector('converse-controlbox-toggle');
-        spyOn(toggle, 'onClick').and.callThrough();
-        spyOn(toggle, 'showControlBox').and.callThrough();
         spyOn(_converse.api, "trigger").and.callThrough();
-        // Redelegate so that the spies are now registered as the event handlers (specifically for 'onClick')
-        toggle.delegateEvents();
         document.querySelector('.toggle-controlbox').click();
-        expect(toggle.onClick).toHaveBeenCalled();
-        expect(toggle.showControlBox).toHaveBeenCalled();
         expect(_converse.api.trigger).toHaveBeenCalledWith('controlBoxOpened', jasmine.any(Object));
         const el = document.querySelector("#controlbox");
         expect(u.isVisible(el)).toBe(true);

src/plugins/chatview/templates/chatbox_head.js

@@ -12,7 +12,7 @@ export default (o) => {
     return html`
         <div class="chatbox-title ${ o.status ? '' :  "chatbox-title--no-desc"}">
             <div class="chatbox-title--row">
-                ${ (!_converse.api.settings.get("singleton")) ? html`<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>` : '' }
+                ${ (!_converse.api.settings.get("singleton")) ?  html`<converse-controlbox-navback jid="${o.jid}"></converse-controlbox-navback>` : '' }
                 ${ (o.type !== _converse.HEADLINES_TYPE) ? html`<a class="show-msg-author-modal" @click=${o.showUserDetailsModal}>${ avatar }</a>` : '' }
                 <div class="chatbox-title__text" title="${o.jid}">
                     ${ (o.type !== _converse.HEADLINES_TYPE) ? html`<a class="user show-msg-author-modal" @click=${o.showUserDetailsModal}>${ o.display_name }</a>` : o.display_name }

src/plugins/controlbox/index.js

@@ -6,6 +6,7 @@
 import "../../components/brand-heading";
 import "../chatview/index.js";
 import './loginpanel.js';
+import './navback.js';
 import ControlBoxMixin from './model.js';
 import ControlBoxToggle from './toggle.js';
 import ControlBoxView from './controlbox.js';

src/plugins/controlbox/navback.js

@@ -0,0 +1,21 @@
+import tpl_controlbox_navback from "./templates/navback.js";
+import { CustomElement } from 'components/element.js';
+import { api } from "@converse/headless/core";
+
+
+class ControlBoxNavback extends CustomElement {
+
+    static get properties () {
+        return {
+            'jid': { type: String }
+        }
+    }
+
+    render () {
+        return tpl_controlbox_navback(this.jid);
+    }
+}
+
+api.elements.define('converse-controlbox-navback', ControlBoxNavback);
+
+export default ControlBoxNavback;

src/plugins/controlbox/templates/navback.js

@@ -0,0 +1,6 @@
+import { html } from "lit-html";
+import { navigateToControlBox } from '../utils.js';
+
+export default  (jid) => {
+    return html`<i class="fa fa-arrow-left" @click=${() => navigateToControlBox(jid)}></i>`
+}

src/plugins/controlbox/toggle.js

@@ -16,15 +16,10 @@ class ControlBoxToggle extends CustomElement {
 
     render () {
         return tpl_controlbox_toggle({
-            'onClick': ev => this.onClick(ev),
+            'onClick': showControlBox,
             'hide': !this.model?.get('closed')
         });
     }
-
-    onClick (e) { // eslint-disable-line class-methods-use-this
-        e.preventDefault();
-        showControlBox();
-    }
 }
 
 api.elements.define('converse-controlbox-toggle', ControlBoxToggle);

src/plugins/controlbox/utils.js

@@ -8,7 +8,14 @@ export function addControlBox () {
     return m;
 }
 
-export function showControlBox () {
+export function showControlBox (ev) {
+    ev?.preventDefault?.();
     const controlbox = _converse.chatboxes.get('controlbox') || addControlBox();
     u.safeSave(controlbox, {'closed': false});
 }
+
+export function navigateToControlBox (jid) {
+    showControlBox();
+    const model = _converse.chatboxes.get(jid);
+    u.safeSave(model, {'hidden': true});
+}

src/plugins/muc-views/templates/muc-head.js

@@ -2,14 +2,12 @@ import 'components/dropdown.js';
 import { __ } from 'i18n';
 import { html } from "lit-html";
 import { until } from 'lit-html/directives/until.js';
-import { converse } from "@converse/headless/core";
+import { _converse, converse } from "@converse/headless/core";
 
 const u = converse.env.utils;
 
-
 const tpl_standalone_btns = (o) => o.standalone_btns.reverse().map(b => until(b, ''));
 
-
 export default (o) => {
     const i18n_hide_topic = __('Hide the groupchat topic');
     const i18n_bookmarked = __('This groupchat is bookmarked');
@@ -17,8 +15,8 @@ export default (o) => {
     const show_subject = (subject && !o.subject_hidden);
     return html`
         <div class="chatbox-title ${ show_subject ? '' :  "chatbox-title--no-desc"}">
-            ${ (!o._converse.api.settings.get("singleton")) ? html`<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>` : '' }
-            <div class="chatbox-title__text" title="${ (o._converse.locked_muc_domain !== 'hidden') ? o.jid : '' }">${ o.title }
+            ${ (!_converse.api.settings.get("singleton")) ?  html`<converse-controlbox-navback jid="${o.jid}"></converse-controlbox-navback>` : '' }
+            <div class="chatbox-title__text" title="${ (_converse.locked_muc_domain !== 'hidden') ? o.jid : '' }">${ o.title }
                 ${ (o.bookmarked) ? html`<i class="fa fa-bookmark chatbox-title__text--bookmarked" title="${i18n_bookmarked}"></i>` : '' }
             </div>
             <div class="chatbox-title__buttons row no-gutters">