refs #300 Apply filter to mentions in notifications

src/renderer/components/TimelineSpace/Contents/Cards/Notification.vue

@@ -1,9 +1,9 @@
 <template>
 <div id="notification">
   <favourite v-if="message.type === 'favourite'" :message="message"></favourite>
-  <follow v-if="message.type === 'follow'" :message="message"></follow>
-  <mention v-if="message.type === 'mention'" :message="message"></mention>
-  <reblog v-if="message.type == 'reblog'" :message="message"></reblog>
+  <follow v-else-if="message.type === 'follow'" :message="message"></follow>
+  <mention v-else-if="message.type === 'mention'" :message="message" :filter="filter"></mention>
+  <reblog v-else-if="message.type == 'reblog'" :message="message"></reblog>
 </div>
 </template>
 
@@ -15,7 +15,16 @@ import Reblog from './Notification/Reblog'
 
 export default {
   name: 'notification',
-  props: ['message'],
+  props: {
+    message: {
+      type: Object,
+      default: {}
+    },
+    filter: {
+      type: String,
+      default: ''
+    }
+  },
   components: { Favourite, Follow, Mention, Reblog }
 }
 </script>

src/renderer/components/TimelineSpace/Contents/Cards/Notification/Mention.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mention">
-    <toot :message="message.status" v-on:update="updateToot"></toot>
+    <toot :message="message.status" :filter="filter" v-on:update="updateToot"></toot>
   </div>
 </template>
 
@@ -9,7 +9,16 @@ import Toot from '../Toot'
 
 export default {
   name: 'mention',
-  props: ['message'],
+  props: {
+    message: {
+      type: Object,
+      default: {}
+    },
+    filter: {
+      type: String,
+      default: ''
+    }
+  },
   components: { Toot },
   methods: {
     updateToot (message) {

src/renderer/components/TimelineSpace/Contents/Notifications.vue

@@ -5,7 +5,7 @@
     </div>
     <transition-group name="timeline" tag="div">
       <div class="notifications" v-for="message in notifications" v-bind:key="message.id">
-        <notification :message="message"></notification>
+        <notification :message="message" :filter="filter"></notification>
       </div>
     </transition-group>
     <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
@@ -27,7 +27,8 @@ export default {
       backgroundColor: state => state.App.theme.background_color,
       heading: state => state.TimelineSpace.Contents.Notifications.heading,
       unread: state => state.TimelineSpace.Contents.Notifications.unreadNotifications,
-      startReload: state => state.TimelineSpace.HeaderMenu.reload
+      startReload: state => state.TimelineSpace.HeaderMenu.reload,
+      filter: state => state.TimelineSpace.Contents.Notifications.filter
     })
   },
   mounted () {

src/renderer/components/TimelineSpace/HeaderMenu.vue

@@ -5,7 +5,7 @@
     <el-button type="text" class="action" @click="openNewTootModal">
       <icon name="regular/edit"></icon>
     </el-button>
-    <el-button type="text" class="action" @click="reload">
+    <el-button v-show="reloadable()" type="text" class="action" @click="reload">
       <icon name="sync-alt"></icon>
     </el-button>
     <el-popover
@@ -24,7 +24,7 @@
           </el-form-item>
         </el-form>
       </div>
-      <el-button slot="reference" type="text" class="action">
+      <el-button v-show="filterable()" slot="reference" type="text" class="action">
         <icon name="sliders-h"></icon>
       </el-button>
     </el-popover>
@@ -110,9 +110,7 @@ export default {
         case 'favourites':
         case 'local':
         case 'public':
-        case 'hashtag-list':
-        case `tag`:
-        case 'lists':
+        case 'tag':
         case 'list':
           this.$store.commit('TimelineSpace/HeaderMenu/changeReload', true)
           break
@@ -120,11 +118,28 @@ export default {
           console.log('Not implemented')
       }
     },
+    reloadable () {
+      switch (this.$route.name) {
+        case 'home':
+        case 'notifications':
+        case 'favourites':
+        case 'local':
+        case 'public':
+        case 'tag':
+        case 'list':
+          return true
+        default:
+          return false
+      }
+    },
     loadFilter () {
       switch (this.$route.name) {
         case 'home':
           this.filter = this.$store.state.TimelineSpace.Contents.Home.filter
           break
+        case 'notifications':
+          this.filter = this.$store.state.TimelineSpace.Contents.Notifications.filter
+          break
         default:
           console.log('Not implemented')
       }
@@ -134,10 +149,22 @@ export default {
         case 'home':
           this.$store.commit('TimelineSpace/Contents/Home/changeFilter', filter)
           break
+        case 'notifications':
+          this.$store.commit('TimelineSpace/Contents/Notifications/changeFilter', filter)
+          break
         default:
           console.log('Not implemented')
       }
       this.filterVisible = false
+    },
+    filterable () {
+      switch (this.$route.name) {
+        case 'home':
+        case 'notifications':
+          return true
+        default:
+          return false
+      }
     }
   }
 }

src/renderer/store/TimelineSpace/Contents/Notifications.js

@@ -7,7 +7,8 @@ const Notifications = {
     lazyLoading: false,
     heading: true,
     notifications: [],
-    unreadNotifications: []
+    unreadNotifications: [],
+    filter: ''
   },
   mutations: {
     changeLazyLoading (state, value) {
@@ -52,6 +53,9 @@ const Notifications = {
     },
     archiveNotifications (state) {
       state.notifications = state.notifications.slice(0, 30)
+    },
+    changeFilter (state, filter) {
+      state.filter = filter
     }
   },
   actions: {