FIX: various mobile optimizations (#22043)

* FIX: increases resize observer throttle delay
25ms is not necessary and was sometimes causing jankyness.

* FIX: removes ios momentum fix delay
Instead of a 50ms, simply use next+schedule("afterRender") to attempt to have the shortest delay possible.

* FIX: backdrop event propagation
Prevents backdrop touch to propagate to underlying channel/thread.

* UX: adds is-active class to container of active message
This change allows to keep the background on the active message while the actions menu is displayed.

* FIX: prevents skip-link to be selected on press

* UX: allows to close actions menu instantly
The backdrop should always receive events, we don't need to wait for the menu to be fully displayed.

* UI: adds spacing between last message and composer

* UI: makes backdrop less dark

* FIX: makes events passive on long-press modifier

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

@@ -34,7 +34,7 @@
   >
     <div
       class="chat-messages-container"
-      {{chat/on-resize this.didResizePane (hash delay=25 immediate=true)}}
+      {{chat/on-resize this.didResizePane (hash delay=100 immediate=true)}}
     >
 
       {{#if this.loadedOnce}}

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

@@ -966,31 +966,22 @@ export default class ChatLivePane extends Component {
   // we now use this hack to disable it
   @bind
   forceRendering(callback) {
-    schedule("afterRender", () => {
-      if (this._selfDeleted) {
-        return;
-      }
+    if (this.capabilities.isIOS) {
+      this.scrollable.style.overflow = "hidden";
+    }
 
-      if (!this.scrollable) {
-        return;
-      }
+    callback?.();
 
-      if (this.capabilities.isIOS) {
-        this.scrollable.style.overflow = "hidden";
-      }
-
-      callback?.();
-
-      if (this.capabilities.isIOS) {
-        discourseLater(() => {
-          if (!this.scrollable) {
+    if (this.capabilities.isIOS) {
+      next(() => {
+        schedule("afterRender", () => {
+          if (this._selfDeleted || !this.scrollable) {
             return;
           }
-
           this.scrollable.style.overflow = "auto";
-        }, 50);
-      }
-    });
+        });
+      });
+    }
   }
 
   _computeDatesSeparators() {

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

@@ -9,7 +9,7 @@
     <div
       role="button"
       class="collapse-area"
-      {{on "touchstart" this.collapseMenu}}
+      {{on "touchstart" this.collapseMenu passive=true bubbles=false}}
     >
     </div>
 

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

@@ -49,8 +49,7 @@ export default class ChatMessageActionsMobile extends Component {
   }
 
   @action
-  collapseMenu(event) {
-    event.preventDefault();
+  collapseMenu() {
     this.#onCloseMenu();
   }
 

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

@@ -26,6 +26,7 @@
       (if (eq @message.user.id this.currentUser.id) "is-by-current-user")
       (if @message.staged "is-staged" "is-persisted")
       (if @message.deletedAt "is-deleted")
+      (if (eq @message.id this.chat.activeMessage.model.id) "is-active")
     }}
     data-id={{@message.id}}
     data-thread-id={{@message.thread.id}}
@@ -75,7 +76,6 @@
             (if this.hideUserInfo "user-info-hidden")
             (if @message.error "errored")
             (if @message.bookmark "chat-message-bookmarked")
-            (if (eq @message.id this.chat.activeMessage.model.id) "is-active")
           }}
         >
           {{#unless this.hideReplyToInfo}}

plugins/chat/assets/javascripts/discourse/modifiers/chat/on-long-press.js

@@ -42,7 +42,9 @@ export default class ChatOnLongPress extends Modifier {
   onCancel() {
     cancel(this.timeout);
 
-    this.element.removeEventListener("touchmove", this.onCancel);
+    this.element.removeEventListener("touchmove", this.onCancel, {
+      passive: true,
+    });
     this.element.removeEventListener("touchend", this.onCancel);
     this.element.removeEventListener("touchcancel", this.onCancel);
 
@@ -55,13 +57,12 @@ export default class ChatOnLongPress extends Modifier {
       this.onCancel();
       return;
     }
-
     this.onLongPressStart(this.element, event);
-
-    this.element.addEventListener("touchmove", this.onCancel);
+    this.element.addEventListener("touchmove", this.onCancel, {
+      passive: true,
+    });
     this.element.addEventListener("touchend", this.onCancel);
     this.element.addEventListener("touchcancel", this.onCancel);
-
     this.timeout = discourseLater(() => {
       if (this.isDestroying || this.isDestroyed) {
         return;
@@ -69,6 +70,7 @@ export default class ChatOnLongPress extends Modifier {
 
       this.element.addEventListener("touchend", cancelEvent, {
         once: true,
+        passive: true,
       });
 
       this.onLongPressEnd(this.element, event);
@@ -80,6 +82,10 @@ export default class ChatOnLongPress extends Modifier {
       return;
     }
 
+    this.element.removeEventListener("touchstart", this.handleTouchStart, {
+      passive: true,
+    });
+
     this.onCancel();
   }
 }

plugins/chat/assets/stylesheets/common/chat-message.scss

@@ -21,7 +21,6 @@
 .chat-message {
   align-items: flex-start;
   padding: 0.25em 0.5em 0.25em 0.75em;
-  background-color: var(--secondary);
   display: flex;
   min-width: 0;
 
@@ -214,15 +213,21 @@
     .chat-message-reaction-list .chat-message-react-btn {
       display: none;
     }
+  }
+
+  .chat-message-container {
+    background-color: var(--secondary);
 
     .touch & {
-      &:active {
+      &:active,
+      &.is-active {
         background: var(--d-hover);
         border-radius: 5px;
       }
 
       &.chat-message-bookmarked {
-        &:active {
+        &:active,
+        &.is-active {
           background: var(--highlight-low);
         }
       }

plugins/chat/assets/stylesheets/mobile/base-mobile.scss

@@ -60,10 +60,6 @@ html.has-full-page-chat {
     height: 50px;
     min-height: 50px;
   }
-
-  .chat-messages-scroll {
-    padding: 0 10px;
-  }
 }
 
 .sidebar-container .channels-list .chat-channel-divider {

plugins/chat/assets/stylesheets/mobile/chat-channel.scss

@@ -0,0 +1,5 @@
+.chat-channel {
+  .chat-messages-scroll {
+    padding: 0 10px 10px 10px;
+  }
+}

plugins/chat/assets/stylesheets/mobile/chat-message-actions.scss

@@ -154,7 +154,7 @@
   height: 100%;
   width: 100%;
   z-index: z("header") + 1;
-  transition: background-color 0.4s ease;
+  transition: background-color 0.4s ease-in;
 
   .collapse-area {
     width: 100%;
@@ -162,7 +162,7 @@
   }
 
   &.fade-in {
-    background: rgba(var(--always-black-rgb), 0.75);
+    background: rgba(var(--always-black-rgb), 0.6);
 
     .chat-message-actions {
       bottom: 0px;

plugins/chat/assets/stylesheets/mobile/chat-message.scss

@@ -1,12 +1,16 @@
 .mobile-view.has-full-page-chat {
   &.disable-message-actions-touch {
-    .chat-message-actions-backdrop {
+    .chat-message-actions {
       > * {
         pointer-events: none;
       }
     }
   }
 
+  #skip-link {
+    @include user-select(none);
+  }
+
   #skip-link,
   .d-header,
   .chat-message-actions-mobile-outlet,

plugins/chat/assets/stylesheets/mobile/index.scss

@@ -1,5 +1,6 @@
 @import "base-mobile";
 @import "chat-channel-info";
+@import "chat-channel";
 @import "chat-composer";
 @import "chat-index";
 @import "chat-message-actions";

plugins/chat/spec/system/chat_message/channel_spec.rb

@@ -22,7 +22,7 @@ RSpec.describe "Chat message - channel", type: :system do
       channel.hover_message(message_1)
 
       expect(page).to have_css(
-        ".chat-channel[data-id='#{channel_1.id}'] [data-id='#{message_1.id}'] .chat-message.is-active",
+        ".chat-channel[data-id='#{channel_1.id}'] .chat-message-container[data-id='#{message_1.id}'].is-active",
       )
     end
   end

plugins/chat/spec/system/chat_message/thread_spec.rb

@@ -30,7 +30,7 @@ RSpec.describe "Chat message - thread", type: :system do
       thread_page.hover_message(first_message)
 
       expect(page).to have_css(
-        ".chat-thread[data-id='#{thread_1.id}'] [data-id='#{first_message.id}'] .chat-message.is-active",
+        ".chat-thread[data-id='#{thread_1.id}'] [data-id='#{first_message.id}'].chat-message-container.is-active",
       )
     end
   end