Also make the open rooms list an OrderedListView

dev.html

@@ -60,6 +60,7 @@
             //     'prosody@conference.prosody.im',
             //     'jdev@conference.jabber.org'
             // ],
+            hide_open_bookmarks: true,
             notify_all_room_messages: [
                 'discuss@conference.conversejs.org'
             ],

spec/bookmarks.js

@@ -477,6 +477,7 @@
                         return true;
                     }
                 }).length).toBe(1);
+
                 var stanza = $iq({'to': _converse.connection.jid, 'type':'result', 'id':IQ_id})
                     .c('pubsub', {'xmlns': Strophe.NS.PUBSUB})
                         .c('items', {'node': 'storage:bookmarks'})

spec/chatroom.js

@@ -3146,7 +3146,7 @@
 
                 panel.onRoomsFound(iq);
                 expect($(panel.el.querySelector('#available-chatrooms')).children('dt').length).toBe(1);
-                expect($(panel.el.querySelector('#available-chatrooms')).children('dt').first().text()).toBe("Rooms on muc.localhost");
+                expect($(panel.el.querySelector('#available-chatrooms')).children('dt').first().text()).toBe("Rooms found");
                 expect($(panel.el.querySelector('#available-chatrooms')).children('dd').length).toBe(4);
                 done();
             }));

src/converse-bookmarks.js

@@ -417,9 +417,9 @@
                 initialize () {
                     Backbone.OrderedListView.prototype.initialize.apply(this, arguments);
 
-                    this.toggleBookmarksList = _.debounce(this._toggleBookmarksList, 600, {'leading': true});
+                    this.model.on('add', this.showOrHide, this);
+                    this.model.on('remove', this.showOrHide, this);
 
-                    this.model.on('remove', this.hideListIfEmpty, this);
                     _converse.chatboxes.on('add', this.renderBookmarkListElement, this);
                     _converse.chatboxes.on('remove', this.renderBookmarkListElement, this);
 
@@ -441,7 +441,7 @@
                         'label_bookmarks': __('Bookmarks'),
                         '_converse': _converse
                     });
-                    this.hideListIfEmpty();
+                    this.showOrHide();
                     this.insertIntoControlBox();
                     return this;
                 },
@@ -465,17 +465,24 @@
                         return;
                     }
                     bookmarkview.render();
-                    this.hideListIfEmpty();
+                    this.showOrHide();
                 },
 
