Don't subclass the chatbox for the controlbox model

package-lock.json

@@ -30275,6 +30275,7 @@
 		},
 		"@converse/skeletor": {
 			"version": "git+ssh://git@github.com/conversejs/skeletor.git#f354bc530493a17d031f6f9c524cc34e073908e3",
+			"integrity": "sha512-BqifISxYDtkQeJxSkxOgUl/Z0vFT9+ePYKFVzwXQLjxjBQp05xdw1+WkE+t8BnEiAXkoGKAEOv04Ezg3D3jgIw==",
 			"from": "@converse/skeletor@conversejs/skeletor#f354bc530493a17d031f6f9c524cc34e073908e3",
 			"requires": {
 				"lit-html": "^2.0.0-rc.2",

src/headless/plugins/chat/model.js

@@ -56,8 +56,8 @@ const ChatBox = ModelWithContact.extend({
         }
         this.set({'box_id': `box-${jid}`});
         this.initNotifications();
-        this.initMessages();
         this.initUI();
+        this.initMessages();
 
         if (this.get('type') === _converse.PRIVATE_CHAT_TYPE) {
             this.presence = _converse.presences.findWhere({'jid': jid}) || _converse.presences.create({'jid': jid});
@@ -338,9 +338,10 @@ const ChatBox = ModelWithContact.extend({
     },
 
     pruneHistoryWhenScrolledDown () {
-        if (!this.ui.get('scrolled') &&
+        if (
             api.settings.get('prune_messages_above') &&
-            api.settings.get('pruning_behavior') === 'unscrolled'
+            api.settings.get('pruning_behavior') === 'unscrolled' &&
+            !this.ui.get('scrolled')
         ) {
             pruneHistory(this);
         }

src/headless/plugins/headlines.js

@@ -66,6 +66,7 @@ converse.plugins.add('converse-headlines', {
 
             async initialize () {
                 this.set({'box_id': `box-${this.get('jid')}`});
+                this.initUI();
                 this.initMessages();
                 await this.fetchMessages();
                 /**

src/plugins/controlbox/index.js

@@ -1,5 +1,4 @@
 /**
- * @module converse-controlbox
  * @copyright 2020, the Converse.js contributors
  * @license Mozilla Public License (MPLv2)
  */
@@ -7,45 +6,16 @@ import "shared/components/brand-heading";
 import "../chatview/index.js";
 import './loginpanel.js';
 import './navback.js';
-import ControlBoxMixin from './model.js';
+import ControlBox from './model.js';
 import ControlBoxToggle from './toggle.js';
 import ControlBoxView from './controlbox.js';
 import controlbox_api from './api.js';
 import log from '@converse/headless/log';
 import { _converse, api, converse } from '@converse/headless/core';
-import { addControlBox } from './utils.js';
+import { addControlBox, clearSession, disconnect, onChatBoxesFetched } from './utils.js';
 
 import './styles/_controlbox.scss';
 
-const u = converse.env.utils;
-
-
-function disconnect () {
-    /* Upon disconnection, set connected to `false`, so that if
-     * we reconnect, "onConnected" will be called,
-     * to fetch the roster again and to send out a presence stanza.
-     */
-    const view = _converse.chatboxviews.get('controlbox');
-    view.model.set({ 'connected': false });
-    return view;
-}
-
-function clearSession () {
-    const chatboxviews = _converse?.chatboxviews;
-    const view = chatboxviews && chatboxviews.get('controlbox');
-    if (view) {
-        u.safeSave(view.model, { 'connected': false });
-        if (view?.controlbox_pane) {
-            view.controlbox_pane.remove();
-            delete view.controlbox_pane;
-        }
-    }
-}
-
-function onChatBoxesFetched () {
-    const controlbox = _converse.chatboxes.get('controlbox') || addControlBox();
-    controlbox.save({ 'connected': true });
-}
 
 converse.plugins.add('converse-controlbox', {
     /* Plugin dependencies are other plugins which might be
@@ -73,9 +43,8 @@ converse.plugins.add('converse-controlbox', {
 
         ChatBoxes: {
             model (attrs, options) {
-                const { _converse } = this.__super__;
                 if (attrs && attrs.id == 'controlbox') {
-                    return new _converse.ControlBox(attrs, options);
+                    return new ControlBox(attrs, options);
                 } else {
                     return this.__super__.model.apply(this, arguments);
                 }
@@ -97,7 +66,7 @@ converse.plugins.add('converse-controlbox', {
         Object.assign(api, controlbox_api);
 
         _converse.ControlBoxView = ControlBoxView;
-        _converse.ControlBox = _converse.ChatBox.extend(ControlBoxMixin);
+        _converse.ControlBox = ControlBox;
         _converse.ControlBoxToggle = ControlBoxToggle;
 
         /******************** Event Handlers ********************/

src/plugins/controlbox/model.js

@@ -1,10 +1,9 @@
 import { _converse, api, converse } from '@converse/headless/core';
+import { Model } from '@converse/skeletor/src/model.js';
 
 const { dayjs } = converse.env;
 
 /**
- * Mixin which turns a ChatBox model into a ControlBox model.
- *
  * The ControlBox is the section of the chat that contains the open groupchats,
  * bookmarks and roster.
  *
@@ -12,7 +11,8 @@ const { dayjs } = converse.env;
  * `view_mode` it's a left-aligned sidebar.
  * @mixin
  */
-const ControlBoxMixin = {
+const ControlBox = Model.extend({
+
     defaults () {
         return {
             'bookmarked': false,
@@ -20,20 +20,12 @@ const ControlBoxMixin = {
             'chat_state': undefined,
             'closed': !api.settings.get('show_controlbox_by_default'),
             'num_unread': 0,
-            'time_opened': this.get('time_opened') || new Date().getTime(),
+            'time_opened': dayjs(0).valueOf(),
             'type': _converse.CONTROLBOX_TYPE,
             'url': ''
         };
     },
 
-    initialize () {
-        if (this.get('id') === 'controlbox') {
-            this.set({ 'time_opened': dayjs(0).valueOf() });
-        } else {
-            _converse.ChatBox.prototype.initialize.apply(this, arguments);
-        }
-    },
-
     validate (attrs) {
         if (attrs.type === _converse.CONTROLBOX_TYPE) {
             if (api.settings.get('view_mode') === 'embedded' && api.settings.get('singleton')) {
@@ -55,7 +47,6 @@ const ControlBoxMixin = {
     onReconnection () {
         this.save('connected', true);
     }
+});
 
-};
+export default ControlBox;
-
-export default ControlBoxMixin;

src/plugins/controlbox/utils.js

@@ -19,3 +19,30 @@ export function navigateToControlBox (jid) {
     const model = _converse.chatboxes.get(jid);
     u.safeSave(model, {'hidden': true});
 }
+
+export function disconnect () {
+    /* Upon disconnection, set connected to `false`, so that if
+     * we reconnect, "onConnected" will be called,
+     * to fetch the roster again and to send out a presence stanza.
+     */
+    const view = _converse.chatboxviews.get('controlbox');
+    view.model.set({ 'connected': false });
+    return view;
+}
+
+export function clearSession () {
+    const chatboxviews = _converse?.chatboxviews;
+    const view = chatboxviews && chatboxviews.get('controlbox');
+    if (view) {
+        u.safeSave(view.model, { 'connected': false });
+        if (view?.controlbox_pane) {
+            view.controlbox_pane.remove();
+            delete view.controlbox_pane;
+        }
+    }
+}
+
+export function onChatBoxesFetched () {
+    const controlbox = _converse.chatboxes.get('controlbox') || addControlBox();
+    controlbox.save({ 'connected': true });
+}