Rename `converse-contacts-filter` to `converse-list-filter`

src/headless/plugins/roster/filter.js

@@ -4,9 +4,9 @@ class RosterFilter extends Model {
     initialize () {
         super.initialize();
         this.set({
-            'filter_text': '',
-            'filter_type': 'contacts',
-            'chat_state': 'online'
+            text: '',
+            type: 'items',
+            state: 'online'
         });
     }
 }

src/plugins/bookmark-views/components/bookmarks-list.js

@@ -15,7 +15,7 @@ export default class BookmarksView extends CustomElement {
         await api.waitUntil('bookmarksInitialized');
         const { bookmarks, chatboxes } = _converse;
 
-        this.liveFilter = debounce((ev) => this.model.set({'filter_text': ev.target.value}), 100);
+        this.liveFilter = debounce((ev) => this.model.set({'text': ev.target.value}), 100);
 
         this.listenTo(bookmarks, 'add', () => this.requestUpdate());
         this.listenTo(bookmarks, 'remove', () => this.requestUpdate());
@@ -23,7 +23,8 @@ export default class BookmarksView extends CustomElement {
         this.listenTo(chatboxes, 'add', () => this.requestUpdate());
         this.listenTo(chatboxes, 'remove', () => this.requestUpdate());
 
-        const id = `converse.bookmarks-list-model-${_converse.bare_jid}`;
+        const bare_jid = _converse.session.get('bare_jid');
+        const id = `converse.bookmarks-list-model-${bare_jid}`;
         this.model = new Model({ id });
         initStorage(this.model, id);
 
@@ -41,7 +42,7 @@ export default class BookmarksView extends CustomElement {
 
     clearFilter (ev) {
         ev?.stopPropagation?.();
-        this.model.set('filter_text', '');
+        this.model.set('text', '');
     }
 }
 

src/plugins/bookmark-views/components/templates/list.js

@@ -7,7 +7,7 @@ const filterBookmark = (b, text) => b.get('name')?.includes(text) || b.get('jid'
 
 export default (el) => {
     const i18n_placeholder = __('Filter');
-    const filter_text = el.model.get('filter_text');
+    const filter_text = el.model.get('text');
     const { bookmarks } = _converse;
     const shown_bookmarks = filter_text ? bookmarks.filter(b => filterBookmark(b, filter_text)) : bookmarks;
 

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

@@ -1,49 +1,64 @@
-import 'shared/components/contacts-filter.js';
+/**
+ * @typedef {import('plugins/muc-views/sidebar').default} MUCSidebar
+ * @typedef {import('headless/plugins/muc/occupant').default} Occupant
+ */
+import 'shared/components/list-filter.js';
 import tplOccupant from "./occupant.js";
 import tplOccupantsFilter from './occupants-filter.js';
 import { __ } from 'i18n';
 import { html } from "lit";
 import { repeat } from 'lit/directives/repeat.js';
 
+/**
+ * @param {MUCSidebar} el
+ * @param {Occupant} occ
+ */
 function isOccupantFiltered (el, occ) {
-    const type = el.filter.get('filter_type');
-    const q = (type === 'state') ?
-        el.filter.get('chat_state').toLowerCase() :
-        el.filter.get('filter_text').toLowerCase();
+    const type = el.filter.get('type');
+    const q = (type === 'state') ? el.filter.get('state').toLowerCase() : el.filter.get('text').toLowerCase();
 
     if (!q) return false;
 
     if (type === 'state') {
         const show = occ.get('show');
         return q === 'online' ? ["offline", "unavailable"].includes(show) : !show.includes(q);
-    } else if (type === 'contacts')  {
+    } else if (type === 'items')  {
         return !occ.getDisplayName().toLowerCase().includes(q);
     }
 }
 
+/**
+ * @param {MUCSidebar} el
+ * @param {Occupant} occ
+ * @param {Object} o
+ */
 function shouldShowOccupant (el, occ, o) {
     return isOccupantFiltered(el, occ) ? '' : tplOccupant(occ, o);
 }
 
+/**
+ * @param {MUCSidebar} el
+ * @param {Object} o
+ */
 export default (el, o) => {
     const i18n_participants = o.occupants.length === 1 ? __('Participant') : __('Participants');
     return html`
         <div class="occupants-header">
             <div class="occupants-header--title">
                 <span class="occupants-heading">${o.occupants.length} ${i18n_participants}</span>
-                <i class="hide-occupants" @click=${ev => el.closeSidebar(ev)}>
+                <i class="hide-occupants" @click=${(ev) => el.closeSidebar(ev)}>
                     <converse-icon class="fa fa-times" size="1em"></converse-icon>
                 </i>
             </div>
         </div>
         <div class="dragresize dragresize-occupants-left"></div>
         <ul class="occupant-list">
-            <converse-contacts-filter
+            <converse-list-filter
                     @update=${() => el.requestUpdate()}
                     .promise=${el.model.initialized}
-                    .contacts=${el.model.occupants}
+                    .items=${el.model.occupants}
                     .template=${tplOccupantsFilter}
-                    .filter=${el.filter}></converse-contacts-filter>
+                    .model=${el.filter}></converse-list-filter>
 
             ${ repeat(o.occupants, (occ) => occ.get('jid'), (occ) => shouldShowOccupant(el, occ, o)) }
         </ul>

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

@@ -3,7 +3,7 @@ import { __ } from 'i18n';
 import { api } from '@converse/headless';
 
 /**
- * @param {import('shared/components/contacts-filter').ContactsFilter} el
+ * @param {import('shared/components/list-filter').default} el
  */
 export default (el) => {
     const i18n_placeholder = __('Filter');
@@ -17,22 +17,22 @@ export default (el) => {
     const label_xa = __('Extended Away');
     const label_offline = __('Offline');
 
-    const chat_state = el.filter.get('chat_state');
-    const filter_text = el.filter.get('filter_text');
-    const filter_type = el.filter.get('filter_type');
+    const chat_state = el.model.get('state');
+    const filter_text = el.model.get('text');
+    const filter_type = el.model.get('type');
 
     const is_overlay_mode = api.settings.get('view_mode') === 'overlayed';
 
     return html`
-        <form class="contacts-filter-form input-button-group ${ (!el.shouldBeVisible()) ? 'hidden' : 'fade-in' }"
+        <form class="items-filter-form input-button-group ${ (!el.shouldBeVisible()) ? 'hidden' : 'fade-in' }"
               @submit=${ev => el.submitFilter(ev)}>
             <div class="form-inline ${is_overlay_mode ? '' : 'flex-nowrap'}">
                 <div class="filter-by d-flex flex-nowrap">
                     <converse-icon
                             size="1em"
                             @click=${ev => el.changeTypeFilter(ev)}
-                            class="fa fa-user clickable ${ (filter_type === 'contacts') ? 'selected' : '' }"
-                            data-type="contacts"
+                            class="fa fa-user clickable ${ (filter_type === 'items') ? 'selected' : '' }"
+                            data-type="items"
                             title="${title_contact_filter}"></converse-icon>
                     <converse-icon
                             size="1em"
@@ -44,7 +44,7 @@ export default (el) => {
                 <div class="btn-group">
                     <input .value="${filter_text || ''}"
                         @keydown=${ev => el.liveFilter(ev)}
-                        class="contacts-filter form-control ${ (filter_type === 'state') ? 'hidden' : '' }"
+                        class="items-filter form-control ${ (filter_type === 'state') ? 'hidden' : '' }"
                         placeholder="${i18n_placeholder}"/>
                     <converse-icon size="1em"
                                    class="fa fa-times clear-input ${ (!filter_text || filter_type === 'state') ? 'hidden' : '' }"

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

@@ -23,7 +23,7 @@ describe("The MUC occupants filter", function () {
         const view = _converse.chatboxviews.get(muc_jid);
         await u.waitUntil(() => view.model.occupants.length === 3);
 
-        let filter_el = view.querySelector('converse-contacts-filter');
+        let filter_el = view.querySelector('converse-list-filter');
         expect(u.isVisible(filter_el.firstElementChild)).toBe(false);
 
         for (let i=0; i<mock.chatroom_names.length; i++) {
@@ -53,10 +53,10 @@ describe("The MUC occupants filter", function () {
             expect(occupants.querySelectorAll('li .occupant-nick')[index].textContent.trim()).toBe(name);
         });
 
-        filter_el = view.querySelector('converse-contacts-filter');
+        filter_el = view.querySelector('converse-list-filter');
         expect(u.isVisible(filter_el.firstElementChild)).toBe(true);
 
-        const filter = view.querySelector('.contacts-filter');
+        const filter = filter_el.querySelector('.items-filter');
         filter.value = "j";
         u.triggerEvent(filter, "keydown", "KeyboardEvent");
         await u.waitUntil(() => [...view.querySelectorAll('li')].filter(u.isVisible).length === 1);

src/plugins/rosterview/templates/roster.js

@@ -47,12 +47,12 @@ export default (el) => {
         </div>
 
         <div class="list-container roster-contacts ${ is_closed ? 'hidden' : '' }">
-            <converse-contacts-filter
+            <converse-list-filter
                     @update=${() => el.requestUpdate()}
                     .promise=${api.waitUntil('rosterInitialized')}
-                    .contacts=${_converse.roster}
+                    .items=${_converse.roster}
                     .template=${tplRosterFilter}
-                    .filter=${_converse.roster_filter}></converse-contacts-filter>
+                    .model=${_converse.roster_filter}></converse-list-filter>
 
             ${ repeat(groupnames, (n) => n, (name) => {
                 const contacts = contacts_map[name].filter(c => shouldShowContact(c, name));

src/plugins/rosterview/templates/roster_filter.js

@@ -1,8 +1,11 @@
+/**
+ * @typedef {import('shared/components/list-filter').default} ListFilter
+ */
 import { html } from "lit";
 import { __ } from 'i18n';
 
 /**
- * @param {import('shared/components/contacts-filter').ContactsFilter} el
+ * @param {ListFilter} el
  */
 export default (el) => {
     const i18n_placeholder = __('Filter');
@@ -18,23 +21,23 @@ export default (el) => {
     const label_xa = __('Extended Away');
     const label_offline = __('Offline');
 
-    const chat_state = el.filter.get('chat_state');
-    const filter_text = el.filter.get('filter_text');
-    const filter_type = el.filter.get('filter_type');
+    const chat_state = el.model.get('state');
+    const filter_text = el.model.get('text');
+    const filter_type = el.model.get('type');
 
     return html`
-        <form class="controlbox-padded contacts-filter-form input-button-group ${ !el.shouldBeVisible() ? 'hidden' : 'fade-in' }"
+        <form class="controlbox-padded items-filter-form input-button-group ${ !el.shouldBeVisible() ? 'hidden' : 'fade-in' }"
               @submit=${ev => el.submitFilter(ev)}>
             <div class="form-inline flex-nowrap">
                 <div class="filter-by d-flex flex-nowrap">
-                    <converse-icon size="1em" @click=${ev => el.changeTypeFilter(ev)} class="fa fa-user clickable ${ (filter_type === 'contacts') ? 'selected' : '' }" data-type="contacts" title="${title_contact_filter}"></converse-icon>
+                    <converse-icon size="1em" @click=${ev => el.changeTypeFilter(ev)} class="fa fa-user clickable ${ (filter_type === 'items') ? 'selected' : '' }" data-type="items" title="${title_contact_filter}"></converse-icon>
                     <converse-icon size="1em" @click=${ev => el.changeTypeFilter(ev)} class="fa fa-users clickable ${ (filter_type === 'groups') ? 'selected' : '' }" data-type="groups" title="${title_group_filter}"></converse-icon>
                     <converse-icon size="1em" @click=${ev => el.changeTypeFilter(ev)} class="fa fa-circle clickable ${ (filter_type === 'state') ? 'selected' : '' }" data-type="state" title="${title_status_filter}"></converse-icon>
                 </div>
                 <div class="btn-group">
                     <input .value="${filter_text || ''}"
                         @keydown=${ev => el.liveFilter(ev)}
-                        class="contacts-filter form-control ${ (filter_type === 'state') ? 'hidden' : '' }"
+                        class="items-filter form-control ${ (filter_type === 'state') ? 'hidden' : '' }"
                         placeholder="${i18n_placeholder}"/>
                     <converse-icon size="1em"
                                    class="fa fa-times clear-input ${ (!filter_text || filter_type === 'state') ? 'hidden' : '' }"

src/plugins/rosterview/tests/roster.js

@@ -223,7 +223,7 @@ describe("The Contacts Roster", function () {
         await mock.waitForRoster(_converse, 'current');
 
         const rosterview = document.querySelector('converse-roster');
-        const filter = rosterview.querySelector('.contacts-filter');
+        const filter = rosterview.querySelector('.items-filter');
         const roster = rosterview.querySelector('.roster-contacts');
 
         await u.waitUntil(() => (sizzle('li', roster).filter(u.isVisible).length === 17), 800);
@@ -275,7 +275,7 @@ describe("The Contacts Roster", function () {
                 return el.isConnected && flyout.offsetHeight < panel.scrollHeight;
             }
             const rosterview = document.querySelector('converse-roster');
-            const filter = rosterview.querySelector('.contacts-filter');
+            const filter = rosterview.querySelector('.items-filter');
             const el = rosterview.querySelector('.roster-contacts');
             await u.waitUntil(() => hasScrollBar(el) ? u.isVisible(filter) : !u.isVisible(filter), 900);
         }));
@@ -288,7 +288,7 @@ describe("The Contacts Roster", function () {
             await mock.openControlBox(_converse);
             await mock.waitForRoster(_converse, 'current');
             const rosterview = document.querySelector('converse-roster');
-            let filter = rosterview.querySelector('.contacts-filter');
+            let filter = rosterview.querySelector('.items-filter');
             const roster = rosterview.querySelector('.roster-contacts');
 
             await u.waitUntil(() => (sizzle('li', roster).filter(u.isVisible).length === 17), 600);
@@ -305,7 +305,7 @@ describe("The Contacts Roster", function () {
             const visible_group = sizzle('.roster-group', roster).filter(u.isVisible).pop();
             expect(visible_group.querySelector('a.group-toggle').textContent.trim()).toBe('friends & acquaintences');
 
-            filter = rosterview.querySelector('.contacts-filter');
+            filter = rosterview.querySelector('.items-filter');
             filter.value = "j";
             u.triggerEvent(filter, "keydown", "KeyboardEvent");
             await u.waitUntil(() => (sizzle('li', roster).filter(u.isVisible).length === 2), 700);
@@ -318,14 +318,14 @@ describe("The Contacts Roster", function () {
             expect(visible_groups[0].textContent.trim()).toBe('friends & acquaintences');
             expect(visible_groups[1].textContent.trim()).toBe('Ungrouped');
 
-            filter = rosterview.querySelector('.contacts-filter');
+            filter = rosterview.querySelector('.items-filter');
             filter.value = "xxx";
             u.triggerEvent(filter, "keydown", "KeyboardEvent");
             await u.waitUntil(() => (sizzle('li', roster).filter(u.isVisible).length === 0), 600);
             visible_groups = sizzle('.roster-group', roster).filter(u.isVisible).map(el => el.querySelector('a.group-toggle'));
             expect(visible_groups.length).toBe(0);
 
-            filter = rosterview.querySelector('.contacts-filter');
+            filter = rosterview.querySelector('.items-filter');
             filter.value = "";
             u.triggerEvent(filter, "keydown", "KeyboardEvent");
             await u.waitUntil(() => (sizzle('li', roster).filter(u.isVisible).length === 17), 600);
@@ -344,7 +344,7 @@ describe("The Contacts Roster", function () {
             await u.waitUntil(() => (sizzle('li', roster).filter(u.isVisible).length === 17), 600);
             expect(sizzle('.roster-group', roster).filter(u.isVisible).length).toBe(5);
 
-            let filter = rosterview.querySelector('.contacts-filter');
+            let filter = rosterview.querySelector('.items-filter');
             filter.value = "colleagues";
             u.triggerEvent(filter, "keydown", "KeyboardEvent");
 
@@ -354,13 +354,13 @@ describe("The Contacts Roster", function () {
             // Check that all contacts under the group are shown
             expect(sizzle('div.roster-group:not(.collapsed) li', roster).filter(l => !u.isVisible(l)).length).toBe(0);
 
-            filter = rosterview.querySelector('.contacts-filter');
+            filter = rosterview.querySelector('.items-filter');
             filter.value = "xxx";
             u.triggerEvent(filter, "keydown", "KeyboardEvent");
 
             await u.waitUntil(() => (roster.querySelectorAll('.roster-group').length === 0), 700);
 
-            filter = rosterview.querySelector('.contacts-filter');
+            filter = rosterview.querySelector('.items-filter');
             filter.value = ""; // Check that groups are shown again, when the filter string is cleared.
             u.triggerEvent(filter, "keydown", "KeyboardEvent");
             await u.waitUntil(() => (roster.querySelectorAll('div.roster-group.collapsed').length === 0), 700);
@@ -374,16 +374,16 @@ describe("The Contacts Roster", function () {
             await mock.waitForRoster(_converse, 'current');
 
             const rosterview = document.querySelector('converse-roster');
-            const filter = rosterview.querySelector('.contacts-filter');
+            const filter = rosterview.querySelector('.items-filter');
             filter.value = "xxx";
             u.triggerEvent(filter, "keydown", "KeyboardEvent");
             expect(_.includes(filter.classList, "x")).toBeFalsy();
-            expect(u.hasClass('hidden', rosterview.querySelector('.contacts-filter-form .clear-input'))).toBeTruthy();
+            expect(u.hasClass('hidden', rosterview.querySelector('.items-filter-form .clear-input'))).toBeTruthy();
 
             const isHidden = (el) => u.hasClass('hidden', el);
-            await u.waitUntil(() => !isHidden(rosterview.querySelector('.contacts-filter-form .clear-input')), 900);
+            await u.waitUntil(() => !isHidden(rosterview.querySelector('.items-filter-form .clear-input')), 900);
             rosterview.querySelector('.clear-input').click();
-            await u.waitUntil(() => document.querySelector('.contacts-filter').value == '');
+            await u.waitUntil(() => document.querySelector('.items-filter').value == '');
         }));
 
         // Disabling for now, because since recently this test consistently

src/plugins/rosterview/utils.js

@@ -30,10 +30,10 @@ export function toggleGroup (ev, name) {
 
 export function isContactFiltered (contact, groupname) {
     const filter = _converse.roster_filter;
-    const type = filter.get('filter_type');
+    const type = filter.get('type');
     const q = (type === 'state') ?
-        filter.get('chat_state').toLowerCase() :
-        filter.get('filter_text').toLowerCase();
+        filter.get('state').toLowerCase() :
+        filter.get('text').toLowerCase();
 
     if (!q) return false;
 
@@ -51,7 +51,7 @@ export function isContactFiltered (contact, groupname) {
         } else {
             return !contact.presence.get('show').includes(q);
         }
-    } else if (type === 'contacts')  {
+    } else if (type === 'items')  {
         return !contact.getFilterCriteria().includes(q);
     }
 }
@@ -72,9 +72,9 @@ export function shouldShowContact (contact, groupname) {
 
 export function shouldShowGroup (group) {
     const filter = _converse.roster_filter;
-    const type = filter.get('filter_type');
+    const type = filter.get('type');
     if (type === 'groups') {
-        const q = filter.get('filter_text')?.toLowerCase();
+        const q = filter.get('text')?.toLowerCase();
         if (!q) {
             return true;
         }

src/shared/components/contacts-filter.js → src/shared/components/list-filter.js

@@ -2,36 +2,39 @@ import debounce from "lodash-es/debounce";
 import { CustomElement } from 'shared/components/element.js';
 import { api } from "@converse/headless";
 
-import './styles/contacts-filter.scss';
+import './styles/list-filter.scss';
 
 
-export class ContactsFilter extends CustomElement {
+/**
+ * A component that exposes a text input to enable filtering of a list of DOM items.
+ */
+export default class ListFilter extends CustomElement {
 
     constructor () {
         super();
-        this.contacts = null;
-        this.filter = null;
+        this.items = null;
+        this.model = null;
         this.template = null;
         this.promise = Promise.resolve();
     }
 
     static get properties () {
         return {
-            contacts: { type: Array },
-            filter: { type: Object },
+            items: { type: Array },
+            model: { type: Object },
             promise: { type: Promise },
             template: { type: Object },
         }
     }
 
     initialize () {
-        this.liveFilter = debounce((ev) => this.filter.save({'filter_text': ev.target.value}), 250);
+        this.liveFilter = debounce((ev) => this.model.save({'text': ev.target.value}), 250);
 
-        this.listenTo(this.contacts, "add", () => this.requestUpdate());
-        this.listenTo(this.contacts, "destroy", () => this.requestUpdate());
-        this.listenTo(this.contacts, "remove", () => this.requestUpdate());
+        this.listenTo(this.items, "add", () => this.requestUpdate());
+        this.listenTo(this.items, "destroy", () => this.requestUpdate());
+        this.listenTo(this.items, "remove", () => this.requestUpdate());
 
-        this.listenTo(this.filter, 'change', () => {
+        this.listenTo(this.model, 'change', () => {
             this.dispatchUpdateEvent();
             this.requestUpdate();
         });
@@ -45,7 +48,7 @@ export class ContactsFilter extends CustomElement {
     }
 
     dispatchUpdateEvent () {
-        this.dispatchEvent(new CustomEvent('update', { 'detail': this.filter.changed }));
+        this.dispatchEvent(new CustomEvent('update', { 'detail': this.model.changed }));
     }
 
     /**
@@ -53,7 +56,8 @@ export class ContactsFilter extends CustomElement {
      */
     changeChatStateFilter (ev) {
         ev && ev.preventDefault();
-        this.filter.save({'chat_state': /** @type {HTMLInputElement} */(this.querySelector('.state-type')).value});
+        const state = /** @type {HTMLInputElement} */(this.querySelector('.state-type')).value;
+        this.model.save({ state });
     }
 
     /**
@@ -62,17 +66,13 @@ export class ContactsFilter extends CustomElement {
     changeTypeFilter (ev) {
         ev && ev.preventDefault();
         const target = /** @type {HTMLInputElement} */(ev.target);
-        const type = /** @type {HTMLElement} */(target.closest('converse-icon'))?.dataset.type || 'contacts';
+        const type = /** @type {HTMLElement} */(target.closest('converse-icon'))?.dataset.type || 'items';
         if (type === 'state') {
-            this.filter.save({
-                'filter_type': type,
-                'chat_state': /** @type {HTMLInputElement} */(this.querySelector('.state-type')).value
-            });
+            const state = /** @type {HTMLInputElement} */(this.querySelector('.state-type')).value;
+            this.model.save({ type, state });
         } else {
-            this.filter.save({
-                'filter_type': type,
-                'filter_text': /** @type {HTMLInputElement} */(this.querySelector('.contacts-filter')).value
-            });
+            const text = /** @type {HTMLInputElement} */(this.querySelector('.items-filter')).value;
+            this.model.save({ type, text });
         }
     }
 
@@ -80,7 +80,7 @@ export class ContactsFilter extends CustomElement {
      * @param {Event} ev
      */
     submitFilter (ev) {
-        ev && ev.preventDefault();
+        ev?.preventDefault();
         this.liveFilter();
     }
 
@@ -90,14 +90,14 @@ export class ContactsFilter extends CustomElement {
      * @returns {boolean}
      */
     isActive () {
-        return (this.filter.get('filter_type') === 'state' || this.filter.get('filter_text'));
+        return (this.model.get('type') === 'state' || this.model.get('text'));
     }
 
     /**
      * @returns {boolean}
      */
     shouldBeVisible () {
-        return this.contacts?.length >= 5 || this.isActive();
+        return this.items?.length >= 5 || this.isActive();
     }
 
     /**
@@ -105,8 +105,8 @@ export class ContactsFilter extends CustomElement {
      */
     clearFilter (ev) {
         ev && ev.preventDefault();
-        this.filter.save({'filter_text': ''});
+        this.model.save({'text': ''});
     }
 }
 
-api.elements.define('converse-contacts-filter', ContactsFilter);
+api.elements.define('converse-list-filter', ListFilter);

src/shared/components/styles/contacts-filter.scss → src/shared/components/styles/list-filter.scss

@@ -1,8 +1,8 @@
-converse-contacts-filter {
+converse-list-filter {
     display: block;
     margin-bottom: 1em;
 
-    .contacts-filter-form {
+    .items-filter-form {
         width: 100%;
 
         .button-group {
@@ -13,7 +13,7 @@ converse-contacts-filter {
             padding: 0.25em;
         }
 
-        .contacts-filter {
+        .items-filter {
             width: 100%;
             margin: 0.2em;
             font-size: calc(var(--font-size) - 2px);
@@ -31,7 +31,7 @@ converse-contacts-filter {
 }
 
 .converse-overlayed  {
-    .contacts-filter-form {
+    .items-filter-form {
         .button-group {
             padding: 0.1em;
         }
@@ -40,7 +40,7 @@ converse-contacts-filter {
             padding: 0.15em;
         }
 
-        .contacts-filter {
+        .items-filter {
             width: 100%;
             margin: 0.1em;
             font-size: calc(var(--font-size) - 4px);