[FIX] mail: fix "New messages" separator and channel_seen behaviour

- channel_seen is now called even for own message and only when needed
- channel_seen is now called with a message_id which transfer the
  decision of what is seen to the client which makes more sense

task-2282235
task-2282248

closes odoo/odoo#57950

X-original-commit: 04edfa50ccea305050d017c4a1996e561bc7bd57
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>

3 files changed, 44 insertions, 13 deletions

diff --git a/addons/mail/static/src/components/thread_preview/thread_preview.js b/addons/mail/static/src/components/thread_preview/thread_preview.js
index 6e30005225c..0e5a226a5f2 100644
--- a/addons/mail/static/src/components/thread_preview/thread_preview.js
+++ b/addons/mail/static/src/components/thread_preview/thread_preview.js
@@ -108,7 +108,9 @@ class ThreadPreview extends Component {
      * @param {MouseEvent} ev
      */
     _onClickMarkAsRead(ev) {
-        this.thread.markAsSeen();
+        if (this.thread.lastMessage) {
+            this.thread.markAsSeen(this.thread.lastMessage.id);
+        }
     }
 
 }
diff --git a/addons/mail/static/src/components/thread_preview/thread_preview.xml b/addons/mail/static/src/components/thread_preview/thread_preview.xml
index da364d4f99d..8a4baf3dfeb 100644
--- a/addons/mail/static/src/components/thread_preview/thread_preview.xml
+++ b/addons/mail/static/src/components/thread_preview/thread_preview.xml
@@ -6,7 +6,7 @@
             The preview template is used by the discuss in mobile, and by the systray
             menu in order to show preview of threads.
         -->
-        <div class="o_ThreadPreview" t-att-class="{ 'o-muted': thread and thread.message_unread_counter === 0 }" t-on-click="_onClick" t-att-data-thread-local-id="thread ? thread.localId : undefined">
+        <div class="o_ThreadPreview" t-att-class="{ 'o-muted': thread and thread.localMessageUnreadCounter === 0 }" t-on-click="_onClick" t-att-data-thread-local-id="thread ? thread.localId : undefined">
             <t t-if="thread">
                 <div class="o_ThreadPreview_sidebar">
                     <div class="o_ThreadPreview_imageContainer o_ThreadPreview_sidebarItem">
@@ -16,7 +16,7 @@
                                 class="o_ThreadPreview_partnerImStatusIcon"
                                 t-att-class="{
                                     'o-mobile': env.messaging.device.isMobile,
-                                    'o-muted': thread.message_unread_counter === 0,
+                                    'o-muted': thread.localMessageUnreadCounter === 0,
                                 }"
                                 partnerLocalId="thread.correspondent.localId"
                             />
@@ -25,17 +25,17 @@
                 </div>
                 <div class="o_ThreadPreview_content">
                     <div class="o_ThreadPreview_header">
-                        <span class="o_ThreadPreview_name" t-att-class="{ 'o-mobile': env.messaging.device.isMobile, 'o-muted': thread.message_unread_counter === 0 }">
+                        <span class="o_ThreadPreview_name" t-att-class="{ 'o-mobile': env.messaging.device.isMobile, 'o-muted': thread.localMessageUnreadCounter === 0 }">
                             <t t-esc="thread.displayName"/>
                         </span>
-                        <t t-if="thread.message_unread_counter > 0">
-                            <span class="o_ThreadPreview_counter" t-att-class="{ 'o-muted': thread.message_unread_counter === 0 }">
-                                (<t t-esc="thread.message_unread_counter"/>)
+                        <t t-if="thread.localMessageUnreadCounter > 0">
+                            <span class="o_ThreadPreview_counter" t-att-class="{ 'o-muted': thread.localMessageUnreadCounter === 0 }">
+                                (<t t-esc="thread.localMessageUnreadCounter"/>)
                             </span>
                         </t>
                         <span class="o-autogrow"/>
                         <t t-if="thread.lastMessage">
-                            <span class="o_ThreadPreview_date" t-att-class="{ 'o-muted': thread.message_unread_counter === 0 }">
+                            <span class="o_ThreadPreview_date" t-att-class="{ 'o-muted': thread.localMessageUnreadCounter === 0 }">
                                 <t t-esc="thread.lastMessage.date.fromNow()"/>
                             </span>
                         </t>
@@ -51,7 +51,7 @@
                             <t t-esc="inlineLastMessageBody"/>
                         </span>
                         <span class="o-autogrow"/>
-                        <t t-if="thread.message_unread_counter > 0">
+                        <t t-if="thread.localMessageUnreadCounter > 0">
                             <span class="o_ThreadPreview_coreItem o_ThreadPreview_markAsRead fa fa-check" title="Mark as Read" t-on-click="_onClickMarkAsRead" t-ref="markAsRead"/>
                         </t>
                     </div>
diff --git a/addons/mail/static/src/components/thread_preview/thread_preview_tests.js b/addons/mail/static/src/components/thread_preview/thread_preview_tests.js
index ed6ce3b6356..981abf6bca6 100644
--- a/addons/mail/static/src/components/thread_preview/thread_preview_tests.js
+++ b/addons/mail/static/src/components/thread_preview/thread_preview_tests.js
@@ -41,7 +41,17 @@ QUnit.module('thread_preview_tests.js', {
 });
 
 QUnit.test('mark as read', async function (assert) {
-    assert.expect(4);
+    assert.expect(8);
+    this.data['mail.channel'].records.push({
+        id: 11,
+        message_unread_counter: 1,
+    });
+    this.data['mail.message'].records.push({
+        channel_ids: [11],
+        id: 100,
+        model: 'mail.channel',
+        res_id: 11,
+    });
 
     await this.start({
         hasChatWindow: true,
@@ -52,16 +62,20 @@ QUnit.test('mark as read', async function (assert) {
             return this._super(...arguments);
         },
     });
-    const thread = this.env.models['mail.thread'].create({
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
         id: 11,
-        message_unread_counter: 1,
         model: 'mail.channel',
     });
     await this.createThreadPreviewComponent({ threadLocalId: thread.localId });
     assert.containsOnce(
         document.body,
         '.o_ThreadPreview_markAsRead',
-        "should have 1 mark as read button"
+        "should have the mark as read button"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ThreadPreview_counter',
+        "should have an unread counter"
     );
 
     await afterNextRender(() =>
@@ -71,6 +85,21 @@ QUnit.test('mark as read', async function (assert) {
         ['channel_seen'],
         "should have marked the thread as seen"
     );
+    assert.hasClass(
+        document.querySelector('.o_ThreadPreview'),
+        'o-muted',
+        "should be muted once marked as read"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ThreadPreview_markAsRead',
+        "should no longer have the mark as read button"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ThreadPreview_counter',
+        "should no longer have an unread counter"
+    );
     assert.containsNone(
         document.body,
         '.o_ChatWindow',