somewhat workign version still with fixture

3 files changed, 65 insertions, 0 deletions

diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 4aa9affd..a920bb3e 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -76,6 +76,9 @@ const Notification = {
           this.$store.dispatch('dismissNotificationLocal', { id: this.notification.id })
           this.$store.dispatch('removeFollowRequest', this.user)
         })
+    },
+    testlog (a) {
+      console.log(a)
     }
   },
   computed: {
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index f5905560..b103db86 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -56,6 +56,34 @@
     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);
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index f56aa977..39e3bda0 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -106,6 +106,9 @@
                 </i18n>
               </small>
             </span>
+            <span v-if="notification.type === 'pleroma:report'">
+              <small>{{ $t('notifications.submitted_report') }}</small>
+            </span>
           </div>
           <div
             v-if="isStatusNotification"
@@ -180,6 +183,37 @@
             @{{ notification.target.screen_name }}
           </router-link>
         </div>
+        <div
+          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>
         <template v-else>
           <status-content
             class="faint"