refs #714 Add tag as search target and show results of search tags

src/config/locales/en/translation.json

@@ -289,6 +289,7 @@
   "search": {
     "search": "Search",
     "account": "Account",
+    "tag": "Hashtag",
     "keyword": "keyword"
   },
   "lists": {

src/renderer/components/TimelineSpace/Contents/Search.vue

@@ -15,7 +15,8 @@
       </el-form>
     </div>
     <div class="search-result">
-      <search-account></search-account>
+      <search-account v-if="target==='account'"></search-account>
+      <search-tag v-else-if="target==='tag'"></search-tag>
     </div>
   </div>
 </template>
@@ -23,10 +24,11 @@
 <script>
 import { mapState } from 'vuex'
 import SearchAccount from './Search/Account'
+import SearchTag from './Search/Tag'
 
 export default {
   name: 'search',
-  components: { SearchAccount },
+  components: { SearchAccount, SearchTag },
   data () {
     return {
       target: 'account',
@@ -44,6 +46,10 @@ export default {
           {
             target: 'account',
             label: this.$t('search.account')
+          },
+          {
+            target: 'tag',
+            label: this.$t('search.tag')
           }
         ]
       }
@@ -61,6 +67,15 @@ export default {
               })
             })
           break
+        case 'tag':
+          this.$store.dispatch('TimelineSpace/Contents/Search/Tag/search', `#${this.query}`)
+            .catch(() => {
+              this.$message({
+                message: this.$t('message.search_error'),
+                type: 'error'
+              })
+            })
+          break
         default:
           break
       }

src/renderer/components/TimelineSpace/Contents/Search/Tag.vue

@@ -0,0 +1,25 @@
+<template>
+  <div id="search_tag">
+    <template v-for="tag in results">
+      <tag :tag="tag"></tag>
+    </template>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Tag from '~/src/renderer/components/molecules/Tag'
+
+export default {
+  name: 'search-tag',
+  components: { Tag },
+  computed: {
+    ...mapState('TimelineSpace/Contents/Search/Tag', {
+      results: state => state.results
+    })
+  },
+  destroyed () {
+    this.$store.commit('TimelineSpace/Contents/Search/Tag/updateResults', [])
+  }
+}
+</script>

src/renderer/components/molecules/Tag.vue

@@ -0,0 +1,42 @@
+<template>
+<div class="tag">
+  <div class="icon">
+    <icon name="hashtag"></icon>
+  </div>
+  <div class="name">
+    {{ tag.name }}
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'tag',
+  props: {
+    tag: {
+      type: Object,
+      default: null
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tag {
+  align-items: center;
+  border-bottom: 1px solid var(--theme-border-color);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  height: 46px;
+  padding: 4px 12px 8px;
+
+  .icon {
+    padding: 4px 0 0 8px;
+  }
+
+  .name {
+    padding: 0 8px;
+  }
+}
+</style>

src/renderer/store/TimelineSpace/Contents/Search.js

@@ -1,8 +1,9 @@
 import Account from './Search/Account'
+import Tag from './Search/Tag'
 
 const Search = {
   namespaced: true,
-  modules: { Account },
+  modules: { Account, Tag },
   state: {
     loading: false
   },

src/renderer/store/TimelineSpace/Contents/Search/Account.js

@@ -20,12 +20,10 @@ const Account = {
       return client.get('/search', { q: query, resolve: true })
         .then(res => {
           commit('updateResults', res.data.accounts)
-          commit('TimelineSpace/Contents/Search/changeLoading', false, { root: true })
           return res.data
         })
-        .catch(err => {
+        .finally(() => {
           commit('TimelineSpace/Contents/Search/changeLoading', false, { root: true })
-          throw err
         })
     }
   }

src/renderer/store/TimelineSpace/Contents/Search/Tag.js

@@ -0,0 +1,30 @@
+import Mastodon from 'megalodon'
+
+export default {
+  namespaced: true,
+  state: {
+    results: []
+  },
+  mutations: {
+    updateResults (state, results) {
+      state.results = results
+    }
+  },
+  actions: {
+    search ({ state, commit, rootState }, query) {
+      commit('TimelineSpace/Contents/Search/changeLoading', true, { root: true })
+      const client = new Mastodon(
+        rootState.TimelineSpace.account.accessToken,
+        rootState.TimelineSpace.account.baseURL + '/api/v2'
+      )
+      return client.get('/search', { q: query, resolve: true })
+        .then(res => {
+          commit('updateResults', res.data.hashtags)
+          return res.data
+        })
+        .finally(() => {
+          commit('TimelineSpace/Contents/Search/changeLoading', false, { root: true })
+        })
+    }
+  }
+}