Replace roster buttons with dropdown

CHANGES.md

@@ -10,6 +10,7 @@
 - #3307: Fix inconsistency between browsers on textarea outlines
 - #3337: Correctly display multiline nested quotes
 - Add an occupants filter to the MUC sidebar
+- Change contacts filter to rename the anachronistic `Online` state to `Available`.
 - Fix: MUC occupant list does not sort itself on nicknames or roles changes
 - Fix: refresh the MUC sidebar when participants collection is sorted
 - Fix: room information not correctly refreshed when modifications are made by other users

src/headless/shared/api/events.js

@@ -17,7 +17,7 @@ export default {
      *  event handlers' promises have been resolved.
      *
      * @method _converse.api.trigger
-     * @param { string } name - The event name
+     * @param {string} name - The event name
      */
     async trigger (name) {
         if (!_converse._events) {
@@ -45,8 +45,9 @@ export default {
      * A hook is a special kind of event which allows you to intercept a data
      * structure in order to modify it, before passing it back.
      * @async
-     * @param { string } name - The hook name
-     * @param {...any} context - The context to which the hook applies (could be for example, a {@link _converse.ChatBox})).
+     * @param {string} name - The hook name
+     * @param {...any} context - The context to which the hook applies
+     *  (could be for example, a {@link _converse.ChatBox}).
      * @param {...any} data - The data structure to be intercepted and modified by the hook listeners.
      * @returns {Promise<any>} - A promise that resolves with the modified data structure.
      */
@@ -75,9 +76,9 @@ export default {
         /**
          * Lets you listen to an event exactly once.
          * @method _converse.api.listen.once
-         * @param { string } name The event's name
-         * @param { function } callback The callback method to be called when the event is emitted.
-         * @param { object } [context] The value of the `this` parameter for the callback.
+         * @param {string} name The event's name
+         * @param {function} callback The callback method to be called when the event is emitted.
+         * @param {object} [context] The value of the `this` parameter for the callback.
          * @example _converse.api.listen.once('message', function (messageXML) { ... });
          */
         once: _converse.once.bind(_converse),
@@ -86,9 +87,9 @@ export default {
          * Lets you subscribe to an event.
          * Every time the event fires, the callback method specified by `callback` will be called.
          * @method _converse.api.listen.on
-         * @param { string } name The event's name
-         * @param { function } callback The callback method to be called when the event is emitted.
-         * @param { object } [context] The value of the `this` parameter for the callback.
+         * @param {string} name The event's name
+         * @param {function} callback The callback method to be called when the event is emitted.
+         * @param {object} [context] The value of the `this` parameter for the callback.
          * @example _converse.api.listen.on('message', function (messageXML) { ... });
          */
         on: _converse.on.bind(_converse),
@@ -96,24 +97,34 @@ export default {
         /**
          * To stop listening to an event, you can use the `not` method.
          * @method _converse.api.listen.not
-         * @param { string } name The event's name
-         * @param { function } callback The callback method that is to no longer be called when the event fires
+         * @param {string} name The event's name
+         * @param {function} callback The callback method that is to no longer be called when the event fires
          * @example _converse.api.listen.not('message', function (messageXML);
          */
         not: _converse.off.bind(_converse),
 
+        /**
+         * An options object which lets you set filter criteria for matching
+         * against stanzas.
+         * @typedef {object} MatchingOptions
+         * @property {string} [ns] - The namespace to match against
+         * @property {string} [type] - The stanza type to match against
+         * @property {string} [id] - The stanza id to match against
+         * @property {string} [from] - The stanza sender to match against
+         */
+
         /**
          * Subscribe to an incoming stanza
          * Every a matched stanza is received, the callback method specified by
          * `callback` will be called.
          * @method _converse.api.listen.stanza
-         * @param { string } name The stanza's name
-         * @param { object } options Matching options (e.g. 'ns' for namespace, 'type' for stanza type, also 'id' and 'from');
-         * @param { function } handler The callback method to be called when the stanza appears
+         * @param {string} name The stanza's name
+         * @param {MatchingOptions|Function} options Matching options or callback
+         * @param {function} handler The callback method to be called when the stanza appears
          */
         stanza (name, options, handler) {
             if (isFunction(options)) {
-                handler = options;
+                handler = /** @type {Function} */(options);
                 options = {};
             } else {
                 options = options || {};

src/headless/types/plugins/chat/model.d.ts

@@ -241,6 +241,7 @@ declare class ChatBox extends ModelWithContact {
     incrementUnreadMsgsCounter(message: Message): void;
     clearUnreadMsgCounter(): void;
     isScrolledUp(): any;
+    canPostMessages(): boolean;
 }
 import ModelWithContact from "./model-with-contact.js";
 import { Model } from "@converse/skeletor";

src/headless/types/shared/api/events.d.ts

@@ -13,7 +13,7 @@ declare namespace _default {
      *  event handlers' promises have been resolved.
      *
      * @method _converse.api.trigger
-     * @param { string } name - The event name
+     * @param {string} name - The event name
      */
     function trigger(name: string, ...args: any[]): Promise<void>;
     /**
@@ -23,8 +23,9 @@ declare namespace _default {
      * A hook is a special kind of event which allows you to intercept a data
      * structure in order to modify it, before passing it back.
      * @async
-     * @param { string } name - The hook name
-     * @param {...any} context - The context to which the hook applies (could be for example, a {@link _converse.ChatBox})).
+     * @param {string} name - The hook name
+     * @param {...any} context - The context to which the hook applies
+     *  (could be for example, a {@link _converse.ChatBox}).
      * @param {...any} data - The data structure to be intercepted and modified by the hook listeners.
      * @returns {Promise<any>} - A promise that resolves with the modified data structure.
      */
@@ -33,16 +34,42 @@ declare namespace _default {
         const once: any;
         const on: any;
         const not: any;
+        /**
+         * An options object which lets you set filter criteria for matching
+         * against stanzas.
+         * @typedef {object} MatchingOptions
+         * @property {string} [ns] - The namespace to match against
+         * @property {string} [type] - The stanza type to match against
+         * @property {string} [id] - The stanza id to match against
+         * @property {string} [from] - The stanza sender to match against
+         */
         /**
          * Subscribe to an incoming stanza
          * Every a matched stanza is received, the callback method specified by
          * `callback` will be called.
          * @method _converse.api.listen.stanza
-         * @param { string } name The stanza's name
-         * @param { object } options Matching options (e.g. 'ns' for namespace, 'type' for stanza type, also 'id' and 'from');
-         * @param { function } handler The callback method to be called when the stanza appears
+         * @param {string} name The stanza's name
+         * @param {MatchingOptions|Function} options Matching options or callback
+         * @param {function} handler The callback method to be called when the stanza appears
          */
-        function stanza(name: string, options: any, handler: Function): void;
+        function stanza(name: string, options: Function | {
+            /**
+             * - The namespace to match against
+             */
+            ns?: string;
+            /**
+             * - The stanza type to match against
+             */
+            type?: string;
+            /**
+             * - The stanza id to match against
+             */
+            id?: string;
+            /**
+             * - The stanza sender to match against
+             */
+            from?: string;
+        }, handler: Function): void;
     }
 }
 export default _default;

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

@@ -65,7 +65,7 @@ export default (el, o) => {
             </a>
         `);
         btns.push(html`
-            <a href="#" class="dropdown-item" @click=${(/** @type {MouseEvent} */ev) => el.toggleFilter(ev)}>
+            <a href="#" class="dropdown-item toggle-filter" @click=${(/** @type {MouseEvent} */ev) => el.toggleFilter(ev)}>
                 <converse-icon size="1em" class="fa fa-filter"></converse-icon>
                 ${is_filter_visible ? i18n_hide_filter : i18n_show_filter}
             </a>

src/plugins/muc-views/tests/occupants-filter.js

@@ -53,7 +53,14 @@ describe("The MUC occupants filter", function () {
             expect(occupants.querySelectorAll('li .occupant-nick')[index].textContent.trim()).toBe(name);
         });
 
-        filter_el = view.querySelector('converse-list-filter');
+        const dropdown = await u.waitUntil(() => view.querySelector('.occupants-header converse-dropdown'));
+
+        expect(view.querySelector('converse-list-filter')).toBe(null);
+
+        dropdown.click();
+        dropdown.querySelector('.toggle-filter').click();
+
+        filter_el = await u.waitUntil(() => view.querySelector('converse-list-filter'));
         expect(u.isVisible(filter_el.firstElementChild)).toBe(true);
 
         const filter = filter_el.querySelector('.items-filter');
@@ -62,7 +69,9 @@ describe("The MUC occupants filter", function () {
         await u.waitUntil(() => [...view.querySelectorAll('li')].filter(u.isVisible).length === 1);
 
         filter_el.querySelector('.fa-times').click();
-        await u.waitUntil(() => [...view.querySelectorAll('li')].filter(u.isVisible).length === 3+mock.chatroom_names.length);
+        await u.waitUntil(
+            () => [...view.querySelectorAll('li')].filter(u.isVisible).length === 3+mock.chatroom_names.length
+        );
 
         filter_el.querySelector('.fa-circle').click();
         const state_select = view.querySelector('.state-type');

src/plugins/rosterview/rosterview.js

@@ -45,12 +45,14 @@ export default class RosterView extends CustomElement {
         return tplRoster(this);
     }
 
+    /** @param {MouseEvent} ev */
     showAddContactModal (ev) {
         api.modal.show('converse-add-contact-modal', {'model': new Model()}, ev);
     }
 
+    /** @param {MouseEvent} [ev] */
     async syncContacts (ev) {
-        ev.preventDefault();
+        ev?.preventDefault();
         const { roster } = _converse.state;
         this.syncing_contacts = true;
         this.requestUpdate();
@@ -63,6 +65,7 @@ export default class RosterView extends CustomElement {
         this.requestUpdate();
     }
 
+    /** @param {MouseEvent} [ev] */
     toggleRoster (ev) {
         ev?.preventDefault?.();
         const list_el = /** @type {HTMLElement} */(this.querySelector('.list-container.roster-contacts'));
@@ -72,6 +75,12 @@ export default class RosterView extends CustomElement {
             slideIn(list_el).then(() => this.model.save({'toggle_state': CLOSED}));
         }
     }
+
+    /** @param {MouseEvent} [ev] */
+    toggleFilter (ev) {
+        ev?.preventDefault?.();
+        this.model.save({ filter_visible: !this.model.get('filter_visible') });
+    }
 }
 
 api.elements.define('converse-roster', RosterView);

src/plugins/rosterview/templates/roster.js

@@ -18,13 +18,59 @@ export default (el) => {
     const i18n_heading_contacts = __('Contacts');
     const i18n_toggle_contacts = __('Click to toggle contacts');
     const i18n_title_add_contact = __('Add a contact');
-    const i18n_title_sync_contacts = __('Re-sync your contacts');
     const roster = _converse.state.roster || [];
     const contacts_map = roster.reduce((acc, contact) => populateContactsMap(acc, contact), {});
-    const groupnames = Object.keys(contacts_map).filter(shouldShowGroup);
+    const groupnames = Object.keys(contacts_map).filter((contact) => shouldShowGroup(contact, el.model));
     const is_closed = el.model.get('toggle_state') === CLOSED;
     groupnames.sort(groupsComparator);
 
+    const i18n_show_filter = __('Show filter');
+    const i18n_hide_filter = __('Hide filter');
+    const is_filter_visible = el.model.get('filter_visible');
+
+    const btns = /** @type {TemplateResult[]} */ [];
+    if (api.settings.get('allow_contact_requests')) {
+        btns.push(html`
+            <a
+                href="#"
+                class="dropdown-item add-contact"
+                @click=${(/** @type {MouseEvent} */ ev) => el.showAddContactModal(ev)}
+                title="${i18n_title_add_contact}"
+                data-toggle="modal"
+                data-target="#add-contact-modal"
+            >
+                <converse-icon class="fa fa-user-plus" size="1em"></converse-icon>
+                ${i18n_title_add_contact}
+            </a>
+        `);
+    }
+
+    if (roster.length > 5) {
+        btns.push(html`
+            <a href="#"
+               class="dropdown-item toggle-filter"
+               @click=${(/** @type {MouseEvent} */ ev) => el.toggleFilter(ev)}>
+                <converse-icon size="1em" class="fa fa-filter"></converse-icon>
+                ${is_filter_visible ? i18n_hide_filter : i18n_show_filter}
+            </a>
+        `);
+    }
+
+    if (api.settings.get("loglevel") === 'debug') {
+        const i18n_title_sync_contacts = __('Re-sync contacts');
+        btns.push(html`
+            <a
+                href="#"
+                class="dropdown-item"
+                @click=${(/** @type {MouseEvent} */ ev) => el.syncContacts(ev)}
+                title="${i18n_title_sync_contacts}"
+            >
+                <converse-icon class="fa fa-sync sync-contacts" size="1em"></converse-icon>
+                ${i18n_title_sync_contacts}
+            </a>
+        `);
+    }
+
     return html`
         <div class="d-flex controlbox-padded">
             <span class="w-100 controlbox-heading controlbox-heading--contacts">
@@ -37,43 +83,24 @@ export default (el) => {
                     ${i18n_heading_contacts}
                 </a>
             </span>
-            <a
-                class="controlbox-heading__btn sync-contacts"
-                @click=${(ev) => el.syncContacts(ev)}
-                title="${i18n_title_sync_contacts}"
-            >
-                <converse-icon
-                    class="fa fa-sync right ${el.syncing_contacts ? 'fa-spin' : ''}"
-                    size="1em"
-                ></converse-icon>
-            </a>
-            ${api.settings.get('allow_contact_requests')
-                ? html` <a
-                      class="controlbox-heading__btn add-contact"
-                      @click=${(ev) => el.showAddContactModal(ev)}
-                      title="${i18n_title_add_contact}"
-                      data-toggle="modal"
-                      data-target="#add-contact-modal"
-                  >
-                      <converse-icon class="fa fa-user-plus right" size="1.25em"></converse-icon>
-                  </a>`
-                : ''}
+            <converse-dropdown class="chatbox-btn dropleft dropdown--contacts" .items=${btns}></converse-dropdown>
         </div>
 
         <div class="list-container roster-contacts ${is_closed ? 'hidden' : ''}">
-            <converse-list-filter
-                @update=${() => el.requestUpdate()}
-                .promise=${api.waitUntil('rosterInitialized')}
-                .items=${_converse.state.roster}
-                .template=${tplRosterFilter}
-                .model=${_converse.state.roster_filter}
-            ></converse-list-filter>
-
+            ${is_filter_visible
+                ? html` <converse-list-filter
+                      @update=${() => el.requestUpdate()}
+                      .promise=${api.waitUntil('rosterInitialized')}
+                      .items=${_converse.state.roster}
+                      .template=${tplRosterFilter}
+                      .model=${_converse.state.roster_filter}
+                  ></converse-list-filter>`
+                : ''}
             ${repeat(
                 groupnames,
                 (n) => n,
                 (name) => {
-                    const contacts = contacts_map[name].filter((c) => shouldShowContact(c, name));
+                    const contacts = contacts_map[name].filter((c) => shouldShowContact(c, name, el.model));
                     contacts.sort(contactsComparator);
                     return contacts.length ? tplGroup({ contacts, name }) : '';
                 }

src/plugins/rosterview/templates/roster_filter.js

@@ -14,7 +14,7 @@ export default (el) => {
     const title_status_filter = __('Filter by status');
     const label_any = __('Any');
     const label_unread_messages = __('Unread');
-    const label_online = __('Online');
+    const label_available = __('Available');
     const label_chatty = __('Chatty');
     const label_busy = __('Busy');
     const label_away = __('Away');
@@ -48,7 +48,7 @@ export default (el) => {
                         @change=${ev => el.changeChatStateFilter(ev)}>
                     <option value="">${label_any}</option>
                     <option ?selected=${chat_state === 'unread_messages'} value="unread_messages">${label_unread_messages}</option>
-                    <option ?selected=${chat_state === 'online'} value="online">${label_online}</option>
+                    <option ?selected=${chat_state === 'online'} value="online">${label_available}</option>
                     <option ?selected=${chat_state === 'chat'} value="chat">${label_chatty}</option>
                     <option ?selected=${chat_state === 'dnd'} value="dnd">${label_busy}</option>
                     <option ?selected=${chat_state === 'away'} value="away">${label_away}</option>

src/plugins/rosterview/tests/add-contact-modal.js

@@ -13,7 +13,12 @@ describe("The 'Add Contact' widget", function () {
         await mock.openControlBox(_converse);
 
         const cbview = _converse.chatboxviews.get('controlbox');
-        cbview.querySelector('.add-contact').click()
+
+        const dropdown = await u.waitUntil(
+            () => cbview.querySelector('.dropdown--contacts')
+        );
+        dropdown.querySelector('.add-contact').click()
+
         const modal = _converse.api.modal.get('converse-add-contact-modal');
         await u.waitUntil(() => u.isVisible(modal), 1000);
         expect(modal.querySelector('form.add-xmpp-contact')).not.toBe(null);

src/plugins/rosterview/tests/roster.js

@@ -165,11 +165,13 @@ describe("The Contacts Roster", function () {
         expect(_converse.roster.get('lord.capulet@example.net').get('subscription')).toBe('none');
     }));
 
-    it("can be refreshed", mock.initConverse(
-        [], {}, async function (_converse) {
+    it("can be refreshed if loglevel is set to debug", mock.initConverse(
+        [], {loglevel: 'debug'}, async function (_converse) {
 
         const sent_IQs = _converse.api.connection.get().IQ_stanzas;
-        let stanza = await u.waitUntil(() => sent_IQs.filter(iq => iq.querySelector('iq query[xmlns="jabber:iq:roster"]')).pop());
+        let stanza = await u.waitUntil(
+            () => sent_IQs.filter(iq => iq.querySelector('iq query[xmlns="jabber:iq:roster"]')).pop());
+
         _converse.api.connection.get()._dataRecv(mock.createRequest($iq({
             to: _converse.api.connection.get().jid,
             type: 'result',
@@ -193,10 +195,17 @@ describe("The Contacts Roster", function () {
         expect(_converse.roster.pluck('jid')).toEqual(['juliet@example.net', 'mercutio@example.net']);
 
         const rosterview = document.querySelector('converse-roster');
-        const sync_button = rosterview.querySelector('.sync-contacts');
+
+        const dropdown = await u.waitUntil(
+            () => rosterview.querySelector('.dropdown--contacts')
+        );
+        const sync_button = dropdown.querySelector('.sync-contacts');
         sync_button.click();
 
-        stanza = await u.waitUntil(() => sent_IQs.filter(iq => iq.querySelector('iq query[xmlns="jabber:iq:roster"]')).pop());
+        stanza = await u.waitUntil(
+            () => sent_IQs.filter(iq => iq.querySelector('iq query[xmlns="jabber:iq:roster"]')).pop()
+        );
+
         _converse.api.connection.get()._dataRecv(mock.createRequest($iq({
             to: _converse.api.connection.get().jid,
             type: 'result',
@@ -223,9 +232,14 @@ describe("The Contacts Roster", function () {
         await mock.waitForRoster(_converse, 'current');
 
         const rosterview = document.querySelector('converse-roster');
-        const filter = rosterview.querySelector('.items-filter');
         const roster = rosterview.querySelector('.roster-contacts');
 
+        const dropdown = await u.waitUntil(
+            () => rosterview.querySelector('.dropdown--contacts')
+        );
+        dropdown.querySelector('.toggle-filter').click();
+
+        const filter = await u.waitUntil(() => rosterview.querySelector('.items-filter'));
         await u.waitUntil(() => (sizzle('li', roster).filter(u.isVisible).length === 17), 800);
         filter.value = "la";
         u.triggerEvent(filter, "keydown", "KeyboardEvent");
@@ -261,23 +275,25 @@ describe("The Contacts Roster", function () {
 
     describe("The live filter", function () {
 
-        it("will only appear when roster contacts flow over the visible area",
+        it("will only be an option when there are more than 5 contacts",
                 mock.initConverse([], {}, async function (_converse) {
 
             expect(document.querySelector('converse-roster')).toBe(null);
-            await mock.waitForRoster(_converse, 'current');
+            await mock.waitForRoster(_converse, 'current', 5);
             await mock.openControlBox(_converse);
 
             const view = _converse.chatboxviews.get('controlbox');
-            const flyout = view.querySelector('.box-flyout');
-            const panel = flyout.querySelector('.controlbox-pane');
-            function hasScrollBar (el) {
-                return el.isConnected && flyout.offsetHeight < panel.scrollHeight;
-            }
-            const rosterview = document.querySelector('converse-roster');
-            const filter = rosterview.querySelector('.items-filter');
-            const el = rosterview.querySelector('.roster-contacts');
-            await u.waitUntil(() => hasScrollBar(el) ? u.isVisible(filter) : !u.isVisible(filter), 900);
+            const dropdown = await u.waitUntil(
+                () => view.querySelector('.dropdown--contacts')
+            );
+            expect(dropdown.querySelector('.toggle-filter')).toBe(null);
+
+            mock.createContact(_converse, 'Slowpoke', 'subscribe');
+            const el = await u.waitUntil(() => dropdown.querySelector('.toggle-filter'));
+            expect(el).toBeDefined();
+
+            el.click();
+            await u.waitUntil(() => view.querySelector('.roster-contacts converse-list-filter'));
         }));
 
         it("can be used to filter the contacts shown",
@@ -288,11 +304,15 @@ describe("The Contacts Roster", function () {
             await mock.openControlBox(_converse);
             await mock.waitForRoster(_converse, 'current');
             const rosterview = document.querySelector('converse-roster');
-            let filter = rosterview.querySelector('.items-filter');
             const roster = rosterview.querySelector('.roster-contacts');
 
             await u.waitUntil(() => (sizzle('li', roster).filter(u.isVisible).length === 17), 600);
             expect(sizzle('ul.roster-group-contacts', roster).filter(u.isVisible).length).toBe(5);
+
+            const filter_toggle = await u.waitUntil(() => rosterview.querySelector('.toggle-filter'));
+            filter_toggle.click();
+
+            let filter = await u.waitUntil(() => rosterview.querySelector('.items-filter'));
             filter.value = "juliet";
             u.triggerEvent(filter, "keydown", "KeyboardEvent");
             await u.waitUntil(() => (sizzle('li', roster).filter(u.isVisible).length === 1), 600);
@@ -338,7 +358,10 @@ describe("The Contacts Roster", function () {
             const rosterview = document.querySelector('converse-roster');
             const roster = rosterview.querySelector('.roster-contacts');
 
-            const button =  rosterview.querySelector('converse-icon[data-type="groups"]');
+            const filter_toggle = await u.waitUntil(() => rosterview.querySelector('.toggle-filter'));
+            filter_toggle.click();
+
+            const button =  await u.waitUntil(() => rosterview.querySelector('converse-icon[data-type="groups"]'));
             button.click();
 
             await u.waitUntil(() => (sizzle('li', roster).filter(u.isVisible).length === 17), 600);
@@ -374,7 +397,11 @@ describe("The Contacts Roster", function () {
             await mock.waitForRoster(_converse, 'current');
 
             const rosterview = document.querySelector('converse-roster');
-            const filter = rosterview.querySelector('.items-filter');
+
+            const filter_toggle = await u.waitUntil(() => rosterview.querySelector('.toggle-filter'));
+            filter_toggle.click();
+
+            const filter = await u.waitUntil(() => rosterview.querySelector('.items-filter'));
             filter.value = "xxx";
             u.triggerEvent(filter, "keydown", "KeyboardEvent");
             expect(_.includes(filter.classList, "x")).toBeFalsy();
@@ -386,37 +413,50 @@ describe("The Contacts Roster", function () {
             await u.waitUntil(() => document.querySelector('.items-filter').value == '');
         }));
 
-        // Disabling for now, because since recently this test consistently
-        // fails on Travis and I couldn't get it to pass there.
-        xit("can be used to filter contacts by their chat state",
+        it("can be used to filter contacts by their chat state",
             mock.initConverse(
                 [], {},
                 async function (_converse) {
 
-            mock.waitForRoster(_converse, 'all');
+            await mock.openControlBox(_converse);
+            await mock.waitForRoster(_converse, 'all');
+
             let jid = mock.cur_names[3].replace(/ /g,'.').toLowerCase() + '@montague.lit';
             _converse.roster.get(jid).presence.set('show', 'online');
             jid = mock.cur_names[4].replace(/ /g,'.').toLowerCase() + '@montague.lit';
             _converse.roster.get(jid).presence.set('show', 'dnd');
             await mock.openControlBox(_converse);
             const rosterview = document.querySelector('converse-roster');
-            const button = rosterview.querySelector('span[data-type="state"]');
+
+            const filter_toggle = await u.waitUntil(() => rosterview.querySelector('.toggle-filter'));
+            filter_toggle.click();
+
+            const button = await u.waitUntil(() => rosterview.querySelector('converse-icon[data-type="state"]'));
             button.click();
-            const roster = rosterview.querySelector('.roster-contacts');
-            await u.waitUntil(() => sizzle('li', roster).filter(u.isVisible).length === 15, 900);
+
             const filter = rosterview.querySelector('.state-type');
+            filter.value = "";
+            u.triggerEvent(filter, 'change');
+
+            const roster = rosterview.querySelector('.roster-contacts');
+            await u.waitUntil(() => sizzle('li', roster).filter(u.isVisible).length === 20, 900);
             expect(sizzle('ul.roster-group-contacts', roster).filter(u.isVisible).length).toBe(5);
+
             filter.value = "online";
             u.triggerEvent(filter, 'change');
 
             await u.waitUntil(() => sizzle('li', roster).filter(u.isVisible).length === 1, 900);
             expect(sizzle('li', roster).filter(u.isVisible).pop().textContent.trim()).toBe('Lord Montague');
-            await u.waitUntil(() => sizzle('ul.roster-group-contacts', roster).filter(u.isVisible).length === 1, 900);
-            const ul = sizzle('ul.roster-group-contacts', roster).filter(u.isVisible).pop();
-            expect(ul.parentElement.firstElementChild.textContent.trim()).toBe('friends & acquaintences');
+
+            let ul = sizzle('ul.roster-group-contacts', roster).filter(u.isVisible).pop();
+            expect(ul.parentElement.firstElementChild.textContent.trim()).toBe('Family');
+
             filter.value = "dnd";
             u.triggerEvent(filter, 'change');
+
             await u.waitUntil(() => sizzle('li', roster).filter(u.isVisible).pop().textContent.trim() === 'Friar Laurence', 900);
+            ul = sizzle('ul.roster-group-contacts', roster).filter(u.isVisible).pop();
+            expect(ul.parentElement.firstElementChild.textContent.trim()).toBe('friends & acquaintences');
             expect(sizzle('ul.roster-group-contacts', roster).filter(u.isVisible).length).toBe(1);
         }));
     });

src/plugins/rosterview/utils.js

@@ -1,3 +1,7 @@
+/**
+ * @typedef {import('@converse/skeletor').Model} Model
+ * @typedef {import('@converse/headless/plugins/roster/contact').default} RosterContact
+ */
 import { __ } from 'i18n';
 import { _converse, api, log } from "@converse/headless";
 
@@ -29,6 +33,11 @@ export function toggleGroup (ev, name) {
     }
 }
 
+/**
+ * @param {RosterContact} contact
+ * @param {string} groupname
+ * @returns {boolean}
+ */
 export function isContactFiltered (contact, groupname) {
     const filter = _converse.state.roster_filter;
     const type = filter.get('type');
@@ -48,7 +57,7 @@ export function isContactFiltered (contact, groupname) {
         } else if (q === 'unread_messages') {
             return contact.get('num_unread') === 0;
         } else if (q === 'online') {
-            return ["offline", "unavailable"].includes(contact.presence.get('show'));
+            return ["offline", "unavailable", "dnd", "away", "xa"].includes(contact.presence.get('show'));
         } else {
             return !contact.presence.get('show').includes(q);
         }
@@ -57,7 +66,15 @@ export function isContactFiltered (contact, groupname) {
     }
 }
 
-export function shouldShowContact (contact, groupname) {
+/**
+ * @param {RosterContact} contact
+ * @param {string} groupname
+ * @param {Model} model
+ * @returns {boolean}
+ */
+export function shouldShowContact (contact, groupname, model) {
+    if (!model.get('filter_visible')) return true;
+
     const chat_status = contact.presence.get('show');
     if (api.settings.get('hide_offline_users') && chat_status === 'offline') {
         // If pending or requesting, show
@@ -71,7 +88,9 @@ export function shouldShowContact (contact, groupname) {
     return !isContactFiltered(contact, groupname);
 }
 
-export function shouldShowGroup (group) {
+export function shouldShowGroup (group, model) {
+    if (!model.get('filter_visible')) return true;
+
     const filter = _converse.state.roster_filter;
     const type = filter.get('type');
     if (type === 'groups') {

src/shared/chat/message-actions.js

@@ -11,13 +11,13 @@ import { until } from 'lit/directives/until.js';
 import './styles/message-actions.scss';
 
 /**
- * @typedef { Object } MessageActionAttributes
+ * @typedef {Object} MessageActionAttributes
  * An object which represents a message action (as shown in the message dropdown);
- * @property { String } i18n_text
- * @property { Function } handler
- * @property { String } button_class
- * @property { String } icon_class
- * @property { String } name
+ * @property {String} i18n_text
+ * @property {Function} handler
+ * @property {String} button_class
+ * @property {String} icon_class
+ * @property {String} name
  */
 
 const { u } = converse.env;
@@ -52,7 +52,10 @@ class MessageActions extends CustomElement {
     }
 
     updateIfOwnOccupant (o) {
-        (o.get('jid') === _converse.bare_jid) && this.requestUpdate();
+        const bare_jid = _converse.session.get('bare_jid');
+        if (o.get('jid') === bare_jid) {
+            this.requestUpdate();
+        }
     }
 
     render () {
@@ -96,6 +99,7 @@ class MessageActions extends CustomElement {
         `;
     }
 
+    /** @param {MouseEvent} ev */
     async onMessageEditButtonClicked (ev) {
         ev.preventDefault();
         const currently_correcting = this.model.collection.findWhere('correcting');
@@ -193,6 +197,7 @@ class MessageActions extends CustomElement {
         }
     }
 
+    /** @param {MouseEvent} [ev] */
     onMessageRetractButtonClicked (ev) {
         ev?.preventDefault?.();
         const chatbox = this.model.collection.chatbox;
@@ -203,6 +208,7 @@ class MessageActions extends CustomElement {
         }
     }
 
+    /** @param {MouseEvent} [ev] */
     onMediaToggleClicked (ev) {
         ev?.preventDefault?.();
 
@@ -285,14 +291,17 @@ class MessageActions extends CustomElement {
         }
     }
 
+    /** @param {MouseEvent} [ev] */
     async onMessageCopyButtonClicked (ev) {
         ev?.preventDefault?.();
         await navigator.clipboard.writeText(this.model.getMessageText());
     }
 
+    /** @param {MouseEvent} [ev] */
     onMessageQuoteButtonClicked (ev) {
         ev?.preventDefault?.();
-        const view = _converse.chatboxviews.get(this.model.collection.chatbox.get('jid'));
+        const { chatboxviews } = _converse.state;
+        const view = chatboxviews.get(this.model.collection.chatbox.get('jid'));
         view?.getMessageForm().insertIntoTextArea(
             this.model.getMessageText().replaceAll(/^/gm, '> '),
             false, false, null, '\n'

src/types/headless/plugins/chat/model.d.ts

@@ -241,6 +241,7 @@ declare class ChatBox extends ModelWithContact {
     incrementUnreadMsgsCounter(message: Message): void;
     clearUnreadMsgCounter(): void;
     isScrolledUp(): any;
+    canPostMessages(): boolean;
 }
 import ModelWithContact from "./model-with-contact.js";
 import { Model } from "@converse/skeletor";

src/types/headless/shared/api/events.d.ts

@@ -13,7 +13,7 @@ declare namespace _default {
      *  event handlers' promises have been resolved.
      *
      * @method _converse.api.trigger
-     * @param { string } name - The event name
+     * @param {string} name - The event name
      */
     function trigger(name: string, ...args: any[]): Promise<void>;
     /**
@@ -23,8 +23,9 @@ declare namespace _default {
      * A hook is a special kind of event which allows you to intercept a data
      * structure in order to modify it, before passing it back.
      * @async
-     * @param { string } name - The hook name
-     * @param {...any} context - The context to which the hook applies (could be for example, a {@link _converse.ChatBox})).
+     * @param {string} name - The hook name
+     * @param {...any} context - The context to which the hook applies
+     *  (could be for example, a {@link _converse.ChatBox}).
      * @param {...any} data - The data structure to be intercepted and modified by the hook listeners.
      * @returns {Promise<any>} - A promise that resolves with the modified data structure.
      */
@@ -33,16 +34,42 @@ declare namespace _default {
         const once: any;
         const on: any;
         const not: any;
+        /**
+         * An options object which lets you set filter criteria for matching
+         * against stanzas.
+         * @typedef {object} MatchingOptions
+         * @property {string} [ns] - The namespace to match against
+         * @property {string} [type] - The stanza type to match against
+         * @property {string} [id] - The stanza id to match against
+         * @property {string} [from] - The stanza sender to match against
+         */
         /**
          * Subscribe to an incoming stanza
          * Every a matched stanza is received, the callback method specified by
          * `callback` will be called.
          * @method _converse.api.listen.stanza
-         * @param { string } name The stanza's name
-         * @param { object } options Matching options (e.g. 'ns' for namespace, 'type' for stanza type, also 'id' and 'from');
-         * @param { function } handler The callback method to be called when the stanza appears
+         * @param {string} name The stanza's name
+         * @param {MatchingOptions|Function} options Matching options or callback
+         * @param {function} handler The callback method to be called when the stanza appears
          */
-        function stanza(name: string, options: any, handler: Function): void;
+        function stanza(name: string, options: Function | {
+            /**
+             * - The namespace to match against
+             */
+            ns?: string;
+            /**
+             * - The stanza type to match against
+             */
+            type?: string;
+            /**
+             * - The stanza id to match against
+             */
+            id?: string;
+            /**
+             * - The stanza sender to match against
+             */
+            from?: string;
+        }, handler: Function): void;
     }
 }
 export default _default;

src/types/plugins/chatview/message-form.d.ts

@@ -13,7 +13,7 @@ export default class MessageForm extends CustomElement {
      * @param { number } [position] - The end index of the string to be
      *  replaced with the new value.
      */
-    insertIntoTextArea(value: string, replace?: (boolean | string), correcting?: boolean, position?: number): void;
+    insertIntoTextArea(value: string, replace?: (boolean | string), correcting?: boolean, position?: number, separator?: string): void;
     onMessageCorrecting(message: any): void;
     onEscapePressed(ev: any): void;
     onPaste(ev: any): void;

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

@@ -7,10 +7,15 @@ export default class RosterView extends CustomElement {
     initialize(): Promise<void>;
     model: Model;
     render(): import("lit-html").TemplateResult<1>;
-    showAddContactModal(ev: any): void;
-    syncContacts(ev: any): Promise<void>;
+    /** @param {MouseEvent} ev */
+    showAddContactModal(ev: MouseEvent): void;
+    /** @param {MouseEvent} [ev] */
+    syncContacts(ev?: MouseEvent): Promise<void>;
     syncing_contacts: boolean;
-    toggleRoster(ev: any): void;
+    /** @param {MouseEvent} [ev] */
+    toggleRoster(ev?: MouseEvent): void;
+    /** @param {MouseEvent} [ev] */
+    toggleFilter(ev?: MouseEvent): void;
 }
 import { CustomElement } from "shared/components/element.js";
 import { Model } from "@converse/skeletor";

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

@@ -2,7 +2,14 @@ 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;
-export function shouldShowContact(contact: any, groupname: any): boolean;
-export function shouldShowGroup(group: any): boolean;
+/**
+ * @param {RosterContact} contact
+ * @param {string} groupname
+ * @param {Model} model
+ */
+export function shouldShowContact(contact: any, groupname: string, model: Model): boolean;
+export function shouldShowGroup(group: any, model: any): boolean;
 export function populateContactsMap(contacts_map: any, contact: any): any;
+export type Model = import('@converse/skeletor').Model;
+export type RosterContact = any;
 //# sourceMappingURL=utils.d.ts.map