Merge pull request #552 from h3poteto/iss-543

refs #543 Set shortcut key to move toot on timeline
2018-08-22 14:12:50 +09:00 · 2018-08-22 14:12:50 +09:00 · db4d556ce2
parent 8d7292f549 bf65233961
commit db4d556ce2
14 changed files with 540 additions and 40 deletions
--- a/src/renderer/components/TimelineSpace/Contents/Cards/Notification.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Cards/Notification.vue
@ -1,9 +1,40 @@
 <template>
-<div id="notification">
-  <favourite v-if="message.type === 'favourite'" :message="message" :filter="filter"></favourite>
-  <follow v-else-if="message.type === 'follow'" :message="message"></follow>
-  <mention v-else-if="message.type === 'mention'" :message="message" :filter="filter"></mention>
-  <reblog v-else-if="message.type == 'reblog'" :message="message" :filter="filter"></reblog>
+<div class="notification">
+  <favourite v-if="message.type === 'favourite'"
+             :message="message"
+             :filter="filter"
+             :focused="focused"
+             @focusNext="$emit('focusNext')"
+             @focusPrev="$emit('focusPrev')"
+             @select="$emit('selectNotification')"
+             >
+  </favourite>
+  <follow v-else-if="message.type === 'follow'"
+          :message="message"
+          :focused="focused"
+          @focusNext="$emit('focusNext')"
+          @focusPrev="$emit('focusPrev')"
+          @select="$emit('selectNotification')"
+          >
+  </follow>
+   <mention v-else-if="message.type === 'mention'"
+            :message="message"
+            :filter="filter"
+            :focused="focused"
+            @focusNext="$emit('focusNext')"
+            @focusPrev="$emit('focusPrev')"
+            @select="$emit('selectNotification')"
+            >
+   </mention>
+   <reblog v-else-if="message.type == 'reblog'"
+           :message="message"
+           :filter="filter"
+           :focused="focused"
+           @focusNext="$emit('focusNext')"
+           @focusPrev="$emit('focusPrev')"
+           @select="$emit('selectNotification')"
+           >
+   </reblog>
 </div>
 </template>

@ -23,6 +54,10 @@ export default {
    filter: {
      type: String,
      default: ''
+    },
+    focused: {
+      type: Boolean,
+      defalt: false
    }
  },
  components: { Favourite, Follow, Mention, Reblog }
--- a/src/renderer/components/TimelineSpace/Contents/Cards/Notification/Favourite.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Cards/Notification/Favourite.vue
@ -1,5 +1,12 @@
 <template>
-<div class="status" tabIndex="0">
+<div
+  class="status"
+  tabIndex="0"
+  v-shortkey="{next: ['j'], prev: ['k']}"
+  @shortkey="handleStatusControl"
+  ref="status"
+  @click="$emit('select')"
+  >
  <div v-show="filtered(message)" class="filtered">
    Filtered
  </div>
@ -80,6 +87,10 @@ export default {
    filter: {
      type: String,
      default: ''
+    },
+    focused: {
+      type: Boolean,
+      default: false
    }
  },
  data () {
@ -88,6 +99,24 @@ export default {
      showAttachments: false
    }
  },
