Add dropdown to the rooms list

src/plugins/roomslist/templates/roomslist.js

@@ -1,3 +1,7 @@
+/**
+ * @typedef {import('../view').RoomsList} RoomsList
+ * @typedef {import('@converse/headless/plugins/muc/muc').default} MUC
+ */
 import 'plugins/muc-views/modals/add-muc.js';
 import 'plugins/muc-views/modals/muc-list.js';
 import { __ } from 'i18n';
@@ -9,10 +13,12 @@ import { tplRoomDomainGroupList } from 'plugins/roomslist/templates/groups.js';
 import { CHATROOMS_TYPE, CLOSED } from '@converse/headless/shared/constants.js';
 
 
+/** @param {MUC} room */
 function isCurrentlyOpen (room) {
     return isUniView() && !room.get('hidden');
 }
 
+/** @param {MUC} room */
 function tplBookmark (room) {
     const bm = room.get('bookmarked') ?? false;
     const i18n_bookmark = __('Bookmark');
@@ -20,7 +26,7 @@ function tplBookmark (room) {
         <a class="list-item-action add-bookmark"
             data-room-jid="${room.get('jid')}"
             data-bookmark-name="${room.getDisplayName()}"
-            @click=${ev => addBookmarkViaEvent(ev)}
+            @click=${(ev) => addBookmarkViaEvent(ev)}
             title="${ i18n_bookmark }">
 
             <converse-icon class="fa ${bm ? 'fa-bookmark' : 'fa-bookmark-empty'}"
@@ -30,11 +36,20 @@ function tplBookmark (room) {
 }
 
 
-const tplUnreadIndicator = (room) => html`<span class="list-item-badge badge badge--muc msgs-indicator">${ room.get('num_unread') }</span>`;
+/** @param {MUC} room */
+function tplUnreadIndicator (room) {
+    return html`<span class="list-item-badge badge badge--muc msgs-indicator">${ room.get('num_unread') }</span>`;
+}
 
-const tplActivityIndicator = () => html`<span class="list-item-badge badge badge--muc msgs-indicator"></span>`;
+function tplActivityIndicator () {
+    return html`<span class="list-item-badge badge badge--muc msgs-indicator"></span>`;
+}
 
 
+/**
+ * @param {RoomsList} el
+ * @param {MUC} room
+ */
 export function tplRoomItem (el, room) {
     const i18n_leave_room = __('Leave this groupchat');
     const has_unread_msgs = room.get('num_unread_general') || room.get('has_activity');
@@ -69,6 +84,9 @@ export function tplRoomItem (el, room) {
         </div>`;
 }
 
+/**
+ * @param {RoomsList} el
+ */
 export default (el) => {
     const group_by_domain = api.settings.get('muc_grouped_by_domain');
     const { chatboxes } = _converse.state;
@@ -77,14 +95,41 @@ export default (el) => {
 
     const i18n_desc_rooms = __('Click to toggle the list of open groupchats');
     const i18n_heading_chatrooms = __('Groupchats');
-    const i18n_title_list_rooms = __('Query for groupchats');
-    const i18n_title_new_room = __('Add a new groupchat');
-    const i18n_show_bookmarks = __('Show bookmarked groupchats');
+    const i18n_title_list_rooms = __('Query server');
+    const i18n_title_new_room = __('Add groupchat');
+    const i18n_show_bookmarks = __('Bookmarks');
     const is_closed = el.model.get('toggle_state') === CLOSED;
+
+    const btns = [
+        html`<a class="dropdown-item show-bookmark-list-modal"
+                @click=${(ev) => api.modal.show('converse-bookmark-list-modal', { 'model': el.model }, ev)}
+                data-toggle="modal">
+                    <converse-icon class="fa fa-bookmark" size="1em"></converse-icon>
+                    ${i18n_show_bookmarks}
+        </a>`,
+        html`<a class="dropdown-item show-list-muc-modal"
+                @click=${(ev) => 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>`,
+        html`<a class="dropdown-item show-add-muc-modal"
+                @click=${(ev) => api.modal.show('converse-add-muc-modal', { 'model': el.model }, ev)}
+                data-toggle="modal"
+                data-target="#add-chatrooms-modal">
+                    <converse-icon class="fa fa-plus" size="1em"></converse-icon>
+                    ${i18n_title_new_room}
+        </a>`,
+    ];
+
     return html`
         <div class="d-flex controlbox-padded">
             <span class="w-100 controlbox-heading controlbox-heading--groupchats">
-                <a class="list-toggle open-rooms-toggle" title="${i18n_desc_rooms}" @click=${ev => el.toggleRoomsList(ev)}>
+                <a class="list-toggle open-rooms-toggle"
+                   title="${i18n_desc_rooms}"
+                   @click=${ev => el.toggleRoomsList(ev)}>
+
                     <converse-icon
                         class="fa ${ is_closed ? 'fa-caret-right' : 'fa-caret-down' }"
                         size="1em"
@@ -92,24 +137,7 @@ export default (el) => {
                     ${i18n_heading_chatrooms}
                 </a>
             </span>
-
-            <a class="controlbox-heading__btn show-bookmark-list-modal"
-                @click=${(ev) => api.modal.show('converse-bookmark-list-modal', { 'model': el.model }, ev)}
-                title="${i18n_show_bookmarks}"
-                data-toggle="modal">
-                    <converse-icon class="fa fa-bookmark right" size="1em"></converse-icon>
-            </a>
-
-            <a class="controlbox-heading__btn show-list-muc-modal"
-                @click=${(ev) => api.modal.show('converse-muc-list-modal', { 'model': el.model }, ev)}
-                title="${i18n_title_list_rooms}" data-toggle="modal" data-target="#muc-list-modal">
-                    <converse-icon class="fa fa-list-ul right" size="1em"></converse-icon>
-            </a>
-            <a class="controlbox-heading__btn show-add-muc-modal"
-                @click=${(ev) => api.modal.show('converse-add-muc-modal', { 'model': el.model }, ev)}
-                title="${i18n_title_new_room}" data-toggle="modal" data-target="#add-chatrooms-modal">
-                    <converse-icon class="fa fa-plus right" size="1em"></converse-icon>
-            </a>
+            <converse-dropdown class="dropleft" .items=${btns}></converse-dropdown>
         </div>
 
         <div class="list-container list-container--openrooms ${ rooms.length ? '' : 'hidden' }">

src/plugins/roomslist/view.js

@@ -1,3 +1,6 @@
+/**
+ * @typedef {import('@converse/skeletor').Model} Model
+ */
 import 'plugins/muc-views/modals/muc-details.js';
 import RoomsListModel from './model.js';
 import tplRoomslist from "./templates/roomslist.js";
@@ -33,10 +36,12 @@ export class RoomsList extends CustomElement {
         return tplRoomslist(this);
     }
 
+    /** @param {Model} model */
     renderIfChatRoom (model) {
         isChatRoom(model) && this.requestUpdate();
     }
 
+    /** @param {Model} model */
     renderIfRelevantChange (model) {
         const attrs = ['bookmarked', 'hidden', 'name', 'num_unread', 'num_unread_general', 'has_activity'];
         const changed = model.changed || {};
@@ -45,27 +50,33 @@ export class RoomsList extends CustomElement {
         }
     }
 
-    showRoomDetailsModal (ev) { // eslint-disable-line class-methods-use-this
-        const jid = ev.currentTarget.getAttribute('data-room-jid');
+    /** @param {Event} ev */
+    showRoomDetailsModal (ev) {
+        const target = /** @type {HTMLElement} */(ev.currentTarget);
+        const jid = target.getAttribute('data-room-jid');
         const room = _converse.state.chatboxes.get(jid);
         ev.preventDefault();
         api.modal.show('converse-muc-details-modal', {'model': room}, ev);
     }
 
-    async openRoom (ev) { // eslint-disable-line class-methods-use-this
+    /** @param {Event} ev */
+    async openRoom (ev) {
         ev.preventDefault();
-        const name = ev.target.textContent;
-        const jid = ev.target.getAttribute('data-room-jid');
+        const target = /** @type {HTMLElement} */(ev.target);
+        const name = target.textContent;
+        const jid = target.getAttribute('data-room-jid');
         const data = {
             'name': name || Strophe.unescapeNode(Strophe.getNodeFromJid(jid)) || jid
         }
         await api.rooms.open(jid, data, true);
     }
 
-    async closeRoom (ev) { // eslint-disable-line class-methods-use-this
+    /** @param {Event} ev */
+    async closeRoom (ev) {
         ev.preventDefault();
-        const name = ev.currentTarget.getAttribute('data-room-name');
-        const jid = ev.currentTarget.getAttribute('data-room-jid');
+        const target = /** @type {HTMLElement} */(ev.currentTarget);
+        const name = target.getAttribute('data-room-name');
+        const jid = target.getAttribute('data-room-jid');
         const result = await api.confirm(__("Are you sure you want to leave the groupchat %1$s?", name));
         if (result) {
             const room = await api.rooms.get(jid);
@@ -73,6 +84,7 @@ export class RoomsList extends CustomElement {
         }
     }
 
+    /** @param {Event} [ev] */
     toggleRoomsList (ev) {
         ev?.preventDefault?.();
         const list_el = this.querySelector('.open-rooms-list');
@@ -83,6 +95,10 @@ export class RoomsList extends CustomElement {
         }
     }
 
+    /**
+     * @param {Event} ev
+     * @param {string} domain
+     */
     toggleDomainList (ev, domain) {
         ev?.preventDefault?.();
         const collapsed = this.model.get('collapsed_domains');

src/types/plugins/roomslist/templates/roomslist.d.ts

@@ -1,4 +1,10 @@
-export function tplRoomItem(el: any, room: any): import("lit-html").TemplateResult<1>;
-declare function _default(el: any): import("lit-html").TemplateResult<1>;
+/**
+ * @param {RoomsList} el
+ * @param {MUC} room
+ */
+export function tplRoomItem(el: RoomsList, room: MUC): import("lit-html").TemplateResult<1>;
+declare function _default(el: RoomsList): import("lit-html").TemplateResult<1>;
 export default _default;
+export type RoomsList = import('../view').RoomsList;
+export type MUC = import('@converse/headless/plugins/muc/muc').default;
 //# sourceMappingURL=roomslist.d.ts.map

src/types/plugins/roomslist/view.d.ts

@@ -2,14 +2,25 @@ export class RoomsList extends CustomElement {
     initialize(): void;
     model: RoomsListModel;
     render(): import("lit-html").TemplateResult<1>;
-    renderIfChatRoom(model: any): void;
-    renderIfRelevantChange(model: any): void;
-    showRoomDetailsModal(ev: any): void;
-    openRoom(ev: any): Promise<void>;
-    closeRoom(ev: any): Promise<void>;
-    toggleRoomsList(ev: any): void;
-    toggleDomainList(ev: any, domain: any): void;
+    /** @param {Model} model */
+    renderIfChatRoom(model: Model): void;
+    /** @param {Model} model */
+    renderIfRelevantChange(model: Model): void;
+    /** @param {Event} ev */
+    showRoomDetailsModal(ev: Event): void;
+    /** @param {Event} ev */
+    openRoom(ev: Event): Promise<void>;
+    /** @param {Event} ev */
+    closeRoom(ev: Event): Promise<void>;
+    /** @param {Event} [ev] */
+    toggleRoomsList(ev?: Event): void;
+    /**
+     * @param {Event} ev
+     * @param {string} domain
+     */
+    toggleDomainList(ev: Event, domain: string): void;
 }
+export type Model = import('@converse/skeletor').Model;
 import { CustomElement } from "shared/components/element.js";
 import RoomsListModel from "./model.js";
 //# sourceMappingURL=view.d.ts.map

src/types/plugins/rosterview/utils.d.ts

@@ -1,11 +1,17 @@
 export function removeContact(contact: any): void;
 export function highlightRosterItem(chatbox: any): void;
 export function toggleGroup(ev: any, name: any): void;
-export function isContactFiltered(contact: any, groupname: any): boolean;
+/**
+ * @param {RosterContact} contact
+ * @param {string} groupname
+ * @returns {boolean}
+ */
+export function isContactFiltered(contact: any, groupname: string): boolean;
 /**
  * @param {RosterContact} contact
  * @param {string} groupname
  * @param {Model} model
+ * @returns {boolean}
  */
 export function shouldShowContact(contact: any, groupname: string, model: Model): boolean;
 export function shouldShowGroup(group: any, model: any): boolean;