Add report button to status ellipsis menu

2 files changed, 17 insertions, 2 deletions

diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index b5b29e8a..dd45b6b9 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -9,7 +9,8 @@ import {
   faExternalLinkAlt
 } from '@fortawesome/free-solid-svg-icons'
 import {
-  faBookmark as faBookmarkReg
+  faBookmark as faBookmarkReg,
+  faFlag
 } from '@fortawesome/free-regular-svg-icons'
 
 library.add(
@@ -19,7 +20,8 @@ library.add(
   faEyeSlash,
   faThumbtack,
   faShareAlt,
-  faExternalLinkAlt
+  faExternalLinkAlt,
+  faFlag
 )
 
 const ExtraButtons = {
@@ -66,6 +68,9 @@ const ExtraButtons = {
       this.$store.dispatch('unbookmark', { id: this.status.id })
         .then(() => this.$emit('onSuccess'))
         .catch(err => this.$emit('onError', err.error.error))
+    },
+    reportStatus () {
+      this.$store.dispatch('openUserReportingModal', { userId: this.status.user.id, statusIds: [this.status.id] })
     }
   },
   computed: {
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index dc790cad..e845d8fc 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -109,6 +109,16 @@
             icon="external-link-alt"
           /><span>{{ $t("status.external_source") }}</span>
         </a>
+        <button
+          class="button-default dropdown-item dropdown-item-icon"
+          @click.prevent="reportStatus"
+          @click="close"
+        >
+          <FAIcon
+            fixed-width
+            :icon="['far', 'flag']"
+          /><span>{{ $t("user_card.report") }}</span>
+        </button>
       </div>
     </div>
     <span