+  mounted () {
+    if (this.focused) {
+      this.$refs.status.focus()
+    }
+  },
+  watch: {
+    focused: function (newState, oldState) {
+      if (newState) {
+        this.$nextTick(function () {
+          this.$refs.status.focus()
+        })
+      } else if (oldState && !newState) {
+        this.$nextTick(function () {
+          this.$refs.status.blur()
+        })
+      }
+    }
+  },
  methods: {
    username (account) {
      if (account.display_name !== '') {
@ -155,6 +184,16 @@ export default {
    },
    spoilerText (message) {
      return emojify(message.spoiler_text, message.emojis)
+    },
+    handleStatusControl (event) {
+      switch (event.srcKey) {
+        case 'next':
+          this.$emit('focusNext')
+          break
+        case 'prev':
+          this.$emit('focusPrev')
+          break
+      }
    }
  }
 }
--- a/src/renderer/components/TimelineSpace/Contents/Cards/Notification/Follow.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Cards/Notification/Follow.vue
@ -1,25 +1,59 @@
 <template>
-  <div class="follow" tabIndex="0">
-    <div class="action">
-      <div class="action-mark">
-        <icon name="user-plus" scale="0.7"></icon>
-      </div>
-      <div class="action-detail">
-        <span class="bold" @click="openUser(message.account)">{{ username(message.account) }}</span> is now following you
-      </div>
-      <div class="action-icon">
-        <img :src="message.account.avatar" />
-      </div>
+<div
+  class="follow"
+  tabIndex="0"
+  v-shortkey="{next: ['j'], prev: ['k']}"
+  @shortkey="handleStatusControl"
+  ref="status"
+  @click="$emit('select')"
+  >
+  <div class="action">
+    <div class="action-mark">
+      <icon name="user-plus" scale="0.7"></icon>
+    </div>
+    <div class="action-detail">
+      <span class="bold" @click="openUser(message.account)">{{ username(message.account) }}</span> is now following you
+    </div>
+    <div class="action-icon">
+      <img :src="message.account.avatar" />
    </div>
-    <div class="clearfix"></div>
-    <div class="fill-line"></div>
  </div>
+  <div class="clearfix"></div>
+  <div class="fill-line"></div>
+</div>
 </template>

 <script>
 export default {
  name: 'follow',
-  props: ['message'],
+  props: {
+    message: {
+      type: Object,
+      default: {}
+    },
+    focused: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    if (this.focused) {
+      this.$refs.status.focus()
+    }
+  },
+  watch: {
+    focused: function (newState, oldState) {
+      if (newState) {
+        this.$nextTick(function () {
+          this.$refs.status.focus()
+        })
+      } else if (oldState && !newState) {
+        this.$nextTick(function () {
+          this.$refs.status.blur()
+        })
+      }
+    }
+  },
  methods: {
    username (account) {
      if (account.display_name !== '') {
@ -32,6 +66,16 @@ export default {
      this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
      this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
      this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
+    },
+    handleStatusControl (event) {
+      switch (event.srcKey) {
+        case 'next':
+          this.$emit('focusNext')
+          break
+        case 'prev':
+          this.$emit('focusPrev')
+          break
+      }
    }
  }
 }
--- a/src/renderer/components/TimelineSpace/Contents/Cards/Notification/Mention.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Cards/Notification/Mention.vue
@ -1,6 +1,15 @@
 <template>
  <div class="mention">
-    <toot :message="message.status" :filter="filter" v-on:update="updateToot"></toot>
+    <toot
+      :message="message.status"
+      :filter="filter"
+      :focused="focused"
+      v-on:update="updateToot"
+      @focusNext="$emit('focusNext')"
+      @focusPrev="$emit('focusPrev')"
+      @selectToot="$emit('select')"
+      >
+    </toot>
  </div>
 </template>

@ -17,6 +26,10 @@ export default {
    filter: {
      type: String,
      default: ''
+    },
+    focused: {
+      type: Boolean,
+      default: false
    }
  },
  components: { Toot },
--- a/src/renderer/components/TimelineSpace/Contents/Cards/Notification/Reblog.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Cards/Notification/Reblog.vue
@ -1,5 +1,12 @@
 <template>
-<div class="status" tabIndex="0">
+<div
+  class="status"
+  tabIndex="0"
+  v-shortkey="{next: ['j'], prev: ['k']}"
+  @shortkey="handleStatusControl"
+  ref="status"
+  @click="$emit('select')"
+  >
  <div v-show="filtered(message)" class="filtered">
    Filtered
  </div>
@ -80,6 +87,10 @@ export default {
    filter: {
      type: String,
      default: ''
+    },
+    focused: {
+      type: Boolean,
+      default: false
    }
  },
  data () {
@ -88,6 +99,24 @@ export default {
      showAttachments: false
    }
  },
+  mounted () {
+    if (this.focused) {
+      this.$refs.status.focus()
+    }
+  },
+  watch: {
+    focused: function (newState, oldState) {
+      if (newState) {
+        this.$nextTick(function () {
+          this.$refs.status.focus()
+        })
+      } else if (oldState && !newState) {
+        this.$nextTick(function () {
+          this.$refs.status.blur()
+        })
+      }
+    }
+  },
  methods: {
    username (account) {
      if (account.display_name !== '') {
@ -155,6 +184,16 @@ export default {
    },
    spoilerText (message) {
      return emojify(message.spoiler_text, message.emojis)
+    },
+    handleStatusControl (event) {
+      switch (event.srcKey) {
+        case 'next':
+          this.$emit('focusNext')
+          break
+        case 'prev':
+          this.$emit('focusPrev')
+          break
+      }
    }
  }
 }
--- a/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue
@ -1,5 +1,12 @@
 <template>
-<div class="status" tabIndex="0">
+<div
+  class="status"
+  tabIndex="0"
+  v-shortkey="{next: ['j'], prev: ['k']}"
+  @shortkey="handleTootControl"
+  ref="status"
+  @click="$emit('selectToot')"
+  >
  <div v-show="filtered(message)" class="filtered">
    Filtered
  </div>
@ -131,6 +138,10 @@ export default {
    filter: {
      type: String,
      default: ''
+    },
+    focused: {
+      type: Boolean,
+      default: false
    }
  },
  computed: {
@ -138,6 +149,24 @@ export default {
      displayNameStyle: state => state.App.displayNameStyle
    })
  },
+  mounted () {
+    if (this.focused) {
+      this.$refs.status.focus()
+    }
+  },
+  watch: {
+    focused: function (newState, oldState) {
+      if (newState) {
+        this.$nextTick(function () {
+          this.$refs.status.focus()
+        })
+      } else if (oldState && !newState) {
+        this.$nextTick(function () {
+          this.$refs.status.blur()
+        })
+      }
+    }
+  },
  methods: {
    originalMessage (message) {
      if (message.reblog !== null) {
@ -354,6 +383,16 @@ export default {
    spoilerText (message) {
      const original = this.originalMessage(message)
      return emojify(original.spoiler_text, original.emojis)
+    },
+    handleTootControl (event) {
+      switch (event.srcKey) {
+        case 'next':
+          this.$emit('focusNext')
+          break
+        case 'prev':
+          this.$emit('focusPrev')
+          break
+      }
    }
  }
 }
--- a/src/renderer/components/TimelineSpace/Contents/Favourites.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
@ -3,7 +3,17 @@
  <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
  </div>
  <div class="fav" v-for="message in favourites" v-bind:key="message.id">
-    <toot :message="message" :filter="filter" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
+    <toot
+      :message="message"
+      :filter="filter"
+      :focused="message.uri === focusedId"
+      v-on:update="updateToot"
+      v-on:delete="deleteToot"
+      @focusNext="focusNext"
+      @focusPrev="focusPrev"
+      @selectToot="focusToot(message)"
+      >
+    </toot>
  </div>
  <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
  </div>
@ -24,7 +34,8 @@ export default {
  components: { Toot },
  data () {
    return {
-      heading: true
+      heading: true,
+      focusedId: null
    }
  },
  computed: {
@ -68,6 +79,13 @@ export default {
            this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
          })
      }
+    },
+    focusedId: function (newState, oldState) {
+      if (newState && this.heading) {
+        this.heading = false
+      } else if (newState === null && !this.heading) {
+        this.heading = true
+      }
    }
  },
  methods: {
@ -129,6 +147,26 @@ export default {
        document.getElementById('scrollable'),
        0
      )
+      this.focusedId = null
+    },
+    focusNext () {
+      const currentIndex = this.favourites.findIndex(toot => this.focusedId === toot.uri)
+      if (currentIndex === -1) {
+        this.focusedId = this.favourites[0].uri
+      } else if (currentIndex < this.favourites.length) {
+        this.focusedId = this.favourites[currentIndex + 1].uri
+      }
+    },
+    focusPrev () {
+      const currentIndex = this.favourites.findIndex(toot => this.focusedId === toot.uri)
+      if (currentIndex === 0) {
+        this.focusedId = null
+      } else if (currentIndex > 0) {
+        this.focusedId = this.favourites[currentIndex - 1].uri
+      }
+    },
+    focusToot (message) {
+      this.focusedId = message.id
    }
  }
 }
--- a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.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="tag-timeline" v-for="message in timeline" v-bind:key="message.id">
-      <toot :message="message" :filter="filter" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
+    <div class="tag-timeline" v-for="message in timeline" v-bind:key="message.uri">
+      <toot
+        :message="message"
+        :filter="filter"
+        :focused="message.uri === focusedId"
+        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"></div>
@ -25,6 +35,11 @@ export default {
  name: 'tag',
  components: { Toot },
  props: ['tag'],
+  data () {
+    return {
+      focusedId: null
+    }
+  },
  computed: {
    ...mapState({
      backgroundColor: state => state.App.theme.background_color,
@ -60,6 +75,14 @@ export default {
            this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
          })
      }
+    },
+    focusedId: function (newState, oldState) {
+      if (newState && this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', false)
+      } else if (newState === null && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', true)
+        this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/mergeTimeline')
+      }
    }
  },
  beforeDestroy () {
@ -134,7 +157,7 @@ export default {
        await this.$store.dispatch('TimelineSpace/stopLocalStreaming')
        await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/stopStreaming')

-        await this.$store.dispatch('TimelineSpace/Contents/Home/fetchTimeline', account)
+        await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetchTimeline', account)
        await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
        await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag)
          .catch(() => {
@ -162,6 +185,26 @@ export default {
        document.getElementById('scrollable'),
        0
      )
+      this.focusedId = null
+    },
+    focusNext () {
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri)
+      if (currentIndex === -1) {
+        this.focusedId = this.timeline[0].uri
+      } else if (currentIndex < this.timeline.length) {
+        this.focusedId = this.timeline[currentIndex + 1].uri
+      }
+    },
+    focusPrev () {
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri)
+      if (currentIndex === 0) {
+        this.focusedId = null
+      } else if (currentIndex > 0) {
+        this.focusedId = this.timeline[currentIndex - 1].uri
+      }
+    },
+    focusToot (message) {
+      this.focusedId = message.uri
    }
  }
 }
