Add option to group MUCs by their domain using collapsible lists

src/plugins/roomslist/index.js

@@ -7,7 +7,7 @@
  */
 import "@converse/headless/plugins/muc/index.js";
 import './view.js';
-import { converse } from "@converse/headless";
+import { api, converse } from "@converse/headless";
 
 
 converse.plugins.add('converse-roomslist', {
@@ -19,5 +19,9 @@ converse.plugins.add('converse-roomslist', {
         "converse-bookmarks"
     ],
 
-    initialize () { }
+    initialize () {
+        api.settings.extend({
+            'muc_grouped_by_domain': false,
+        });
+    }
 });

src/plugins/roomslist/model.js

@@ -10,6 +10,7 @@ class RoomsListModel extends Model {
             'muc_domain': api.settings.get('muc_domain'),
             'nick': _converse.getDefaultMUCNickname(),
             'toggle_state':  _converse.OPENED,
+            'collapsed_domains': [],
         };
     }
 

src/plugins/roomslist/templates/roomslist.js

@@ -67,10 +67,44 @@ function tplRoomItem (el, room) {
         </div>`;
 }
 
+function tplRoomDomainGroup (el, domain, rooms) {
+    const i18n_title = __('Click to hide these rooms');
+    const collapsed = el.model.get('collapsed_domains');
+    const is_collapsed = collapsed.includes(domain);
+    return html`
+    <div class="muc-domain-group" data-domain="${domain}">
+        <a href="#" class="list-toggle muc-domain-group-toggle controlbox-padded" title="${i18n_title}" @click=${ev => el.toggleDomainList(ev, domain)}>
+            <converse-icon
+                class="fa ${ is_collapsed ? 'fa-caret-right' : 'fa-caret-down' }"
+                size="1em"
+                color="var(--muc-group-color)"></converse-icon>
+            ${domain}
+        </a>
+        <ul class="items-list muc-domain-group ${ is_collapsed ? 'collapsed' : '' }" data-domain="${domain}">
+            ${ rooms.map(room => tplRoomItem(el, room)) }
+        </ul>
+    </div>`;
+}
+
 export default (el) => {
     const { chatboxes, CHATROOMS_TYPE, CLOSED } = _converse;
+    const group_by_domain = api.settings.get('muc_grouped_by_domain');
     const rooms = chatboxes.filter(m => m.get('type') === CHATROOMS_TYPE);
     rooms.sort((a, b) => (a.getDisplayName().toLowerCase() <= b.getDisplayName().toLowerCase() ? -1 : 1));
+    // The rooms should stay sorted as they are iterated and added in order
+    const grouped_rooms = new Map();
+    if (group_by_domain) {
+        for (const room of rooms) {
+            const roomdomain = room.get('jid').split('@').at(-1).toLowerCase();
+            if (grouped_rooms.has(roomdomain)) {
+                grouped_rooms.get(roomdomain).push(room);
+            } else {
+                grouped_rooms.set(roomdomain, [room]);
+            }
+        }
+    }
+    const sorted_domains = Array.from(grouped_rooms.keys());
+    sorted_domains.sort();
 
     const i18n_desc_rooms = __('Click to toggle the list of open groupchats');
     const i18n_heading_chatrooms = __('Groupchats');
@@ -111,7 +145,10 @@ export default (el) => {
 
         <div class="list-container list-container--openrooms ${ rooms.length ? '' : 'hidden' }">
             <div class="items-list rooms-list open-rooms-list ${ is_closed ? 'collapsed' : '' }">
-                ${ rooms.map(room => tplRoomItem(el, room)) }
+                ${ group_by_domain ?
+                    sorted_domains.map(domain => tplRoomDomainGroup(el, domain, grouped_rooms.get(domain))) :
+                    rooms.map(room => tplRoomItem(el, room))
+                }
             </div>
         </div>`;
 }

src/plugins/roomslist/view.js

@@ -79,6 +79,16 @@ export class RoomsList extends CustomElement {
             u.slideIn(list_el).then(() => this.model.save({'toggle_state': _converse.CLOSED}));
         }
     }
+
+    toggleDomainList (ev, domain) {
+        ev?.preventDefault?.();
+        const collapsed = this.model.get('collapsed_domains');
+        if (collapsed.includes(domain)) {
+            this.model.save({'collapsed_domains': collapsed.filter(d => d !== domain)});
+        } else {
+            this.model.save({'collapsed_domains': [...collapsed, domain]});
+        }
+    }
 }
 
 api.elements.define('converse-rooms-list', RoomsList);