Add key shortcuts for context menu (#25)

Author: kadiryazici

src/components/Icons.ts

@@ -32,7 +32,7 @@ import BellSlashIcon16 from 'virtual:icons/octicon/bell-slash-16'
 import MailIcon16 from 'virtual:icons/octicon/mail-16'
 import LinkExternalIcon16 from 'virtual:icons/octicon/link-external-16'
 import SquareIcon16 from 'virtual:icons/octicon/square-16'
-import CircleIcon16 from 'virtual:icons/octicon/Circle-16'
+import CircleIcon24 from 'virtual:icons/octicon/Circle-24'
 
 import CommandIcon from 'virtual:icons/ph/command'
 
@@ -72,5 +72,5 @@ export const Icons = {
   Check16: markRaw(CheckIcon16),
   LinkExternal16: markRaw(LinkExternalIcon16),
   Square16: markRaw(SquareIcon16),
-  Circle16: markRaw(CircleIcon16),
+  Circle: markRaw(CircleIcon24),
 }

src/pages/HomePage.vue

@@ -41,7 +41,10 @@ useElementNavigation({
   targetQuery: '.notification-item, .notification-title',
 })
 
-function isChecked(item: MinimalRepository | Thread) {
+function isChecked(item: MinimalRepository | Thread | null) {
+  if (item == null)
+    return false
+
   if (isRepository(item)) {
     return store.notifications
       .filter(isThread)
@@ -94,52 +97,98 @@ function isCheckable(item: MinimalRepository | Thread) {
     .filter(thread => thread.repository.id === item.id)
     .some(thread => thread.unread)
 }
+onScopeDispose(() => {
+  store.checkedItems.length = 0
+})
 
 useKey('esc', () => {
   store.checkedItems = []
 }, { prevent: true })
 
-onScopeDispose(() => {
-  store.checkedItems.length = 0
+const contextMenuThread = ref<Thread | null>(null)
+const popoverTarget = ref<ReferenceElement | null>(null)
+const popoverRef = ref<InstanceType<typeof Popover> | null>(null)
+
+async function handleSelectMarkAsRead(triggeredByKeyboard = false) {
+  if (triggeredByKeyboard) {
+    if (store.checkedItems.length > 0) {
+      store.markCheckedNotificationsAsRead(AppStorage.get('accessToken')!)
+      store.checkedItems = []
+      return
+    }
+
+    if (contextMenuThread.value) {
+      const thread = contextMenuThread.value
+      markNotificationAsRead(contextMenuThread.value.id, AppStorage.get('accessToken')!)
+        .then(() => {
+          store.removeNotificationById(thread.id)
+        })
+
+      return
+    }
+  }
+
+  if (!contextMenuThread.value)
+    return
+
+  if (isChecked(contextMenuThread.value)) {
+    store.markCheckedNotificationsAsRead(AppStorage.get('accessToken')!)
+    store.checkedItems = []
+    return
+  }
+
+  const thread = contextMenuThread.value
+  markNotificationAsRead(thread.id, AppStorage.get('accessToken')!)
+    .then(() => {
+      store.removeNotificationById(thread.id)
+    })
+}
+
+useKey('m', () => {
+  handleSelectMarkAsRead(true)
+  popoverRef.value?.hide()
+})
+
+function handleSelectOpen(triggeredByKeyboard = false) {
+  if (triggeredByKeyboard) {
+    if (store.checkedItems.length > 0) {
+      store.checkedItems.forEach(handleNotificationClick)
+      store.checkedItems = []
+      return
+    }
+
+    if (contextMenuThread.value) {
+      handleNotificationClick(contextMenuThread.value)
+      return
+    }
+  }
+
+  if (!contextMenuThread.value)
+    return
+
+  if (isChecked(contextMenuThread.value))
+    store.checkedItems.forEach(handleNotificationClick)
+  else
+    handleNotificationClick(contextMenuThread.value)
+
+  store.checkedItems = []
+}
+
+useKey('o', () => {
+  handleSelectOpen(true)
+  popoverRef.value?.hide()
 })
 
-const contextMenuThread = ref<Thread | null>(null)
 const contextMenuItems = computed(() => [
   menuItem({
     key: 'read',
     meta: { text: 'Mark as read', icon: Icons.Check16, key: 'M' },
-    async onSelect() {
-      if (!contextMenuThread.value)
-        return
-
-      if (isChecked(contextMenuThread.value)) {
-        store.markCheckedNotificationsAsRead(AppStorage.get('accessToken')!)
-        store.checkedItems = []
-        return
-      }
-
-      markNotificationAsRead(contextMenuThread.value.id, AppStorage.get('accessToken')!)
-        .then(() => {
-          store.notifications = store.notifications.filter(notification => (
-            notification.id !== contextMenuThread.value!.id
-          ))
-        })
-    },
+    onSelect: () => handleSelectMarkAsRead(),
   }),
   menuItem({
     key: 'open',
     meta: { text: 'Open', icon: Icons.LinkExternal16, key: 'O' },
-    onSelect() {
-      if (!contextMenuThread.value)
-        return
-
-      if (isChecked(contextMenuThread.value))
-        store.checkedItems.forEach(handleNotificationClick)
-      else
-        handleNotificationClick(contextMenuThread.value)
-
-      store.checkedItems = []
-    },
+    onSelect: () => handleSelectOpen(),
   }),
   // menuItem({
   //   key: 'unsubscribe',
@@ -148,16 +197,13 @@ const contextMenuItems = computed(() => [
   // }),
   isChecked(contextMenuThread.value!) && menuItem({
     key: 'clear',
-    meta: { text: 'Clear selections', icon: Icons.Circle16, key: 'ESC' },
+    meta: { text: 'Clear selections', icon: Icons.Circle, key: 'ESC' },
     onSelect: () => {
       store.checkedItems = []
     },
   }),
 ])
 
-const popoverTarget = ref<ReferenceElement | null>(null)
-const popoverRef = ref<InstanceType<typeof Popover> | null>(null)
-
 function handleThreadContextmenu(thread: Thread, event: MouseEvent) {
   if (!isChecked(thread))
     store.checkedItems = []

src/stores/store.ts

@@ -17,6 +17,20 @@ export const useStore = defineStore('store', () => {
   const failedLoadingNotifications = ref(false)
   const skeletonVisible = ref(false)
 
+  function removeNotificationById(id: Thread['id']) {
+    const index = notifications.value.findIndex(item => isThread(item) && item.id === id)
+    const thread = notifications.value[index] as Thread
+    notifications.value.splice(index, 1)
+
+    const repoHasNotifications = notifications.value.some(item => isThread(item) && item.repository.id === thread.repository.id)
+    if (!repoHasNotifications) {
+      const repoIndex = notifications.value.findIndex(item => isRepository(item) && item.id === thread.repository.id)
+      notifications.value.splice(repoIndex, 1)
+    }
+
+    triggerRef(notifications)
+  }
+
   let threadsRaw: Thread[] = []
   let threadsPreviousRaw: Thread[] = []
 
@@ -129,21 +143,7 @@ export const useStore = defineStore('store', () => {
       )
     }
     finally {
-      notifications.value = notifications.value
-        .filter((item) => {
-          if (isRepository(item))
-            return true
-
-          return !deletedThreads.includes(item.id)
-        })
-        .filter((item, _, array) => {
-          if (isThread(item))
-            return true
-
-          return array.some((someItem) => {
-            return isThread(someItem) && someItem.repository.id === item.id
-          })
-        })
+      deletedThreads.forEach(id => removeNotificationById(id))
       checkedItems.value = []
       triggerRef(notifications)
     }
@@ -153,6 +153,7 @@ export const useStore = defineStore('store', () => {
     newRelease,
     notifications,
     currentPage: readonly(currentPage),
+    removeNotificationById,
     loadingNotifications,
     skeletonVisible,
     pageFrom,