--- a/src/renderer/components/TimelineSpace/Contents/Home.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Home.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="home-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="home-timeline" v-for="message in timeline" :key="message.uri">
+      <toot
+        :message="message"
+        :filter="filter"
+        :focused="message.uri === focusedId"
+        v-on:update="updateToot"
+        v-on:delete="deleteToot"
+        @focusNext="focusNext"
+        @focusPrev="focusPrev"
+        @selectToot="focusToot(message)"
+        >
+      </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: 'home',
  components: { Toot },
+  data () {
+    return {
+      focusedId: null
+    }
+  },
  computed: {
    ...mapState({
      backgroundColor: state => state.App.theme.background_color,
@ -62,6 +77,14 @@ export default {
            this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
          })
      }
+    },
+    focusedId: function (newState, oldState) {
+      if (newState && this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Home/changeHeading', false)
+      } else if (newState === null && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
+        this.$store.commit('TimelineSpace/Contents/Home/mergeTimeline')
+      }
    }
  },
  methods: {
@ -129,6 +152,26 @@ export default {
        document.getElementById('scrollable'),
        0
      )
+      this.focusedId = null
+    },
+    focusNext () {
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri)
+      if (currentIndex === -1) {
+        this.focusedId = this.timeline[0].uri
+      } else if (currentIndex < this.timeline.length) {
+        this.focusedId = this.timeline[currentIndex + 1].uri
+      }
+    },
+    focusPrev () {
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri)
+      if (currentIndex === 0) {
+        this.focusedId = null
+      } else if (currentIndex > 0) {
+        this.focusedId = this.timeline[currentIndex - 1].uri
+      }
+    },
+    focusToot (message) {
+      this.focusedId = message.uri
    }
  }
 }
