refs #543 Fix focus logic in public

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

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

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

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

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

@@ -4,16 +4,16 @@
   <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, index) in timeline" :key="message.uri">
+    <div class="public-timeline" v-for="message in timeline" :key="message.uri">
       <toot
         :message="message"
         :filter="filter"
-        :focused="index === focusedIndex"
+        :focused="message.uri === focusedId"
         v-on:update="updateToot"
         v-on:delete="deleteToot"
         @focusNext="focusNext"
         @focusPrev="focusPrev"
-        @selectToot="focusToot(index)"
+        @selectToot="focusToot(message)"
         >
       </toot>
     </div>
@@ -37,7 +37,7 @@ export default {
   components: { Toot },
   data () {
     return {
-      focusedIndex: null
+      focusedId: null
     }
   },
   computed: {
@@ -81,8 +81,8 @@ export default {
           })
       }
     },
-    focusedIndex: function (newState, oldState) {
+    focusedId: function (newState, oldState) {
-      if (newState >= 0 && this.heading) {
+      if (newState && this.heading) {
         this.$store.commit('TimelineSpace/Contents/Public/changeHeading', false)
       } else if (newState === null && !this.heading) {
         this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
@@ -174,24 +174,26 @@ export default {
         document.getElementById('scrollable'),
         0
       )
-      this.focusedIndex = null
+      this.focusedId = null
     },
     focusNext () {
-      if (this.focusedIndex === null) {
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri)
-        this.focusedIndex = 0
+      if (currentIndex === -1) {
-      } else if (this.focusedIndex < this.timeline.length) {
+        this.focusedId = this.timeline[0].uri
-        this.focusedIndex++
+      } else if (currentIndex < this.timeline.length) {
+        this.focusedId = this.timeline[currentIndex + 1].uri
       }
     },
     focusPrev () {
-      if (this.focusedIndex === 0) {
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri)
-        this.focusedIndex = null
+      if (currentIndex === 0) {
-      } else if (this.focusedIndex > 0) {
+        this.focusedId = null
-        this.focusedIndex--
+      } else if (currentIndex > 0) {
+        this.focusedId = this.timeline[currentIndex - 1].uri
       }
     },
-    focusToot (index) {
+    focusToot (message) {
-      this.focusedIndex = index
+      this.focusedId = message.uri
     }
   }
 }