Make sure the moderation tools option is shown in the MUC header dropdown

once the session is updated.

src/plugins/muc-views/heading.js

@@ -26,9 +26,13 @@ export default class MUCHeading extends CustomElement {
         this.listenTo(this.user_settings, 'change:mucs_with_hidden_subject', () => this.requestUpdate());
 
         await this.model.initialized;
-        this.model.occupants.forEach(o => this.onOccupantAdded(o));
-        this.listenTo(this.model.occupants, 'add', this.onOccupantAdded);
-        this.listenTo(this.model.occupants, 'change:affiliation', this.onOccupantAffiliationChanged);
+        const own_occupant = this.model.occupants.findOccupant({ jid: _converse.session.get('bare_jid') });
+        if (own_occupant) this.updateIfOwnOccupant(own_occupant);
+
+        this.listenTo(this.model.occupants, "add", this.updateIfOwnOccupant);
+        this.listenTo(this.model.occupants, "change:affiliation", this.updateIfOwnOccupant);
+        this.listenTo(this.model.occupants, "change:role", this.updateIfOwnOccupant);
+        this.listenTo(this.model.session, "change:connection_status", () => this.requestUpdate());
         this.requestUpdate();
     }
 
@@ -39,17 +43,7 @@ export default class MUCHeading extends CustomElement {
     /**
      * @param {MUCOccupant} occupant
      */
-    onOccupantAdded (occupant) {
-        const bare_jid = _converse.session.get('bare_jid');
-        if (occupant.get('jid') === bare_jid) {
-            this.requestUpdate();
-        }
-    }
-
-    /**
-     * @param {MUCOccupant} occupant
-     */
-    onOccupantAffiliationChanged (occupant) {
+    updateIfOwnOccupant (occupant) {
         const bare_jid = _converse.session.get('bare_jid');
         if (occupant.get('jid') === bare_jid) {
             this.requestUpdate();
@@ -190,7 +184,7 @@ export default class MUCHeading extends CustomElement {
                 buttons.push({
                     'i18n_text': __('Destroy'),
                     'i18n_title': __('Remove this groupchat'),
-                    'handler': ev => this.destroy(ev),
+                    'handler': (ev) => this.destroy(ev),
                     'a_class': 'destroy-chatroom-button',
                     'icon_class': 'fa-trash',
                     'name': 'destroy'
@@ -202,7 +196,7 @@ export default class MUCHeading extends CustomElement {
             buttons.push({
                 'i18n_text': __('Leave'),
                 'i18n_title': __('Leave and close this groupchat'),
-                'handler': async ev => {
+                'handler': async (ev) => {
                     ev.stopPropagation();
                     const messages = [__('Are you sure you want to leave this groupchat?')];
                     const result = await api.confirm(__('Confirm'), messages);

src/shared/styles/themes/cyberpunk.scss

@@ -32,6 +32,12 @@
     --warning-color: var(--orange);
     --info-color: var(--yellow);
     --converse-highlight-color: var(--yellow);
+    .list-group-item {
+        --converse-list-group-color: var(--foreground-color);
+        &.active {
+            --converse-list-group-active-color: var(--background-color) !important;
+        }
+    }
 
     // Online status indicators
     --chat-status-away: var(--orange);

src/types/plugins/muc-views/heading.d.ts

@@ -9,11 +9,7 @@ export default class MUCHeading extends CustomElement {
     /**
      * @param {MUCOccupant} occupant
      */
-    onOccupantAdded(occupant: import("@converse/headless").MUCOccupant): void;
-    /**
-     * @param {MUCOccupant} occupant
-     */
-    onOccupantAffiliationChanged(occupant: import("@converse/headless").MUCOccupant): void;
+    updateIfOwnOccupant(occupant: import("@converse/headless").MUCOccupant): void;
     /**
      * @param {Event} ev
      */

src/types/plugins/muc-views/message-form.d.ts

@@ -12,6 +12,6 @@ export default class MUCMessageForm extends MessageForm {
      */
     onKeyDown(ev: KeyboardEvent): void;
 }
-import MessageForm from 'plugins/chatview/message-form.js';
-import AutoComplete from 'shared/autocomplete/autocomplete.js';
+import MessageForm from "plugins/chatview/message-form.js";
+import AutoComplete from "shared/autocomplete/autocomplete.js";
 //# sourceMappingURL=message-form.d.ts.map