DEV: Convert mobile chat message actions to a modal (#26436)

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

@@ -9,8 +9,8 @@ import { service } from "@ember/service";
 import { and, or } from "truth-helpers";
 import BookmarkIcon from "discourse/components/bookmark-icon";
 import DButton from "discourse/components/d-button";
+import DModal from "discourse/components/d-modal";
 import concatClass from "discourse/helpers/concat-class";
-import discourseLater from "discourse-common/lib/later";
 import ChatMessageReaction from "discourse/plugins/chat/discourse/components/chat-message-reaction";
 import ChatUserAvatar from "discourse/plugins/chat/discourse/components/chat-user-avatar";
 import ChatMessageInteractor from "discourse/plugins/chat/discourse/lib/chat-message-interactor";
@@ -40,9 +40,7 @@ export default class ChatMessageActionsMobile extends Component {
   }
 
   @action
-  fadeAndVibrate() {
-    discourseLater(this.#addFadeIn.bind(this));
-
+  vibrate() {
     if (this.capabilities.userHasBeenActive && this.capabilities.canVibrate) {
       navigator.vibrate(5);
     }
@@ -57,62 +55,30 @@ export default class ChatMessageActionsMobile extends Component {
   @action
   collapseMenu(event) {
     event.preventDefault();
-    this.#onCloseMenu();
+    this.args.closeModal();
   }
 
   @action
   actAndCloseMenu(fnId) {
     this.messageInteractor[fnId]();
-    this.#onCloseMenu();
+    this.args.closeModal();
   }
 
   @action
   openEmojiPicker(_, event) {
     this.messageInteractor.openEmojiPicker(_, event);
-    this.#onCloseMenu();
-  }
-
-  #onCloseMenu() {
-    this.#removeFadeIn();
-
-    // we don't want to remove the component right away as it's animating
-    // 200 is equal to the duration of the css animation
-    discourseLater(() => {
-      if (this.isDestroying || this.isDestroyed) {
-        return;
-      }
-
-      // by ensuring we are not hovering any message anymore
-      // we also ensure the menu is fully removed
-      this.chat.activeMessage = null;
-    }, 200);
-  }
-
-  #addFadeIn() {
-    this.showFadeIn = true;
-  }
-
-  #removeFadeIn() {
-    this.showFadeIn = false;
+    this.args.closeModal();
   }
 
   <template>
     {{#if (and this.site.mobileView this.chat.activeMessage.model.persisted)}}
-      <div
-        class={{concatClass
-          "chat-message-actions-backdrop"
-          (if this.showFadeIn "fade-in")
-        }}
-        {{didInsert this.fadeAndVibrate}}
+      <DModal
+        @closeModal={{@closeModal}}
+        @headerClass="hidden"
+        class="chat-message-actions"
+        {{didInsert this.vibrate}}
       >
-        <div
-          role="button"
-          class="collapse-area"
-          {{on "touchstart" this.collapseMenu passive=false bubbles=false}}
-        >
-        </div>
-
-        <div class="chat-message-actions">
+        <:body>
           <div class="selected-message-container">
             <div class="selected-message">
               <ChatUserAvatar @user={{this.message.user}} />
@@ -187,8 +153,8 @@ export default class ChatMessageActionsMobile extends Component {
               {{/if}}
             </div>
           {{/if}}
-        </div>
-      </div>
+        </:body>
+      </DModal>
     {{/if}}
   </template>
 }

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

@@ -25,6 +25,7 @@ import ChatMessageAvatar from "discourse/plugins/chat/discourse/components/chat/
 import ChatMessageError from "discourse/plugins/chat/discourse/components/chat/message/error";
 import ChatMessageInfo from "discourse/plugins/chat/discourse/components/chat/message/info";
 import ChatMessageLeftGutter from "discourse/plugins/chat/discourse/components/chat/message/left-gutter";
+import ChatMessageActionsMobileModal from "discourse/plugins/chat/discourse/components/chat-message-actions-mobile";
 import ChatMessageInReplyToIndicator from "discourse/plugins/chat/discourse/components/chat-message-in-reply-to-indicator";
 import ChatMessageReaction from "discourse/plugins/chat/discourse/components/chat-message-reaction";
 import ChatMessageSeparator from "discourse/plugins/chat/discourse/components/chat-message-separator";
@@ -61,6 +62,7 @@ export default class ChatMessage extends Component {
   @service chatChannelsManager;
   @service router;
   @service toasts;
+  @service modal;
   @optionalService adminTools;
 
   @tracked isActive = false;
@@ -401,6 +403,7 @@ export default class ChatMessage extends Component {
     document.querySelector(".chat-composer__input")?.blur();
 
     this._setActiveMessage();
+    this.modal.show(ChatMessageActionsMobileModal);
   }
 
   get hasActiveState() {

plugins/chat/assets/javascripts/discourse/connectors/below-footer/chat-message-actions-mobile-outlet.hbs

@@ -1 +0,0 @@
-<ChatMessageActionsMobile />

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

@@ -9,7 +9,6 @@
 }
 
 .chat-message-actions {
-  background-color: var(--secondary);
   border-radius: var(--d-border-radius);
   display: flex;
 

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

@@ -1,3 +1,7 @@
+.chat-message-actions {
+  background-color: var(--secondary);
+}
+
 .chat-message-actions-container[data-popper-reference-hidden],
 .chat-message-actions-container[data-popper-escaped] {
   visibility: hidden;

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

@@ -1,18 +1,6 @@
 .chat-message-actions {
-  position: absolute;
-  bottom: -100vh;
-  left: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  margin: 0 5px;
-  transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-    visibility cubic-bezier(0.4, 0, 0.2, 1);
-  visibility: hidden;
-  box-sizing: border-box;
-
   .selected-message-container {
-    padding: 0.5em 0.5em 1em 0.5em;
+    padding: 0.5em 0 1em 0;
   }
 
   .selected-message {
@@ -41,7 +29,8 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1em 1em 1.5em 1em;
+    padding: 1em 0 1.5em 0;
+    width: 100%;
 
     .chat-message-reaction {
       background: none;
@@ -109,7 +98,6 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
-    padding: 0.5em;
     margin: 0;
 
     .chat-message-action-item {
@@ -142,28 +130,3 @@
     }
   }
 }
-
-.chat-message-actions-backdrop {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-  width: 100%;
-  z-index: z("header") + 1;
-  transition: background-color 0.4s ease-in;
-
-  .collapse-area {
-    width: 100%;
-    height: 100%;
-  }
-
-  &.fade-in {
-    background: rgba(var(--always-black-rgb), 0.6);
-
-    .chat-message-actions {
-      bottom: 0px;
-      visibility: visible;
-    }
-  }
-}

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

@@ -1,6 +1,7 @@
 .mobile-view.has-full-page-chat {
   &.disable-message-actions-touch {
     .chat-message-actions {
+      + .d-modal__backdrop,
       > * {
         pointer-events: none;
       }