drop AvatarOperations and use UserProfileDialog in Chat view

src/components/Chat.vue

@@ -46,14 +46,6 @@
           />
       </div>
 
-      <div ref="avatarOperationsStrut" class="avatar-operations-strut">
-        <avatar-operations ref="avatarOperations" :style="avatarOpStyle" v-on:close="
-          showAvatarMenu = false;
-          showAvatarMenuAnchor = null;
-        " v-on:start-private-chat="startPrivateChat($event)" v-if="selectedEvent && showAvatarMenu" :room="room"
-          :originalEvent="selectedEvent" />
-      </div>
-
       <!-- Handle resizes, e.g. when soft keyboard is shown/hidden -->
       <resize-observer ref="chatContainerResizer" @notify="handleChatContainerResize" />
 
@@ -324,6 +316,12 @@
 
     <CreatePollDialog :show="showCreatePollDialog" @close="showCreatePollDialog = false" />
 
+    <UserProfileDialog
+      :show="showProfileDialog"
+      :activeMember="compActiveMember"
+      :room="room"
+      @close="showProfileDialog = false"
+    />
   </div>
 </template>
 
@@ -332,7 +330,6 @@ import Vue from "vue";
 import { TimelineWindow, EventTimeline } from "matrix-js-sdk";
 import util, { ROOM_TYPE_VOICE_MODE, ROOM_TYPE_FILE_MODE } from "../plugins/utils";
 import MessageOperations from "./messages/MessageOperations.vue";
-import AvatarOperations from "./messages/AvatarOperations.vue";
 import ChatHeader from "./ChatHeader";
 import ChatHeaderPrivate from "./ChatHeaderPrivate.vue";
 import VoiceRecorder from "./VoiceRecorder";
@@ -342,6 +339,7 @@ import DirectChatWelcomeHeader from "./DirectChatWelcomeHeader";
 import NoHistoryRoomWelcomeHeader from "./NoHistoryRoomWelcomeHeader.vue";
 import MessageOperationsBottomSheet from "./MessageOperationsBottomSheet";
 import StickerPickerBottomSheet from "./StickerPickerBottomSheet";
+import UserProfileDialog from "./UserProfileDialog.vue"
 import BottomSheet from "./BottomSheet.vue";
 import ImageResize from "image-resize";
 import CreatePollDialog from "./CreatePollDialog.vue";
@@ -399,10 +397,10 @@ export default {
     MessageOperationsBottomSheet,
     StickerPickerBottomSheet,
     BottomSheet,
-    AvatarOperations,
     CreatePollDialog,
     AudioLayout,
-    FileDropLayout
+    FileDropLayout,
+    UserProfileDialog
   },
 
   data() {
@@ -432,8 +430,6 @@ export default {
       showNoRecordingAvailableDialog: false,
       showContextMenu: false,
       showContextMenuAnchor: null,
-      showAvatarMenu: false,
-      showAvatarMenuAnchor: null,
       initialLoadDone: false,
       loading: false, // Set this to true during long operations to show a "spinner" overlay
       showRecorder: false,
@@ -489,7 +485,8 @@ export default {
       /**
        * A timer to handle message retention/auto deletion
        */
-      retentionTimer: null
+      retentionTimer: null,
+      showProfileDialog: false
     };
   },
 
@@ -521,7 +518,7 @@ export default {
     if (this.retentionTimer) {
       clearInterval(this.retentionTimer);
       this.retentionTimer = null;
-    }    
+    }
   },
 
   destroyed() {
@@ -530,6 +527,10 @@ export default {
   },
 
   computed: {
+    compActiveMember() {
+      const currentUserId= this.selectedEvent?.sender.userId || this.$matrix.currentUserId
+      return this.joinedAndInvitedMembers.find(({userId}) => userId === currentUserId)
+    },
     nonImageFiles() {
       return this.isCurrentFileInputsAnArray && this.currentFileInputs.filter(file => !file?.type.includes("image/"))
     },
@@ -615,30 +616,6 @@ export default {
     showMessageOperations() {
       return this.selectedEvent && this.showContextMenu;
     },
-    avatarOpStyle() {
-      // Calculate where to show the context menu.
-      //
-      const ref = this.selectedEvent && this.$refs[this.selectedEvent.getId()];
-      var top = 0;
-      var left = "unset";
-      var right = "unset";
-      if (ref && ref[0]) {
-        if (this.showAvatarMenuAnchor) {
-          var rectAnchor = this.showAvatarMenuAnchor.getBoundingClientRect();
-          var rectChat = this.$refs.avatarOperationsStrut.getBoundingClientRect();
-          top = rectAnchor.top - rectChat.top;
-          if (this.$vuetify.rtl) {
-            right = (rectAnchor.right - rectChat.right)+ "px";
-          } else {
-            left = (rectAnchor.left - rectChat.left) + "px";
-          }
-          // if (left + 250 > rectChat.right) {
-          //   left = rectChat.right - 250; // Pretty ugly, but we want to make sure it does not escape the screen, and we don't have the exakt width of it (yet)!
-          // }
-        }
-      }
-      return "top:" + top + "px;left:" + left + ";right:" + right;
-    },
     canRecordAudio() {
       return util.browserCanRecordAudio();
     },
@@ -910,7 +887,7 @@ export default {
       if (this.retentionTimer) {
           clearInterval(this.retentionTimer);
           this.retentionTimer = null;
-        }    
+        }
       },
 
     removeTimedOutEvents(events) {
@@ -921,7 +898,7 @@ export default {
       }
       return events.filter((e) => {
         if (maxLifetime > 0 && !e.isState()) { // Keep all state events
-          return e.getLocalAge() < maxLifetime; 
+          return e.getLocalAge() < maxLifetime;
         }
         return true;
       });
@@ -1700,50 +1677,20 @@ export default {
     showAvatarMenuForEvent(e) {
       const event = e.event;
       this.selectedEvent = event;
-      this.showAvatarMenu = true;
-      this.showAvatarMenuAnchor = e.anchor;
+
+      this.showProfileDialog = true
     },
 
     viewProfile() {
       this.$navigation.push({ name: "Profile" }, 1);
     },
 
-    startPrivateChat(e) {
-      this.loading = true;
-      this.$matrix
-        .getOrCreatePrivateChat(e.event.getSender())
-        .then((room) => {
-          this.$nextTick(() => {
-            this.$navigation.push(
-              {
-                name: "Chat",
-                params: {
-                  roomId: util.sanitizeRoomId(room.getCanonicalAlias() || room.roomId),
-                },
-              },
-              -1
-            );
-          });
-        })
-        .catch((err) => {
-          console.error(err);
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-
     closeContextMenusIfOpen(e) {
       if (this.showContextMenu) {
         this.showContextMenu = false;
         this.showContextMenuAnchor = null;
         e.preventDefault();
       }
-      if (this.showAvatarMenu) {
-        this.showAvatarMenu = false;
-        this.showAvatarMenuAnchor = null;
-        e.preventDefault();
-      }
     },
 
     /** Stop Read Receipt timer */