#468 - pin/unpin status

src/components/status/status.js

@@ -353,6 +353,16 @@ const Status = {
         this.expandingSubject = true
       }
     },
+    pinStatus () {
+      this.$store.state.api.backendInteractor.pinOwnStatus(this.status.id).then((status) => {
+        this.$store.dispatch('updatePinned', status)
+      })
+    },
+    unpinStatus () {
+      this.$store.state.api.backendInteractor.unpinOwnStatus(this.status.id).then((status) => {
+        this.$store.dispatch('updatePinned', status)
+      })
+    },
     replyEnter (id, event) {
       this.showPreview = true
       const targetId = id

src/components/status/status.vue

@@ -52,12 +52,18 @@
                 <a :href="status.external_url" target="_blank" v-if="!status.is_local && !isPreview" class="source_url" title="Source">
                   <i class="button-icon icon-link-ext-alt"></i>
                 </a>
-                <template v-if="expandable && !isPreview">
+                <div class="button-icon button-action-icon" v-if="!status.pinned" @click.prevent="pinStatus" title="Pin">
-                  <a href="#" @click.prevent="toggleExpanded" title="Expand">
+                  <i class="fa icon-pin"></i>
-                    <i class="button-icon icon-plus-squared"></i>
+                </div>
-                  </a>
+                <div class="button-icon button-action-icon" v-else @click.prevent="unpinStatus" title="Unpin">
-                </template>
+                  <i class="fa icon-cancel"></i>
-                <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="button-icon icon-eye-off"></i></a>
+                </div>
+                <div class="button-icon button-action-icon" v-if="expandable && !isPreview" @click.prevent="toggleExpanded" title="Expand">
+                  <i class="button-icon icon-plus-squared"></i>
+                </div>
+                <div class="button-icon button-action-icon" v-if="unmuted" @click.prevent="toggleMute" title="Toggle Mute">
+                  <i class="button-icon icon-eye-off"></i>
+                </div>
               </span>
             </div>
 
@@ -678,6 +684,10 @@ a.unmute {
   }
 }
 
+.button-action-icon {
+  cursor: pointer;
+}
+
 @media all and (max-width: 800px) {
   .status-el {
     .retweet-info {

src/modules/statuses.js

@@ -424,6 +424,10 @@ export const mutations = {
       newStatus.favoritedBy.push(user)
     }
   },
+  setPinned (state, { status }) {
+    const newStatus = state.allStatusesObject[status.id]
+    newStatus.pinned = status.pinned
+  },
   setRetweeted (state, { status, value }) {
     const newStatus = state.allStatusesObject[status.id]
 
@@ -533,6 +537,9 @@ const statuses = {
       rootState.api.backendInteractor.unfavorite(status.id)
         .then(status => commit('setFavoritedConfirm', { status, user: rootState.users.currentUser }))
     },
+    updatePinned ({ rootState, commit }, status) {
+      commit('setPinned', { status })
+    },
     retweet ({ rootState, commit }, status) {
       // Optimistic retweeting...
       commit('setRetweeted', { status, value: true })

src/services/entity_normalizer/entity_normalizer.service.js

@@ -211,6 +211,7 @@ export const parseStatus = (data) => {
 
     output.summary_html = addEmojis(data.spoiler_text, data.emojis)
     output.external_url = data.url
+    output.pinned = data.pinned
   } else {
     output.favorited = data.favorited
     output.fave_num = data.fave_num