--- a/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Lists/Show.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="list-timeline" v-for="message in timeline" v-bind:key="message.id">
-      <toot :message="message" :filter="filter" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
+    <div class="list-timeline" v-for="message in timeline" v-bind:key="message.uri">
+      <toot
+        :message="message"
+        :filter="filter"
+        :focused="message.uri === focusedId"
+        v-on:update="updateToot"
+        v-on:delete="deleteToot"
+        @focusNext="focusNext"
+        @focusPrev="focusPrev"
+        @selectToot="focusToot(message)"
+        >
+      </toot>
    </div>
  </transition-group>
  <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
@ -25,6 +35,11 @@ export default {
  name: 'list',
  props: ['list_id'],
  components: { Toot },
+  data () {
+    return {
+      focusedId: null
+    }
+  },
  computed: {
    ...mapState({
      backgroundColor: state => state.App.theme.background_color,
@ -59,6 +74,14 @@ export default {
            this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
          })
      }
+    },
+    focusedId: function (newState, oldState) {
+      if (newState && this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', false)
+      } else if (newState === null && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', true)
+        this.$store.commit('TimelineSpace/Contents/Lists/Show/mergeTimeline')
+      }
    }
  },
  beforeDestroy () {
@ -130,7 +153,7 @@ export default {
        await this.$store.dispatch('TimelineSpace/stopLocalStreaming')
        await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/stopStreaming')

-        await this.$store.dispatch('TimelineSpace/Contents/Home/fetchTimeline', account)
+        await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/fetchTimeline', account)
        await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
        await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/fetchTimeline', this.list_id)
          .catch(() => {
@ -158,6 +181,26 @@ export default {
        document.getElementById('scrollable'),
        0
      )
+      this.focusedId = null
+    },
+    focusNext () {
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri)
+      if (currentIndex === -1) {
+        this.focusedId = this.timeline[0].uri
+      } else if (currentIndex < this.timeline.length) {
+        this.focusedId = this.timeline[currentIndex + 1].uri
+      }
+    },
+    focusPrev () {
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri)
+      if (currentIndex === 0) {
+        this.focusedId = null
+      } else if (currentIndex > 0) {
+        this.focusedId = this.timeline[currentIndex - 1].uri
+      }
+    },
+    focusToot (message) {
+      this.focusedId = message.uri
    }
  }
 }
