refs #750 Switch focus between DirectMessages and Toot Detail using shortcut keys

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

@@ -13,6 +13,7 @@
       v-on:delete="deleteToot"
       @focusNext="focusNext"
       @focusPrev="focusPrev"
+      @focusRight="focusSidebar"
       @selectToot="focusToot(message)"
       v-for="message in timeline"
       :key="message.uri + message.id"
@@ -33,6 +34,7 @@ import { mapState, mapGetters } from 'vuex'
 import Toot from '~/src/renderer/components/molecules/Toot'
 import scrollTop from '../../utils/scroll'
 import reloadable from '~/src/renderer/components/mixins/reloadable'
+import { Event } from '~/src/renderer/components/event'
 
 export default {
   name: 'directmessages',
@@ -83,6 +85,15 @@ export default {
         })
     }
     this.$store.commit('TimelineSpace/changeLoading', false)
+
+    Event.$on('focus-timeline', () => {
+      // If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
+      const previousFocusedId = this.focusedId
+      this.focusedId = 0
+      this.$nextTick(function () {
+        this.focusedId = previousFocusedId
+      })
+    })
   },
   beforeUpdate () {
     if (this.$store.state.TimelineSpace.SideMenu.unreadDirectMessagesTimeline && this.heading) {
@@ -94,6 +105,7 @@ export default {
       this.$store.dispatch('TimelineSpace/stopDirectMessagesStreaming')
       this.$store.dispatch('TimelineSpace/unbindDirectMessagesStreaming')
     }
+    Event.$off('focus-timeline')
   },
   destroyed () {
     this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)
@@ -196,6 +208,9 @@ export default {
     focusToot (message) {
       this.focusedId = message.uri + message.id
     },
+    focusSidebar () {
+      Event.$emit('focus-sidebar')
+    },
     handleKey (event) {
       switch (event.srcKey) {
         case 'next':

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

@@ -42,8 +42,7 @@ export default {
   mixins: [reloadable],
   data () {
     return {
-      focusedId: null,
-      backupFocusedId: null
+      focusedId: null
     }
   },
   computed: {