3 files changed, 74 insertions, 30 deletions
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index d3db4b29..6c4054fd 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -7,15 +7,14 @@ import {
 } from '../../services/notification_utils/notification_utils.js'
 
 const Notifications = {
-  props: [
-    'noHeading'
-  ],
-  created () {
-    const store = this.$store
-    const credentials = store.state.users.currentUser.credentials
-
-    const fetcherId = notificationsFetcher.startFetching({ store, credentials })
-    this.$store.commit('setNotificationFetcher', { fetcherId })
+  props: {
+    // Disables display of panel header
+    noHeading: Boolean,
+    // Disables panel styles, unread mark, potentially other notification-related actions
+    // meant for "Interactions" timeline
+    minimalMode: Boolean,
+    // Custom filter mode, an array of strings, possible values 'mention', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline
+    filterMode: Array
   },
   data () {
     return {
@@ -23,6 +22,9 @@ const Notifications = {
     }
   },
   computed: {
+    mainClass () {
+      return this.minimalMode ? '' : 'panel panel-default'
+    },
     notifications () {
       return notificationsFromStore(this.$store)
     },
@@ -33,7 +35,7 @@ const Notifications = {
       return unseenNotificationsFromStore(this.$store)
     },
     visibleNotifications () {
-      return visibleNotificationsFromStore(this.$store)
+      return visibleNotificationsFromStore(this.$store, this.filterMode)
     },
     unseenCount () {
       return this.unseenNotifications.length
@@ -56,9 +58,13 @@ const Notifications = {
   },
   methods: {
     markAsSeen () {
-      this.$store.dispatch('markNotificationsAsSeen', this.visibleNotifications)
+      this.$store.dispatch('markNotificationsAsSeen')
     },
     fetchOlderNotifications () {
+      if (this.loading) {
+        return
+      }
+
       const store = this.$store
       const credentials = store.state.users.currentUser.credentials
       store.commit('setNotificationsLoading', { value: true })
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index c0b458cc..622d12f4 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,8 +1,10 @@
 @import '../../_variables.scss';
 
 .notifications {
-  // a bit of a hack to allow scrolling below notifications
-  padding-bottom: 15em;
+  &:not(.minimal) {
+    // a bit of a hack to allow scrolling below notifications
+    padding-bottom: 15em;
+  }
 
   .loadmore-error {
     color: $fallback--text;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 634a03ac..c42c35e6 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,31 +1,67 @@
 <template>
-  <div class="notifications">
-    <div class="panel panel-default">
-      <div v-if="!noHeading" class="panel-heading">
+  <div
+    :class="{ minimal: minimalMode }"
+    class="notifications"
+  >
+    <div :class="mainClass">
+      <div
+        v-if="!noHeading"
+        class="panel-heading"
+      >
         <div class="title">
-          {{$t('notifications.notifications')}}
-          <span class="badge badge-notification unseen-count" v-if="unseenCount">{{unseenCount}}</span>
+          {{ $t('notifications.notifications') }}
+          <span
+            v-if="unseenCount"
+            class="badge badge-notification unseen-count"
+          >{{ unseenCount }}</span>
         </div>
-        <div @click.prevent class="loadmore-error alert error" v-if="error">
-          {{$t('timeline.error_fetching')}}
+        <div
+          v-if="error"
+          class="loadmore-error alert error"
+          @click.prevent
+        >
+          {{ $t('timeline.error_fetching') }}
         </div>
-        <button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button>
+        <button
+          v-if="unseenCount"
+          class="read-button"
+          @click.prevent="markAsSeen"
+        >
+          {{ $t('notifications.read') }}
+        </button>
       </div>
       <div class="panel-body">
-        <div v-for="notification in visibleNotifications" :key="notification.action.id" class="notification" :class='{"unseen": !notification.seen}'>
-          <div class="notification-overlay"></div>
-          <notification :notification="notification"></notification>
+        <div
+          v-for="notification in visibleNotifications"
+          :key="notification.id"
+          class="notification"
+          :class="{&quot;unseen&quot;: !minimalMode && !notification.seen}"
+        >
+          <div class="notification-overlay" />
+          <notification :notification="notification" />
         </div>
       </div>
       <div class="panel-footer">
-        <div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
-          {{$t('notifications.no_more_notifications')}}
+        <div
+          v-if="bottomedOut"
+          class="new-status-notification text-center panel-footer faint"
+        >
+          {{ $t('notifications.no_more_notifications') }}
         </div>
-        <a v-else-if="!loading" href="#" v-on:click.prevent="fetchOlderNotifications()">
-          <div class="new-status-notification text-center panel-footer">{{$t('notifications.load_older')}}</div>
+        <a
+          v-else-if="!loading"
+          href="#"
+          @click.prevent="fetchOlderNotifications()"
+        >
+          <div class="new-status-notification text-center panel-footer">
+            {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
+          </div>
         </a>
-        <div v-else class="new-status-notification text-center panel-footer">
-          <i class="icon-spin3 animate-spin"/>
+        <div
+          v-else
+          class="new-status-notification text-center panel-footer"
+        >
+          <i class="icon-spin3 animate-spin" />
         </div>
       </div>
     </div>