Support reporting both rooms and individual events

src/components/Chat.vue

@@ -57,6 +57,7 @@
           v-on:edit="edit(selectedEvent)"
           v-on:redact="redact(selectedEvent)"
           v-on:download="download(selectedEvent)"
+          v-on:report="reportEvent(selectedEvent)"
           v-on:more="
             isEmojiQuickReaction=true;
             showMoreMessageOperations({event: selectedEvent, anchor: $event.anchor})
@@ -297,6 +298,7 @@
     <PurgeRoomDialog v-model="showPurgeConfirmation" :room="room" />
 
     <RoomExport :room="room" v-if="downloadingChat" v-on:close="downloadingChat = false" />
+    <ReportRoomOrEventDialog v-model="reportingEventShown" :room="room" :eventId="reportingEventId" />
 
     <!-- Heart animation -->
     <div :class="['heart-wrapper', { 'is-active': heartAnimation }]" :style="hearAnimationPosition">
@@ -324,6 +326,7 @@ import UserProfileDialog from "./UserProfileDialog.vue"
 import RoomUpgradePrompt from "./messages/composition/RoomUpgradePrompt.vue";
 import BottomSheet from "./BottomSheet.vue";
 import CreatePollDialog from "./CreatePollDialog.vue";
+import ReportRoomOrEventDialog from "./ReportRoomOrEventDialog.vue";
 import chatMixin, { ROOM_READ_MARKER_EVENT_PLACEHOLDER } from "./chatMixin";
 import AudioLayout from "./AudioLayout.vue";
 import SendAttachmentsLayout from "./file_mode/SendAttachmentsLayout.vue";
@@ -394,7 +397,8 @@ export default {
     MessageOperationsChannel,
     RoomExport,
     EmojiPicker,
-    RoomUpgradePrompt
+    RoomUpgradePrompt,
+    ReportRoomOrEventDialog
   },
 
   data() {
@@ -485,7 +489,8 @@ export default {
         left: 0
       },
       reverseOrder: false,
-      downloadingChat: false
+      downloadingChat: false,
+      reportingEventId: null,
     };
   },
 
@@ -801,6 +806,16 @@ export default {
         '--top': this.heartPosition.top,
         '--left': this.heartPosition.left
       };
+    },
+    reportingEventShown: {
+      get() {
+        return this.reportingEventId != null;
+      },
+      set(newValue) {
+        if (!newValue) {
+          this.reportingEventId = null;
+        }
+      }
     }
   },
 
@@ -1662,6 +1677,10 @@ export default {
       }
     },
 
+    reportEvent(event) {
+      this.reportingEventId = event.getId();
+    },
+
     pin(event) {
       const eventToPin = event.parentThread ? event.parentThread : event;
       this.$matrix.setEventPinned(this.room, eventToPin, true);