refs #543 Set shortcut key to move toot in local

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

@@ -81,7 +81,7 @@ export default {
       }
     },
     focusedIndex: function (newState, oldState) {
-      if (newState > 0 && this.heading) {
+      if (newState >= 0 && this.heading) {
         this.heading = false
       } else if (newState === null && !this.heading) {
         this.heading = true

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

@@ -79,7 +79,7 @@ export default {
       }
     },
     focusedIndex: function (newState, oldState) {
-      if (newState > 0 && this.heading) {
+      if (newState >= 0 && this.heading) {
         this.$store.commit('TimelineSpace/Contents/Home/changeHeading', false)
       } else if (newState === null && !this.heading) {
         this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)

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

@@ -4,8 +4,18 @@
   <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
   <transition-group name="timeline" tag="div">
-    <div class="local-timeline" v-for="message in timeline" :key="message.id">
-      <toot :message="message" :filter="filter" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
+    <div class="local-timeline" v-for="(message, index) in timeline" :key="message.uri">
+      <toot
+        :message="message"
+        :filter="filter"
+        :focused="index === focusedIndex"
+        v-on:update="updateToot"
+        v-on:delete="deleteToot"
+        @focusNext="focusNext"
+        @focusPrev="focusPrev"
+        @selectToot="focusToot(index)"
+        >
+      </toot>
     </div>
   </transition-group>
   <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
@@ -25,6 +35,11 @@ import scrollTop from '../../utils/scroll'
 export default {
   name: 'local',
   components: { Toot },
+  data () {
+    return {
+      focusedIndex: null
+    }
+  },
   computed: {
     ...mapState({
       backgroundColor: state => state.App.theme.background_color,
@@ -62,6 +77,14 @@ export default {
             this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
           })
       }
+    },
+    focusedIndex: function (newState, oldState) {
+      if (newState >= 0 && this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Local/changeHeading', false)
+      } else if (newState === null && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)
+        this.$store.commit('TimelineSpace/Contents/Local/mergeTimeline')
+      }
     }
   },
   methods: {
@@ -87,6 +110,7 @@ export default {
       } else if ((event.target.scrollTop <= 10) && !this.heading) {
         this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)
         this.$store.commit('TimelineSpace/Contents/Local/mergeTimeline')
+        this.focusedIndex = null
       }
     },
     async reload () {
@@ -128,6 +152,24 @@ export default {
         document.getElementById('scrollable'),
         0
       )
+      this.focusedIndex = null
+    },
+    focusNext () {
+      if (this.focusedIndex === null) {
+        this.focusedIndex = 0
+      } else if (this.focusedIndex < this.timeline.length) {
+        this.focusedIndex++
+      }
+    },
+    focusPrev () {
+      if (this.focusedIndex === 0) {
+        this.focusedIndex = null
+      } else if (this.focusedIndex > 0) {
+        this.focusedIndex--
+      }
+    },
+    focusToot (index) {
+      this.focusedIndex = index
     }
   }
 }