Refactor converse-muc-sidebar

- To only take the MUC JID as attribute
- To be responsible for closing itself

src/plugins/muc-views/muc.js

@@ -30,7 +30,6 @@ export default class MUCView extends BaseChatView {
     is_chatroom = true
     events = {
         'click .chatbox-navback': 'showControlBox',
-        'click .hide-occupants': 'hideOccupants',
         'click .new-msgs-indicator': 'viewUnreadMessages',
         // Arrow functions don't work here because you can't bind a different `this` param to them.
         'click .occupant-nick': function (ev) {
@@ -163,20 +162,6 @@ export default class MUCView extends BaseChatView {
         return _converse.ChatBoxView.prototype.close.apply(this, arguments);
     }
 
-    /**
-     * Hide the right sidebar containing the chat occupants.
-     * @private
-     * @method _converse.ChatRoomView#hideOccupants
-     */
-    hideOccupants (ev) {
-        if (ev) {
-            ev.preventDefault();
-            ev.stopPropagation();
-        }
-        this.model.save({ 'hidden_occupants': true });
-        this.scrollDown();
-    }
-
     getReason (args) { // eslint-disable-line class-methods-use-this
         return args.includes(',') ? args.slice(args.indexOf(',') + 1).trim() : null;
     }

src/plugins/muc-views/sidebar.js

@@ -1,32 +1,45 @@
 import 'shared/autocomplete/index.js';
 import tpl_muc_sidebar from "./templates/muc-sidebar.js";
 import { CustomElement } from 'components/element.js';
-import { api } from "@converse/headless/core";
+import { _converse, api, converse } from "@converse/headless/core";
+
+const { u } = converse.env;
 
 export default class MUCSidebar extends CustomElement {
 
     static get properties () {
         return {
-            chatroom: { type: Object },
+            jid: { type: String }
-            occupants: { type: Object}
         }
     }
 
     connectedCallback () {
         super.connectedCallback();
-        this.listenTo(this.occupants, 'add', this.requestUpdate);
+        this.model = _converse.chatboxes.get(this.jid);
-        this.listenTo(this.occupants, 'remove', this.requestUpdate);
+        this.listenTo(this.model.occupants, 'add', this.requestUpdate);
-        this.listenTo(this.occupants, 'change', this.requestUpdate);
+        this.listenTo(this.model.occupants, 'remove', this.requestUpdate);
-        this.chatroom.initialized.then(() => this.requestUpdate());
+        this.listenTo(this.model.occupants, 'change', this.requestUpdate);
+        this.model.initialized.then(() => this.requestUpdate());
     }
 
     render () {
         const tpl = tpl_muc_sidebar(Object.assign(
-            this.chatroom.toJSON(),
+            this.model.toJSON(), {
-            {'occupants': [...this.occupants.models] }
+                'occupants': [...this.model.occupants.models],
+                'closeSidebar': ev => this.closeSidebar(ev),
+            }
         ));
         return tpl;
     }
+
+    closeSidebar(ev) {
+        ev?.preventDefault?.();
+        ev?.stopPropagation?.();
+        u.safeSave(this.model, { 'hidden_occupants': true });
+        // FIXME: do this declaratively
+        _converse.chatboxviews.get(this.jid)?.scrollDown();
+    }
+
 }
 
 api.elements.define('converse-muc-sidebar', MUCSidebar);

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

@@ -21,9 +21,9 @@ export default (o) => html`
         <converse-muc-bottom-panel jid="${o.jid}" class="bottom-panel"></converse-muc-bottom-panel>
     </div>
     <div class="disconnect-container hidden"></div>
-    <converse-muc-sidebar class="occupants col-md-3 col-4 ${o.show_sidebar ? '' : 'hidden' }"
+    <converse-muc-sidebar
+        class="occupants col-md-3 col-4 ${o.show_sidebar ? '' : 'hidden' }"
         style="flex: 0 0 ${o.occupants_width}px"
-        @mousedown=${o.onMousedown}
+        jid=${o.jid}
-        .occupants=${o.occupants}
+        @mousedown=${o.onMousedown}></converse-muc-sidebar>
-        .chatroom=${o.model}></converse-muc-sidebar>
 `;

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

@@ -27,7 +27,7 @@ export default (o) => {
 
     return html`
         <div class="occupants-header">
-            <i class="hide-occupants fa fa-times"></i>
+            <i class="hide-occupants fa fa-times" @click=${o.closeSidebar}></i>
             <div class="occupants-header--title">
                 <span class="occupants-heading">${i18n_participants}</span>
             </div>