Added ability to hide certain types of notifications

7 files changed, 110 insertions, 17 deletions

diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index b24250b0..58956f98 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -11,6 +11,14 @@ const Notifications = {
     notificationsFetcher.startFetching({ store, credentials })
   },
   computed: {
+    visibleTypes () {
+      return [
+        this.$store.state.config.notificationVisibility.likes && 'like',
+        this.$store.state.config.notificationVisibility.mentions && 'mention',
+        this.$store.state.config.notificationVisibility.repeats && 'repeat',
+        this.$store.state.config.notificationVisibility.follows && 'follow'
+      ].filter(_ => _)
+    },
     notifications () {
       return this.$store.state.statuses.notifications.data
     },
@@ -18,13 +26,13 @@ const Notifications = {
       return this.$store.state.statuses.notifications.error
     },
     unseenNotifications () {
-      return filter(this.notifications, ({seen}) => !seen)
+      return filter(this.visibleNotifications, ({seen}) => !seen)
     },
     visibleNotifications () {
       // Don't know why, but sortBy([seen, -action.id]) doesn't work.
       let sortedNotifications = sortBy(this.notifications, ({action}) => -action.id)
       sortedNotifications = sortBy(sortedNotifications, 'seen')
-      return sortedNotifications
+      return sortedNotifications.filter((notification) => this.visibleTypes.includes(notification.type))
     },
     unseenCount () {
       return this.unseenNotifications.length
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index 333633c9..de12894b 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -10,6 +10,7 @@ const settings = {
       hideAttachmentsLocal: this.$store.state.config.hideAttachments,
       hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv,
       hideNsfwLocal: this.$store.state.config.hideNsfw,
+      notificationVisibilityLocal: this.$store.state.config.notificationVisibility,
       replyVisibilityLocal: this.$store.state.config.replyVisibility,
       loopVideoLocal: this.$store.state.config.loopVideo,
       loopVideoSilentOnlyLocal: this.$store.state.config.loopVideoSilentOnly,
@@ -49,6 +50,18 @@ const settings = {
     hideNsfwLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideNsfw', value })
     },
+    'notificationVisibilityLocal.likes' (value) {
+      this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
+    },
+    'notificationVisibilityLocal.follows' (value) {
+      this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
+    },
+    'notificationVisibilityLocal.repeats' (value) {
+      this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
+    },
+    'notificationVisibilityLocal.mentions' (value) {
+      this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
+    },
     replyVisibilityLocal (value) {
       this.$store.dispatch('setOption', { name: 'replyVisibility', value })
     },
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index c92602b7..dbc85f1f 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -81,15 +81,47 @@
 
       <div :label="$t('settings.filtering')" >
         <div class="setting-item">
-          {{$t('settings.replies_in_timeline')}}
-          <label for="replyVisibility" class="select">
-            <select id="replyVisibility" v-model="replyVisibilityLocal">
-              <option value="all" selected>{{$t('settings.reply_visibility_all')}}</option>
-              <option value="following">{{$t('settings.reply_visibility_following')}}</option>
-              <option value="self">{{$t('settings.reply_visibility_self')}}</option>
-            </select>
-            <i class="icon-down-open"/>
-          </label>
+          <div class="select-multiple">
+            <span class="label">{{$t('settings.notification_visibility')}}</span>
+            <ul class="option-list">
+              <li>
+                <input type="checkbox" id="notification-visibility-likes" v-model="notificationVisibilityLocal.likes">
+                <label for="notification-visibility-likes">
+                  {{$t('settings.notification_visibility_likes')}}
+                </label>
+              </li>
+              <li>
+                <input type="checkbox" id="notification-visibility-repeats" v-model="notificationVisibilityLocal.repeats">
+                <label for="notification-visibility-repeats">
+                {{$t('settings.notification_visibility_repeats')}}
+                </label>
+              </li>
+              <li>
+                <input type="checkbox" id="notification-visibility-follows" v-model="notificationVisibilityLocal.follows">
+                <label for="notification-visibility-follows">
+                {{$t('settings.notification_visibility_follows')}}
+                </label>
+              </li>
+              <li>
+                <input type="checkbox" id="notification-visibility-mentions" v-model="notificationVisibilityLocal.mentions">
+                <label for="notification-visibility-mentions">
+                {{$t('settings.notification_visibility_mentions')}}
+                </label>
+              </li>
+            </ul>
+            </label>
+          </div>
+          <div>
+            {{$t('settings.replies_in_timeline')}}
+            <label for="replyVisibility" class="select">
+              <select id="replyVisibility" v-model="replyVisibilityLocal">
+                <option value="all" selected>{{$t('settings.reply_visibility_all')}}</option>
+                <option value="following">{{$t('settings.reply_visibility_following')}}</option>
+                <option value="self">{{$t('settings.reply_visibility_self')}}</option>
+              </select>
+              <i class="icon-down-open"/>
+            </label>
+          </div>
         </div>
         <div class="setting-item">
           <p>{{$t('settings.filtering_explanation')}}</p>
@@ -113,6 +145,13 @@
   margin: 1em 1em 1.4em;
   padding-bottom: 1.4em;
 
+  div {
+    margin-bottom: .5em;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
   &:last-child {
     border-bottom: none;
     padding-bottom: 0;
@@ -159,7 +198,15 @@
     width: 10em;
   }
 }
-.setting-list {
+.select-multiple {
+  display: flex;
+  .option-list {
+    margin: 0;
+    padding-left: .5em;
+  }
+}
+.setting-list,
+.option-list{
   list-style-type: none;
   padding-left: 2em;
   li {
diff --git a/src/i18n/messages.js b/src/i18n/messages.js
index ebc96e81..08d81841 100644
--- a/src/i18n/messages.js
+++ b/src/i18n/messages.js
@@ -331,6 +331,11 @@ const en = {
     reply_visibility_all: 'Show all replies',
     reply_visibility_following: 'Only show replies directed at me or users I\'m following',
     reply_visibility_self: 'Only show replies directed at me',
+    notification_visibility: 'Types of notifications to show',
+    notification_visibility_likes: 'Likes',
+    notification_visibility_mentions: 'Mentions',
+    notification_visibility_repeats: 'Repeats',
+    notification_visibility_follows: 'Follows',
     follow_import: 'Follow import',
     import_followers_from_a_csv_file: 'Import follows from a csv file',
     follows_imported: 'Follows imported! Processing them will take a while.',
@@ -1679,6 +1684,11 @@ const ru = {
     reply_visibility_all: 'Показывать все ответы',
     reply_visibility_following: 'Показывать только ответы мне и тех на кого я подписан',
     reply_visibility_self: 'Показывать только ответы мне',
+    notification_visibility: 'Показывать уведомления',
+    notification_visibility_likes: 'Лайки',
+    notification_visibility_mentions: 'Упоминания',
+    notification_visibility_repeats: 'Повторы',
+    notification_visibility_follows: 'Подписки',
     follow_import: 'Импортировать читаемых',
     import_followers_from_a_csv_file: 'Импортировать читаемых из файла .csv',
     follows_imported: 'Список читаемых импортирован. Обработка займёт некоторое время..',
diff --git a/src/main.js b/src/main.js
index 5258fbd9..6c9bf36e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -50,6 +50,7 @@ const persistedStateOptions = {
     'config.hideAttachmentsInConv',
     'config.hideNsfw',
     'config.replyVisibility',
+    'config.notificationVisibility',
     'config.autoLoad',
     'config.hoverPreview',
     'config.streaming',
diff --git a/src/modules/config.js b/src/modules/config.js
index ac163316..60a34bc1 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -18,6 +18,12 @@ const defaultState = {
   pauseOnUnfocused: true,
   stopGifs: false,
   replyVisibility: 'all',
+  notificationVisibility: {
+    follows: true,
+    mentions: true,
+    likes: true,
+    repeats: true
+  },
   muteWords: [],
   highlight: {},
   interfaceLanguage: browserLocale
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 0dd88266..c69c5be6 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -68,6 +68,15 @@ export const prepareStatus = (status) => {
   return status
 }
 
+const visibleNotificationTypes = (rootState) => {
+  return [
+    rootState.config.notificationVisibility.likes && 'like',
+    rootState.config.notificationVisibility.mentions && 'mention',
+    rootState.config.notificationVisibility.repeats && 'repeat',
+    rootState.config.notificationVisibility.follows && 'follow'
+  ].filter(_ => _)
+}
+
 export const statusType = (status) => {
   if (status.is_post_verb) {
     return 'status'
@@ -86,8 +95,7 @@ export const statusType = (status) => {
     return 'deletion'
   }
 
-  // TODO change to status.activity_type === 'follow' when gs supports it
-  if (status.text.match(/started following/)) {
+  if (status.text.match(/started following/) || status.activity_type === 'follow') {
     return 'follow'
   }
 
@@ -269,7 +277,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
   }
 }
 
-const addNewNotifications = (state, { dispatch, notifications, older }) => {
+const addNewNotifications = (state, { dispatch, notifications, older, visibleNotificationTypes }) => {
   const allStatuses = state.allStatuses
   const allStatusesObject = state.allStatusesObject
   each(notifications, (notification) => {
@@ -318,7 +326,7 @@ const addNewNotifications = (state, { dispatch, notifications, older }) => {
           result.image = action.attachments[0].url
         }
 
-        if (fresh && !state.notifications.desktopNotificationSilence) {
+        if (fresh && !state.notifications.desktopNotificationSilence && visibleNotificationTypes.includes(notification.ntype)) {
           let notification = new window.Notification(title, result)
           // Chrome is known for not closing notifications automatically
           // according to MDN, anyway.
@@ -405,7 +413,7 @@ const statuses = {
       commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser })
     },
     addNewNotifications ({ rootState, commit, dispatch }, { notifications, older }) {
-      commit('addNewNotifications', { dispatch, notifications, older })
+      commit('addNewNotifications', { visibleNotificationTypes: visibleNotificationTypes(rootState), dispatch, notifications, older })
     },
     setError ({ rootState, commit }, { value }) {
       commit('setError', { value })