Merge pull request #606 from h3poteto/iss-598

closes #598 Show tags in side menu

src/config/locales/de/translation.json

@@ -219,7 +219,9 @@
     }
   },
   "hashtag": {
-    "tag_name": "Tagname"
+    "tag_name": "Tagname",
+    "delete_tag": "Delete tag",
+    "save_tag": "Save tag"
   },
   "search": {
     "search": "Suche",

src/config/locales/en/translation.json

@@ -224,7 +224,9 @@
     }
   },
   "hashtag": {
-    "tag_name": "Tag name"
+    "tag_name": "Tag name",
+    "delete_tag": "Delete tag",
+    "save_tag": "Save tag"
   },
   "search": {
     "search": "Search",

src/config/locales/fr/translation.json

@@ -219,7 +219,9 @@
     }
   },
   "hashtag": {
-    "tag_name": "Nom du hashtag"
+    "tag_name": "Nom du hashtag",
+    "delete_tag": "Delete tag",
+    "save_tag": "Save tag"
   },
   "search": {
     "search": "Rechercher",

src/config/locales/ja/translation.json

@@ -219,7 +219,9 @@
     }
   },
   "hashtag": {
-    "tag_name": "タグ名"
+    "tag_name": "タグ名",
+    "delete_tag": "タグを削除",
+    "save_tag": "タグを保存"
   },
   "search": {
     "search": "検索",

src/config/locales/ko/translation.json

@@ -224,7 +224,9 @@
     }
   },
   "hashtag": {
-    "tag_name": "태그 이름"
+    "tag_name": "태그 이름",
+    "delete_tag": "Delete tag",
+    "save_tag": "Save tag"
   },
   "search": {
     "search": "검색",

src/config/locales/pl/translation.json

@@ -219,7 +219,9 @@
     }
   },
   "hashtag": {
-    "tag_name": "Tag"
+    "tag_name": "Tag",
+    "delete_tag": "Delete tag",
+    "save_tag": "Save tag"
   },
   "search": {
     "search": "Szukaj",

src/main/index.js

@@ -660,6 +660,9 @@ ipcMain.on('change-language', (event, value) => {
 ipcMain.on('save-hashtag', (event, tag) => {
   const hashtags = new Hashtags(hashtagsDB)
   hashtags.insertTag(tag)
+    .then(() => {
+      event.sender.send('response-save-hashtag')
+    })
     .catch((err) => {
       log.error(err)
     })

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

@@ -12,7 +12,7 @@
           <input v-model="tag" :placeholder="$t('hashtag.tag_name')" class="search-keyword" v-shortkey.avoid v-on:keyup.enter="search" autofocus></input>
         </div>
         <div class="form-item" v-show="tagPage()">
-          <el-button type="text" @click="save">
+          <el-button type="text" @click="save" :title="$t('hashtag.save_tag')">
             <icon name="thumbtack"></icon>
           </el-button>
         </div>

src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue

@@ -7,7 +7,7 @@
           {{ tag.tagName }}
         </td>
         <td class="action">
-          <el-button type="text" @click.stop="deleteTag(tag)">
+          <el-button type="text" @click.stop="deleteTag(tag)" :title="$t('hashtag.delete_tag')">
             <icon name="regular/trash-alt"></icon>
           </el-button>
         </td>

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

@@ -106,8 +106,6 @@ export default {
   },
   methods: {
     async load (tag) {
-      this.$store.commit('TimelineSpace/SideMenu/updateOverrideActivePath', `/${this.$route.params.id}/hashtag`)
-
       await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag)
         .catch(() => {
           this.$message({
@@ -125,7 +123,6 @@ export default {
       return true
     },
     reset () {
-      this.$store.commit('TimelineSpace/SideMenu/updateOverrideActivePath', null)
       this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', true)
       this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/mergeTimeline')
       this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/archiveTimeline')

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

@@ -31,11 +31,9 @@ import { mapState } from 'vuex'
 export default {
   name: 'jump',
   computed: {
-    ...mapState({
+    ...mapState('TimelineSpace/Modals/Jump', {
-      channelList: (state) => {
+      channelList: state => state.defaultChannelList.concat(state.tagChannelList).concat(state.listChannelList),
-        return state.TimelineSpace.Modals.Jump.defaultChannelList.concat(state.TimelineSpace.Modals.Jump.listChannelList)
+      selectedChannel: state => state.selectedChannel
-      },
-      selectedChannel: state => state.TimelineSpace.Modals.Jump.selectedChannel
     }),
     channel: {
       get () {
@@ -65,6 +63,7 @@ export default {
       if (!oldModal && newModal) {
         this.$nextTick(function () {
           this.$store.dispatch('TimelineSpace/Modals/Jump/syncListChannel')
+          this.$store.dispatch('TimelineSpace/Modals/Jump/syncTagChannel')
           this.$refs.channel.focus()
         })
       } else {

src/renderer/components/TimelineSpace/SideMenu.vue

@@ -61,20 +61,25 @@
         <icon name="globe"></icon>
         <span>{{ $t("side_menu.public") }}</span>
       </el-menu-item>
-      <el-menu-item :index="`/${id()}/hashtag`">
-        <icon name="hashtag"></icon>
-        <span>{{ $t("side_menu.hashtag") }}</span>
-      </el-menu-item>
       <el-menu-item :index="`/${id()}/search`">
         <icon name="search"></icon>
         <span>{{ $t("side_menu.search") }}</span>
       </el-menu-item>
+      <el-menu-item :index="`/${id()}/hashtag`">
+        <icon name="hashtag"></icon>
+        <span>{{ $t("side_menu.hashtag") }}</span>
+      </el-menu-item>
+      <template v-for="tag in tags">
+        <el-menu-item :index="`/${id()}/hashtag/${tag.tagName}`" class="sub-menu" :key="tag.tagName">
+          <span>#{{ tag.tagName }}</span>
+        </el-menu-item>
+      </template>
       <el-menu-item :index="`/${id()}/lists`">
         <icon name="list-ul"></icon>
         <span>{{ $t("side_menu.lists") }}</span>
       </el-menu-item>
       <template v-for="list in lists">
-        <el-menu-item :index="`/${id()}/lists/${list.id}`" class="sub-menu" v-bind:key="list.id">
+        <el-menu-item :index="`/${id()}/lists/${list.id}`" class="sub-menu" :key="list.id">
           <span>#{{ list.title }}</span>
         </el-menu-item>
       </template>
@@ -89,27 +94,26 @@ import { shell } from 'electron'
 export default {
   name: 'side-menu',
   computed: {
+    ...mapState('TimelineSpace/SideMenu', {
+      unreadHomeTimeline: state => state.unreadHomeTimeline,
+      unreadNotifications: state => state.unreadNotifications,
+      unreadLocalTimeline: state => state.unreadLocalTimeline,
+      lists: state => state.lists,
+      tags: state => state.tags,
+      collapse: state => state.collapse
+    }),
     ...mapState({
       account: state => state.TimelineSpace.account,
-      unreadHomeTimeline: state => state.TimelineSpace.SideMenu.unreadHomeTimeline,
+      themeColor: state => state.App.theme.side_menu_color
-      unreadNotifications: state => state.TimelineSpace.SideMenu.unreadNotifications,
-      unreadLocalTimeline: state => state.TimelineSpace.SideMenu.unreadLocalTimeline,
-      lists: state => state.TimelineSpace.SideMenu.lists,
-      themeColor: state => state.App.theme.side_menu_color,
-      overrideActivePath: state => state.TimelineSpace.SideMenu.overrideActivePath,
-      collapse: state => state.TimelineSpace.SideMenu.collapse
     })
   },
   created () {
     this.$store.dispatch('TimelineSpace/SideMenu/readCollapse')
+    this.$store.dispatch('TimelineSpace/SideMenu/listTags')
   },
   methods: {
     activeRoute () {
-      if (this.overrideActivePath === null) {
       return this.$route.path
-      } else {
-        return this.overrideActivePath
-      }
     },
     id () {
       return this.$route.params.id

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

@@ -9,7 +9,10 @@ const Hashtag = {
     Tag
   },
   actions: {
-    saveTag (_, tag) {
+    saveTag ({ dispatch }, tag) {
+      ipcRenderer.once('response-save-hashtag', (event, _) => {
+        dispatch('TimelineSpace/SideMenu/listTags', {}, { root: true })
+      })
       ipcRenderer.send('save-hashtag', tag)
     }
   }

src/renderer/store/TimelineSpace/Contents/Hashtag/List.js

@@ -30,6 +30,7 @@ const List = {
         ipcRenderer.once('response-remove-hashtag', (event, _) => {
           ipcRenderer.removeAllListeners('error-remove-hashtag')
           dispatch('listTags')
+          dispatch('TimelineSpace/SideMenu/listTags', {}, { root: true })
           resolve('deleted')
         })
         ipcRenderer.once('error-remove-hashtag', (event, err) => {

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

@@ -37,6 +37,7 @@ const Jump = {
       }
     ],
     listChannelList: [],
+    tagChannelList: [],
     selectedChannel: {
       name: i18n.t('side_menu.home'),
       path: 'home'
@@ -59,6 +60,14 @@ const Jump = {
           path: `lists/${l.id}`
         }
       })
+    },
+    updateTagChannel (state, tags) {
+      state.tagChannelList = tags.map(t => {
+        return {
+          name: `#${t.tagName}`,
+          path: `hashtag/${t.tagName}`
+        }
+      })
     }
   },
   actions: {
@@ -72,6 +81,9 @@ const Jump = {
     },
     syncListChannel ({ state, commit, rootState }) {
       commit('updateListChannel', rootState.TimelineSpace.SideMenu.lists)
+    },
+    syncTagChannel ({ commit, rootState }) {
+      commit('updateTagChannel', rootState.TimelineSpace.SideMenu.tags)
     }
   }
 }

src/renderer/store/TimelineSpace/SideMenu.js

@@ -8,7 +8,7 @@ const SideMenu = {
     unreadNotifications: false,
     unreadLocalTimeline: false,
     lists: [],
-    overrideActivePath: null,
+    tags: [],
     collapse: false
   },
   mutations: {
@@ -24,11 +24,11 @@ const SideMenu = {
     updateLists (state, lists) {
       state.lists = lists
     },
-    updateOverrideActivePath (state, path) {
-      state.overrideActivePath = path
-    },
     changeCollapse (state, collapse) {
       state.collapse = collapse
+    },
+    updateTags (state, tags) {
+      state.tags = tags
     }
   },
   actions: {
@@ -58,6 +58,20 @@ const SideMenu = {
       ipcRenderer.once('response-get-collapse', (event, value) => {
         commit('changeCollapse', value)
       })
+    },
+    listTags ({ commit }) {
+      return new Promise((resolve, reject) => {
+        ipcRenderer.once('response-list-hashtags', (event, tags) => {
+          ipcRenderer.removeAllListeners('error-list-hashtags')
+          commit('updateTags', tags)
+          resolve(tags)
+        })
+        ipcRenderer.once('error-list-hashtags', (event, err) => {
+          ipcRenderer.removeAlListeners('response-list-hashtags')
+          reject(err)
+        })
+        ipcRenderer.send('list-hashtags')
+      })
     }
   }
 }