UX: adds small delay before making message active (#22221)

This should prevent the message to show as active on mobile when making a touch to start scrolling.

This commit also makes naming of touch lifecycle functions coherent.

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

@@ -35,8 +35,8 @@
     {{on "mouseleave" this.onMouseLeave passive=true}}
     {{on "mousemove" this.onMouseMove passive=true}}
     {{chat/on-long-press
-      this.handleLongPressStart
-      this.handleLongPressEnd
+      this.onLongPressStart
+      this.onLongPressEnd
       this.onLongPressCancel
     }}
     {{chat/track-message

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

@@ -132,6 +132,7 @@ export default class ChatMessage extends Component {
   willDestroyMessage() {
     cancel(this._invitationSentTimer);
     cancel(this._disableMessageActionsHandler);
+    cancel(this._makeMessageActiveHandler);
     this.#teardownMentionedUsers();
   }
 
@@ -272,16 +273,22 @@ export default class ChatMessage extends Component {
   }
 
   @action
-  handleLongPressStart() {
+  onLongPressStart() {
     if (!this.args.message.expanded) {
       return;
     }
 
-    this.isActive = true;
+    // prevents message to show as active when starting scroll
+    // at this moment scroll has no momentum and the row can
+    // capture the touch event instead of a scroll
+    this._makeMessageActiveHandler = discourseLater(() => {
+      this.isActive = true;
+    }, 50);
   }
 
   @action
   onLongPressCancel() {
+    cancel(this._makeMessageActiveHandler);
     this.isActive = false;
 
     // this a tricky bit of code which is needed to prevent the long press
@@ -297,7 +304,8 @@ export default class ChatMessage extends Component {
   }
 
   @action
-  handleLongPressEnd() {
+  onLongPressEnd() {
+    cancel(this._makeMessageActiveHandler);
     this.isActive = false;
 
     if (isZoomed()) {