Merge pull request #3527 from h3poteto/iss-3300/move-focus

refs #3300 Enable shortcut to move focus on statuses

.eslintrc.js

@@ -30,6 +30,7 @@ module.exports = {
         argsIgnorePattern: '^_'
       }
     ],
+    '@typescript-eslint/no-explicit-any': 'off',
     camelcase: 'off',
     '@typescript-eslint/camelcase': 'off',
     'space-before-function-paren': 'off'

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

@@ -11,8 +11,6 @@
             :filters="[]"
             v-on:update="updateToot"
             v-on:delete="deleteToot"
-            @focusNext="focusNext"
-            @focusPrev="focusPrev"
             @focusRight="focusSidebar"
             @selectToot="focusToot(item)"
           ></toot>
@@ -29,6 +27,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref, watch } from 'vue'
+import { useMagicKeys, whenever, and } from '@vueuse/core'
 import { useStore } from '@/store'
 import { useI18next } from 'vue3-i18next'
 import { useRoute } from 'vue-router'
@@ -54,14 +53,16 @@ export default defineComponent({
     const focusedId = ref<string | null>(null)
     const heading = ref<boolean>(true)
     const scroller = ref<any>()
+    const { j, k } = useMagicKeys()
 
     const bookmarks = computed(() => store.state.TimelineSpace.Contents.Bookmarks.bookmarks)
     const lazyLoading = computed(() => store.state.TimelineSpace.Contents.Bookmarks.lazyLoading)
     const account = computed(() => store.state.TimelineSpace.account)
     const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
     const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
-    const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
+    const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const currentFocusedIndex = computed(() => bookmarks.value.findIndex(toot => focusedId.value === toot.uri))
+    const shortcutEnabled = computed(() => !modalOpened.value)
 
     onMounted(() => {
       document.getElementById('scroller')?.addEventListener('scroll', onScroll)
@@ -86,6 +87,17 @@ export default defineComponent({
       }
     })
 
+    whenever(and(j, shortcutEnabled), () => {
+      if (focusedId.value === null) {
+        focusedId.value = bookmarks.value[0].uri
+      } else {
+        focusNext()
+      }
+    })
+    whenever(and(k, shortcutEnabled), () => {
+      focusPrev()
+    })
+
     const onScroll = (event: Event) => {
       if (
         (event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
@@ -158,8 +170,6 @@ export default defineComponent({
       modalOpened,
       updateToot,
       deleteToot,
-      focusNext,
-      focusPrev,
       focusSidebar,
       focusToot,
       openSideBar,

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

@@ -11,8 +11,6 @@
             :filters="[]"
             v-on:update="updateToot"
             v-on:delete="deleteToot"
-            @focusNext="focusNext"
-            @focusPrev="focusPrev"
             @focusRight="focusSidebar"
             @selectToot="focusToot(item)"
             @sizeChanged="sizeChanged"
@@ -31,6 +29,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, onMounted, onBeforeUpdate, onBeforeUnmount, onUnmounted, watch } from 'vue'
+import { useMagicKeys, whenever, and } from '@vueuse/core'
 import moment from 'moment'
 import { useStore } from '@/store'
 import { useI18next } from 'vue3-i18next'
@@ -56,6 +55,7 @@ export default defineComponent({
     const route = useRoute()
     const i18n = useI18next()
     const { reloadable } = useReloadable(store, route, i18n)
+    const { j, k } = useMagicKeys()
 
     const focusedId = ref<string | null>(null)
     const scrollPosition = ref<ScrollPosition | null>(null)
@@ -71,8 +71,9 @@ export default defineComponent({
     const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
     const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
     const unreadNotification = computed(() => store.state.TimelineSpace.timelineSetting.unreadNotification)
-    const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
+    const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
+    const shortcutEnabled = computed(() => !modalOpened.value)
 
     onMounted(async () => {
       store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_HOME_TIMELINE}`, false)
@@ -125,6 +126,23 @@ export default defineComponent({
         })
       }
     })
+    watch(focusedId, (newVal, _oldVal) => {
+      if (newVal && heading.value) {
+        store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
+      } else if (newVal === null && !heading.value) {
+        store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
+      }
+    })
+    whenever(and(j, shortcutEnabled), () => {
+      if (focusedId.value === null) {
+        focusedId.value = timeline.value[0].uri + timeline.value[0].id
+      } else {
+        focusNext()
+      }
+    })
+    whenever(and(k, shortcutEnabled), () => {
+      focusPrev()
+    })
 
     const initialize = async () => {
       await store.dispatch(`${space}/${ACTION_TYPES.FETCH_TIMELINE}`).catch(_ => {
@@ -237,8 +255,6 @@ export default defineComponent({
       modalOpened,
       updateToot,
       deleteToot,
-      focusNext,
-      focusPrev,
       focusSidebar,
       focusToot,
       openSideBar,

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

@@ -11,8 +11,6 @@
             :filters="[]"
             v-on:update="updateToot"
             v-on:delete="deleteToot"
-            @focusNext="focusNext"
-            @focusPrev="focusPrev"
             @focusRight="focusSidebar"
             @selectToot="focusToot(item)"
           >
@@ -30,6 +28,7 @@
 
 <script lang="ts">
 import { defineComponent, computed, ref, onMounted, onUnmounted, watch } from 'vue'
+import { useMagicKeys, whenever, and } from '@vueuse/core'
 import { useStore } from '@/store'
 import { ElMessage } from 'element-plus'
 import { useI18next } from 'vue3-i18next'
@@ -52,14 +51,16 @@ export default defineComponent({
     const heading = ref<boolean>(false)
     const focusedId = ref<string | null>(null)
     const scroller = ref<any>()
+    const { j, k } = useMagicKeys()
 
     const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
     const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
     const account = computed(() => store.state.TimelineSpace.account)
     const favourites = computed(() => store.state.TimelineSpace.Contents.Favourites.favourites)
     const lazyLoading = computed(() => store.state.TimelineSpace.Contents.Favourites.lazyLoading)
-    const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
+    const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const currentFocusedIndex = computed(() => favourites.value.findIndex(status => focusedId.value === status.uri))
+    const shortcutEnabled = computed(() => !modalOpened.value)
 
     onMounted(() => {
       document.getElementById('scroller')?.addEventListener('scroll', onScroll)
@@ -94,6 +95,17 @@ export default defineComponent({
       }
     })
 
+    whenever(and(j, shortcutEnabled), () => {
+      if (focusedId.value === null) {
+        focusedId.value = favourites.value[0].uri
+      } else {
+        focusNext()
+      }
+    })
+    whenever(and(k, shortcutEnabled), () => {
+      focusPrev()
+    })
+
     const onScroll = (event: Event) => {
       if (
         (event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
@@ -165,8 +177,6 @@ export default defineComponent({
       modalOpened,
       updateToot,
       deleteToot,
-      focusNext,
-      focusPrev,
       focusSidebar,
       focusToot,
       openSideBar,

src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue

@@ -11,8 +11,6 @@
             :filters="[]"
             v-on:update="updateToot"
             v-on:delete="deleteToot"
-            @focusNext="focusNext"
-            @focusPrev="focusPrev"
             @focusRight="focusSidebar"
             @selectToot="focusToot(item)"
             @sizeChanged="sizeChanged"
@@ -31,6 +29,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onBeforeUnmount, onBeforeUpdate, onMounted, ref, toRefs, watch } from 'vue'
+import { useMagicKeys, whenever, and } from '@vueuse/core'
 import moment from 'moment'
 import { ElMessage } from 'element-plus'
 import { Entity } from 'megalodon'
@@ -56,6 +55,7 @@ export default defineComponent({
     const route = useRoute()
     const i18n = useI18next()
     const { reloadable } = useReloadable(store, route, i18n)
+    const { j, k } = useMagicKeys()
 
     const { tag } = toRefs(props)
     const focusedId = ref<string | null>(null)
@@ -71,8 +71,9 @@ export default defineComponent({
     const scrolling = computed(() => store.state.TimelineSpace.Contents.Hashtag.Tag.scrolling)
     const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
     const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
-    const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
+    const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
+    const shortcutEnabled = computed(() => !modalOpened.value)
 
     onMounted(() => {
       store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
@@ -116,6 +117,24 @@ export default defineComponent({
         })
       }
     })
+    watch(focusedId, (newVal, _oldVal) => {
+      if (newVal && heading.value) {
+        store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
+      } else if (newVal === null && !heading.value) {
+        store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
+      }
+    })
+    whenever(and(j, shortcutEnabled), () => {
+      if (focusedId.value === null) {
+        focusedId.value = timeline.value[0].uri + timeline.value[0].id
+      } else {
+        focusNext()
+      }
+    })
+    whenever(and(k, shortcutEnabled), () => {
+      focusPrev()
+    })
+
     onBeforeUnmount(() => {
       store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
       reset()
@@ -265,8 +284,6 @@ export default defineComponent({
       modalOpened,
       updateToot,
       deleteToot,
-      focusNext,
-      focusPrev,
       focusSidebar,
       focusToot,
       sizeChanged,

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

@@ -17,8 +17,6 @@
               :filters="filters"
               v-on:update="updateToot"
               v-on:delete="deleteToot"
-              @focusNext="focusNext"
-              @focusPrev="focusPrev"
               @focusRight="focusSidebar"
               @selectToot="focusToot(item)"
               @sizeChanged="sizeChanged"
@@ -39,6 +37,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, onMounted, onBeforeUpdate, onBeforeUnmount, watch, onUnmounted } from 'vue'
+import { useMagicKeys, whenever, and } from '@vueuse/core'
 import moment from 'moment'
 import { ElMessage } from 'element-plus'
 import { Entity } from 'megalodon'
@@ -64,6 +63,7 @@ export default defineComponent({
     const route = useRoute()
     const i18n = useI18next()
     const { reloadable } = useReloadable(store, route, i18n)
+    const { j, k } = useMagicKeys()
 
     const focusedId = ref<string | null>(null)
     const scrollPosition = ref<ScrollPosition | null>(null)
@@ -81,19 +81,10 @@ export default defineComponent({
     const scrolling = computed(() => store.state.TimelineSpace.Contents.Home.scrolling)
     const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
     const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
-    const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
+    const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const filters = computed(() => store.getters[`${space}/filters`])
     const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
-    // const shortcutEnabled = computed(() => {
+    const shortcutEnabled = computed(() => !modalOpened.value)
-    //   if (modalOpened.value) {
-    //     return false
-    //   }
-    //   if (!focusedId.value) {
-    //     return true
-    //   }
-    //   // Sometimes toots are deleted, so perhaps focused toot don't exist.
-    //   return currentFocusedIndex.value === -1
-    // })
     const filteredTimeline = computed(() => {
       return timeline.value.filter(toot => {
         if ('url' in toot) {
@@ -167,6 +158,23 @@ export default defineComponent({
       },
       { deep: true }
     )
+    watch(focusedId, (newVal, _oldVal) => {
+      if (newVal && heading.value) {
+        store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
+      } else if (newVal === null && !heading.value) {
+        store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
+      }
+    })
+    whenever(and(j, shortcutEnabled), () => {
+      if (focusedId.value === null) {
+        focusedId.value = timeline.value[0].uri + timeline.value[0].id
+      } else {
+        focusNext()
+      }
+    })
+    whenever(and(k, shortcutEnabled), () => {
+      focusPrev()
+    })
 
     const onScroll = (event: Event) => {
       if (moment().diff(resizeTime.value) < 500) {

src/renderer/components/TimelineSpace/Contents/Lists/Show.vue

@@ -11,8 +11,6 @@
             :filters="[]"
             v-on:update="updateToot"
             v-on:delete="deleteToot"
-            @focusNext="focusNext"
-            @focusPrev="focusPrev"
             @focusRight="focusSidebar"
             @selectToot="focusToot(item)"
             @sizeChanged="sizeChanged"
@@ -31,6 +29,7 @@
 
 <script lang="ts">
 import { defineComponent, toRefs, ref, computed, onMounted, onBeforeUpdate, watch, onBeforeUnmount, onUnmounted } from 'vue'
+import { useMagicKeys, whenever, and } from '@vueuse/core'
 import moment from 'moment'
 import { ElMessage } from 'element-plus'
 import { useI18next } from 'vue3-i18next'
@@ -52,6 +51,7 @@ export default defineComponent({
     const space = 'TimelineSpace/Contents/Lists/Show'
     const store = useStore()
     const i18n = useI18next()
+    const { j, k } = useMagicKeys()
 
     const { list_id } = toRefs(props)
     const focusedId = ref<string | null>(null)
@@ -67,8 +67,9 @@ export default defineComponent({
     const scrolling = computed(() => store.state.TimelineSpace.Contents.Lists.Show.scrolling)
     const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
     const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
-    const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
+    const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
+    const shortcutEnabled = computed(() => !modalOpened.value)
 
     onMounted(() => {
       document.getElementById('scroller')?.addEventListener('scroll', onScroll)
@@ -111,6 +112,24 @@ export default defineComponent({
         })
       }
     })
+    watch(focusedId, (newVal, _oldVal) => {
+      if (newVal && heading.value) {
+        store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
+      } else if (newVal === null && !heading.value) {
+        store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
+      }
+    })
+    whenever(and(j, shortcutEnabled), () => {
+      if (focusedId.value === null) {
+        focusedId.value = timeline.value[0].uri + timeline.value[0].id
+      } else {
+        focusNext()
+      }
+    })
+    whenever(and(k, shortcutEnabled), () => {
+      focusPrev()
+    })
+
     onBeforeUnmount(() => {
       store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
       observer.value?.disconnect()
@@ -260,8 +279,6 @@ export default defineComponent({
       modalOpened,
       updateToot,
       deleteToot,
-      focusNext,
-      focusPrev,
       focusSidebar,
       focusToot,
       sizeChanged,

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

@@ -11,8 +11,6 @@
             :filters="[]"
             v-on:update="updateToot"
             v-on:delete="deleteToot"
-            @focusNext="focusNext"
-            @focusPrev="focusPrev"
             @focusRight="focusSidebar"
             @selectToot="focusToot(item)"
             @sizeChanged="sizeChanged"
@@ -31,6 +29,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useMagicKeys, whenever, and } from '@vueuse/core'
 import moment from 'moment'
 import { ElMessage } from 'element-plus'
 import { Entity } from 'megalodon'
@@ -56,6 +55,7 @@ export default defineComponent({
     const route = useRoute()
     const i18n = useI18next()
     const { reloadable } = useReloadable(store, route, i18n)
+    const { j, k } = useMagicKeys()
 
     const focusedId = ref<string | null>(null)
     const scrollPosition = ref<ScrollPosition | null>(null)
@@ -71,8 +71,9 @@ export default defineComponent({
     const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
     const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
     const unreadNotification = computed(() => store.state.TimelineSpace.timelineSetting.unreadNotification)
-    const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
+    const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
+    const shortcutEnabled = computed(() => !modalOpened.value)
 
     onMounted(async () => {
       store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_LOCAL_TIMELINE}`, false)
@@ -136,6 +137,24 @@ export default defineComponent({
       }
     })
 
+    watch(focusedId, (newVal, _oldVal) => {
+      if (newVal && heading.value) {
+        store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
+      } else if (newVal === null && !heading.value) {
+        store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
+      }
+    })
+    whenever(and(j, shortcutEnabled), () => {
+      if (focusedId.value === null) {
+        focusedId.value = timeline.value[0].uri + timeline.value[0].id
+      } else {
+        focusNext()
+      }
+    })
+    whenever(and(k, shortcutEnabled), () => {
+      focusPrev()
+    })
+
     const initialize = async () => {
       await store.dispatch(`${space}/${ACTION_TYPES.FETCH_LOCAL_TIMELINE}`).catch(_ => {
         ElMessage({
@@ -246,8 +265,6 @@ export default defineComponent({
       modalOpened,
       updateToot,
       deleteToot,
-      focusNext,
-      focusPrev,
       focusSidebar,
       focusToot,
       sizeChanged,

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

@@ -16,8 +16,6 @@
               :overlaid="modalOpened"
               :filters="[]"
               v-on:update="updateToot"
-              @focusNext="focusNext"
-              @focusPrev="focusPrev"
               @focusRight="focusSidebar"
               @selectNotification="focusNotification(item)"
               @sizeChanged="sizeChanged"
@@ -37,6 +35,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useMagicKeys, whenever, and } from '@vueuse/core'
 import moment from 'moment'
 import { useI18next } from 'vue3-i18next'
 import { useRoute } from 'vue-router'
@@ -63,6 +62,7 @@ export default defineComponent({
     const route = useRoute()
     const i18n = useI18next()
     const { reloadable } = useReloadable(store, route, i18n)
+    const { j, k } = useMagicKeys()
 
     const focusedId = ref<string | null>(null)
     const scrollPosition = ref<ScrollPosition | null>(null)
@@ -78,18 +78,9 @@ export default defineComponent({
     const scrolling = computed(() => store.state.TimelineSpace.Contents.Mentions.scrolling)
     const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
     const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
-    const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
+    const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const currentFocusedIndex = computed(() => mentions.value.findIndex(notification => focusedId.value === notification.id))
-    // const shortcutEnabled = computed(() => {
+    const shortcutEnabled = computed(() => !modalOpened.value)
-    //   if (modalOpened.value) {
-    //     return false
-    //   }
-    //   if (!focusedId.value) {
-    //     return true
-    //   }
-    //   // Sometimes toots are deleted, so perhaps focused toot don't exist.
-    //   return currentFocusedIndex.value === -1
-    // })
 
     onMounted(() => {
       store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_HOME_TIMELINE}`, false)
@@ -148,6 +139,23 @@ export default defineComponent({
       },
       { deep: true }
     )
+    watch(focusedId, (newVal, _oldVal) => {
+      if (newVal && heading.value) {
+        store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
+      } else if (newVal === null && !heading.value) {
+        store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
+      }
+    })
+    whenever(and(j, shortcutEnabled), () => {
+      if (focusedId.value === null) {
+        focusedId.value = mentions.value[0].id
+      } else {
+        focusNext()
+      }
+    })
+    whenever(and(k, shortcutEnabled), () => {
+      focusPrev()
+    })
 
     const onScroll = (event: Event) => {
       if (moment().diff(resizeTime.value) < 500) {
@@ -258,8 +266,6 @@ export default defineComponent({
       focusedId,
       modalOpened,
       updateToot,
-      focusNext,
-      focusPrev,
       focusSidebar,
       focusNotification,
       sizeChanged,

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

@@ -16,8 +16,6 @@
               :overlaid="modalOpened"
               :filters="filters"
               v-on:update="updateToot"
-              @focusNext="focusNext"
-              @focusPrev="focusPrev"
               @focusRight="focusSidebar"
               @selectNotification="focusNotification(item)"
             >
@@ -36,6 +34,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, onMounted, onBeforeUpdate, onBeforeUnmount, onUnmounted, watch } from 'vue'
+import { useMagicKeys, whenever, and } from '@vueuse/core'
 import moment from 'moment'
 import { ElMessage } from 'element-plus'
 import { Entity } from 'megalodon'
@@ -62,6 +61,7 @@ export default defineComponent({
     const route = useRoute()
     const i18n = useI18next()
     const { reloadable } = useReloadable(store, route, i18n)
+    const { j, k } = useMagicKeys()
 
     const focusedId = ref<string | null>(null)
     const scrollPosition = ref<ScrollPosition | null>(null)
@@ -77,20 +77,12 @@ export default defineComponent({
     const scrolling = computed(() => store.state.TimelineSpace.Contents.Notifications.scrolling)
     const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
     const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
-    const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
+    const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const filters = computed(() => store.getters[`${space}/filters}`])
     const handledNotifications = computed(() => store.getters[`${space}/handledNotifications`])
     const currentFocusedIndex = computed(() => notifications.value.findIndex(notification => focusedId.value === notification.id))
-    // const shortcutEnabled = computed(() => {
+    const shortcutEnabled = computed(() => !modalOpened.value)
-    //   if (modalOpened.value) {
+
-    //     return false
-    //   }
-    //   if (!focusedId.value) {
-    //     return true
-    //   }
-    //   // Sometimes toots are deleted, so perhaps focused toot don't exist.
-    //   return currentFocusedIndex.value === -1
-    // })
     onMounted(() => {
       store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_NOTIFICATIONS}`, false)
       store.dispatch(`${space}/${ACTION_TYPES.RESET_BADGE}`)
@@ -151,6 +143,24 @@ export default defineComponent({
       },
       { deep: true }
     )
+    watch(focusedId, (newVal, _oldVal) => {
+      if (newVal && heading.value) {
+        store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
+      } else if (newVal === null && !heading.value) {
+        store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
+        store.commit(`${space}/${ACTION_TYPES.RESET_BADGE}`)
+      }
+    })
+    whenever(and(j, shortcutEnabled), () => {
+      if (focusedId.value === null) {
+        focusedId.value = handledNotifications.value[0].id
+      } else {
+        focusNext()
+      }
+    })
+    whenever(and(k, shortcutEnabled), () => {
+      focusPrev()
+    })
 
     const onScroll = (event: Event) => {
       if (moment().diff(resizeTime.value) < 500) {

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

@@ -11,8 +11,6 @@
             :filters="filters"
             v-on:update="updateToot"
             v-on:delete="deleteToot"
-            @focusNext="focusNext"
-            @focusPrev="focusPrev"
             @focusRight="focusSidebar"
             @selectToot="focusToot(item)"
             @sizeChanged="sizeChanged"
@@ -31,6 +29,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useMagicKeys, whenever, and } from '@vueuse/core'
 import moment from 'moment'
 import { ElMessage } from 'element-plus'
 import { Entity } from 'megalodon'
@@ -56,6 +55,7 @@ export default defineComponent({
     const route = useRoute()
     const i18n = useI18next()
     const { reloadable } = useReloadable(store, route, i18n)
+    const { j, k } = useMagicKeys()
 
     const focusedId = ref<string | null>(null)
     const scrollPosition = ref<ScrollPosition | null>(null)
@@ -71,9 +71,10 @@ export default defineComponent({
     const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
     const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
     const unreadNotification = computed(() => store.state.TimelineSpace.timelineSetting.unreadNotification)
-    const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
+    const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const filters = computed(() => store.getters[`${space}/filters`])
     const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
+    const shortcutEnabled = computed(() => !modalOpened.value)
 
     onMounted(async () => {
       store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_PUBLIC_TIMELINE}`, false)
@@ -137,6 +138,24 @@ export default defineComponent({
       }
     })
 
+    watch(focusedId, (newVal, _oldVal) => {
+      if (newVal && heading.value) {
+        store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
+      } else if (newVal === null && !heading.value) {
+        store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
+      }
+    })
+    whenever(and(j, shortcutEnabled), () => {
+      if (focusedId.value === null) {
+        focusedId.value = timeline.value[0].uri + timeline.value[0].id
+      } else {
+        focusNext()
+      }
+    })
+    whenever(and(k, shortcutEnabled), () => {
+      focusPrev()
+    })
+
     const initialize = async () => {
       await store.dispatch(`${space}/${ACTION_TYPES.FETCH_PUBLIC_TIMELINE}`).catch(_ => {
         ElMessage({
@@ -250,8 +269,6 @@ export default defineComponent({
       filters,
       updateToot,
       deleteToot,
-      focusNext,
-      focusPrev,
       focusSidebar,
       focusToot,
       sizeChanged,

src/renderer/components/organisms/Notification.vue

@@ -7,8 +7,6 @@
       :focused="focused"
       :overlaid="overlaid"
       reactionType="favourite"
-      @focusNext="$emit('focusNext')"
-      @focusPrev="$emit('focusPrev')"
       @focusRight="$emit('focusRight')"
       @select="$emit('selectNotification')"
     >
@@ -18,8 +16,6 @@
       :message="message"
       :focused="focused"
       :overlaid="overlaid"
-      @focusNext="$emit('focusNext')"
-      @focusPrev="$emit('focusPrev')"
       @focusRight="$emit('focusRight')"
       @select="$emit('selectNotification')"
     >
@@ -29,8 +25,6 @@
       :message="message"
       :focused="focused"
       :overlaid="overlaid"
-      @focusNext="$emit('focusNext')"
-      @focusPrev="$emit('focusPrev')"
       @focusRight="$emit('focusRight')"
       @select="$emit('selectNotification')"
     >
@@ -43,8 +37,6 @@
       :overlaid="overlaid"
       v-on:update="updateToot"
       v-on:delete="deleteToot"
-      @focusNext="$emit('focusNext')"
-      @focusPrev="$emit('focusPrev')"
       @focusRight="$emit('focusRight')"
       @select="$emit('selectNotification')"
     >
@@ -56,8 +48,6 @@
       :focused="focused"
       :overlaid="overlaid"
       reactionType="quote"
-      @focusNext="$emit('focusNext')"
-      @focusPrev="$emit('focusPrev')"
       @focusRight="$emit('focusRight')"
       @select="$emit('selectNotification')"
     >
@@ -69,21 +59,6 @@
       :focused="focused"
       :overlaid="overlaid"
       reactionType="reblog"
-      @focusNext="$emit('focusNext')"
-      @focusPrev="$emit('focusPrev')"
-      @focusRight="$emit('focusRight')"
-      @select="$emit('selectNotification')"
-    >
-    </StatusReaction>
-    <StatusReaction
-      v-else-if="message.type === 'emoji_reaction'"
-      :message="message"
-      :filters="filters"
-      :focused="focused"
-      :overlaid="overlaid"
-      reactionType="reaction"
-      @focusNext="$emit('focusNext')"
-      @focusPrev="$emit('focusPrev')"
       @focusRight="$emit('focusRight')"
       @select="$emit('selectNotification')"
     >
@@ -94,8 +69,6 @@
       :filters="filters"
       :focused="focused"
       :overlaid="overlaid"
-      @focusNext="$emit('focusNext')"
-      @focusPrev="$emit('focusPrev')"
       @focusRight="$emit('focusRight')"
       @select="$emit('selectNotification')"
     >
@@ -107,8 +80,6 @@
       :focused="focused"
       :overlaid="overlaid"
       reactionType="poll-vote"
-      @focusNext="$emit('focusNext')"
-      @focusPrev="$emit('focusPrev')"
       @focusRight="$emit('focusRight')"
       @select="$emit('selectNotification')"
     >
@@ -120,8 +91,6 @@
       :focused="focused"
       :overlaid="overlaid"
       reactionType="poll-expired"
-      @focusNext="$emit('focusNext')"
-      @focusPrev="$emit('focusPrev')"
       @focusRight="$emit('focusRight')"
       @select="$emit('selectNotification')"
     >

src/renderer/components/organisms/Notification/Follow.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relationship" tabIndex="0" @click="$emit('select')" role="article" aria-label="follow event">
+  <div ref="notificationRef" class="relationship" tabIndex="0" role="article" aria-label="follow event" @click="$emit('select')">
     <div class="follow">
       <div class="action">
         <div class="action-mark">
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed, toRefs } from 'vue'
+import { defineComponent, PropType, computed, toRefs, ref, nextTick, watch } from 'vue'
 import { Entity } from 'megalodon'
 import { useStore } from '@/store'
 import FailoverImg from '@/components/atoms/FailoverImg.vue'
@@ -55,13 +55,27 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['select'],
   setup(props) {
-    const { focused, overlaid } = toRefs(props)
+    const { focused } = toRefs(props)
     const store = useStore()
+    const notificationRef = ref<any>(null)
 
-    const shortcutEnabled = computed(() => focused.value && !overlaid.value)
+    // const shortcutEnabled = computed(() => focused.value && !overlaid.value)
     const displayNameStyle = computed(() => store.state.App.displayNameStyle)
 
+    watch(focused, (newVal, oldVal) => {
+      if (newVal) {
+        nextTick(() => {
+          notificationRef.value.focus()
+        })
+      } else if (oldVal && !newVal) {
+        nextTick(() => {
+          notificationRef.value.blur()
+        })
+      }
+    })
+
     const username = (account: Entity.Account) => usernameWithStyle(account, displayNameStyle.value)
     const openUser = (account: Entity.Account) => {
       store.dispatch(`TimelineSpace/Contents/SideBar/${SIDEBAR_ACTION.OPEN_ACCOUNT_COMPONENT}`)
@@ -70,7 +84,7 @@ export default defineComponent({
     }
 
     return {
-      shortcutEnabled,
+      notificationRef,
       username,
       openUser
     }

src/renderer/components/organisms/Notification/FollowRequest.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relationship" tabIndex="0" ref="status" @click="$emit('select')" role="article" aria-label="follow event">
+  <div ref="notificationRef" class="relationship" tabIndex="0" role="article" aria-label="follow event" @click="$emit('select')">
     <div class="follow-request">
       <div class="action">
         <div class="action-mark">
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed, toRefs } from 'vue'
+import { defineComponent, PropType, computed, toRefs, ref, watch, nextTick } from 'vue'
 import { Entity } from 'megalodon'
 import { useStore } from '@/store'
 import FailoverImg from '@/components/atoms/FailoverImg.vue'
@@ -55,13 +55,27 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['select'],
   setup(props) {
-    const { focused, overlaid } = toRefs(props)
+    const { focused } = toRefs(props)
     const store = useStore()
+    const notificationRef = ref<any>(null)
 
-    const shortcutEnabled = computed(() => focused.value && !overlaid.value)
+    // const shortcutEnabled = computed(() => focused.value && !overlaid.value)
     const displayNameStyle = computed(() => store.state.App.displayNameStyle)
 
+    watch(focused, (newVal, oldVal) => {
+      if (newVal) {
+        nextTick(() => {
+          notificationRef.value.focus()
+        })
+      } else if (oldVal && !newVal) {
+        nextTick(() => {
+          notificationRef.value.blur()
+        })
+      }
+    })
+
     const username = (account: Entity.Account) => usernameWithStyle(account, displayNameStyle.value)
     const openUser = (account: Entity.Account) => {
       store.dispatch(`TimelineSpace/Contents/SideBar/${SIDEBAR_ACTION.OPEN_ACCOUNT_COMPONENT}`)
@@ -70,7 +84,7 @@ export default defineComponent({
     }
 
     return {
-      shortcutEnabled,
+      notificationRef,
       username,
       openUser
     }

src/renderer/components/organisms/Notification/Mention.vue

@@ -7,8 +7,6 @@
       :overlaid="overlaid"
       v-on:update="updateToot"
       v-on:delete="deleteToot"
-      @focusNext="$emit('focusNext')"
-      @focusPrev="$emit('focusPrev')"
       @focusRight="$emit('focusRight')"
       @selectToot="$emit('select')"
     >

src/renderer/components/organisms/Notification/Status.vue

@@ -28,8 +28,6 @@
       :overlaid="overlaid"
       v-on:update="updateToot"
       v-on:delete="deleteToot"
-      @focusNext="$emit('focusNext')"
-      @focusPrev="$emit('focusPrev')"
       @focusRight="$emit('focusRight')"
       @selectToot="$emit('select')"
     >

src/renderer/components/organisms/Notification/StatusReaction.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="status" tabIndex="0" @click="$emit('select')" role="article" :aria-label="reactionType">
+  <div ref="notificationRef" class="status" tabIndex="0" role="article" :aria-label="reactionType" @click="$emit('select')">
     <div v-show="filtered" class="filtered">Filtered</div>
     <div v-show="!filtered" class="status-reaction">
       <div class="action">
@@ -94,7 +94,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, toRefs, ref, PropType } from 'vue'
+import { defineComponent, computed, toRefs, ref, PropType, watch, nextTick } from 'vue'
 import { Entity } from 'megalodon'
 import moment from 'moment'
 import { useRouter, useRoute } from 'vue-router'
@@ -138,20 +138,22 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['select'],
   setup(props) {
     const store = useStore()
     const router = useRouter()
     const route = useRoute()
-    const { focused, overlaid, message, filters, reactionType } = toRefs(props)
+    const { focused, message, filters, reactionType } = toRefs(props)
 
     const showContent = ref<boolean>(false)
     const showAttachments = ref<boolean>(false)
+    const notificationRef = ref<any>(null)
 
     const displayNameStyle = computed(() => store.state.App.displayNameStyle)
     const timeFormat = computed(() => store.state.App.timeFormat)
     const language = computed(() => store.state.App.language)
     const hideAllAttachments = computed(() => store.state.App.hideAllAttachments)
-    const shortcutEnabled = computed(() => focused.value && !overlaid.value)
+    // const shortcutEnabled = computed(() => focused.value && !overlaid.value)
     const timestamp = computed(() => parseDatetime(message.value.created_at, timeFormat.value, language.value))
     const readableTimestamp = computed(() => {
       moment.locale(language.value)
@@ -205,6 +207,18 @@ export default defineComponent({
       }
     })
 
+    watch(focused, (newVal, oldVal) => {
+      if (newVal) {
+        nextTick(() => {
+          notificationRef.value.focus()
+        })
+      } else if (oldVal && !newVal) {
+        nextTick(() => {
+          notificationRef.value.blur()
+        })
+      }
+    })
+
     const username = (account: Entity.Account) => usernameWithStyle(account, displayNameStyle.value)
     const tootClick = (e: MouseEvent) => {
       const parsedTag = findTag(e.target as HTMLElement, 'status-reaction')
@@ -251,11 +265,11 @@ export default defineComponent({
     return {
       showContent,
       showAttachments,
+      notificationRef,
       displayNameStyle,
       timeFormat,
       language,
       hideAllAttachments,
-      shortcutEnabled,
       timestamp,
       readableTimestamp,
       username,

src/renderer/components/organisms/Toot.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="status" tabIndex="0" ref="status" @click="$emit('selectToot', message)" role="article" aria-label="toot">
+  <div ref="statusRef" class="status" tabIndex="0" role="article" aria-label="toot" @click="$emit('selectToot', message)">
     <div v-if="filtered" class="filtered">Filtered</div>
     <div v-if="!filtered" class="toot">
       <div class="reblogger" v-if="message.reblog && !message.quote">
@@ -237,7 +237,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, computed, toRefs } from 'vue'
+import { defineComponent, PropType, ref, computed, toRefs, watch, nextTick } from 'vue'
+import { useMagicKeys, whenever, and } from '@vueuse/core'
 import 'emoji-mart-vue-fast/css/emoji-mart.css'
 import data from 'emoji-mart-vue-fast/data/all.json'
 import moment from 'moment'
@@ -304,6 +305,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['selectToot', 'focusRight', 'focusLeft'],
   setup(props, ctx) {
     const space = 'organisms/Toot'
     const store = useStore()
@@ -311,7 +313,9 @@ export default defineComponent({
     const router = useRouter()
     const i18n = useI18next()
     const { focused, overlaid, message, filters } = toRefs(props)
+    const { l, h, r, b, f, o, p, i, x } = useMagicKeys()
 
+    const statusRef = ref<any>(null)
     const showContent = ref(store.state.App.ignoreCW)
     const showAttachments = ref(store.state.App.ignoreNSFW)
     const hideAllAttachments = ref(store.state.App.hideAllAttachments)
@@ -390,6 +394,51 @@ export default defineComponent({
       return QuoteSupported(sns.value, account.value.domain)
     })
 
+    whenever(and(l, shortcutEnabled), () => {
+      ctx.emit('focusRight')
+    })
+    whenever(and(h, shortcutEnabled), () => {
+      ctx.emit('focusLeft')
+    })
+    whenever(and(r, shortcutEnabled), () => {
+      openReply()
+    })
+    whenever(and(b, shortcutEnabled), () => {
+      changeReblog(originalMessage.value)
+    })
+    whenever(and(f, shortcutEnabled), () => {
+      changeFavourite(originalMessage.value)
+    })
+    whenever(and(o, shortcutEnabled), () => {
+      openDetail(message.value)
+    })
+    whenever(and(p, shortcutEnabled), () => {
+      openUser(originalMessage.value.account)
+    })
+    whenever(and(i, shortcutEnabled), () => {
+      const images = mediaAttachments.value
+      if (images.length === 0) {
+        return
+      }
+      openImage(images[0].url, images)
+    })
+    whenever(and(x, shortcutEnabled), () => {
+      toggleSpoiler()
+      toggleCW()
+    })
+
+    watch(focused, (newVal, oldVal) => {
+      if (newVal) {
+        nextTick(() => {
+          statusRef.value.focus()
+        })
+      } else if (oldVal && !newVal) {
+        nextTick(() => {
+          statusRef.value.blur()
+        })
+      }
+    })
+
     const username = (account: Entity.Account) => usernameWithStyle(account, displayNameStyle.value)
     const accountName = (account: Entity.Account) => accountNameWithStyle(account, displayNameStyle.value)
     const tootClick = (e: MouseEvent) => {
@@ -628,6 +677,7 @@ export default defineComponent({
     }
 
     return {
+      statusRef,
       emojiIndex,
       displayNameStyle,
       timeFormat,
@@ -635,7 +685,6 @@ export default defineComponent({
       sns,
       account,
       bookmarkSupported,
-      shortcutEnabled,
       originalMessage,
       timestamp,
       readableTimestamp,