Update roomslist and templates to bring in line with conventions

src/plugins/roomslist/templates/roomslist.js

@@ -3,85 +3,83 @@ import 'plugins/muc-views/modals/muc-list.js';
 import { __ } from 'i18n';
 import { _converse, api } from "@converse/headless/core";
 import { html } from "lit";
+import { isUniView } from '@converse/headless/utils/core.js';
+import { addBookmarkViaEvent } from 'plugins/bookmark-views/utils.js';
 
 
-const bookmark = (o) => {
-    const i18n_add_bookmark = __('Bookmark this groupchat');
-    const i18n_remove_bookmark = __('Unbookmark this groupchat');
-    if (o.bookmarked) {
-        return html`
-            <a class="list-item-action remove-bookmark button-on"
-               data-room-jid="${o.room.get('jid')}"
-               data-bookmark-name="${o.room.getDisplayName()}"
-               @click=${o.removeBookmark}
-               title="${ o.bookmarked ? i18n_remove_bookmark : i18n_add_bookmark }">
-
-                <converse-icon class="fa fa-bookmark" size="1.2em" color="${ o.currently_open(o.room) ? 'var(--inverse-link-color)' : '' }"></converse-icon>
-            </a>`;
-    } else {
-        return html`
-            <a class="list-item-action add-bookmark"
-               data-room-jid="${o.room.get('jid')}"
-               data-bookmark-name="${o.room.getDisplayName()}"
-               @click=${o.addBookmark}
-               title="${ o.bookmarked ? i18n_remove_bookmark : i18n_add_bookmark }">
-
-                <converse-icon class="fa fa-bookmark" size="1.2em" color="${ o.currently_open(o.room) ? 'var(--inverse-link-color)' : '' }"></converse-icon>
-            </a>`;
-    }
+function isCurrentlyOpen (room) {
+    return isUniView() && !room.get('hidden');
+}
+
+function tplBookmark (room) {
+    const bm = room.get('bookmarked') ?? false;
+    const i18n_bookmark = __('Bookmark');
+    return html`
+        <a class="list-item-action add-bookmark"
+            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(--inverse-link-color)' : '' }"></converse-icon>
+        </a>`;
 }
 
 
-const unread_indicator = (o) => html`<span class="list-item-badge badge badge--muc msgs-indicator">${ o.room.get('num_unread') }</span>`;
-const activity_indicator = () => html`<span class="list-item-badge badge badge--muc msgs-indicator"></span>`;
+const tplUnreadIndicator = (room) => 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>`;
 
-const room_item = (o) => {
+
+function tplRoomItem (el, room) {
     const i18n_leave_room = __('Leave this groupchat');
-    const has_unread_msgs = o.room.get('num_unread_general') || o.room.get('has_activity');
+    const has_unread_msgs = room.get('num_unread_general') || room.get('has_activity');
     return html`
-        <div class="list-item controlbox-padded available-chatroom d-flex flex-row ${ o.currently_open(o.room) ? 'open' : '' } ${ has_unread_msgs ? 'unread-msgs' : '' }"
-            data-room-jid="${o.room.get('jid')}">
+        <div class="list-item controlbox-padded available-chatroom d-flex flex-row ${ isCurrentlyOpen(room) ? 'open' : '' } ${ has_unread_msgs ? 'unread-msgs' : '' }"
+            data-room-jid="${room.get('jid')}">
 
-            ${ o.room.get('num_unread') ? unread_indicator(o) : (o.room.get('has_activity') ? activity_indicator() : '') }
+            ${ room.get('num_unread') ? tplUnreadIndicator(room) : (room.get('has_activity') ? tplActivityIndicator() : '') }
 
             <a class="list-item-link open-room available-room w-100"
-                data-room-jid="${o.room.get('jid')}"
+                data-room-jid="${room.get('jid')}"
                 title="${__('Click to open this groupchat')}"
-                @click=${o.openRoom}>${o.room.getDisplayName()}</a>
+                @click=${ev => el.openRoom(ev)}>${room.getDisplayName()}</a>
 
-            ${ api.settings.get('allow_bookmarks') ? bookmark(o) : '' }
+            ${ api.settings.get('allow_bookmarks') ? tplBookmark(room) : '' }
 
             <a class="list-item-action room-info"
-                data-room-jid="${o.room.get('jid')}"
+                data-room-jid="${room.get('jid')}"
                 title="${__('Show more information on this groupchat')}"
-                @click=${o.showRoomDetailsModal}>
+                @click=${ev => el.showRoomDetailsModal(ev)}>
 
-                <converse-icon class="fa fa-info-circle" size="1.2em" color="${ o.currently_open(o.room) ? 'var(--inverse-link-color)' : '' }""></converse-icon>
+                <converse-icon class="fa fa-info-circle" size="1.2em" color="${ isCurrentlyOpen(room) ? 'var(--inverse-link-color)' : '' }"></converse-icon>
             </a>
 
             <a class="list-item-action close-room"
-                data-room-jid="${o.room.get('jid')}"
-                data-room-name="${o.room.getDisplayName()}"
+                data-room-jid="${room.get('jid')}"
+                data-room-name="${room.getDisplayName()}"
                 title="${i18n_leave_room}"
-                @click=${o.closeRoom}>
-
-                <converse-icon class="fa fa-sign-out-alt" size="1.2em" color="${ o.currently_open(o.room) ? 'var(--inverse-link-color)' : '' }"></converse-icon>
+                @click=${ev => el.closeRoom(ev)}>
+                <converse-icon class="fa fa-sign-out-alt" size="1.2em" color="${ isCurrentlyOpen(room) ? 'var(--inverse-link-color)' : '' }"></converse-icon>
             </a>
         </div>`;
 }
 
-export default (o) => {
+export default (el) => {
+    const rooms = _converse.chatboxes.filter(m => m.get('type') === _converse.CHATROOMS_TYPE);
+
     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 is_closed = o.model.get('toggle_state') === _converse.CLOSED;
+    const is_closed = el.model.get('toggle_state') === _converse.CLOSED;
     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=${o.toggleRoomsList}>
+                <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"
@@ -91,27 +89,27 @@ export default (o) => {
             </span>
 
             <a class="controlbox-heading__btn show-bookmark-list-modal"
-                @click=${(ev) => api.modal.show('converse-bookmark-list-modal', { 'model': o.model }, ev)}
+                @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': o.model }, ev)}
+                @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': o.model }, ev)}
+                @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>
         </div>
 
-        <div class="list-container list-container--openrooms ${ o.rooms.length ? '' : 'hidden' }">
+        <div class="list-container list-container--openrooms ${ rooms.length ? '' : 'hidden' }">
             <div class="items-list rooms-list open-rooms-list ${ is_closed ? 'collapsed' : '' }">
-                ${ o.rooms.map(room => room_item(Object.assign({room}, o))) }
+                ${ rooms.map(room => tplRoomItem(el, room)) }
             </div>
         </div>`;
 }

