FIX: correctly updates last read on scroll arrow click (#25838)

Prior to this fix the scroll was ignored when clicking the arrow bottom which would prevent the call to update last read. This fix manually calls update last read in this case and adds a test for it.

plugins/chat/assets/javascripts/discourse/components/chat-channel.gjs

@@ -255,9 +255,10 @@ export default class ChatChannel extends Component {
   }
 
   @action
-  scrollToBottom() {
+  async scrollToBottom() {
     this._ignoreNextScroll = true;
-    scrollListToBottom(this.scrollable);
+    await scrollListToBottom(this.scrollable);
+    this.debouncedUpdateLastReadMessage();
   }
 
   scrollToMessageId(messageId, options = {}) {

plugins/chat/assets/javascripts/discourse/components/chat-message.gjs

@@ -520,6 +520,14 @@ export default class ChatMessage extends Component {
           (if @message.highlighted "-highlighted")
           (if @message.streaming "-streaming")
           (if (eq @message.user.id this.currentUser.id) "is-by-current-user")
+          (if (eq @message.id this.currentUser.id) "is-by-current-user")
+          (if
+            (eq
+              @message.id
+              @message.channel.currentUserMembership.lastReadMessageId
+            )
+            "-last-read"
+          )
           (if @message.staged "-staged" "-persisted")
           (if @message.processed "-processed" "-not-processed")
           (if this.hasActiveState "-active")

plugins/chat/assets/javascripts/discourse/components/chat-thread.gjs

@@ -489,15 +489,15 @@ export default class ChatThread extends Component {
   }
 
   @action
-  scrollToBottom() {
+  async scrollToBottom() {
     this._ignoreNextScroll = true;
-    scrollListToBottom(this.scrollable);
+    await scrollListToBottom(this.scrollable);
   }
 
   @action
-  scrollToTop() {
+  async scrollToTop() {
     this._ignoreNextScroll = true;
-    scrollListToTop(this.scrollable);
+    await scrollListToTop(this.scrollable);
   }
 
   @action

plugins/chat/assets/javascripts/discourse/lib/scroll-helpers.js

@@ -1,15 +1,21 @@
-import { schedule } from "@ember/runloop";
+import { next, schedule } from "@ember/runloop";
 import { stackingContextFix } from "discourse/plugins/chat/discourse/lib/chat-ios-hacks";
 
-export function scrollListToBottom(list) {
-  stackingContextFix(list, () => {
-    list.scrollTo({ top: 0, behavior: "auto" });
+export async function scrollListToBottom(list) {
+  await new Promise((resolve) => {
+    stackingContextFix(list, () => {
+      list.scrollTo({ top: 0, behavior: "auto" });
+      next(resolve);
+    });
   });
 }
 
-export function scrollListToTop(list) {
-  stackingContextFix(list, () => {
-    list.scrollTo({ top: -list.scrollHeight, behavior: "auto" });
+export async function scrollListToTop(list) {
+  await new Promise((resolve) => {
+    stackingContextFix(list, () => {
+      list.scrollTo({ top: -list.scrollHeight, behavior: "auto" });
+      next(resolve);
+    });
   });
 }
 

plugins/chat/spec/system/chat_channel_spec.rb

@@ -141,6 +141,7 @@ RSpec.describe "Chat channel", type: :system do
 
       expect(channel_page).to have_no_loading_skeleton
       expect(page).to have_css("[data-id='#{unloaded_message.id}']")
+      expect(page).to have_css(".-last-read[data-id='#{unloaded_message.id}']")
     end
   end