refs #2209 Add subscribe/unsubscribe button in account profile

src/config/locales/en/translation.json

@@ -356,8 +356,10 @@
       "follows_you": "Follows you",
       "doesnt_follow_you": "Doesn't follow you",
       "detail": "Detail",
-      "follow": "Follow",
-      "unfollow": "Unfollow",
+      "follow": "Follow this user",
+      "unfollow": "Unfollow this user",
+      "subscribe": "Subscribe this user",
+      "unsubscribe": "Unsubscribe this user",
       "follow_requested": "Follow requested",
       "open_in_browser": "Open in Browser",
       "manage_list_memberships": "Manage List Memberships",
@@ -436,6 +438,8 @@
     "toot_fetch_error": "Failed to fetch the toot detail",
     "follow_error": "Failed to follow the user",
     "unfollow_error": "Failed to unfollow the user",
+    "subscribe_error": "Failed to subscribe the user",
+    "unsubscribe_error": "Failed to unsubscribe the user",
     "lists_fetch_error": "Failed to fetch lists",
     "list_create_error": "Failed to create a list",
     "members_fetch_error": "Failed to fetch members",

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

@@ -10,12 +10,26 @@
   >
     <div class="header-background" v-bind:style="{ backgroundImage: 'url(' + account.header + ')' }">
       <div class="header">
-        <div class="follow-follower" v-if="relationship !== null && relationship !== '' && !isOwnProfile">
+        <div class="relationship" v-if="relationship !== null && relationship !== '' && !isOwnProfile">
           <div class="follower-status">
             <el-tag class="status" size="small" v-if="relationship.followed_by">{{ $t('side_bar.account_profile.follows_you') }}</el-tag>
             <el-tag class="status" size="medium" v-else>{{ $t('side_bar.account_profile.doesnt_follow_you') }}</el-tag>
           </div>
+          <div class="notify" v-if="relationship !== null && relationship !== '' && !isOwnProfile">
+            <div
+              v-if="relationship.notifying"
+              class="unsubscribe"
+              @click="unsubscribe(account)"
+              :title="$t('side_bar.account_profile.unsubscribe')"
+            >
+              <icon name="bell" scale="1.3"></icon>
+            </div>
+            <div v-else class="subscribe" @click="subscribe(account)" :title="$t('side_bar.account_profile.subscribe')">
+              <icon name="regular/bell" scale="1.3"></icon>
+            </div>
+          </div>
         </div>
+
         <div class="user-info">
           <div class="more" v-if="relationship !== null && relationship !== '' && !isOwnProfile">
             <popper trigger="click" :options="{ placement: 'bottom' }" ref="popper">
@@ -243,6 +257,32 @@ export default {
     },
     identityOpen(link) {
       return window.shell.openExternal(link)
+    },
+    subscribe(account) {
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true)
+      try {
+        this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/subscribe', account)
+      } catch (err) {
+        this.$message({
+          message: this.$t('message.subscribe_error'),
+          type: 'error'
+        })
+      } finally {
+        this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', false)
+      }
+    },
+    unsubscribe(account) {
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true)
+      try {
+        this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/unsubscribe', account)
+      } catch (err) {
+        this.$message({
+          message: this.$t('message.unsubscribe_error'),
+          type: 'error'
+        })
+      } finally {
+        this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', false)
+      }
     }
   }
 }
@@ -263,8 +303,9 @@ export default {
     word-wrap: break-word;
     font-size: var(--base-font-size);
 
-    .follow-follower {
-      text-align: left;
+    .relationship {
+      display: flex;
+      justify-content: space-between;
 
       .follower-status {
         .status {
@@ -273,6 +314,14 @@ export default {
           font-size: 1rem;
         }
       }
+
+      .notify {
+        cursor: pointer;
+
+        .unsubscribe {
+          color: #409eff;
+        }
+      }
     }
 
     .user-info {

src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.ts

@@ -208,6 +208,26 @@ const actions: ActionTree<AccountProfileState, RootState> = {
     )
     const res = await client.getIdentityProof(account.id)
     commit(MUTATION_TYPES.CHANGE_IDENTITY_PROOFS, res.data)
+  },
+  subscribe: async ({ rootState, commit }, account: Entity.Account) => {
+    const client = generator(
+      rootState.TimelineSpace.sns,
+      rootState.TimelineSpace.account.baseURL,
+      rootState.TimelineSpace.account.accessToken,
+      rootState.App.userAgent
+    )
+    const res = await client.subscribeAccount(account.id)
+    commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data)
+  },
+  unsubscribe: async ({ rootState, commit }, account: Entity.Account) => {
+    const client = generator(
+      rootState.TimelineSpace.sns,
+      rootState.TimelineSpace.account.baseURL,
+      rootState.TimelineSpace.account.accessToken,
+      rootState.App.userAgent
+    )
+    const res = await client.unsubscribeAccount(account.id)
+    commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data)
   }
 }