refs #543 Set shortcut key to move toot in public

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

@@ -4,7 +4,7 @@
   <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
   <transition-group name="timeline" tag="div">
-    <div class="home-timeline" v-for="(message, index) in timeline" :key="message.id">
+    <div class="home-timeline" v-for="(message, index) in timeline" :key="message.uri">
       <toot
         :message="message"
         :filter="filter"

src/renderer/components/TimelineSpace/Contents/Public.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="public-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="public-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: 'public',
   components: { Toot },
+  data () {
+    return {
+      focusedIndex: null
+    }
+  },
   computed: {
     ...mapState({
       backgroundColor: state => state.App.theme.background_color,
@@ -65,6 +80,14 @@ export default {
             this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
           })
       }
+    },
+    focusedIndex: function (newState, oldState) {
+      if (newState >= 0 && this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Public/changeHeading', false)
+      } else if (newState === null && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
+        this.$store.commit('TimelineSpace/Contents/Public/mergeTimeline')
+      }
     }
   },
   methods: {
@@ -107,6 +130,7 @@ export default {
       } else if ((event.target.scrollTop <= 10) && !this.heading) {
         this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
         this.$store.commit('TimelineSpace/Contents/Public/mergeTimeline')
+        this.focusedIndex = null
       }
     },
     async reload () {
@@ -151,6 +175,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
     }
   }
 }