-                hideListIfEmpty (item) {
-                    const bookmarks = sizzle('.available-chatroom:not(.hidden)', this.el);
-                    if (!this.model.models.length || !bookmarks.length) {
-                        u.hideElement(this.el);
+                showOrHide (item) {
+                    if (_converse.hide_open_bookmarks) {
+                        const bookmarks = this.model.filter((bookmark) =>
+                                !_converse.chatboxes.get(bookmark.get('jid')));
+                        if (!bookmarks.length) {
+                            u.hideElement(this.el);
+                            return;
+                        }
+                    }
+                    if (this.model.models.length) {
+                        u.showElement(this.el);
                     }
                 },
 
-                _toggleBookmarksList (ev) {
+                toggleBookmarksList (ev) {
                     if (ev && ev.preventDefault) { ev.preventDefault(); }
                     if (u.hasClass('icon-opened', ev.target)) {
                         u.slideIn(this.el.querySelector('.bookmarks'));

src/converse-muc.js

@@ -28,11 +28,11 @@
             "tpl!chatroom_toolbar",
             "tpl!chatrooms_tab",
             "tpl!info",
-            "tpl!no_rooms",
             "tpl!occupant",
             "tpl!room_description",
             "tpl!room_item",
             "tpl!room_panel",
+            "tpl!rooms_results",
             "tpl!spinner",
             "awesomplete",
             "converse-chatview",
@@ -59,11 +59,11 @@
             tpl_chatroom_toolbar,
             tpl_chatrooms_tab,
             tpl_info,
-            tpl_no_rooms,
             tpl_occupant,
             tpl_room_description,
             tpl_room_item,
             tpl_room_panel,
+            tpl_rooms_results,
             tpl_spinner,
             Awesomplete
     ) {
@@ -2634,8 +2634,8 @@
 
                 informNoRoomsFound () {
                     const chatrooms_el = this.el.querySelector('#available-chatrooms');
-                    chatrooms_el.innerHTML = tpl_no_rooms({
-                        'no_rooms_text': __('No rooms found')
+                    chatrooms_el.innerHTML = tpl_rooms_results({
+                        'feedback_text': __('No rooms found')
                     });
                     const input_el = this.el.querySelector('input#show-rooms');
                     input_el.classList.remove('hidden')
@@ -2651,8 +2651,9 @@
                     if (this.rooms.length) {
                         // For translators: %1$s is a variable and will be
                         // replaced with the XMPP server name
-                        available_chatrooms.innerHTML =
-                            `<dt>${__('Rooms on %1$s',this.model.get('muc_domain'))}</dt>`;
+                        available_chatrooms.innerHTML = tpl_rooms_results({
+                            'feedback_text': __('Rooms found')
+                        });
                         const div = document.createElement('div');
                         const fragment = document.createDocumentFragment();
                         for (let i=0; i<this.rooms.length; i++) {

src/converse-roomslist.js

@@ -18,6 +18,7 @@
         ], factory);
 }(this, function (utils, converse, muc, tpl_rooms_list, tpl_rooms_list_item) {
     const { Backbone, Promise, b64_sha1, sizzle, _ } = converse.env;
+    const u = converse.env.utils;
 
     converse.plugins.add('converse-roomslist', {
 
@@ -42,13 +43,93 @@
             const { _converse } = this,
                   { __ } = _converse;
 
+
+            _converse.OpenRooms = Backbone.Collection.extend({
+                comparator (room) {
+                    if (room.get('bookmarked')) {
+                        const bookmark = _.head(_converse.bookmarksview.model.where({'jid': room.get('jid')}));
+                        return bookmark.get('name');
+                    } else {
+                        return room.get('name');
+                    }
+                },
+
+                initialize () {
+                    this.browserStorage = new Backbone.BrowserStorage[_converse.storage](
+                        b64_sha1(`converse.open-rooms-{_converse.bare_jid}`));
+                    _converse.chatboxes.on('add', this.onChatBoxAdded, this);
+                    _converse.chatboxes.on('change:bookmarked', this.onChatBoxChanged, this);
+                    _converse.chatboxes.on('change:name', this.onChatBoxChanged, this);
+                    _converse.chatboxes.on('change:num_unread', this.onChatBoxChanged, this);
+                    _converse.chatboxes.on('change:num_unread_general', this.onChatBoxChanged, this);
+                    _converse.chatboxes.on('remove', this.onChatBoxRemoved, this);
+                    this.reset(_.map(_converse.chatboxes.where({'type': 'chatroom'}), 'attributes'));
+                },
+
+                onChatBoxAdded (item) {
+                    if (item.get('type') === 'chatroom') {
+                        this.create(item.attributes);
+                    }
+                },
+
+                onChatBoxChanged (item) {
+                    if (item.get('type') === 'chatroom') {
+                        const room =  this.get(item.get('jid'));
+                        if (!_.isNil(room)) {
+                            room.set(item.attributes);
+                        }
+                    }
+                },
+
+                onChatBoxRemoved (item) {
+                    if (item.get('type') === 'chatroom') {
+                        const room = this.get(item.get('jid'))
+                        this.remove(room);
+                    }
+                }
+            });
+
+
             _converse.RoomsList = Backbone.Model.extend({
                 defaults: {
                     "toggle-state":  _converse.OPENED
                 }
             });
 
-            _converse.RoomsListView = Backbone.NativeView.extend({
+            _converse.RoomsListElementView = Backbone.VDOMView.extend({
+                initialize () {
+                    this.model.on('destroy', this.remove, this);
+                    this.model.on('remove', this.remove, this);
+                    this.model.on('change:bookmarked', this.render, this);
+                    this.model.on('change:name', this.render, this);
+                    this.model.on('change:num_unread', this.render, this);
+                    this.model.on('change:num_unread_general', this.render, this);
+                },
+
+                getRoomsListElementName () {
+                    if (this.model.get('bookmarked')) {
+                        const bookmark = _.head(_converse.bookmarksview.model.where({'jid': this.model.get('jid')}));
+                        return bookmark.get('name');
+                    } else {
+                        return this.model.get('name');
+                    }
+                },
+
+                toHTML () {
+                    return tpl_rooms_list_item(
+                        _.extend(this.model.toJSON(), {
+                            'allow_bookmarks': _converse.allow_bookmarks,
+                            'info_leave_room': __('Leave this room'),
+                            'info_remove_bookmark': __('Unbookmark this room'),
+                            'info_add_bookmark': __('Bookmark this room'),
+                            'info_title': __('Show more information on this room'),
+                            'name': this.getRoomsListElementName(),
+                            'open_title': __('Click to open this room')
+                        }));
+                }
+            });
+
+            _converse.RoomsListView = Backbone.OrderedListView.extend({
                 tagName: 'div',
                 className: 'open-rooms-list rooms-list-container',
                 events: {
@@ -57,16 +138,15 @@
                     'click .open-rooms-toggle': 'toggleRoomsList',
                     'click .remove-bookmark': 'removeBookmark',
                 },
+                listSelector: '.rooms-list',
+                ItemView: _converse.RoomsListElementView,
+                subviewIndex: 'jid',
 
                 initialize () {
-                    this.toggleRoomsList = _.debounce(this.toggleRoomsList, 600, {'leading': true});
+                    Backbone.OrderedListView.prototype.initialize.apply(this, arguments);
 
-                    this.model.on('add', this.renderRoomsListElement, this);
-                    this.model.on('change:bookmarked', this.renderRoomsListElement, this);
-                    this.model.on('change:name', this.renderRoomsListElement, this);
-                    this.model.on('change:num_unread', this.renderRoomsListElement, this);
-                    this.model.on('change:num_unread_general', this.renderRoomsListElement, this);
-                    this.model.on('remove', this.removeRoomsListElement, this);
+                    this.model.on('add', this.showOrHide, this);
+                    this.model.on('remove', this.showOrHide, this);
 
                     const cachekey = `converse.roomslist${_converse.bare_jid}`;
                     this.list_model = new _converse.RoomsList();
@@ -76,6 +156,7 @@
                     );
                     this.list_model.fetch();
                     this.render();
+                    this.sortAndPositionAllItems();
                 },
 
                 render () {
@@ -85,13 +166,16 @@
                         'desc_rooms': __('Click to toggle the rooms list'),
                         'label_rooms': __('Open Rooms')
                     });
-                    this.hide();
                     if (this.list_model.get('toggle-state') !== _converse.OPENED) {
                         this.el.querySelector('.open-rooms-list').classList.add('collapsed');
                     }
-                    this.model.each(this.renderRoomsListElement.bind(this));
-                    const controlboxview = _converse.chatboxviews.get('controlbox');
+                    this.showOrHide();
+                    this.insertIntoControlBox();
+                    return this;
+                },
 
+                insertIntoControlBox () {
+                    const controlboxview = _converse.chatboxviews.get('controlbox');
                     if (!_.isUndefined(controlboxview) &&
                             !document.body.contains(this.el)) {
                         const container = controlboxview.el.querySelector('#chatrooms');
@@ -99,15 +183,14 @@
                             container.insertBefore(this.el, container.firstChild);
                         }
                     }
-                    return this.el;
                 },
 
                 hide () {
-                    this.el.classList.add('hidden');
+                    u.hideElement(this.el);
                 },
 
                 show () {
-                    this.el.classList.remove('hidden');
+                    u.showElement(this.el);
                 },
 
                 closeRoom (ev) {
@@ -146,6 +229,14 @@
                     this.show();
                 },
 
+                showOrHide (item) {
+                    if (!this.model.models.length) {
+                        u.hideElement(this.el);
+                    } else {
+                        u.showElement(this.el);
+                    }
+                },
+
                 removeBookmark: _converse.removeBookmarkViaEvent,
                 addBookmark: _converse.addBookmarkViaEvent,
 
@@ -181,7 +272,7 @@
 
             const initRoomsListView = function () {
                 _converse.rooms_list_view = new _converse.RoomsListView(
-                    {'model': _converse.chatboxes}
+                    {'model': new _converse.OpenRooms()  }
                 );
             };