Add muting to statuses.

src/components/status/status.js

@@ -11,7 +11,8 @@ const Status = {
   ],
   data: () => ({
     replying: false,
-    expanded: false
+    expanded: false,
+    unmuted: false
   }),
   computed: {
     retweet () { return !!this.statusoid.retweeted_status },
@@ -25,7 +26,8 @@ const Status = {
     },
     loggedIn () {
       return !!this.$store.state.users.currentUser
-    }
+    },
+    muted () { return !this.unmuted && this.status.user.muted }
   },
   components: {
     Attachment,
@@ -40,6 +42,9 @@ const Status = {
     },
     toggleExpanded () {
       this.$emit('toggleExpanded')
+    },
+    toggleMute () {
+      this.unmuted = !this.unmuted
     }
   }
 }

src/components/status/status.vue

@@ -1,5 +1,12 @@
 <template>
   <div class="status-el base00-background" v-if="!status.deleted">
+    <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>
+        <button @click="toggleMute">show</button>
+      </div>
+    </template>
+    <template v-if="!muted">
       <div v-if="retweet" class="media container retweet-info">
         <div class="media-left">
           <i class='fa icon-retweet retweeted'></i>
@@ -65,6 +72,7 @@
           </div>
         </div>
       </div>
+    </template>
   </div>
 </template>
 
@@ -128,4 +136,7 @@
      padding-right: 1em;
      border-bottom: 1px solid;
  }
+ .muted button {
+   margin-left: auto;
+ }
 </style>

src/components/user_card_content/user_card_content.vue

@@ -4,7 +4,7 @@
       <div class='user-info'>
         <img :src="user.profile_image_url">
         <div v-if='user.muted' class='muteinfo'>Muted</div>
-        <div class='muteinfo'>
+        <div class='muteinfo' v-if='isOtherUser'>
           <button @click="toggleMute">Mute/Unmute</button>
         </div>
         <span class="glyphicon glyphicon-user"></span>

src/modules/users.js

@@ -52,6 +52,15 @@ const users = {
       const retweetedUsers = compact(map(statuses, 'retweeted_status.user'))
       store.commit('addNewUsers', users)
       store.commit('addNewUsers', retweetedUsers)
+
+      // Reconnect users to statuses
+      each(statuses, (status) => {
+        status.user = find(store.state.users, status.user)
+      })
+      // Reconnect users to retweets
+      each(compact(map(statuses, 'retweeted_status')), (status) => {
+        status.user = find(store.state.users, status.user)
+      })
     },
     loginUser (store, userCredentials) {
       const commit = store.commit