--- a/src/renderer/components/TimelineSpace/Contents/Local.vue
+++ b/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 in timeline" :key="message.uri">
+      <toot
+        :message="message"
+        :filter="filter"
+        :focused="message.uri === focusedId"
+        v-on:update="updateToot"
+        v-on:delete="deleteToot"
+        @focusNext="focusNext"
+        @focusPrev="focusPrev"
+        @selectToot="focusToot(message)"
+        >
+      </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 {
+      focusedId: null
+    }
+  },
  computed: {
    ...mapState({
      backgroundColor: state => state.App.theme.background_color,
@ -62,6 +77,14 @@ export default {
            this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
          })
      }
+    },
+    focusedId: function (newState, oldState) {
+      if (newState && 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: {
@ -128,6 +151,26 @@ export default {
        document.getElementById('scrollable'),
        0
      )
+      this.focusedId = null
+    },
+    focusNext () {
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri)
+      if (currentIndex === -1) {
+        this.focusedId = this.timeline[0].uri
+      } else if (currentIndex < this.timeline.length) {
+        this.focusedId = this.timeline[currentIndex + 1].uri
+      }
+    },
+    focusPrev () {
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri)
+      if (currentIndex === 0) {
+        this.focusedId = null
+      } else if (currentIndex > 0) {
+        this.focusedId = this.timeline[currentIndex - 1].uri
+      }
+    },
+    focusToot (message) {
+      this.focusedId = message.uri
    }
  }
 }
