UI Fixes and DeviceList changes

src/components/UserProfileDialog.vue

@@ -3,7 +3,6 @@
     v-model="showDialog"
     class="ma-0 pa-0"
     :width="$vuetify.display.smAndUp ? '688px' : '95%'"
-    v-if="showDialog"
   >
     <div class="dialog-content text-center member-action-dialog">
       <div class="pt-4">
@@ -64,22 +63,16 @@ import roomInfoMixin from "./roomInfoMixin";
 import DeviceList from "../components/DeviceList";
 import AuthedImage from "./AuthedImage.vue";
 import util from "../plugins/utils";
+import RoomDialogBase from "./RoomDialogBase.vue";
 
 export default {
   name: "UserProfileDialog",
-  mixins: [roomInfoMixin],
+  extends: RoomDialogBase,
   components: {
     DeviceList,
     AuthedImage
   },
-  emits: ['update:modelValue'],
   props: {
-    modelValue: {
-      type: Boolean,
-      default: function () {
-        return false;
-      },
-    },
     activeMember: {
       type: Object,
       default: function () {
@@ -89,7 +82,6 @@ export default {
   },
   data() {
     return {
-      showDialog: false
     };
   },
   computed: {
@@ -140,26 +132,10 @@ export default {
       }, []);
     }
   },
-  watch: {
-    activeMember() {
-        this.showDialog = this.show && this.activeMember && this.room;
-    },
-    room() {
-        this.showDialog = this.show && this.activeMember && this.room;
-    },
-    show: {
-      handler(newVal, ignoredOldVal) {
-        this.showDialog = newVal && this.activeMember && this.room;
-      }
-    },
-    showDialog() {
-      if (!this.showDialog) {
-        this.$emit('update:modelValue', false);
-      }
-    },
-  },
-
   methods: {
+    shouldShow() {
+      return this.modelValue && this.room && this.activeMember ? true : false;
+    },
     startPrivateChat(userId) {
       this.$matrix
         .getOrCreatePrivateChat(userId)