Initial work on getting rid of unread_msg_id

spec/chatbox.js

@@ -1153,6 +1153,51 @@ describe("Chatboxes", function () {
         }));
     });
 
+
+    describe("A unread flag", function () {
+
+        fit("is set and cleared on the first unread message",
+            mock.initConverse(
+                ['rosterGroupsFetched'], {},
+                async function (done, _converse) {
+
+            await mock.waitForRoster(_converse, 'current');
+            await mock.openControlBox(_converse);
+
+            expect(document.title).toBe('Converse Tests');
+
+            const sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
+            const view = await mock.openChatBoxFor(_converse, sender_jid)
+            const message = 'This message will increment the message counter';
+            const msg = $msg({
+                    from: sender_jid,
+                    to: _converse.connection.jid,
+                    type: 'chat',
+                    id: u.getUniqueId()
+                }).c('body').t(message).up()
+                  .c('active', {'xmlns': Strophe.NS.CHATSTATES}).tree();
+            _converse.windowState = 'hidden';
+
+            spyOn(_converse, 'clearMsgCounter').and.callThrough();
+            spyOn(_converse, 'incrementMsgCounter').and.callThrough();
+            spyOn(view.model, 'setFirstUnreadMessageFlag').and.callThrough();
+
+            await _converse.handleMessageStanza(msg);
+            await new Promise(resolve => view.once('messageInserted', resolve));
+            expect(_converse.incrementMsgCounter).toHaveBeenCalled();
+            expect(_converse.clearMsgCounter).not.toHaveBeenCalled();
+            expect(document.title).toBe('Messages (1) Converse Tests');
+
+            _converse.saveWindowState(null, 'focus');
+            _converse.saveWindowState(null, 'blur');
+            expect(_converse.clearMsgCounter).toHaveBeenCalled();
+            expect(view.model.setFirstUnreadMessageFlag).toHaveBeenCalled();
+            expect(document.title).toBe('Converse Tests');
+            done();
+        }));
+    });
+
+
     describe("A Message Counter", function () {
 
         it("is incremented when the message is received and the window is not focused",
@@ -1162,13 +1207,10 @@ describe("Chatboxes", function () {
 
             await mock.waitForRoster(_converse, 'current');
             await mock.openControlBox(_converse);
-
             expect(document.title).toBe('Converse Tests');
 
             const sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
             const view = await mock.openChatBoxFor(_converse, sender_jid)
-
-            const previous_state = _converse.windowState;
             const message = 'This message will increment the message counter';
             const msg = $msg({
                     from: sender_jid,
@@ -1189,7 +1231,6 @@ describe("Chatboxes", function () {
             expect(_converse.clearMsgCounter).not.toHaveBeenCalled();
             expect(document.title).toBe('Messages (1) Converse Tests');
             expect(_converse.api.trigger).toHaveBeenCalledWith('message', jasmine.any(Object));
-            _converse.windowSate = previous_state;
             done();
         }));
 
@@ -1200,11 +1241,36 @@ describe("Chatboxes", function () {
 
             await mock.waitForRoster(_converse, 'current');
             await mock.openControlBox(_converse);
+
+            expect(document.title).toBe('Converse Tests');
+
+            const sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
+            const view = await mock.openChatBoxFor(_converse, sender_jid)
+            const message = 'This message will increment the message counter';
+            const msg = $msg({
+                    from: sender_jid,
+                    to: _converse.connection.jid,
+                    type: 'chat',
+                    id: u.getUniqueId()
+                }).c('body').t(message).up()
+                  .c('active', {'xmlns': Strophe.NS.CHATSTATES}).tree();
             _converse.windowState = 'hidden';
+
             spyOn(_converse, 'clearMsgCounter').and.callThrough();
+            spyOn(_converse, 'incrementMsgCounter').and.callThrough();
+            spyOn(view.model, 'setFirstUnreadMessageFlag').and.callThrough();
+
+            await _converse.handleMessageStanza(msg);
+            await new Promise(resolve => view.once('messageInserted', resolve));
+            expect(_converse.incrementMsgCounter).toHaveBeenCalled();
+            expect(_converse.clearMsgCounter).not.toHaveBeenCalled();
+            expect(document.title).toBe('Messages (1) Converse Tests');
+
             _converse.saveWindowState(null, 'focus');
             _converse.saveWindowState(null, 'blur');
             expect(_converse.clearMsgCounter).toHaveBeenCalled();
+            expect(view.model.setFirstUnreadMessageFlag).toHaveBeenCalled();
+            expect(document.title).toBe('Converse Tests');
             done();
         }));
 

src/converse-chatview.js

@@ -1350,9 +1350,7 @@ converse.plugins.add('converse-chatview', {
 
             onScrolledDown () {
                 this.hideNewMessagesIndicator();
-                if (_converse.windowState !== 'hidden') {
-                    this.model.clearUnreadMsgCounter();
-                }
+                !this.model.isHidden() && this.model.clearUnreadMsgCounter();
                 /**
                  * Triggered once the chat's message area has been scrolled down to the bottom.
                  * @event _converse#chatBoxScrolledDown
@@ -1363,17 +1361,13 @@ converse.plugins.add('converse-chatview', {
                 api.trigger('chatBoxScrolledDown', {'chatbox': this.model}); // TODO: clean up
             },
 
-            onWindowStateChanged (state) {
-                if (state === 'visible') {
-                    if (!this.model.isHidden()) {
-                        // this.model.setChatState(_converse.ACTIVE);
-                        if (this.model.get('num_unread', 0)) {
-                            this.model.clearUnreadMsgCounter();
-                        }
-                    }
-                } else if (state === 'hidden') {
+            onWindowStateChanged () {
+                if (this.model.isHidden()) {
                     this.model.setChatState(_converse.INACTIVE, {'silent': true});
                     this.model.sendChatState();
+                    this.model.setFirstUnreadMessageFlag();
+                } else {
+                    this.model.clearUnreadMsgCounter();
                 }
             }
         });
@@ -1391,13 +1385,9 @@ converse.plugins.add('converse-chatview', {
 
         /************************ BEGIN Event Handlers ************************/
         function onWindowStateChanged (data) {
-            if (_converse.chatboxviews) {
-                _converse.chatboxviews.forEach(view => {
-                    if (view.model.get('id') !== 'controlbox') {
-                        view.onWindowStateChanged(data.state);
-                    }
-                });
-            }
+            _converse.chatboxviews?.forEach(
+                view => (view.model.get('id') !== 'controlbox') && view.onWindowStateChanged(data.state)
+            );
         }
         api.listen.on('windowStateChanged', onWindowStateChanged);
         api.listen.on('connected', () => api.disco.own.features.add(Strophe.NS.SPOILER));

src/headless/converse-chat.js

@@ -438,6 +438,8 @@ converse.plugins.add('converse-chat', {
                     if (u.shouldCreateMessage(attrs)) {
                         const msg = this.handleCorrection(attrs) || await this.createMessage(attrs);
                         this.notifications.set({'chat_state': null});
+                        // Note: the order here is important
+                        this.setFirstUnreadMessageFlag(msg);
                         this.incrementUnreadMsgCounter(msg);
                     }
                 }
@@ -1100,37 +1102,33 @@ converse.plugins.add('converse-chat', {
             /**
              * Given a newly received {@link _converse.Message} instance,
              * update the unread counter if necessary.
-             * @private
              * @param {_converse.Message} message
              */
             incrementUnreadMsgCounter (message) {
-                if (!message || !message.get('message')) {
-                    return;
-                }
                 if (utils.isNewMessage(message) && this.isHidden()) {
-                    this.setFirstUnreadMsgId(message);
                     this.save({'num_unread': this.get('num_unread') + 1});
                     _converse.incrementMsgCounter();
                 }
             },
 
             /**
-             * Sets the msgid of the first unread realtime message in a ChatBox.
-             * @param {_converse.Message} message
+             * Marks the first new message as unread. If no message is passed
+             * in, it simply  clears the flag on any other messages.
+             * @param {_converse.Message} message - The first unread message
              */
-            setFirstUnreadMsgId (message) {
-                if (this.get('num_unread') == 0) {
-                    const first_unread_id = this.get('first_unread_id');
-
-                    if (first_unread_id) {
-                      const msg = this.messages.get(first_unread_id);
-                      if (msg) msg.save("first_unread", false);
-                    }
-                    message.save("first_unread", true);
-                    this.save({'first_unread_id': message.get('id')});
+            setFirstUnreadMessageFlag (message) {
+                if (this.get('num_unread') === 0 &&
+                    (!message || utils.isNewMessage(message)) &&
+                    this.isHidden()
+                ) {
+                    this.messages.forEach(m => m.get('first_unread') && m.save('first_unread', false));
+                    message && message.save("first_unread", true);
                 }
             },
 
+            /**
+             * Clears the unread messages counter for this {@link _converse.ChatBox}
+             */
             clearUnreadMsgCounter () {
                 u.safeSave(this, {'num_unread': 0});
             },

src/headless/converse-muc.js

@@ -2006,6 +2006,8 @@ converse.plugins.add('converse-muc', {
                 if (u.shouldCreateGroupchatMessage(attrs)) {
                     const msg = this.handleCorrection(attrs) || await this.createMessage(attrs);
                     this.removeNotification(attrs.nick, ['composing', 'paused']);
+                    // Note: the order here is important
+                    this.setFirstUnreadMessageFlag(msg);
                     this.incrementUnreadMsgCounter(msg);
                 }
             },
@@ -2388,7 +2390,6 @@ converse.plugins.add('converse-muc', {
                 const body = message.get('message');
                 if (!body) { return; }
                 if (u.isNewMessage(message) && this.isHidden()) {
-                    this.setFirstUnreadMsgId(message);
                     const settings = {'num_unread_general': this.get('num_unread_general') + 1};
                     if (this.isUserMentioned(message)) {
                         settings.num_unread = this.get('num_unread') + 1;

src/templates/message.html

@@ -5,7 +5,7 @@
     {[ } ]}
     <div class="chat-msg__content chat-msg__content--{{{o.sender}}} {{{o.is_me_message ? 'chat-msg__content--action' : ''}}}">
         {[ if (o.first_unread) { ]}
-            <div class="message date-separator"><hr class="separator"><span class="separator-text">{{{o.__('unread messages')}}}</span></div>
+            <div class="message date-separator"><hr class="separator"><span class="separator-text">{{{o.__('new messages')}}}</span></div>
         {[ } ]}
         <span class="chat-msg__heading">
             {[ if (o.is_me_message) { ]}<time timestamp="{{{o.isodate}}}" class="chat-msg__time">{{{o.pretty_time}}}</time>{[ } ]}