src/plugins/roomslist/view.js

@@ -5,7 +5,6 @@ import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
 import { initStorage } from '@converse/headless/utils/storage.js';
-import { isUniView } from '@converse/headless/utils/core.js';
 
 const { Strophe, u } = converse.env;
 
@@ -26,6 +25,10 @@ export class RoomsList extends CustomElement {
         this.requestUpdate();
     }
 
+    render () {
+        return tpl_roomslist(this);
+    }
+
     renderIfChatRoom (model) {
         u.isChatRoom(model) && this.requestUpdate();
     }
@@ -38,21 +41,6 @@ export class RoomsList extends CustomElement {
         }
     }
 
-    render () {
-        return tpl_roomslist({
-            'addBookmark': ev => this.addBookmark(ev),
-            'allow_bookmarks': api.settings.get('allow_bookmarks') && _converse.bookmarks,
-            'closeRoom': ev => this.closeRoom(ev),
-            'currently_open': room => isUniView() && !room.get('hidden'),
-            'model': this.model,
-            'openRoom': ev => this.openRoom(ev),
-            'removeBookmark': ev => this.removeBookmark(ev),
-            'rooms': _converse.chatboxes.filter(m => m.get('type') === _converse.CHATROOMS_TYPE),
-            'showRoomDetailsModal': ev => this.showRoomDetailsModal(ev),
-            'toggleRoomsList': ev => this.toggleRoomsList(ev)
-        });
-    }
-
     showRoomDetailsModal (ev) { // eslint-disable-line class-methods-use-this
         const jid = ev.currentTarget.getAttribute('data-room-jid');
         const room = _converse.chatboxes.get(jid);
@@ -81,14 +69,6 @@ export class RoomsList extends CustomElement {
         }
     }
 
-    removeBookmark (ev) { // eslint-disable-line class-methods-use-this
-        _converse.removeBookmarkViaEvent(ev);
-    }
-
-    addBookmark (ev) { // eslint-disable-line class-methods-use-this
-        _converse.addBookmarkViaEvent(ev);
-    }
-
     toggleRoomsList (ev) {
         ev?.preventDefault?.();
         const list_el = this.querySelector('.open-rooms-list');

src/shared/templates/icons.js

@@ -85,6 +85,9 @@ export default () => html`
     <symbol id="icon-bookmark" viewBox="0 0 384 512">
         <path d="M0 512V48C0 21.49 21.49 0 48 0h288c26.51 0 48 21.49 48 48v464L192 400 0 512z"></path>
     </symbol>
+    <symbol id="icon-bookmark-empty" viewBox="0 0 384 512">
+        <path d="M0 48C0 21.5 21.5 0 48 0l0 48V441.4l130.1-92.9c8.3-6 19.6-6 27.9 0L336 441.4V48H48V0H336c26.5 0 48 21.5 48 48V488c0 9-5 17.2-13 21.3s-17.6 3.4-24.9-1.8L192 397.5 37.9 507.5c-7.3 5.2-16.9 5.9-24.9 1.8S0 497 0 488V48z"/>
+    </symbol>
     <symbol id="icon-caret-down" viewBox="0 0 320 512">
         <path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path>
     </symbol>