separated component

src/components/notification/notification.js

@@ -4,6 +4,7 @@ import Status from '../status/status.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserCard from '../user_card/user_card.vue'
 import Timeago from '../timeago/timeago.vue'
+import Report from '../report/report.vue'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -44,7 +45,8 @@ const Notification = {
     UserAvatar,
     UserCard,
     Timeago,
-    Status
+    Status,
+    Report
   },
   methods: {
     toggleUserExpanded () {

src/components/notification/notification.scss

@@ -56,34 +56,6 @@
     margin: 0 0.1em;
   }
 
-  .report-content {
-    margin: 0.5em 0;
-  }
-
-  .reported-status {
-    border: 1px solid $fallback--faint;
-    border-color: var(--faint, $fallback--faint);
-    border-radius: $fallback--inputRadius;
-    border-radius: var(--inputRadius, $fallback--inputRadius);
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
-    display: block;
-    padding: 0.5em;
-    margin: 0.5em 0;
-
-    .status-content {
-      pointer-events: none;
-    }
-
-    .reported-status-name {
-      font-weight: bold;
-    }
-
-    .reported-status-timeago {
-      float: right;
-    }
-  }
-
   &.-type--repeat .type-icon {
     color: $fallback--cGreen;
     color: var(--cGreen, $fallback--cGreen);

src/components/notification/notification.vue

@@ -183,37 +183,10 @@
             @{{ notification.target.screen_name }}
           </router-link>
         </div>
-        <div
+        <Report
           v-else-if="notification.type === 'pleroma:report'"
-        >
-          <small>Reported user:</small>
-          <router-link :to="generateUserProfileLink(notification.report.acct)">
-            @{{ notification.report.acct.screen_name }}
-          </router-link>
-          <!-- eslint-disable vue/no-v-html -->
-          <div
-            class="report-content"
-            v-html="notification.report.content"
-          />
-          <div v-if="notification.report.statuses.length">
-            <small>Reported statuses:</small>
-            <!-- eslint-enable vue/no-v-html -->
-            <router-link
-              v-for="status in notification.report.statuses"
-              :key="status.id"
-              :to="{ name: 'conversation', params: { id: status.id } }"
-              class="reported-status"
-            >
-              <span class="reported-status-name">{{ status.user.name }}</span>
-              <Timeago
-                :time="status.created_at"
-                :auto-update="240"
-                class="reported-status-timeago faint"
-              />
-              <status-content :status="status" />
-            </router-link>
-          </div>
-        </div>
+          :report="notification.report"
+        />
         <template v-else>
           <status-content
             class="faint"