Domain group disco button

src/plugins/muc-views/modals/muc-list.js

@@ -86,7 +86,7 @@
                 'server_placeholder': this.model.get('muc_domain') || __('conference.example.org'),
                 'items': this.items,
                 'loading_items': this.loading_items,
-                'openRoom': ev => this.openRoom(ev),
+                'openItem': ev => this.openItem(ev),
                 'setDomainFromEvent': ev => this.setDomainFromEvent(ev),
                 'submitForm': ev => this.showRooms(ev),
                 'toggleRoomInfo': ev => this.toggleRoomInfo(ev)
@@ -97,12 +97,31 @@
         return __('Query for Groupchats');
     }
 
-    openRoom (ev) {
+    openRoom (jid, name) {
+        this.modal.hide();
+        api.rooms.open(jid, {'name': name}, true);
+    }
+
+    onInfoReceived (iq, jid, name) {
+        const identity = sizzle('query identity', iq).pop();
+        if (identity.getAttribute('category') === 'conference') {
+            this.openRoom(jid, name);
+        } else {
+            this.model.setDomain(jid);
+        }
+    }
+
+    openItem (ev) {
         ev.preventDefault();
         const jid = ev.target.getAttribute('data-room-jid');
         const name = ev.target.getAttribute('data-room-name');
-        this.modal.hide();
-        api.rooms.open(jid, {'name': name}, true);
+        const iq = $iq({
+            'to': this.model.get('muc_domain'),
+            'from': api.connection.get().jid,
+            'type': "get"
+        }).c("query", {xmlns: Strophe.NS.DISCO_INFO});
+        api.sendIQ(iq)
+            .then(iq => this.onInfoReceived(iq, jid, name))
     }
 
     toggleRoomInfo (ev) {
@@ -111,6 +130,9 @@
     }
 
     onDomainChange () {
+        this.querySelector('.form-control').value = this.model.get('muc_domain');
+        this.items = [];
+        this.model.save('feedback_text', '');
         api.settings.get('auto_list_rooms') && this.updateRoomsList();
     }
 

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

@@ -34,7 +34,7 @@ const tplItem = (o, item) => {
         <li class="room-item list-group-item">
             <div class="available-chatroom d-flex flex-row">
                 <a class="open-room available-room w-100"
-                    @click=${o.openRoom}
+                    @click=${o.openItem}
                     data-room-jid="${item.jid}"
                     data-room-name="${item.name}"
                     title="${i18n_open_title}"

src/plugins/roomslist/templates/roomslist.js

@@ -77,21 +77,34 @@ function tplRoomItem (el, room) {
  */
 function tplRoomDomainGroup (el, domain, rooms) {
     const i18n_title = __('Click to hide these rooms');
+    const i18n_title_list_rooms = __('Query server');
     const collapsed = el.model.get('collapsed_domains');
     const is_collapsed = collapsed.includes(domain);
+    const btns = [
+        html`<a class="dropdown-item show-list-muc-modal" role="button"
+                @click="${(ev) => {el.model.setDomain(domain); api.modal.show('converse-muc-list-modal', { 'model': el.model }, ev)}}"
+                data-toggle="modal"
+                data-target="#muc-list-modal">
+                    <converse-icon class="fa fa-list-ul" size="1em"></converse-icon>
+                    ${i18n_title_list_rooms}
+        </a>`,
+    ];
     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-color)"></converse-icon>
-            ${domain}
-        </a>
+        <div class="d-flex controlbox-padded">
+            <a href="#"
+               class="list-toggle muc-domain-group-toggle w-100"
+               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-color)"></converse-icon>
+                ${domain}
+            </a>
+            <converse-dropdown class="btn-group dropstart" .items=${btns}></converse-dropdown>
+        </div>
         <ul class="items-list muc-domain-group-rooms ${ is_collapsed ? 'collapsed' : '' }" data-domain="${domain}">
             ${ rooms.map(room => tplRoomItem(el, room)) }
         </ul>