refs #577 Add mute menu to mute an account

src/config/locales/en/translation.json

@@ -164,6 +164,12 @@
     "list_membership": {
       "title": "List Memberships"
     },
+    "mute_confirm": {
+      "title": "Are you sure to block?",
+      "body": "Hide notification from this user?",
+      "cancel": "Cancel",
+      "ok": "Ok"
+    },
     "shortcut": {
       "title": "Keyboard shortcuts",
       "ctrl_number": "Switch accounts",
@@ -208,6 +214,10 @@
       "follow_requested": "Follow requested",
       "open_in_browser": "Open in Browser",
       "manage_list_memberships": "Manage List Memberships",
+      "mute": "Mute",
+      "unmute": "Unmute",
+      "unblock": "Unblock",
+      "block": "Block",
       "toots": "Toots",
       "follows": "Follows",
       "followers": "Followers"

src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue

@@ -23,6 +23,18 @@
                 <li role="button" @click="addToList(account)">
                   {{ $t('side_bar.account_profile.manage_list_memberships') }}
                 </li>
+                <li role="button" @click="unmute(account)" v-if="muting">
+                  {{ $t('side_bar.account_profile.unmute') }}
+                </li>
+                <li role="button" @click="confirmMute(account)" v-else>
+                  {{ $t('side_bar.account_profile.mute') }}
+                </li>
+                <li role="button" @click="unblock(account)" v-if="blocking">
+                  {{ $t('side_bar.account_profile.unblock') }}
+                </li>
+                <li role="button" @click="confirmBlock(account)" v-else>
+                  {{ $t('side_bar.account_profile.block') }}
+                </li>
               </ul>
             </div>
 
@@ -104,10 +116,7 @@ export default {
   },
   computed: {
     ...mapState({
-      account: state => state.TimelineSpace.Contents.SideBar.AccountProfile.account,
       user: state => state.TimelineSpace.account,
-      relationship: state => state.TimelineSpace.Contents.SideBar.AccountProfile.relationship,
-      loading: state => state.TimelineSpace.Contents.SideBar.AccountProfile.loading,
       theme: (state) => {
         return {
           '--theme-mask-color': state.App.theme.wrapper_mask_color,
@@ -115,6 +124,13 @@ export default {
           '--theme-primary-color': state.App.theme.primary_color
         }
       }
+    }),
+    ...mapState('TimelineSpace/Contents/SideBar/AccountProfile', {
+      account: state => state.account,
+      relationship: state => state.relationship,
+      loading: state => state.loading,
+      muting: state => state.relationship && state.relationship.muting,
+      blocking: state => state.relationship && state.relationship.blocking
     })
   },
   watch: {
@@ -168,6 +184,17 @@ export default {
       this.$store.dispatch('TimelineSpace/Modals/ListMembership/setAccount', account)
       this.$store.dispatch('TimelineSpace/Modals/ListMembership/changeModal', true)
       this.$refs.popper.doClose()
+    },
+    confirmMute (account) {
+      this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeAccount', account)
+      this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeModal', true)
+      this.$refs.popper.doClose()
+    },
+    unmute () {
+    },
+    confirmBlock () {
+    },
+    unblock () {
     }
   }
 }

src/renderer/components/TimelineSpace/Modals.vue

@@ -5,6 +5,7 @@
     <image-viewer></image-viewer>
     <list-membership></list-membership>
     <add-list-member></add-list-member>
+    <mute-confirm></mute-confirm>
     <shortcut></shortcut>
   </div>
 </template>
@@ -15,6 +16,7 @@ import Jump from './Modals/Jump'
 import ImageViewer from './Modals/ImageViewer'
 import ListMembership from './Modals/ListMembership'
 import AddListMember from './Modals/AddListMember'
+import MuteConfirm from './Modals/MuteConfirm'
 import Shortcut from './Modals/Shortcut'
 
 export default {
@@ -25,6 +27,7 @@ export default {
     ImageViewer,
     ListMembership,
     AddListMember,
+    MuteConfirm,
     Shortcut
   }
 }

src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue

@@ -0,0 +1,66 @@
+<template>
+<el-dialog
+  :title="$t('modals.mute_confirm.title')"
+  :visible.sync="muteConfirmModal"
+  width="400px"
+  custom-class="mute-confirm"
+  >
+  <div class="description">
+    <span class="label">
+      {{ $t('modals.mute_confirm.body') }}
+    </span>
+    <el-switch v-model="notify"></el-switch>
+  </div>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="closeModal">{{ $t('modals.mute_confirm.cancel') }}</el-button>
+    <el-button type="primary" @click="submit">{{ $t('modals.mute_confirm.ok') }}</el-button>
+  </span>
+</el-dialog>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'MuteConfirm',
+  data () {
+    return {
+      notify: true
+    }
+  },
+  computed: {
+    ...mapState('TimelineSpace/Modals/MuteConfirm', {
+      account: state => state.account
+    }),
+    muteConfirmModal: {
+      get () {
+        return this.$store.state.TimelineSpace.Modals.MuteConfirm.modalOpen
+      },
+      set (value) {
+        this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeModal', value)
+      }
+    }
+  },
+  methods: {
+    closeModal () {
+      this.muteConfirmModal = false
+    },
+    async submit () {
+      this.closeModal()
+      await this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/submit', this.notify)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.description {
+  text-align: center;
+
+  .label {
+    font-size: 14px;
+    color: #606266;
+    padding: 0 32px 0 0;
+  }
+}
+</style>

src/renderer/store/TimelineSpace/Modals.js

@@ -3,6 +3,7 @@ import ImageViewer from './Modals/ImageViewer'
 import Jump from './Modals/Jump'
 import ListMembership from './Modals/ListMembership'
 import AddListMember from './Modals/AddListMember'
+import MuteConfirm from './Modals/MuteConfirm'
 import Shortcut from './Modals/Shortcut'
 
 const Modals = {
@@ -13,6 +14,7 @@ const Modals = {
     Jump,
     ListMembership,
     AddListMember,
+    MuteConfirm,
     Shortcut
   },
   getters: {
@@ -22,8 +24,9 @@ const Modals = {
       const jump = rootState.TimelineSpace.Modals.Jump.modalOpen
       const listMembership = rootState.TimelineSpace.Modals.ListMembership.modalOpen
       const addListMember = rootState.TimelineSpace.Modals.AddListMember.modalOpen
-      const shortcut = rootState.TimelineSpace.Modals.Jump.modalOpen
-      return imageViewer || newToot || jump || listMembership || addListMember || shortcut
+      const shortcut = rootState.TimelineSpace.Modals.Shortcut.modalOpen
+      const muteConfirm = rootState.TimelineSpace.Modals.MuteConfirm.modalOpen
+      return imageViewer || newToot || jump || listMembership || addListMember || shortcut || muteConfirm
     }
   }
 }

src/renderer/store/TimelineSpace/Modals/MuteConfirm.js

@@ -0,0 +1,39 @@
+import Mastodon from 'megalodon'
+
+export default {
+  namespaced: true,
+  state: {
+    modalOpen: false,
+    account: {}
+  },
+  mutations: {
+    changeModal (state, value) {
+      state.modalOpen = value
+    },
+    changeAccount (state, account) {
+      state.account = account
+    }
+  },
+  actions: {
+    changeModal ({ commit }, value) {
+      commit('changeModal', value)
+    },
+    changeAccount ({ commit }, account) {
+      commit('changeAccount', account)
+    },
+    async submit ({ state, rootState, dispatch }, notify) {
+      const client = new Mastodon(
+        rootState.TimelineSpace.account.accessToken,
+        rootState.TimelineSpace.account.baseURL + '/api/v1'
+      )
+      return client.post(`/accounts/${state.account.id}/mute`, {
+        notifications: notify
+      })
+        .then(res => {
+          // Reload relationship
+          dispatch('TimelineSpace/Contents/SideBar/AccountProfile/fetchRelationship', state.account, { root: true })
+          return res.data
+        })
+    }
+  }
+}