Converse v11, reporting customization in the livechat repo:

Reporting the toggle occupants customization.

conversejs/custom/index.js

@@ -50,6 +50,9 @@ import '../custom/plugins/terms/index.js'
 import '../custom/plugins/poll/index.js'
 /* END: Removable components */
 
+// Running some specific livechat patches:
+import '../custom/livechat-patch-vcard.js'
+
 import { CORE_PLUGINS } from './headless/shared/constants.js'
 import { ROOM_FEATURES } from './headless/plugins/muc/constants.js'
 // We must add our custom plugins to CORE_PLUGINS (so it is white listed):

conversejs/lib/plugins/livechat-specific.ts

@@ -53,6 +53,59 @@ export const livechatSpecificsPlugin = {
       return buttons
     })
 
+    _converse.api.listen.on('getToolbarButtons', (toolbarEl: any, buttons: any[]) => {
+      // We will replace the toggle occupant button, to change its appearance.
+      // First, we must find it. We search from the end, because usually it is the last one.
+      let toggleOccupantButton
+      for (const button of buttons.reverse()) {
+        if (button.strings?.find((s: string) => s.includes('toggle_occupants'))) { // searching the classname
+          console.debug('[livechatSpecificsPlugin] found the toggle occupants button', button)
+          toggleOccupantButton = button
+          break
+        }
+      }
+      if (!toggleOccupantButton) {
+        console.debug('[livechatSpecificsPlugin] Did not found the toggle occupants button')
+        return buttons
+      }
+
+      buttons = buttons.filter(b => b !== toggleOccupantButton)
+      // Replacing by the new button...
+      // Note: we don't need to test conditions, we know the button was here.
+      const i18nHideOccupants = _converse.__('Hide participants')
+      const i18nShowOccupants = _converse.__('Show participants')
+      const html = window.converse.env.html
+      const icon = toolbarEl.hidden_occupants
+        ? html`<converse-icon
+                color="var(--muc-toolbar-btn-color)"
+                class="fa fa-angle-double-left"
+                size="1em">
+            </converse-icon>
+            <converse-icon
+                color="var(--muc-toolbar-btn-color)"
+                class="fa users"
+                size="1em">
+            </converse-icon>`
+        : html`<converse-icon
+                color="var(--muc-toolbar-btn-color)"
+                class="fa users"
+                size="1em">
+            </converse-icon>
+            <converse-icon
+                color="var(--muc-toolbar-btn-color)"
+                class="fa fa-angle-double-right"
+                size="1em">
+            </converse-icon>`
+      buttons.push(html`
+          <button class="toggle_occupants right"
+                  title="${toolbarEl.hidden_occupants ? i18nShowOccupants : i18nHideOccupants}"
+                  @click=${toolbarEl.toggleOccupants}>
+                  ${icon}
+          </button>`
+      )
+      return buttons
+    })
+
     _converse.api.listen.on('chatRoomViewInitialized', function (this: any, _model: any): void {
       // Remove the spinner if present...
       document.getElementById('livechat-loading-spinner')?.remove()