collapse fav/repeat notifications from muted users

src/components/notification/notification.js

@@ -9,7 +9,8 @@ const Notification = {
   data () {
     return {
       userExpanded: false,
-      betterShadow: this.$store.state.interface.browserSupport.cssFilter
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter,
+      unmuted: false
     }
   },
   props: [ 'notification' ],
@@ -23,11 +24,14 @@ const Notification = {
     toggleUserExpanded () {
       this.userExpanded = !this.userExpanded
     },
-    userProfileLink (user) {
+    generateUserProfileLink (user) {
       return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
     },
     getUser (notification) {
       return this.$store.state.users.usersObject[notification.from_profile.id]
+    },
+    toggleMute () {
+      this.unmuted = !this.unmuted
     }
   },
   computed: {
@@ -47,6 +51,12 @@ const Notification = {
         return this.userInStore
       }
       return this.notification.from_profile
+    },
+    userProfileLink () {
+      return this.generateUserProfileLink(this.notification.from_profile)
+    },
+    needMute () {
+      return this.notification.from_profile.muted
     }
   }
 }

src/components/notification/notification.vue

@@ -4,6 +4,22 @@
     :compact="true"
     :statusoid="notification.status"
   />
+  <div v-else>
+    <div
+      v-if="needMute && !unmuted"
+      class="container muted"
+    >
+      <small>
+        <router-link :to="userProfileLink">
+          {{ notification.from_profile.screen_name }}
+        </router-link>
+      </small>
+      <a
+        href="#"
+        class="unmute"
+        @click.prevent="toggleMute"
+      ><i class="button-icon icon-eye-off" /></a>
+    </div>
     <div
       v-else
       class="non-mention"
@@ -85,12 +101,17 @@
               />
             </router-link>
           </div>
+          <a
+            v-if="needMute"
+            href="#"
+            @click.prevent="toggleMute"
+          ><i class="button-icon icon-eye-off" /></a>
         </span>
         <div
           v-if="notification.type === 'follow'"
           class="follow-text"
         >
-        <router-link :to="userProfileLink(notification.from_profile)">
+          <router-link :to="userProfileLink">
             @{{ notification.from_profile.screen_name }}
           </router-link>
         </div>
@@ -104,6 +125,7 @@
         </template>
       </div>
     </div>
+  </div>
 </template>
 
 <script src="./notification.js"></script>

src/components/notifications/notifications.scss

@@ -33,7 +33,6 @@
 
 .notification {
   box-sizing: border-box;
-  display: flex;
   border-bottom: 1px solid;
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
@@ -47,6 +46,10 @@
     }
   }
 
+  .muted {
+    padding: .25em .6em;
+  }
+
   .non-mention {
     display: flex;
     flex: 1;