--- a/src/renderer/components/TimelineSpace/Contents/Notifications.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Notifications.vue
@ -4,8 +4,16 @@
  <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
  </div>
  <transition-group name="timeline" tag="div">
-    <div class="notifications" v-for="message in notifications" v-bind:key="message.id">
-      <notification :message="message" :filter="filter"></notification>
+    <div class="notifications" v-for="(message, index) in notifications" v-bind:key="message.id">
+      <notification
+        :message="message"
+        :filter="filter"
+        :focused="index === focusedIndex"
+        @focusNext="focusNext"
+        @focusPrev="focusPrev"
+        @selectNotification="focusNotification(index)"
+        >
+      </notification>
    </div>
  </transition-group>
  <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
@ -25,6 +33,11 @@ import scrollTop from '../../utils/scroll'
 export default {
  name: 'notifications',
  components: { Notification },
+  data () {
+    return {
+      focusedIndex: null
+    }
+  },
  computed: {
    ...mapState({
      startReload: state => state.TimelineSpace.HeaderMenu.reload,
@ -63,6 +76,14 @@ export default {
            this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
          })
      }
+    },
+    focusedIndex: function (newState, oldState) {
+      if (newState >= 0 && this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', false)
+      } else if (newState === null && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)
+        this.$store.commit('TimelineSpace/Contents/Notifications/mergeNotifications')
+      }
    }
  },
  methods: {
@ -118,6 +139,24 @@ export default {
        document.getElementById('scrollable'),
        0
      )
+      this.focusedIndex = null
+    },
+    focusNext () {
+      if (this.focusedIndex === null) {
+        this.focusedIndex = 0
+      } else if (this.focusedIndex < this.notifications.length) {
+        this.focusedIndex++
+      }
+    },
+    focusPrev () {
+      if (this.focusedIndex === 0) {
+        this.focusedIndex = null
+      } else if (this.focusedIndex > 0) {
+        this.focusedIndex--
+      }
+    },
+    focusNotification (index) {
+      this.focusedIndex = index
    }
  }
 }
--- a/src/renderer/components/TimelineSpace/Contents/Public.vue
+++ b/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 in timeline" :key="message.uri">
+      <toot
+        :message="message"
+        :filter="filter"
+        :focused="message.uri === focusedId"
+        v-on:update="updateToot"
+        v-on:delete="deleteToot"
+        @focusNext="focusNext"
+        @focusPrev="focusPrev"
+        @selectToot="focusToot(message)"
+        >
+      </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 {
+      focusedId: null
+    }
+  },
  computed: {
    ...mapState({
      backgroundColor: state => state.App.theme.background_color,
@ -65,6 +80,14 @@ export default {
            this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
          })
      }
+    },
+    focusedId: function (newState, oldState) {
+      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)
+        this.$store.commit('TimelineSpace/Contents/Public/mergeTimeline')
+      }
    }
  },
  methods: {
@ -151,6 +174,26 @@ export default {
        document.getElementById('scrollable'),
        0
      )
+      this.focusedId = null
+    },
+    focusNext () {
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri)
+      if (currentIndex === -1) {
+        this.focusedId = this.timeline[0].uri
+      } else if (currentIndex < this.timeline.length) {
+        this.focusedId = this.timeline[currentIndex + 1].uri
+      }
+    },
+    focusPrev () {
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri)
+      if (currentIndex === 0) {
+        this.focusedId = null
+      } else if (currentIndex > 0) {
+        this.focusedId = this.timeline[currentIndex - 1].uri
+      }
+    },
+    focusToot (message) {
+      this.focusedId = message.uri
    }
  }
 }
--- a/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
@ -80,7 +80,6 @@ export default {
    opened: function (newState, oldState) {
      if (!oldState && newState) {
        this.$nextTick(function () {
-          console.log('focus')
          this.$refs.status.focus()
        })
      } else if (oldState && !newState) {