Add arrow navigation

Author: kadiryazici

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@tauri-apps/api": "^1.2.0",
+    "@vueuse/core": "^9.12.0",
     "pinia": "^2.0.29",
     "redaxios": "^0.5.1",
     "tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store",
@@ -32,6 +33,8 @@
     "async-mutex": "^0.4.0",
     "eslint": "^8.32.0",
     "execa": "^6.1.0",
+    "focus-visible": "^5.2.0",
+    "hotkeys-js": "^3.10.1",
     "npm-run-all": "^4.1.5",
     "sass": "^1.57.1",
     "tsx": "^3.12.3",

pnpm-lock.yaml

@@ -4,12 +4,18 @@
   mask-image: -webkit-radial-gradient(white, black);
 }
 
+@mixin text-outline($size: 1px) {
+  text-shadow: 0 0 $size black, 0 0 $size black, 0 0 $size black, 0 0 $size black;
+}
+
 @mixin focus-visible {
-  &:focus-visible {
+  &:not([disabled])[data-focus-visible-added] {
     box-shadow: 0px 0px 0px 1px var(--white-faded);
   }
 }
 
-@mixin text-outline($size: 1px) {
-  text-shadow: 0 0 $size black, 0 0 $size black, 0 0 $size black, 0 0 $size black;
+@mixin focus-visible-content {
+  &:not([disabled])[data-focus-visible-added] {
+    @content;
+  }
 }

src/assets/mixins.scss

@@ -0,0 +1,64 @@
+import type { Ref } from 'vue'
+import { onMounted, onUpdated, shallowRef } from 'vue'
+import type { Option } from '../types'
+import { type UseKeyOptions, useKey } from './useKey'
+
+export interface UseElementNavigationOptions {
+  target: Ref<Option<HTMLElement>>
+  targetQuery: string
+  navigateNextHotkey: string
+  navigatePreviousHotkey: string
+}
+
+export enum Navigation {
+  Next,
+  Previous,
+}
+
+const getFocusedItemIndex = (elements: HTMLElement[]) => elements
+  .findIndex(item => document.activeElement === item)
+
+const hotkeyOptions: UseKeyOptions = { prevent: true, repeat: true }
+
+export function useElementNavigation({
+  navigateNextHotkey,
+  navigatePreviousHotkey,
+  target,
+  targetQuery,
+}: UseElementNavigationOptions) {
+  const elements = shallowRef<HTMLElement[]>([])
+
+  function queryNotificationItems() {
+    elements.value = Array.from(target.value?.querySelectorAll(targetQuery) || [])
+  }
+
+  onMounted(queryNotificationItems)
+  onUpdated(queryNotificationItems)
+
+  function focusItemInDirection(navigation: Navigation) {
+    let currentIndex = getFocusedItemIndex(elements.value)
+
+    if (navigation === Navigation.Next && currentIndex < elements.value.length - 1)
+      currentIndex++
+    else if (navigation === Navigation.Previous && currentIndex > 0)
+      currentIndex--
+
+    const element = elements.value[currentIndex]
+    element.focus()
+    element.scrollIntoView({
+      inline: 'nearest',
+      block: 'nearest',
+    })
+  }
+
+  useKey(
+    navigateNextHotkey,
+    () => focusItemInDirection(Navigation.Next),
+    hotkeyOptions,
+  )
+  useKey(
+    navigatePreviousHotkey,
+    () => focusItemInDirection(Navigation.Previous),
+    hotkeyOptions,
+  )
+}

src/composables/useElementNavigation.ts

@@ -0,0 +1,116 @@
+import hotkeys, { type HotkeysEvent } from 'hotkeys-js'
+import { type Ref, onMounted, onUnmounted, unref, watch } from 'vue'
+
+type MaybeRef<T> = T | Ref<T>
+
+export interface UseKeyOptions {
+  prevent?: MaybeRef<boolean>
+  stop?: MaybeRef<boolean>
+  repeat?: MaybeRef<boolean>
+  input?: MaybeRef<boolean>
+  source?: (() => boolean) | Ref<boolean>
+}
+
+export type UseKeyCallback = (event: KeyboardEvent, hotkeysEvent: HotkeysEvent) => void
+
+const getLast = <T>(arr: T[]) => arr[arr.length - 1]
+
+const isInputing = () =>
+  document.activeElement instanceof HTMLTextAreaElement
+  || document.activeElement?.hasAttribute('contenteditable')
+  || document.activeElement instanceof HTMLInputElement
+  || document.activeElement instanceof HTMLSelectElement
+
+hotkeys.filter = () => true
+
+const bindings = new Map<string, UseKeyCallback[]>()
+
+/**
+ * @source https://github.com/kadiryazici/use-key-composable-vue3/blob/main/src/composables/useKey.ts
+ */
+export function useKey(
+  keys: string,
+  callback: UseKeyCallback,
+  {
+    source, //
+    input = false,
+    prevent = false,
+    repeat = false,
+    stop = false,
+  }: UseKeyOptions = {},
+) {
+  let initialized = false
+
+  const keyList = keys
+    .split(',')
+    .map(key => key.trim())
+    .filter(Boolean)
+
+  const handler: UseKeyCallback = (event, hotkeysEvent) => {
+    if (!unref(input) && isInputing())
+      return
+    if (unref(prevent))
+      event.preventDefault()
+    if (unref(stop))
+      event.stopPropagation()
+    if (!unref(repeat) && event.repeat)
+      return
+
+    callback(event, hotkeysEvent)
+  }
+
+  const init = () => {
+    if (initialized)
+      return
+
+    initialized = true
+
+    for (const key of keyList) {
+      if (bindings.has(key)) {
+        bindings.set(key, [...bindings.get(key)!, handler])
+      }
+      else {
+        bindings.set(key, [handler])
+        hotkeys(key, (...args) => {
+          const func = getLast(bindings.get(key)!)
+          func(...args)
+        })
+      }
+    }
+  }
+
+  const destroy = () => {
+    if (!initialized)
+      return
+
+    initialized = false
+
+    for (const key of keyList) {
+      bindings.set(
+        key,
+        bindings.get(key)!.filter(cb => cb !== handler),
+      )
+      if (bindings.get(key)!.length === 0) {
+        bindings.delete(key)
+        hotkeys.unbind(key)
+      }
+    }
+  }
+
+  if (source) {
+    watch(
+      source,
+      (newSourceValue) => {
+        if (newSourceValue)
+          init()
+        else destroy()
+      },
+      { immediate: true, flush: 'post' },
+    )
+  }
+  else {
+    onMounted(init)
+  }
+
+  onUnmounted(destroy)
+}

src/composables/useKey.ts

@@ -1,5 +1,7 @@
-import { createApp } from 'vue'
 import './assets/main.scss'
+import 'focus-visible'
+
+import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
 import { AppStorage, cacheStorageFromDisk } from './storage'

src/main.ts

@@ -1,5 +1,9 @@
+<script lang="ts">
+</script>
+
 <script lang="ts" setup>
 import { open } from '@tauri-apps/api/shell'
+import { onMounted, onUpdated, ref, shallowRef } from 'vue'
 import { useStore } from '../stores/store'
 import NotificationList from '../components/NotificationList.vue'
 import { useInterval } from '../composables/useInterval'
@@ -8,6 +12,8 @@ import { toGithubWebURL } from '../utils/github'
 import { AppStorage } from '../storage'
 import NotificationSkeleton from '../components/NotificationSkeleton.vue'
 import { Page } from '../constants'
+import type { Option } from '../types'
+import { useElementNavigation } from '../composables/useElementNavigation'
 
 const store = useStore()
 
@@ -22,10 +28,22 @@ function handleNotificationClick(notification: Thread) {
 function handleRepoClick(repoFullName: string) {
   open(`https://github.com/${repoFullName}`)
 }
+
+const home = ref<Option<HTMLElement>>(null)
+
+useElementNavigation({
+  target: home,
+  navigateNextHotkey: 'down',
+  navigatePreviousHotkey: 'up',
+  targetQuery: '.notification-item, .notification-title',
+})
 </script>
 
 <template>
-  <div class="home">
+  <div
+    ref="home"
+    class="home"
+  >
     <NotificationSkeleton v-if="store.skeletonVisible" />
 
     <template v-else>

src/pages/HomePage.vue

@@ -1,8 +1,9 @@
-import type { Raw } from 'vue'
+import type { Raw, Ref } from 'vue'
 import type { Thread } from './api/notifications'
 import type { User } from './api/user'
 
 export type Option<T> = T | null
+export type MaybeRef<T> = T | Ref<T>
 
 export interface NotificationListData {
   repoFullName: string