4 files changed, 138 insertions, 15 deletions
diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
new file mode 100644
index 00000000..e86a0fcc
--- /dev/null
+++ b/src/components/notifications/notification_filters.vue
@@ -0,0 +1,122 @@
+<template>
+  <Popover
+    trigger="click"
+    class="NotificationFilters"
+    placement="bottom"
+    :bound-to="{ x: 'container' }"
+  >
+    <template
+      v-slot:content
+    >
+      <div class="dropdown-menu">
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('likes')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.likes }"
+          />{{ $t('settings.notification_visibility_likes') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('repeats')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.repeats }"
+          />{{ $t('settings.notification_visibility_repeats') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('follows')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.follows }"
+          />{{ $t('settings.notification_visibility_follows') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('mentions')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.mentions }"
+          />{{ $t('settings.notification_visibility_mentions') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('emojiReactions')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.emojiReactions }"
+          />{{ $t('settings.notification_visibility_emoji_reactions') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('moves')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.moves }"
+          />{{ $t('settings.notification_visibility_moves') }}
+        </button>
+      </div>
+    </template>
+    <template v-slot:trigger>
+      <FAIcon icon="filter" />
+    </template>
+  </Popover>
+</template>
+
+<script>
+import Popover from '../popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faFilter } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faFilter
+)
+
+export default {
+  components: { Popover },
+  computed: {
+    filters () {
+      return this.$store.getters.mergedConfig.notificationVisibility
+    }
+  },
+  methods: {
+    toggleNotificationFilter (type) {
+      this.$store.dispatch('setOption', {
+        name: 'notificationVisibility',
+        value: {
+          ...this.filters,
+          [type]: !this.filters[type]
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+.NotificationFilters {
+  align-self: stretch;
+
+  > button {
+    font-size: 1.2em;
+    padding-left: 0.7em;
+    padding-right: 0.2em;
+    line-height: 100%;
+    height: 100%;
+  }
+
+  .dropdown-item {
+    margin: 0;
+  }
+}
+
+</style>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 49258563..c8f1ebcb 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,5 +1,6 @@
 import { mapGetters } from 'vuex'
 import Notification from '../notification/notification.vue'
+import NotificationFilters from './notification_filters.vue'
 import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
 import {
   notificationsFromStore,
@@ -17,6 +18,10 @@ library.add(
 const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
 
 const Notifications = {
+  components: {
+    Notification,
+    NotificationFilters
+  },
   props: {
     // Disables display of panel header
     noHeading: Boolean,
@@ -35,11 +40,6 @@ const Notifications = {
       seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT
     }
   },
-  created () {
-    const store = this.$store
-    const credentials = store.state.users.currentUser.credentials
-    notificationsFetcher.fetchAndUpdate({ store, credentials })
-  },
   computed: {
     mainClass () {
       return this.minimalMode ? '' : 'panel panel-default'
@@ -70,9 +70,6 @@ const Notifications = {
     },
     ...mapGetters(['unreadChatCount'])
   },
-  components: {
-    Notification
-  },
   watch: {
     unseenCountTitle (count) {
       if (count > 0) {
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 682ae127..2bb627a8 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,6 +1,6 @@
 @import '../../_variables.scss';
 
-.notifications {
+.Notifications {
   &:not(.minimal) {
     // a bit of a hack to allow scrolling below notifications
     padding-bottom: 15em;
@@ -11,6 +11,10 @@
     color: var(--text, $fallback--text);
   }
 
+  .notifications-footer {
+    border: none;
+  }
+
   .notification {
     position: relative;
 
@@ -82,7 +86,6 @@
     }
   }
 
-
   .follow-text, .move-text {
     padding: 0.5em 0;
     overflow-wrap: break-word;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 725d1ad4..2ce5d56f 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :class="{ minimal: minimalMode }"
-    class="notifications"
+    class="Notifications"
   >
     <div :class="mainClass">
       <div
@@ -22,6 +22,7 @@
         >
           {{ $t('notifications.read') }}
         </button>
+        <NotificationFilters />
       </div>
       <div class="panel-body">
         <div
@@ -34,10 +35,10 @@
           <notification :notification="notification" />
         </div>
       </div>
-      <div class="panel-footer">
+      <div class="panel-footer notifications-footer">
         <div
           v-if="bottomedOut"
-          class="new-status-notification text-center panel-footer faint"
+          class="new-status-notification text-center faint"
         >
           {{ $t('notifications.no_more_notifications') }}
         </div>
@@ -46,13 +47,13 @@
           class="button-unstyled -link -fullwidth"
           @click.prevent="fetchOlderNotifications()"
         >
-          <div class="new-status-notification text-center panel-footer">
+          <div class="new-status-notification text-center">
             {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
           </div>
         </button>
         <div
           v-else
-          class="new-status-notification text-center panel-footer"
+          class="new-status-notification text-center"
         >
           <FAIcon
             icon="circle-notch"