fix conversejs#1999 - Jump to first unread message

Author: deleolajide

CHANGES.md

@@ -21,6 +21,7 @@ Soon we'll deprecate the latter, so prepare now.
 - #1896: Don't send receipts for messages fetched from the archive 
 - #1937: Editing a message removes the mentions highlight
 - #1963: Mentions are visually incorrect when used in message replies
+- #1999: Jump to first unread message
 - Allow ignoring of bootstrap modules at build using environment variable. For xample: `export BOOTSTRAP_IGNORE_MODULES="Modal,Dropdown" && make dist`
 - Bugfix. Handle stanza that clears the MUC subject
 - Replace Backbone with [Skeletor](https://github.com/skeletorjs/skeletor)

spec/chatbox.js

@@ -1296,6 +1296,7 @@ describe("Chatboxes", function () {
             await _converse.handleMessageStanza(msg);
             await u.waitUntil(() => view.model.messages.length);
             expect(view.model.get('num_unread')).toBe(1);
+            expect(view.model.get('first_unread')).toBeDefined();
             done();
         }));
 
@@ -1332,6 +1333,7 @@ describe("Chatboxes", function () {
             _converse.handleMessageStanza(msgFactory());
             await u.waitUntil(() => chatbox.messages.length);
             expect(chatbox.get('num_unread')).toBe(1);
+            expect(chatbox.get('first_unread')).toBeDefined();
             done();
         }));
 
@@ -1350,6 +1352,7 @@ describe("Chatboxes", function () {
             _converse.handleMessageStanza(msgFactory());
             await u.waitUntil(() => chatbox.messages.length);
             expect(chatbox.get('num_unread')).toBe(1);
+            expect(chatbox.get('first_unread')).toBeDefined();
             done();
         }));
 
@@ -1367,6 +1370,7 @@ describe("Chatboxes", function () {
             _converse.handleMessageStanza(msgFactory());
             await u.waitUntil(() => chatbox.messages.length);
             expect(chatbox.get('num_unread')).toBe(1);
+            expect(chatbox.get('first_unread')).toBeDefined();
             _converse.saveWindowState(null, 'focus');
             expect(chatbox.get('num_unread')).toBe(0);
             done();
@@ -1387,8 +1391,10 @@ describe("Chatboxes", function () {
             _converse.handleMessageStanza(msgFactory());
             await u.waitUntil(() => chatbox.messages.length);
             expect(chatbox.get('num_unread')).toBe(1);
+            expect(chatbox.get('first_unread')).toBeDefined();
             _converse.saveWindowState(null, 'focus');
             expect(chatbox.get('num_unread')).toBe(1);
+            expect(chatbox.get('first_unread')).toBeDefined();
             done();
         }));
     });

src/headless/converse-chat.js

@@ -1100,7 +1100,14 @@ converse.plugins.add('converse-chat', {
                     return;
                 }
                 if (utils.isNewMessage(message) && this.isHidden()) {
-                    this.save({'num_unread': this.get('num_unread') + 1});
+                    let first_unread = this.get('first_unread');
+
+                    if (this.get('num_unread') == 0) {
+                      if (first_unread) first_unread.set("first_unread", false);
+                      message.set("first_unread", true);
+                      first_unread = message;
+                    }
+                    this.save({'first_unread': first_unread, 'num_unread': this.get('num_unread') + 1});
                     _converse.incrementMsgCounter();
                 }
             },

src/headless/converse-muc.js

@@ -2361,7 +2361,14 @@ converse.plugins.add('converse-muc', {
                 const body = message.get('message');
                 if (!body) { return; }
                 if (u.isNewMessage(message) && this.isHidden()) {
-                    const settings = {'num_unread_general': this.get('num_unread_general') + 1};
+                    let first_unread = this.get('first_unread');
+
+                    if (this.get('num_unread_general') == 0) {
+                      if (first_unread) first_unread.set("first_unread", false);
+                      message.set("first_unread", true);
+                      first_unread = message;
+                    }
+                    const settings = {'first_unread': first_unread, 'num_unread_general': this.get('num_unread_general') + 1};
                     if (this.isUserMentioned(message)) {
                         settings.num_unread = this.get('num_unread') + 1;
                         _converse.incrementMsgCounter();

src/templates/message.html

@@ -4,6 +4,9 @@
     <canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
     {[ } ]}
     <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>
+        {[ } ]}
         <span class="chat-msg__heading">
             {[ if (o.is_me_message) { ]}<time timestamp="{{{o.isodate}}}" class="chat-msg__time">{{{o.pretty_time}}}</time>{[ } ]}
             <span class="chat-msg__author">{[ if (o.is_me_message) { ]}**{[ }; ]}{{{o.username}}}</span>