MUC improvements

- Don't show the bookmarked icon in the header.
- Don't use the `name` from the bookmark, since Converse doesn't let you set the bookmark name and using it adds complexity.
- While refreshing the disco, set the MUC name
- Remove ability to add/remove bookmark from the rooms list

src/headless/plugins/bookmarks/plugin.js

@@ -27,16 +27,7 @@ converse.plugins.add('converse-bookmarks', {
         // New functions which don't exist yet can also be added.
 
         ChatRoom: {
-            getDisplayName() {
-                const { _converse, getDisplayName } = this.__super__;
-                const { bookmarks } = _converse.state;
-                const bookmark = this.get('bookmarked') ? bookmarks?.get(this.get('jid')) : null;
-                return bookmark?.get('name') || getDisplayName.apply(this, arguments);
-            },
-
-            /**
-             * @param {string} nick
-             */
+            /** @param {string} nick */
             getAndPersistNickname(nick) {
                 nick = nick || getNicknameFromBookmark(this.get('jid'));
                 return this.__super__.getAndPersistNickname.call(this, nick);

src/headless/plugins/muc/muc.js

@@ -1235,14 +1235,20 @@ class MUC extends ModelWithMessages(ColorAwareModel(ChatBoxBase)) {
      */
     async getDiscoInfoFields () {
         const fields = await api.disco.getFields(this.get('jid'));
+
         const config = fields.reduce((config, f) => {
             const name = f.get('var');
+            if (name === 'muc#roomconfig_roomname') {
+                config['roomname'] = f.get('value');
+            }
             if (name?.startsWith('muc#roominfo_')) {
                 config[name.replace('muc#roominfo_', '')] = f.get('value');
             }
             return config;
         }, {});
+
         this.config.save(config);
+        if (config['roomname']) this.save({ name: config['roomname'] });
     }
 
     /**

src/plugins/bookmark-views/index.js

@@ -8,7 +8,7 @@ import './modals/bookmark-form.js';
 import BookmarkForm from './components/bookmark-form.js';
 import BookmarksView from './components/bookmarks-list.js';
 import { BookmarkableChatRoomView } from './mixins.js';
-import { removeBookmarkViaEvent, addBookmarkViaEvent } from './utils.js';
+import { removeBookmarkViaEvent } from './utils.js';
 
 import './styles/bookmarks.scss';
 
@@ -34,7 +34,6 @@ converse.plugins.add('converse-bookmark-views', {
 
         const exports = {
             removeBookmarkViaEvent,
-            addBookmarkViaEvent,
             MUCBookmarkForm: BookmarkForm,
             BookmarksView,
         };

src/plugins/bookmark-views/tests/bookmarks.js

@@ -26,42 +26,6 @@ describe("A chat room", function () {
             await u.waitUntil(() => room.getAndPersistNickname.calls.count());
             expect(room.get('nick')).toBe('Othello');
         }));
-
-        it("displays that it's bookmarked through its bookmark icon",
-                mock.initConverse([], {}, async function (_converse) {
-
-            const { u } = converse.env;
-            await mock.waitForRoster(_converse, 'current', 0);
-            mock.waitUntilDiscoConfirmed(
-                _converse, _converse.bare_jid,
-                [{'category': 'pubsub', 'type': 'pep'}],
-                [
-                    'http://jabber.org/protocol/pubsub#publish-options',
-                    'urn:xmpp:bookmarks:1#compat'
-                ]
-            );
-
-            const nick = 'romeo';
-            const muc_jid = 'lounge@montague.lit';
-            await _converse.api.rooms.open(muc_jid);
-            await mock.getRoomFeatures(_converse, muc_jid);
-            await mock.waitForReservedNick(_converse, muc_jid, nick);
-
-            const view = _converse.chatboxviews.get('lounge@montague.lit');
-            expect(view.querySelector('.chatbox-title__text .fa-bookmark')).toBe(null);
-
-            const { bookmarks } = _converse.state;
-            bookmarks.create({
-                'jid': view.model.get('jid'),
-                'autojoin': false,
-                'name':  'The lounge',
-                'nick': ' some1'
-            });
-            view.model.set('bookmarked', true);
-            await u.waitUntil(() => view.querySelector('.chatbox-title__text .fa-bookmark') !== null);
-            view.model.set('bookmarked', false);
-            await u.waitUntil(() => view.querySelector('.chatbox-title__text .fa-bookmark') === null);
-        }));
     });
 });
 

src/plugins/bookmark-views/utils.js

@@ -17,16 +17,6 @@ export async function removeBookmarkViaEvent(ev) {
     }
 }
 
-/**
- * @param {Event} ev
- */
-export function addBookmarkViaEvent(ev) {
-    ev.preventDefault();
-    const el = /** @type {Element} */ (ev.currentTarget);
-    const jid = el.getAttribute('data-room-jid');
-    api.modal.show('converse-bookmark-form-modal', { jid }, ev);
-}
-
 /**
  * @param {Event} ev
  */

src/plugins/muc-views/modals/templates/muc-details.js

@@ -11,8 +11,8 @@ const subject = (model) => {
     const i18n_topic = __('Topic');
     const i18n_topic_author = __('Topic author');
     return html`
-        <p class="room-info"><strong>${i18n_topic}</strong>: <converse-texture text=${subject.text} render_styling></converse-texture></p>
-        <p class="room-info"><strong>${i18n_topic_author}</strong>: ${subject && subject.author}</p>
+        <p class="room-info"><strong>${i18n_topic}:</strong> <converse-texture text=${subject.text} render_styling></converse-texture></p>
+        <p class="room-info"><strong>${i18n_topic_author}:</strong> ${subject && subject.author}</p>
     `;
 }
 
@@ -65,13 +65,13 @@ export default (model) => {
                 nonce=${model.vcard?.get('vcard_updated')}
                 height="72" width="72"></converse-avatar>
 
-            <p class="room-info"><strong>${i18n_name}</strong>: ${model.get('name')}</p>
-            <p class="room-info"><strong>${i18n_address}</strong>: <converse-texture text="xmpp:${model.get('jid')}?join"></converse-texture></p>
+            <p class="room-info"><strong>${i18n_name}:</strong> ${model.get('name')}</p>
+            <p class="room-info"><strong>${i18n_address}:</strong> <converse-texture text="xmpp:${model.get('jid')}?join"></converse-texture></p>
             <br/>
-            <p class="room-info"><strong>${i18n_desc}</strong>: <converse-texture text="${config.description}" render_styling></converse-texture></p>
+            <p class="room-info"><strong>${i18n_desc}:</strong> <converse-texture text="${config.description}" render_styling></converse-texture></p>
             ${ (model.get('subject')) ? subject(model) : '' }
-            <p class="room-info"><strong>${i18n_online_users}</strong>: ${num_occupants}</p>
-            <p class="room-info"><strong>${i18n_features}</strong>:
+            <p class="room-info"><strong>${i18n_online_users}:</strong> ${num_occupants}</p>
+            <p class="room-info"><strong>${i18n_features}:</strong>
                 <div class="chatroom-features">
                     <ul class="features-list">
                     ${ features.passwordprotected ? html`<li class="feature"><converse-icon size="1em" class="fa fa-lock"></converse-icon>${i18n_password_protected} - <em>${i18n_password_help}</em></li>` : '' }

src/plugins/muc-views/styles/muc-details-modal.scss

@@ -12,6 +12,7 @@ converse-muc-details-modal {
         }
         strong {
             color: var(--muc-color);
+            margin-right: 0.5em;
         }
     }
 

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

@@ -12,7 +12,6 @@ export default (el) => {
     const subject_hidden = el.user_settings?.get('mucs_with_hidden_subject', [])?.includes(el.model.get('jid'));
     const heading_buttons_promise = el.getHeadingButtons(subject_hidden);
     const i18n_hide_topic = __('Hide the groupchat topic');
-    const i18n_bookmarked = __('This groupchat is bookmarked');
     const subject = o.subject ? o.subject.text : '';
     const show_subject = (subject && !subject_hidden);
     return html`
@@ -37,13 +36,6 @@ export default (el) => {
                      role="heading" aria-level="2"
                      title="${ (api.settings.get('locked_muc_domain') !== 'hidden') ? o.jid : '' }">
                     ${ el.model.getDisplayName() }
-                    ${ (o.bookmarked) ?
-                        html`<converse-icon
-                                class="fa fa-bookmark chatbox-title__text--bookmarked"
-                                size="1em"
-                                color="var(--muc-color)"
-                                title="${i18n_bookmarked}">
-                            </converse-icon>` : '' }
                 </div>
             </div>
             <div class="chatbox-title__buttons btn-toolbar g-0">

src/plugins/muc-views/tests/muc-avatar.js

@@ -118,11 +118,11 @@ describe('Groupchats', () => {
                     let els = modal.querySelectorAll('p.room-info');
                     expect(els[0].textContent).toBe('Name: A Dark Cave');
 
-                    expect(els[1].querySelector('strong').textContent).toBe('XMPP address');
+                    expect(els[1].querySelector('strong').textContent).toBe('XMPP address:');
                     expect(els[1].querySelector('converse-texture').textContent.trim()).toBe(
                         'xmpp:coven@chat.shakespeare.lit?join'
                     );
-                    expect(els[2].querySelector('strong').textContent).toBe('Description');
+                    expect(els[2].querySelector('strong').textContent).toBe('Description:');
                     expect(els[2].querySelector('converse-texture').textContent).toBe('This is the description');
 
                     expect(els[3].textContent).toBe('Online users: 1');
@@ -153,13 +153,13 @@ describe('Groupchats', () => {
                     els = modal.querySelectorAll('p.room-info');
                     expect(els[0].textContent).toBe('Name: A Dark Cave');
 
-                    expect(els[1].querySelector('strong').textContent).toBe('XMPP address');
+                    expect(els[1].querySelector('strong').textContent).toBe('XMPP address:');
                     expect(els[1].querySelector('converse-texture').textContent.trim()).toBe(
                         'xmpp:coven@chat.shakespeare.lit?join'
                     );
-                    expect(els[2].querySelector('strong').textContent).toBe('Description');
+                    expect(els[2].querySelector('strong').textContent).toBe('Description:');
                     expect(els[2].querySelector('converse-texture').textContent).toBe('This is the description');
-                    expect(els[3].querySelector('strong').textContent).toBe('Topic');
+                    expect(els[3].querySelector('strong').textContent).toBe('Topic:');
                     await u.waitUntil(
                         () => els[3].querySelector('converse-texture').textContent === 'Hatching dark plots'
                     );

src/plugins/roomslist/templates/roomslist.js

@@ -7,7 +7,6 @@ import { _converse, api, u, constants } from "@converse/headless";
 import 'plugins/muc-views/modals/add-muc.js';
 import 'plugins/muc-views/modals/muc-list.js';
 import { __ } from 'i18n';
-import { addBookmarkViaEvent } from 'plugins/bookmark-views/utils.js';
 import { getUnreadMsgsDisplay } from "shared/chat/utils";
 
 import '../styles/roomsgroups.scss';
@@ -20,24 +19,6 @@ function isCurrentlyOpen (room) {
     return isUniView() && !room.get('hidden');
 }
 
-/** @param {MUC} room */
-function tplBookmark (room) {
-    const bm = room.get('bookmarked') ?? false;
-    const i18n_bookmark = __('Bookmark');
-    return html`
-        <a class="list-item-action add-bookmark"
-            tabindex="0"
-            data-room-jid="${room.get('jid')}"
-            data-bookmark-name="${room.getDisplayName()}"
-            @click=${(ev) => addBookmarkViaEvent(ev)}
-            title="${ i18n_bookmark }">
-
-            <converse-icon class="fa ${bm ? 'fa-bookmark' : 'fa-bookmark-empty'}"
-                           size="1.2em"
-                           color="${ isCurrentlyOpen(room) ? 'var(--foreground-color)' : '' }"></converse-icon>
-        </a>`;
-}
-
 /** @param {MUC} room */
 function tplUnreadIndicator (room) {
     return html`<span class="list-item-badge badge badge--muc msgs-indicator">${ getUnreadMsgsDisplay(room) }</span>`;
@@ -75,8 +56,6 @@ function tplRoomItem (el, room) {
                     ${room.getDisplayName()}</span>
             </a>
 
-            ${ api.settings.get('allow_bookmarks') ? tplBookmark(room) : '' }
-
             <a class="list-item-action close-room"
                 tabindex="0"
                 data-room-jid="${room.get('jid')}"

src/plugins/roomslist/tests/roomslist.js

@@ -94,65 +94,6 @@ describe("A list of open groupchats", function () {
         expect(roomspanel.querySelectorAll('.available-room').length).toBe(1);
         await u.waitUntil(() => roomspanel.querySelectorAll('.msgs-indicator').length === 0);
     }));
-
-    it("uses bookmarks to determine groupchat names",
-        mock.initConverse(
-            ['chatBoxesFetched'],
-            {'view_mode': 'fullscreen'},
-            async function (_converse) {
-
-        const { Strophe, sizzle } = converse.env;
-        const u = converse.env.utils;
-
-        await mock.waitForRoster(_converse, 'current', 0);
-        await mock.openAndEnterChatRoom(_converse, 'lounge@montague.lit', 'romeo');
-        let stanza = stx`<presence to="romeo@montague.lit/orchard" from="lounge@montague.lit/newguy" xmlns="jabber:client">
-                <x xmlns="${Strophe.NS.MUC_USER}">
-                    <item affiliation="none" jid="newguy@montague.lit/_converse.js-290929789" role="participant"/>
-                </x>
-            </presence>`;
-        _converse.api.connection.get()._dataRecv(mock.createRequest(stanza));
-
-        spyOn(_converse.exports.Bookmarks.prototype, 'fetchBookmarks').and.callThrough();
-
-        await mock.waitUntilDiscoConfirmed(
-            _converse, _converse.bare_jid,
-            [{'category': 'pubsub', 'type':'pep'}],
-            [`${Strophe.NS.PUBSUB}#publish-options`]
-        );
-
-        const IQ_stanzas = _converse.api.connection.get().IQ_stanzas;
-        const sent_stanza = await u.waitUntil(() => IQ_stanzas.filter(s => sizzle('items[node="storage:bookmarks"]', s).length).pop());
-        expect(sent_stanza).toEqualStanza(
-            stx`<iq from="romeo@montague.lit/orchard" id="${sent_stanza.getAttribute('id')}" type="get" xmlns="jabber:client">
-                <pubsub xmlns="http://jabber.org/protocol/pubsub">
-                    <items node="storage:bookmarks"/>
-                </pubsub>
-            </iq>`);
-
-        stanza = stx`<iq to="${_converse.api.connection.get().jid}" type="result" id="${sent_stanza.getAttribute('id')}" xmlns="jabber:client">
-            <pubsub xmlns="${Strophe.NS.PUBSUB}">
-                <items node="storage:bookmarks">
-                    <item id="current">
-                        <storage xmlns="storage:bookmarks">
-                            <conference name="Bookmarked Lounge" jid="lounge@montague.lit"/>
-                        </storage>
-                    </item>
-                </items>
-            </pubsub>
-        </iq>`;
-        _converse.api.connection.get()._dataRecv(mock.createRequest(stanza));
-
-        await _converse.api.waitUntil('roomsListInitialized');
-        const controlbox = _converse.chatboxviews.get('controlbox');
-        const list = controlbox.querySelector('.list-container--openrooms');
-        expect(Array.from(list.classList).includes('hidden')).toBeFalsy();
-        const items = list.querySelectorAll('.list-item');
-        expect(items.length).toBe(1);
-
-        await u.waitUntil(() => list.querySelector('.list-item .open-room span').textContent.trim() === 'Bookmarked Lounge');
-        expect(_converse.state.bookmarks.fetchBookmarks).toHaveBeenCalled();
-    }));
 });
 
 describe("A groupchat shown in the groupchats list", function () {

src/types/plugins/bookmark-views/utils.d.ts

@@ -2,10 +2,6 @@
  * @param {Event} ev
  */
 export function removeBookmarkViaEvent(ev: Event): Promise<void>;
-/**
- * @param {Event} ev
- */
-export function addBookmarkViaEvent(ev: Event): void;
 /**
  * @param {Event} ev
  */