2 files changed, 26 insertions, 6 deletions
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 87fff879..bb026fe1 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -4,6 +4,7 @@ import RetweetButton from '../retweet_button/retweet_button.vue'
 import DeleteButton from '../delete_button/delete_button.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 import UserCardContent from '../user_card_content/user_card_content.vue'
+import { filter } from 'lodash'
 
 const Status = {
   props: [
@@ -19,6 +20,9 @@ const Status = {
     userExpanded: false
   }),
   computed: {
+    muteWords () {
+      return this.$store.state.config.muteWords
+    },
     hideAttachments () {
       return (this.$store.state.config.hideAttachments && !this.inConversation) ||
         (this.$store.state.config.hideAttachmentsInConv && this.inConversation)
@@ -35,7 +39,15 @@ const Status = {
     loggedIn () {
       return !!this.$store.state.users.currentUser
     },
-    muted () { return !this.unmuted && this.status.user.muted },
+    muteWordHits () {
+      const statusText = this.status.text.toLowerCase()
+      const hits = filter(this.muteWords, (muteWord) => {
+        return statusText.includes(muteWord.toLowerCase())
+      })
+
+      return hits
+    },
+    muted () { return !this.unmuted && (this.status.user.muted || this.muteWordHits.length > 0) },
     isReply () { return !!this.status.in_reply_to_status_id },
     borderColor () {
       return {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 62a55505..b471888a 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -3,6 +3,7 @@
     <template v-if="muted">
       <div class="media status container muted">
         <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
+        <small class="muteWords">{{muteWordHits.join(', ')}}</small>
         <a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a>
       </div>
     </template>
@@ -52,10 +53,10 @@
                 <small>
                   <a href="#" @click.prevent="toggleExpanded" ><i class="icon-plus-squared"></i></a>
                 </small>
-                <small v-if="status.user.muted">
-                  <a href="#" @click.prevent="toggleMute" ><i class="icon-eye-off"></i></a>
-                </small>
               </template>
+              <small v-if="unmuted">
+                <a href="#" @click.prevent="toggleMute" ><i class="icon-eye-off"></i></a>
+              </small>
               <small v-if="!status.is_local" class="source_url">
                 <a :href="status.external_url" target="_blank" ><i class="icon-binoculars"></i></a>
               </small>
@@ -162,8 +163,15 @@
      border-left: 4px rgba(255, 48, 16, 0.65);
      border-left-style: inherit;
  }
- .muted button {
-   margin-left: auto;
+ .muted {
+   padding: 0.1em 0.7em 0.1em 0.8em;
+   button {
+     margin-left: auto;
+   }
+
+   .muteWords {
+     margin-left: 10px;
+   }
  }
 
  a.unmute {