add follow/unfollow to followed tags list

src/components/followed_tag_card/FollowedTagCard.vue

@@ -1,10 +1,28 @@
 <template>
   <div class="followed-tag-card">
-    <h3>
+    <span>
       <router-link :to="{ name: 'tag-timeline', params: {tag: tag.name}}">
-        #{{ tag.name }}
+        <span class="tag-link">#{{ tag.name }}</span>
       </router-link>
-    </h3>
+      <span class="unfollow-tag">
+        <button
+          v-if="isFollowing"
+          class="button-default unfollow-tag-button"
+          :title="$t('user_card.unfollow_tag')"
+          @click="unfollowTag(tag.name)"
+        >
+          {{ $t('user_card.unfollow_tag') }}
+        </button>
+        <button
+          v-else
+          class="button-default follow-tag-button"
+          :title="$t('user_card.follow_tag')"
+          @click="followTag(tag.name)"
+        >
+          {{ $t('user_card.follow_tag') }}
+        </button>
+      </span>
+    </span>
   </div>
 </template>
 
@@ -15,13 +33,45 @@ export default {
     tag: {
       type: Object,
       required: true
-    }
+    },
   },
+  // this is a hack to update the state of the button
+  // for some reason, List does not update on changes to the tag object
+  data: () => ({
+    isFollowing: true
+  }),
+  mounted () {
+    this.isFollowing = this.tag.following
+  },
+  methods: {
+    unfollowTag (tag) {
+      this.$store.dispatch('unfollowTag', tag)
+      this.isFollowing = false
+    },
+    followTag (tag) {
+      this.$store.dispatch('followTag', tag)
+      this.isFollowing = true
+    }
+  }
 }
 </script>
 
 <style scoped>
-.followed-tag-card {
-  margin-left: 1rem;
-}
+  .followed-tag-card {
+    margin-left: 1rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+  .unfollow-tag {
+    position: absolute;
+    right: 1rem;
+  }
+
+  .tag-link {
+    font-size: large;
+  }
+
+  .unfollow-tag-button, .follow-tag-button {
+    font-size: medium;
+  }
 </style>

src/components/user_profile/user_profile.js

@@ -52,6 +52,7 @@ const UserProfile = {
       error: false,
       userId: null,
       tab: 'statuses',
+      followsTab: 'users',
       footerRef: null,
       note: null,
       noteLoading: false
@@ -176,6 +177,9 @@ const UserProfile = {
       this.tab = tab
       this.$router.replace({ hash: `#${tab}` })
     },
+    onFollowsTabSwitch (tab) {
+      this.followsTab = tab
+    },
     linkClicked ({ target }) {
       if (target.tagName === 'SPAN') {
         target = target.parentNode

src/components/user_profile/user_profile.vue

@@ -106,8 +106,9 @@
           :label="$t('user_card.followees')"
         >
           <tab-switcher
-            :active-tab="users"
+            :active-tab="followsTab"
             :render-only-focused="true"
+            :on-switch="onFollowsTabSwitch"
           >
             <div
               key="users"
@@ -126,12 +127,14 @@
             >
               <FollowedTagList
                 :user-id="userId"
-                :following="false"
                 :get-key="(item) => item.name"
               >
                 <template #item="{item}">
                   <FollowedTagCard :tag="item" />
                 </template>
+                <template #empty>
+                  {{ $t('user_card.not_following_any_hashtags')}}
+                </template>
               </FollowedTagList>
             </div>
           </tab-switcher>