From 8618857aa36574f52a23106cd0d57fd96782435b Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 6 Sep 2019 11:15:22 -0400
Subject: [PATCH] collapse fav/repeat notifications from muted users

---
 src/components/notification/notification.js   |  14 +-
 src/components/notification/notification.vue  | 202 ++++++++++--------
 .../notifications/notifications.scss          |   5 +-
 3 files changed, 128 insertions(+), 93 deletions(-)

diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 896c6d52..181f7715 100644
--- a/src/components/notification/notification.js
+++ b/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
     }
   }
 }
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index bafcd026..1f192c77 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -4,104 +4,126 @@
     :compact="true"
     :statusoid="notification.status"
   />
-  <div
-    v-else
-    class="non-mention"
-    :class="[userClass, { highlighted: userStyle }]"
-    :style="[ userStyle ]"
-  >
-    <a
-      class="avatar-container"
-      :href="notification.from_profile.statusnet_profile_url"
-      @click.stop.prevent.capture="toggleUserExpanded"
+  <div v-else>
+    <div
+      v-if="needMute && !unmuted"
+      class="container muted"
     >
-      <UserAvatar
-        :compact="true"
-        :better-shadow="betterShadow"
-        :user="notification.from_profile"
-      />
-    </a>
-    <div class="notification-right">
-      <UserCard
-        v-if="userExpanded"
-        :user="getUser(notification)"
-        :rounded="true"
-        :bordered="true"
-      />
-      <span class="notification-details">
-        <div class="name-and-action">
-          <!-- eslint-disable vue/no-v-html -->
-          <span
-            v-if="!!notification.from_profile.name_html"
-            class="username"
-            :title="'@'+notification.from_profile.screen_name"
-            v-html="notification.from_profile.name_html"
-          />
-          <!-- eslint-enable vue/no-v-html -->
-          <span
-            v-else
-            class="username"
-            :title="'@'+notification.from_profile.screen_name"
-          >{{ notification.from_profile.name }}</span>
-          <span v-if="notification.type === 'like'">
-            <i class="fa icon-star lit" />
-            <small>{{ $t('notifications.favorited_you') }}</small>
-          </span>
-          <span v-if="notification.type === 'repeat'">
-            <i
-              class="fa icon-retweet lit"
-              :title="$t('tool_tip.repeat')"
+      <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"
+      :class="[userClass, { highlighted: userStyle }]"
+      :style="[ userStyle ]"
+    >
+      <a
+        class="avatar-container"
+        :href="notification.from_profile.statusnet_profile_url"
+        @click.stop.prevent.capture="toggleUserExpanded"
+      >
+        <UserAvatar
+          :compact="true"
+          :better-shadow="betterShadow"
+          :user="notification.from_profile"
+        />
+      </a>
+      <div class="notification-right">
+        <UserCard
+          v-if="userExpanded"
+          :user="getUser(notification)"
+          :rounded="true"
+          :bordered="true"
+        />
+        <span class="notification-details">
+          <div class="name-and-action">
+            <!-- eslint-disable vue/no-v-html -->
+            <span
+              v-if="!!notification.from_profile.name_html"
+              class="username"
+              :title="'@'+notification.from_profile.screen_name"
+              v-html="notification.from_profile.name_html"
             />
-            <small>{{ $t('notifications.repeated_you') }}</small>
-          </span>
-          <span v-if="notification.type === 'follow'">
-            <i class="fa icon-user-plus lit" />
-            <small>{{ $t('notifications.followed_you') }}</small>
-          </span>
-        </div>
+            <!-- eslint-enable vue/no-v-html -->
+            <span
+              v-else
+              class="username"
+              :title="'@'+notification.from_profile.screen_name"
+            >{{ notification.from_profile.name }}</span>
+            <span v-if="notification.type === 'like'">
+              <i class="fa icon-star lit" />
+              <small>{{ $t('notifications.favorited_you') }}</small>
+            </span>
+            <span v-if="notification.type === 'repeat'">
+              <i
+                class="fa icon-retweet lit"
+                :title="$t('tool_tip.repeat')"
+              />
+              <small>{{ $t('notifications.repeated_you') }}</small>
+            </span>
+            <span v-if="notification.type === 'follow'">
+              <i class="fa icon-user-plus lit" />
+              <small>{{ $t('notifications.followed_you') }}</small>
+            </span>
+          </div>
+          <div
+            v-if="notification.type === 'follow'"
+            class="timeago"
+          >
+            <span class="faint">
+              <Timeago
+                :time="notification.created_at"
+                :auto-update="240"
+              />
+            </span>
+          </div>
+          <div
+            v-else
+            class="timeago"
+          >
+            <router-link
+              v-if="notification.status"
+              :to="{ name: 'conversation', params: { id: notification.status.id } }"
+              class="faint-link"
+            >
+              <Timeago
+                :time="notification.created_at"
+                :auto-update="240"
+              />
+            </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="timeago"
+          class="follow-text"
         >
-          <span class="faint">
-            <Timeago
-              :time="notification.created_at"
-              :auto-update="240"
-            />
-          </span>
-        </div>
-        <div
-          v-else
-          class="timeago"
-        >
-          <router-link
-            v-if="notification.status"
-            :to="{ name: 'conversation', params: { id: notification.status.id } }"
-            class="faint-link"
-          >
-            <Timeago
-              :time="notification.created_at"
-              :auto-update="240"
-            />
+          <router-link :to="userProfileLink">
+            @{{ notification.from_profile.screen_name }}
           </router-link>
         </div>
-      </span>
-      <div
-        v-if="notification.type === 'follow'"
-        class="follow-text"
-      >
-        <router-link :to="userProfileLink(notification.from_profile)">
-          @{{ notification.from_profile.screen_name }}
-        </router-link>
+        <template v-else>
+          <status
+            class="faint"
+            :compact="true"
+            :statusoid="notification.action"
+            :no-heading="true"
+          />
+        </template>
       </div>
-      <template v-else>
-        <status
-          class="faint"
-          :compact="true"
-          :statusoid="notification.action"
-          :no-heading="true"
-        />
-      </template>
     </div>
   </div>
 </template>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 622d12f4..71876b14 100644
--- a/src/components/notifications/notifications.scss
+++ b/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;