From ecfae0dee8bcd9e8bd0828e0799f8ff8c227c8d9 Mon Sep 17 00:00:00 2001
From: kadiryazici <kyzc411@gmail.com>
Date: Sun, 17 Mar 2024 13:32:16 +0300
Subject: [PATCH] Add simpler handlig & Update eslint rules

---
 eslint.config.js                        |   4 +
 src/App.vue                             |  83 ++++++++++++-
 src/api/token.ts                        |   3 +-
 src/components/AppButton.vue            |   7 +-
 src/components/AppScroller.vue          |   3 +-
 src/components/AppSidebar.vue           |   9 +-
 src/components/MenuItems.vue            |   3 +-
 src/components/NotificationItem.vue     |  10 +-
 src/components/Popover.vue              |   3 +-
 src/components/Tooltip.vue              |   3 +-
 src/composables/useAppHooks.ts          |  21 ++++
 src/composables/useCustomHook.ts        |   9 +-
 src/composables/useElementNavigation.ts |   6 +-
 src/composables/useI18n.ts              |   2 +-
 src/composables/useInterval.ts          |   3 +-
 src/composables/useKey.ts               |  25 ++--
 src/composables/useRoute.ts             |   3 +-
 src/composables/useSlotWithRef.ts       |   6 +-
 src/composables/useTauriEvent.ts        |   3 +-
 src/composables/useTheme.ts             |   9 +-
 src/composables/useTimeoutPool.ts       |   9 +-
 src/directives/contextmenu.ts           |   3 +-
 src/main.ts                             |   9 +-
 src/pages/HomePage.vue                  | 147 ++++--------------------
 src/pages/LandingPage.vue               |   3 +-
 src/pages/SettingsPage.vue              |  15 ++-
 src/storage.ts                          |   6 +-
 src/stores/store.ts                     |  85 ++++++++------
 src/utils/api.ts                        |   3 +-
 src/utils/array.ts                      |   6 +-
 src/utils/batch.ts                      |   3 +-
 src/utils/github.ts                     |   6 +-
 src/utils/notification.ts               |   3 +-
 src/utils/url.ts                        |   3 +-
 src/utils/wowerlay.ts                   |   3 +-
 35 files changed, 295 insertions(+), 224 deletions(-)
 create mode 100644 src/composables/useAppHooks.ts

diff --git a/eslint.config.js b/eslint.config.js
index 3f1fb5a..dedde84 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -15,5 +15,9 @@ export default antfu({
         max: 1,
       },
     }],
+    // Require curly always for if statements
+    'curly': ['error', 'all'],
+    // if else statements should be separated by a newline
+    'brace-style': ['error', 'stroustrup', { allowSingleLine: false }],
   },
 })
diff --git a/src/App.vue b/src/App.vue
index 2a1dd13..b2e5ae1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { watchEffect } from 'vue'
+import { open } from '@tauri-apps/api/shell'
 import AppScroller from './components/AppScroller.vue'
 import AppSidebar from './components/AppSidebar.vue'
 import HomePage from './pages/HomePage.vue'
@@ -13,23 +14,99 @@ import ContextMenu from './components/ContextMenu.vue'
 import { useTheme } from './composables/useTheme'
 import { Page, useRoute } from './composables/useRoute'
 import { useContextMenu } from './composables/useContextMenu'
+import { useAppHooks } from './composables/useAppHooks'
+import { isRepository, isThread } from './utils/notification'
+import { createGithubWebURL } from './utils/github'
+import type { MinimalRepository, Thread } from './api/notifications'
+import { markNotificationAsRead, unsubscribeNotification } from './api/notifications'
 
 const store = useStore()
 const { currentPage } = useRoute()
 const contextmenu = useContextMenu()
 
 useInterval(() => {
-  if (AppStorage.get('accessToken') && AppStorage.get('user'))
+  if (AppStorage.get('accessToken') && AppStorage.get('user')) {
     store.fetchNotifications()
+  }
 }, FETCH_INTERVAL_DURATION)
 
 const { theme } = useTheme()
 
 watchEffect(() => {
-  if (theme.value === ColorPreference.Dark)
+  if (theme.value === ColorPreference.Dark) {
     document.documentElement.classList.remove('light-theme')
-  else
+  }
+  else {
     document.documentElement.classList.add('light-theme')
+  }
+})
+
+function getThreadsToProcess(target: Thread | MinimalRepository) {
+  let threads = [] as Thread[]
+
+  if (isRepository(target)) {
+    threads = store.getThreadsOfRepository(target)
+  }
+  else if (store.isChecked(target)) {
+    threads = [...store.checkedItems]
+    store.checkedItems = []
+  }
+  else {
+    threads = [target]
+  }
+
+  return threads
+}
+
+const { onOpen, onUnsubscribe, onMarkAsRead, emitMarkAsRead } = useAppHooks()
+
+onMarkAsRead((target) => {
+  let threads = [] as Thread[]
+
+  if (isRepository(target) || isThread(target)) {
+    threads = getThreadsToProcess(target)
+  }
+  else {
+    threads = target
+  }
+
+  for (const thread of threads) {
+    if (!thread.unread) {
+      continue
+    }
+
+    if (AppStorage.get('showReadNotifications')) {
+      thread.unread = false
+    }
+    else {
+      store.removeNotificationById(thread.id)
+    }
+
+    markNotificationAsRead(thread.id, AppStorage.get('accessToken')!)
+  }
+})
+
+onOpen((target) => {
+  const threads = getThreadsToProcess(target)
+
+  for (const thread of threads) {
+    const url = createGithubWebURL({ notification: thread, userId: AppStorage.get('user')!.id })
+    open(url)
+  }
+
+  if (AppStorage.get('markAsReadOnOpen')) {
+    emitMarkAsRead(threads)
+  }
+})
+
+onUnsubscribe((target) => {
+  const threads = getThreadsToProcess(target)
+
+  for (const thread of threads) {
+    unsubscribeNotification(thread.id, AppStorage.get('accessToken')!)
+  }
+
+  emitMarkAsRead(threads)
 })
 </script>
 
diff --git a/src/api/token.ts b/src/api/token.ts
index 1520670..5180ea3 100644
--- a/src/api/token.ts
+++ b/src/api/token.ts
@@ -31,8 +31,9 @@ export async function getAccessToken({ clientId, clientSecret, code }: GetAccess
     responseType: ResponseType.JSON,
   })
 
-  if (!res.ok)
+  if (!res.ok) {
     throw res
+  }
 
   return res
 }
diff --git a/src/components/AppButton.vue b/src/components/AppButton.vue
index 82f7a31..c12d475 100644
--- a/src/components/AppButton.vue
+++ b/src/components/AppButton.vue
@@ -17,13 +17,14 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<Emits>()
 
 defineSlots<{
-  default: (props: {}) => any
-  icon: (props: {}) => any
+  default: (props: Record<string, never>) => any
+  icon: (props: Record<string, never>) => any
 }>()
 
 function handleClick(e: MouseEvent) {
-  if (props.loading)
+  if (props.loading) {
     return
+  }
 
   emit('click', e)
 }
diff --git a/src/components/AppScroller.vue b/src/components/AppScroller.vue
index 635d9c6..6b7ae0d 100644
--- a/src/components/AppScroller.vue
+++ b/src/components/AppScroller.vue
@@ -24,8 +24,9 @@ watch(route.currentPage, () => {
   focus()
 
   const element = scrollView.value?.osInstance()?.elements().scrollOffsetElement
-  if (element)
+  if (element) {
     element.scrollTop = 0
+  }
 }, { flush: 'post' })
 
 const { theme } = useTheme()
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index ae4634a..055e6b5 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { open } from '@tauri-apps/api/shell'
 import { exit } from '@tauri-apps/api/process'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { REPO_LINK } from '../constants'
 import { useStore } from '../stores/store'
 import { AppStorage } from '../storage'
@@ -50,6 +50,12 @@ const moreItems = computed(() => [
 useKey('r', () => {
   store.fetchNotifications(true)
 }, { source: () => route.currentPage.value === Page.Home })
+
+const morePopover = ref<InstanceType<typeof Popover> | null>(null)
+
+useKey('.', () => {
+  morePopover.value?.show()
+})
 </script>
 
 <template>
@@ -140,6 +146,7 @@ useKey('r', () => {
           />
 
           <Popover
+            ref="morePopover"
             :target="el"
             :wowerlayOptions="{ position: 'right-end' }"
           >
diff --git a/src/components/MenuItems.vue b/src/components/MenuItems.vue
index a4476dd..430afc9 100644
--- a/src/components/MenuItems.vue
+++ b/src/components/MenuItems.vue
@@ -63,8 +63,9 @@ function setupHandle(ctx: Context) {
   const popoverContext = usePopoverContext()
 
   ctx.onSelect((meta, item) => {
-    if (popoverContext)
+    if (popoverContext) {
       popoverContext.visible.value = false
+    }
   })
 
   onMounted(() => {
diff --git a/src/components/NotificationItem.vue b/src/components/NotificationItem.vue
index 0a815fa..d45c148 100644
--- a/src/components/NotificationItem.vue
+++ b/src/components/NotificationItem.vue
@@ -16,7 +16,7 @@ type Props = {
 
 type Emits = {
   (e: 'click:notification', notification: Thread): void
-  (e: 'click:repo', repoFullName: string): void
+  (e: 'click:repo', repo: MinimalRepository): void
   (e: 'update:checked', value: boolean): void
   (e: 'contextmenu', value: Thread, event: MouseEvent): void
 }
@@ -33,8 +33,9 @@ function isInteractedCheckbox(e: MouseEvent | KeyboardEvent) {
 }
 
 function handleThreadClick(thread: Thread, event: MouseEvent | KeyboardEvent) {
-  if ((event instanceof KeyboardEvent && event.repeat))
+  if ((event instanceof KeyboardEvent && event.repeat)) {
     return
+  }
 
   if (props.checkable && ((event.ctrlKey || event.metaKey) || isInteractedCheckbox(event))) {
     emit('update:checked', !props.checked)
@@ -45,8 +46,9 @@ function handleThreadClick(thread: Thread, event: MouseEvent | KeyboardEvent) {
 }
 
 function handleRepoClick(repo: MinimalRepository, event: MouseEvent | KeyboardEvent) {
-  if ((event instanceof KeyboardEvent && event.repeat))
+  if ((event instanceof KeyboardEvent && event.repeat)) {
     return
+  }
 
   if (props.checkable && ((event.ctrlKey || event.metaKey) || isInteractedCheckbox(event))) {
     if (props.indeterminate) {
@@ -58,7 +60,7 @@ function handleRepoClick(repo: MinimalRepository, event: MouseEvent | KeyboardEv
     return
   }
 
-  emit('click:repo', repo.full_name)
+  emit('click:repo', repo)
 }
 </script>
 
diff --git a/src/components/Popover.vue b/src/components/Popover.vue
index 1508ff8..a4937e0 100644
--- a/src/components/Popover.vue
+++ b/src/components/Popover.vue
@@ -69,8 +69,9 @@ const handleTransition: WowerlayTransitionFn = (type, { popover }, done) => {
   })
 
   animation.onfinish = () => {
-    if (type === 'enter')
+    if (type === 'enter') {
       popover.style.transformOrigin = oldTransformOrigin
+    }
 
     done()
   }
diff --git a/src/components/Tooltip.vue b/src/components/Tooltip.vue
index 6b8b20e..d3274b7 100644
--- a/src/components/Tooltip.vue
+++ b/src/components/Tooltip.vue
@@ -88,8 +88,9 @@ useEventListener(targetGetter, 'mouseenter', handleTargetInteractionStart)
 useEventListener(targetGetter, 'mouseleave', handleTargetInteractionEnd)
 useEventListener(targetGetter, 'blur', handleTargetInteractionEnd)
 useEventListener(targetGetter, 'focus', (e) => {
-  if (!(e.target instanceof HTMLElement) || !e.target.hasAttribute('data-focus-visible-added'))
+  if (!(e.target instanceof HTMLElement) || !e.target.hasAttribute('data-focus-visible-added')) {
     return
+  }
 
   handleTargetInteractionStart()
 })
diff --git a/src/composables/useAppHooks.ts b/src/composables/useAppHooks.ts
new file mode 100644
index 0000000..2d03057
--- /dev/null
+++ b/src/composables/useAppHooks.ts
@@ -0,0 +1,21 @@
+import type { MinimalRepository, Thread } from '../api/notifications'
+import { singleton } from '../utils/common'
+import { useCustomHook } from './useCustomHook'
+
+export const useAppHooks = singleton(() => {
+  const [onMarkAsRead, emitMarkAsRead] = useCustomHook<[target: MinimalRepository | Thread | Thread[]]>()
+  const [onOpen, emitOpen] = useCustomHook<[target: MinimalRepository | Thread]>()
+  const [onRefetch, emitRefetch] = useCustomHook()
+  const [onUnsubscribe, emitUnsubscribe] = useCustomHook<[target: MinimalRepository | Thread]>()
+
+  return {
+    onMarkAsRead,
+    emitMarkAsRead,
+    onOpen,
+    emitOpen,
+    onRefetch,
+    emitRefetch,
+    onUnsubscribe,
+    emitUnsubscribe,
+  }
+})
diff --git a/src/composables/useCustomHook.ts b/src/composables/useCustomHook.ts
index b2f3566..b2e54b7 100644
--- a/src/composables/useCustomHook.ts
+++ b/src/composables/useCustomHook.ts
@@ -19,16 +19,19 @@ export function useCustomHook<const T extends readonly unknown[] = []>() {
   })
 
   function emit(...args: T) {
-    if (disposed)
+    if (disposed) {
       return
+    }
 
-    for (const hook of hooks)
+    for (const hook of hooks) {
       hook(...args)
+    }
   }
 
   function on(hook: (...args: T) => void) {
-    if (disposed)
+    if (disposed) {
       return () => {}
+    }
 
     hooks.add(hook)
     tryOnScopeDispose(() => hooks.delete(hook))
diff --git a/src/composables/useElementNavigation.ts b/src/composables/useElementNavigation.ts
index 24ed97d..2b5dc78 100644
--- a/src/composables/useElementNavigation.ts
+++ b/src/composables/useElementNavigation.ts
@@ -42,10 +42,12 @@ export function useElementNavigation({
   function focusItemInDirection(navigation: Navigation) {
     let currentIndex = getFocusedItemIndex(elements.value, targetQuery)
 
-    if (navigation === Navigation.Next && currentIndex < elements.value.length - 1)
+    if (navigation === Navigation.Next && currentIndex < elements.value.length - 1) {
       currentIndex++
-    else if (navigation === Navigation.Previous && currentIndex > 0)
+    }
+    else if (navigation === Navigation.Previous && currentIndex > 0) {
       currentIndex--
+    }
 
     const element = elements.value[currentIndex]
     element.focus()
diff --git a/src/composables/useI18n.ts b/src/composables/useI18n.ts
index ab7f006..825fb82 100644
--- a/src/composables/useI18n.ts
+++ b/src/composables/useI18n.ts
@@ -8,7 +8,7 @@ export type Locale = 'en' | 'tr'
 const en = {
   navigateToRepository: 'Navigate to repository',
   reloadNotifications: (shortcut: string) => `Reload notifications (${shortcut})`,
-  more: 'More',
+  more: 'More ( . )',
   changelog: 'Changelog',
   aNewVersionIsAvailable: 'A new version is available!',
   settings: 'Settings',
diff --git a/src/composables/useInterval.ts b/src/composables/useInterval.ts
index 7d33405..a329051 100644
--- a/src/composables/useInterval.ts
+++ b/src/composables/useInterval.ts
@@ -3,8 +3,9 @@ import { getCurrentScope, onScopeDispose } from 'vue'
 export function useInterval(callback: () => void, duration: number) {
   const interval = setInterval(callback, duration)
 
-  if (getCurrentScope())
+  if (getCurrentScope()) {
     onScopeDispose(() => clearInterval(interval))
+  }
 
   return () => {
     clearInterval(interval)
diff --git a/src/composables/useKey.ts b/src/composables/useKey.ts
index 3c014a1..b0e0cf3 100644
--- a/src/composables/useKey.ts
+++ b/src/composables/useKey.ts
@@ -49,21 +49,26 @@ export function useKey(
     .filter(Boolean)
 
   const handler: UseKeyCallback = (event, hotkeysEvent) => {
-    if (!unref(input) && isInputing())
+    if (!unref(input) && isInputing()) {
       return
-    if (unref(prevent))
+    }
+    if (unref(prevent)) {
       event.preventDefault()
-    if (unref(stop))
+    }
+    if (unref(stop)) {
       event.stopPropagation()
-    if (!unref(repeat) && event.repeat)
+    }
+    if (!unref(repeat) && event.repeat) {
       return
+    }
 
     callback(event, hotkeysEvent)
   }
 
   const init = () => {
-    if (initialized)
+    if (initialized) {
       return
+    }
 
     initialized = true
 
@@ -82,8 +87,9 @@ export function useKey(
   }
 
   const destroy = () => {
-    if (!initialized)
+    if (!initialized) {
       return
+    }
 
     initialized = false
 
@@ -103,9 +109,12 @@ export function useKey(
     watch(
       source,
       (newSourceValue) => {
-        if (newSourceValue)
+        if (newSourceValue) {
           init()
-        else destroy()
+        }
+        else {
+          destroy()
+        }
       },
       { immediate: true, flush: 'post' },
     )
diff --git a/src/composables/useRoute.ts b/src/composables/useRoute.ts
index 40c788d..9ea5271 100644
--- a/src/composables/useRoute.ts
+++ b/src/composables/useRoute.ts
@@ -19,8 +19,9 @@ export const useRoute = singleton(() => {
   const state = shallowRef<PageState>({})
 
   function go(page: Page, pageState: PageState = {}) {
-    if (page === currentPage.value)
+    if (page === currentPage.value) {
       return
+    }
 
     pageFrom.value = currentPage.value
     currentPage.value = page
diff --git a/src/composables/useSlotWithRef.ts b/src/composables/useSlotWithRef.ts
index 42d28d3..e429131 100644
--- a/src/composables/useSlotWithRef.ts
+++ b/src/composables/useSlotWithRef.ts
@@ -6,7 +6,7 @@ const vRef: Directive<HTMLElement, (el: HTMLElement) => void> = (el, { value })
 /**
  * @param slotName Target slot default value: "default"
  */
-export function useSlotWithRef<SlotProps extends Record<string, any> = {}>(key = 'default') {
+export function useSlotWithRef<SlotProps extends Record<string, any> = Record<string, never>>(slotName = 'default') {
   const slots = useSlots()
   const element: Ref<HTMLElement | null> = ref(null)
 
@@ -15,8 +15,8 @@ export function useSlotWithRef<SlotProps extends Record<string, any> = {}>(key =
   }
 
   function renderSlot(props?: SlotProps) {
-    if (key in slots) {
-      const [slot] = (slots as any)[key](props)
+    if (slotName in slots) {
+      const [slot] = (slots as any)[slotName](props)
       return withDirectives(slot, [[vRef, handleRef]])
     }
 
diff --git a/src/composables/useTauriEvent.ts b/src/composables/useTauriEvent.ts
index 3017361..9d557c8 100644
--- a/src/composables/useTauriEvent.ts
+++ b/src/composables/useTauriEvent.ts
@@ -15,8 +15,9 @@ export function useTauriEvent<T>(key: EventName, callback: (payload: Event<T>) =
   }
 
   listen(key, callback).then((cleanup) => {
-    if (disposed)
+    if (disposed) {
       cleanup()
+    }
 
     unlistenFn = cleanup
   })
diff --git a/src/composables/useTheme.ts b/src/composables/useTheme.ts
index 2b7a1c2..dc2caa5 100644
--- a/src/composables/useTheme.ts
+++ b/src/composables/useTheme.ts
@@ -12,12 +12,15 @@ export const useTheme = singleton(() => {
 
     let theme: ColorPreference.Dark | ColorPreference.Light
 
-    if (preference === ColorPreference.Dark)
+    if (preference === ColorPreference.Dark) {
       theme = ColorPreference.Dark
-    else if (preference === ColorPreference.Light)
+    }
+    else if (preference === ColorPreference.Light) {
       theme = ColorPreference.Light
-    else
+    }
+    else {
       theme = prefersDark.value ? ColorPreference.Dark : ColorPreference.Light
+    }
 
     return theme
   })
diff --git a/src/composables/useTimeoutPool.ts b/src/composables/useTimeoutPool.ts
index 6a31bed..92273fb 100644
--- a/src/composables/useTimeoutPool.ts
+++ b/src/composables/useTimeoutPool.ts
@@ -6,8 +6,9 @@ export function useTimeoutPool() {
   const timeouts = new Map<string, TimeoutID>()
 
   const clear = () => {
-    for (const timeout of timeouts.values())
+    for (const timeout of timeouts.values()) {
       clearTimeout(timeout)
+    }
 
     timeouts.clear()
   }
@@ -16,8 +17,9 @@ export function useTimeoutPool() {
 
   return {
     set(name: string, ...[callback, delay]: Parameters<typeof setTimeout>) {
-      if (timeouts.has(name))
+      if (timeouts.has(name)) {
         clearTimeout(timeouts.get(name))
+      }
 
       const timeout = setTimeout(() => {
         timeouts.delete(name)
@@ -28,8 +30,9 @@ export function useTimeoutPool() {
     },
 
     cancel(name: string) {
-      if (timeouts.has(name))
+      if (timeouts.has(name)) {
         clearTimeout(timeouts.get(name))
+      }
 
       timeouts.delete(name)
     },
diff --git a/src/directives/contextmenu.ts b/src/directives/contextmenu.ts
index a040b1a..0a9640d 100644
--- a/src/directives/contextmenu.ts
+++ b/src/directives/contextmenu.ts
@@ -34,8 +34,9 @@ function directiveHandler(el: HTMLElement, binding: DirectiveBinding<ContextMenu
 function unmountHandler(el: HTMLElement) {
   const contextmenu = useContextMenu()
 
-  if (contextmenu.state.value?.currentTarget === el)
+  if (contextmenu.state.value?.currentTarget === el) {
     contextmenu.clear()
+  }
 }
 
 export const vContextmenu: Directive<HTMLElement, ContextMenuState['itemsFn']> = {
diff --git a/src/main.ts b/src/main.ts
index 9610a74..adb8b3b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -47,8 +47,9 @@ async function main() {
 
   AppStorage.set('openAtStartup', autoStartEnabled)
 
-  if (!notificationsGranted)
+  if (!notificationsGranted) {
     AppStorage.set('showSystemNotifications', false)
+  }
 
   if (token && user) {
     route.go(Page.Home)
@@ -58,16 +59,18 @@ async function main() {
   try {
     const { shouldUpdate, manifest } = await checkUpdate()
 
-    if (shouldUpdate)
+    if (shouldUpdate) {
       store.newRelease = manifest!
+    }
   }
   catch (error) {
     console.error(error)
   }
 
   const os = await osType()
-  if (os === 'Darwin')
+  if (os === 'Darwin') {
     document.documentElement.setAttribute('data-os-darwin', '')
+  }
 
   app.mount('#app')
 }
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 93bedc3..ae4477e 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -6,7 +6,6 @@ import type { ItemRenderList } from 'vue-selectable-items'
 import { useStore } from '../stores/store'
 import NotificationItem from '../components/NotificationItem.vue'
 import { type MinimalRepository, type Thread, markNotificationAsRead, unsubscribeNotification } from '../api/notifications'
-import { createGithubWebURL } from '../utils/github'
 import { AppStorage } from '../storage'
 import NotificationSkeleton from '../components/NotificationSkeleton.vue'
 import { useElementNavigation } from '../composables/useElementNavigation'
@@ -20,38 +19,17 @@ import { CheckedNotificationProcess } from '../constants'
 import { vContextmenu } from '../directives/contextmenu'
 import { useI18n } from '../composables/useI18n'
 import { useRoute } from '../composables/useRoute'
+import { useAppHooks } from '../composables/useAppHooks'
 
 const store = useStore()
 const route = useRoute()
 const { t } = useI18n()
 
-if (route.state.value.fetchOnEnter)
+if (route.state.value.fetchOnEnter) {
   store.fetchNotifications(true)
-
-function handleOpenNotification(thread: Thread) {
-  const url = createGithubWebURL({ notification: thread, userId: AppStorage.get('user')!.id })
-  open(url)
 }
 
-function handleClickNotification(thread: Thread) {
-  handleOpenNotification(thread)
-
-  if (AppStorage.get('markAsReadOnOpen')) {
-    store.setChecked(thread, false)
-    store.runWithSnapshot(async () => {
-      if (!AppStorage.get('showReadNotifications'))
-        store.removeNotificationById(thread.id)
-      else
-        store.mutateNotifications(() => thread.unread = false)
-
-      await markNotificationAsRead(thread.id, AppStorage.get('accessToken')!)
-    })
-  }
-}
-
-function handleRepoClick(repoFullName: string) {
-  open(`https://github.com/${repoFullName}`)
-}
+const { emitOpen, emitUnsubscribe, emitMarkAsRead } = useAppHooks()
 
 const home = ref<HTMLElement | null>(null)
 useElementNavigation({
@@ -70,109 +48,28 @@ useKey('esc', () => {
 }, { prevent: true })
 
 useKey('m', () => {
-  if (store.checkedItems.length === 0)
+  if (store.checkedItems.length === 0) {
     return
+  }
 
-  handleSelectMarkAsRead(store.checkedItems[0])
+  emitMarkAsRead(store.checkedItems[0])
 })
 
 useKey('o', () => {
-  if (store.checkedItems.length === 0)
+  if (store.checkedItems.length === 0) {
     return
+  }
 
-  handleSelectOpen(store.checkedItems[0])
+  emitOpen(store.checkedItems[0])
 })
 
 useKey('u', () => {
-  if (store.checkedItems.length === 0)
-    return
-
-  handleSelectUnsubscribe(store.checkedItems[0])
-})
-
-async function handleSelectMarkAsRead(thread: Thread) {
-  if (!thread.unread)
-    return
-
-  if (store.isChecked(thread)) {
-    store.processCheckedNotifications(CheckedNotificationProcess.MarkAsRead)
-    return
-  }
-
-  store.checkedItems = []
-
-  store.runWithSnapshot(async () => {
-    if (!AppStorage.get('showReadNotifications'))
-      store.removeNotificationById(thread.id)
-    else
-      store.mutateNotifications(() => thread.unread = false)
-
-    await markNotificationAsRead(thread.id, AppStorage.get('accessToken')!)
-  })
-}
-
-function handleSelectOpen(thread: Thread) {
-  if (!thread.unread) {
-    handleOpenNotification(thread)
+  if (store.checkedItems.length === 0) {
     return
   }
 
-  if (store.isChecked(thread)) {
-    store.checkedItems.forEach(handleOpenNotification)
-  }
-  else {
-    store.checkedItems = []
-    handleOpenNotification(thread)
-  }
-
-  if (AppStorage.get('markAsReadOnOpen'))
-    handleSelectMarkAsRead(thread)
-}
-
-async function handleSelectUnsubscribe(thread: Thread) {
-  if (store.isChecked(thread)) {
-    store.processCheckedNotifications(CheckedNotificationProcess.Unsubscribe)
-    return
-  }
-
-  store.checkedItems = []
-
-  store.runWithSnapshot(async () => {
-    if (thread.unread && !AppStorage.get('showReadNotifications'))
-      store.removeNotificationById(thread.id)
-    else
-      store.mutateNotifications(() => thread.unread = false)
-
-    await unsubscribeNotification(thread.id, AppStorage.get('accessToken')!)
-  })
-}
-
-function handleSelectOpenAll(repository: MinimalRepository) {
-  if (store.isCheckable(repository)) {
-    store.setChecked(repository, true)
-    handleSelectOpen(store.checkedItems[0])
-  }
-  else {
-    const threads = store.getThreadsOfRepository(repository)
-    threads.forEach(handleOpenNotification)
-  }
-}
-
-function handleMarkAllAsRead(repository: MinimalRepository) {
-  store.setChecked(repository, true)
-  handleSelectMarkAsRead(store.checkedItems[0])
-}
-
-function handleUnsubscribeAll(repository: MinimalRepository) {
-  if (store.isCheckable(repository)) {
-    store.setChecked(repository, true)
-    handleSelectUnsubscribe(store.checkedItems[0])
-    return
-  }
-
-  const threads = store.getThreadsOfRepository(repository)
-  threads.forEach(handleSelectUnsubscribe)
-}
+  emitUnsubscribe(store.checkedItems[0])
+})
 
 function createContextmenuItems(item: Thread | MinimalRepository): ItemRenderList<ItemMeta> {
   const checked = store.isChecked(item)
@@ -199,21 +96,21 @@ function createContextmenuItems(item: Thread | MinimalRepository): ItemRenderLis
         key: 'mark:all',
         meta: { text: t.markAllAsRead, icon: Icons.Check16, key: 'M' },
         onSelect() {
-          handleMarkAllAsRead(item)
+          emitMarkAsRead(item)
         },
       }),
       menuItem({
         key: 'open:all',
         meta: { text: t.openAll, icon: Icons.LinkExternal16, key: 'O' },
         onSelect() {
-          handleSelectOpenAll(item)
+          emitOpen(item)
         },
       }),
       menuItem({
         key: 'unsubscribe:all',
         meta: { text: t.unsubscribeAll, icon: Icons.BellSlash16, key: 'U' },
         onSelect() {
-          handleUnsubscribeAll(item)
+          emitUnsubscribe(item)
         },
       }),
       checked && menuItem({
@@ -239,7 +136,7 @@ function createContextmenuItems(item: Thread | MinimalRepository): ItemRenderLis
       key: 'read',
       meta: { text: t.markAsRead, icon: Icons.Check16, key: 'M' },
       onSelect() {
-        handleSelectMarkAsRead(item)
+        emitMarkAsRead(item)
       },
     }),
 
@@ -247,7 +144,7 @@ function createContextmenuItems(item: Thread | MinimalRepository): ItemRenderLis
       key: 'open',
       meta: { text: t.open, icon: Icons.LinkExternal16, key: 'O' },
       onSelect() {
-        handleSelectOpen(item)
+        emitOpen(item)
       },
     }),
 
@@ -255,7 +152,7 @@ function createContextmenuItems(item: Thread | MinimalRepository): ItemRenderLis
       key: 'unsubscribe',
       meta: { text: t.unsubscribe, icon: Icons.BellSlash16, key: 'U' },
       onSelect() {
-        handleSelectUnsubscribe(item)
+        emitUnsubscribe(item)
       },
     }),
 
@@ -274,6 +171,10 @@ function createContextmenuItems(item: Thread | MinimalRepository): ItemRenderLis
 whenever(() => store.skeletonVisible, () => {
   store.checkedItems = []
 })
+
+function handleClickRepo(repo: MinimalRepository) {
+  open(`https://github.com/${repo.full_name}`)
+}
 </script>
 
 <template>
@@ -312,8 +213,8 @@ whenever(() => store.skeletonVisible, () => {
       :checkable="store.isCheckable(item)"
       :indeterminate="store.isIndeterminate(item)"
       :checkboxVisible="store.checkedItems.length > 0"
-      @click:notification="handleClickNotification"
-      @click:repo="handleRepoClick"
+      @click:notification="emitOpen"
+      @click:repo="handleClickRepo"
       @update:checked="(value) => store.setChecked(item, value)"
     />
   </div>
diff --git a/src/pages/LandingPage.vue b/src/pages/LandingPage.vue
index a9ffc42..af452b3 100644
--- a/src/pages/LandingPage.vue
+++ b/src/pages/LandingPage.vue
@@ -22,8 +22,9 @@ const processing = ref(true)
 const { t } = useI18n()
 
 useTauriEvent<string>('code', async ({ payload }) => {
-  if (processing.value)
+  if (processing.value) {
     return
+  }
 
   processing.value = true
 
diff --git a/src/pages/SettingsPage.vue b/src/pages/SettingsPage.vue
index 3924f27..25de402 100644
--- a/src/pages/SettingsPage.vue
+++ b/src/pages/SettingsPage.vue
@@ -40,15 +40,18 @@ const markAsReadOnOpen = AppStorage.asRef('markAsReadOnOpen')
 const accessToken = AppStorage.asComputed('accessToken')
 
 watch(soundsEnabled, (enabled) => {
-  if (enabled)
+  if (enabled) {
     invoke(InvokeCommand.PlayNotificationSound)
+  }
 })
 
 watchDebounced(openAtStartup, (enabled) => {
-  if (enabled)
+  if (enabled) {
     enableAutostart()
-  else
+  }
+  else {
     disableAutostart()
+  }
 }, { debounce: 350 })
 
 useTauriEvent('window:hidden', () => {
@@ -56,8 +59,9 @@ useTauriEvent('window:hidden', () => {
 })
 
 function handleBack() {
-  if (accessToken.value == null)
+  if (accessToken.value == null) {
     return route.go(Page.Landing)
+  }
 
   route.go(Page.Home, {
     fetchOnEnter: (
@@ -83,8 +87,9 @@ async function handleUpdateShowSystemNotifications(value: boolean) {
       type: 'error',
     })
 
-    if (confirmed)
+    if (confirmed) {
       invoke(InvokeCommand.GoToNotificationSettings)
+    }
 
     return
   }
diff --git a/src/storage.ts b/src/storage.ts
index 7ea9c60..0e2895a 100644
--- a/src/storage.ts
+++ b/src/storage.ts
@@ -35,8 +35,9 @@ export const AppStorage = {
    * Writes to storage and in next event loop, caches to disk
    */
   set<T extends keyof AppStorageContext>(key: T, value: AppStorageContext[T]) {
-    if (value === storage[key])
+    if (value === storage[key]) {
       return
+    }
 
     storage[key] = value
 
@@ -78,8 +79,9 @@ export async function cacheStorageFromDisk() {
   for (const key of Object.keys(storage)) {
     const value = values[key]
 
-    if (value != null)
+    if (value != null) {
       // @ts-expect-error Type issue
       storage[key] = value
+    }
   }
 }
diff --git a/src/stores/store.ts b/src/stores/store.ts
index 0b8a51f..7b0dea9 100644
--- a/src/stores/store.ts
+++ b/src/stores/store.ts
@@ -1,10 +1,11 @@
 import { sendNotification } from '@tauri-apps/api/notification'
 import { invoke } from '@tauri-apps/api/tauri'
 import { defineStore } from 'pinia'
-import { ref, shallowRef, triggerRef, watchEffect } from 'vue'
+import { ref, watchEffect } from 'vue'
 import pAll from 'p-all'
 import { type UpdateManifest, installUpdate } from '@tauri-apps/api/updater'
 import { relaunch } from '@tauri-apps/api/process'
+import { klona } from 'klona'
 import { type MinimalRepository, type Thread, getNotifications, markNotificationAsRead, unsubscribeNotification } from '../api/notifications'
 import { CheckedNotificationProcess, InvokeCommand, notificationApiMutex } from '../constants'
 import { AppStorage } from '../storage'
@@ -14,7 +15,7 @@ import { everySome } from '../utils/array'
 import { Page, useRoute } from '../composables/useRoute'
 
 export const useStore = defineStore('store', () => {
-  const notifications = shallowRef<NotificationList>([])
+  const notifications = ref<NotificationList>([])
   const loadingNotifications = ref(false)
   const failedLoadingNotifications = ref(false)
   const skeletonVisible = ref(false)
@@ -29,8 +30,6 @@ export const useStore = defineStore('store', () => {
       const repoIndex = notifications.value.findIndex(item => isRepository(item) && item.id === thread.repository.id)
       notifications.value.splice(repoIndex, 1)
     }
-
-    triggerRef(notifications)
   }
 
   let threadsRaw: Thread[] = []
@@ -39,13 +38,15 @@ export const useStore = defineStore('store', () => {
   const checkedItems = ref<Thread[]>([])
 
   async function fetchNotifications(withSkeletons = false) {
-    if (loadingNotifications.value)
+    if (loadingNotifications.value) {
       return
+    }
 
     const accessToken = AppStorage.get('accessToken')
 
-    if (accessToken == null)
+    if (accessToken == null) {
       return
+    }
 
     if (withSkeletons) {
       skeletonVisible.value = true
@@ -58,11 +59,11 @@ export const useStore = defineStore('store', () => {
     try {
       const checkedThreads = checkedItems.value
 
-      const { data } = await notificationApiMutex.runExclusive(() => getNotifications({
+      const { data } = await getNotifications({
         accessToken,
         showOnlyParticipating: AppStorage.get('showOnlyParticipating'),
         showReadNotifications: AppStorage.get('showReadNotifications'),
-      }))
+      })
 
       threadsPreviousRaw = threadsRaw
       threadsRaw = data
@@ -84,8 +85,9 @@ export const useStore = defineStore('store', () => {
     const newNotifications = filterNewThreads(threadsRaw, threadsPreviousRaw)
 
     if (newNotifications.length > 0) {
-      if (AppStorage.get('soundsEnabled'))
+      if (AppStorage.get('soundsEnabled')) {
         invoke(InvokeCommand.PlayNotificationSound)
+      }
 
       if (AppStorage.get('showSystemNotifications')) {
         sendNotification({
@@ -128,6 +130,10 @@ export const useStore = defineStore('store', () => {
     }
   }
 
+  function createSnapshot() {
+    return klona(notifications.value)
+  }
+
   function processCheckedNotifications(process: CheckedNotificationProcess) {
     return notificationApiMutex.runExclusive(async () => {
       const deletedThreads: Thread[] = []
@@ -135,22 +141,24 @@ export const useStore = defineStore('store', () => {
       const snapshot = notifications.value.slice(0)
       const accessToken = AppStorage.get('accessToken')!
 
-      mutateNotifications(() => {
-        if (AppStorage.get('showReadNotifications'))
-          checkedThreads.forEach(thread => thread.unread = false)
-        else
-          checkedThreads.forEach(thread => removeNotificationById(thread.id))
-      })
+      if (AppStorage.get('showReadNotifications')) {
+        checkedThreads.forEach(thread => thread.unread = false)
+      }
+      else {
+        checkedThreads.forEach(thread => removeNotificationById(thread.id))
+      }
 
       checkedItems.value = []
 
       try {
         await pAll(
           checkedThreads.map(thread => async () => {
-            if (process === CheckedNotificationProcess.MarkAsRead)
+            if (process === CheckedNotificationProcess.MarkAsRead) {
               await markNotificationAsRead(thread.id, accessToken)
-            else if (process === CheckedNotificationProcess.Unsubscribe)
+            }
+            else if (process === CheckedNotificationProcess.Unsubscribe) {
               await unsubscribeNotification(thread.id, accessToken)
+            }
 
             deletedThreads.push(thread)
           }),
@@ -161,15 +169,15 @@ export const useStore = defineStore('store', () => {
         )
       }
       catch (error) {
-        mutateNotifications(() => {
-          notifications.value = snapshot
-
-          deletedThreads.forEach((thread) => {
-            if (!AppStorage.get('showReadNotifications'))
-              removeNotificationById(thread.id)
-            else
-              thread.unread = false
-          })
+        notifications.value = snapshot
+
+        deletedThreads.forEach((thread) => {
+          if (!AppStorage.get('showReadNotifications')) {
+            removeNotificationById(thread.id)
+          }
+          else {
+            thread.unread = false
+          }
         })
       }
     })
@@ -179,8 +187,9 @@ export const useStore = defineStore('store', () => {
   const installingUpate = ref(false)
 
   async function updateAndRestart() {
-    if (newRelease.value == null)
+    if (newRelease.value == null) {
       return
+    }
 
     try {
       installingUpate.value = true
@@ -195,8 +204,9 @@ export const useStore = defineStore('store', () => {
   }
 
   function isChecked(item: MinimalRepository | Thread | null) {
-    if (item == null || !isCheckable(item))
+    if (item == null || !isCheckable(item)) {
       return false
+    }
 
     if (isRepository(item)) {
       return notifications.value
@@ -214,14 +224,16 @@ export const useStore = defineStore('store', () => {
   function setChecked(item: MinimalRepository | Thread, value: boolean) {
     const checked = isChecked(item)
 
-    if (value === checked)
+    if (value === checked) {
       return
+    }
 
     if (value) {
       if (isRepository(item)) {
         for (const notificationItem of notifications.value) {
-          if (isThread(notificationItem) && notificationItem.unread && notificationItem.repository.id === item.id)
+          if (isThread(notificationItem) && notificationItem.unread && notificationItem.repository.id === item.id) {
             checkedItems.value.push(notificationItem)
+          }
         }
         return
       }
@@ -242,8 +254,9 @@ export const useStore = defineStore('store', () => {
   }
 
   function isCheckable(item: MinimalRepository | Thread) {
-    if (isThread(item))
+    if (isThread(item)) {
       return item.unread
+    }
 
     return notifications.value
       .filter(isThread)
@@ -252,8 +265,9 @@ export const useStore = defineStore('store', () => {
   }
 
   function isIndeterminate(item: MinimalRepository | Thread): boolean {
-    if (isThread(item))
+    if (isThread(item)) {
       return false
+    }
 
     const repoThreads = notifications.value
       .filter(isThread)
@@ -272,11 +286,6 @@ export const useStore = defineStore('store', () => {
       .filter(thread => thread.repository.id === repository.id)
   }
 
-  function mutateNotifications(fn: () => void) {
-    fn()
-    triggerRef(notifications)
-  }
-
   return {
     newRelease,
     notifications,
@@ -285,7 +294,7 @@ export const useStore = defineStore('store', () => {
     failedLoadingNotifications,
     checkedItems,
     installingUpate,
-    mutateNotifications,
+    createSnapshot,
     getThreadsOfRepository,
     isChecked,
     setChecked,
diff --git a/src/utils/api.ts b/src/utils/api.ts
index 52ce77e..0babb92 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -6,8 +6,9 @@ export function createBaseGithubApiHeaders(accessToken: AppStorageContext['acces
     'Content-Type': 'application/json',
   }
 
-  if (accessToken)
+  if (accessToken) {
     headers.Authorization = `token ${accessToken}`
+  }
 
   return headers
 }
diff --git a/src/utils/array.ts b/src/utils/array.ts
index ed8ae51..108ea4e 100644
--- a/src/utils/array.ts
+++ b/src/utils/array.ts
@@ -7,11 +7,13 @@ export function everySome<T extends any[]>(array: T, callback: EverySomeCallback
   for (let i = 0; i < array.length; i += 1) {
     const result = callback(array[i], i, array)
 
-    if (every && !result)
+    if (every && !result) {
       every = false
+    }
 
-    if (!some && result)
+    if (!some && result) {
       some = true
+    }
   }
 
   return { every, some }
diff --git a/src/utils/batch.ts b/src/utils/batch.ts
index 4c07e11..9552f28 100644
--- a/src/utils/batch.ts
+++ b/src/utils/batch.ts
@@ -7,8 +7,9 @@ export function batchFn<T extends (...args: any[]) => void>(fn: T) {
   let timeout: Option<ReturnType<typeof setTimeout>> = null
 
   return (...args: Parameters<T>) => {
-    if (timeout)
+    if (timeout) {
       clearTimeout(timeout)
+    }
 
     timeout = setTimeout(() => {
       fn(...args)
diff --git a/src/utils/github.ts b/src/utils/github.ts
index a9e6323..d8a62af 100644
--- a/src/utils/github.ts
+++ b/src/utils/github.ts
@@ -34,8 +34,9 @@ export function createGithubWebURL({ notification, userId }: CreateGithubWebUrlP
   else {
     url = notification.subject.url.replace('api.github.com/repos', 'github.com')
 
-    if (url.includes('/pulls/'))
+    if (url.includes('/pulls/')) {
       url = url.replace('/pulls/', '/pull/')
+    }
 
     if (url.includes('/releases/')) {
       url = url.replace('/repos', '')
@@ -45,8 +46,9 @@ export function createGithubWebURL({ notification, userId }: CreateGithubWebUrlP
 
   const refer = `${NOTIFICATION_REFERRER_ID_KEY}=${notificationReferrerId}`
 
-  if (url.includes('?'))
+  if (url.includes('?')) {
     return `${url}&${refer}`
+  }
 
   return `${url}?${refer}`
 }
diff --git a/src/utils/notification.ts b/src/utils/notification.ts
index fc3fb64..7d945a7 100644
--- a/src/utils/notification.ts
+++ b/src/utils/notification.ts
@@ -15,8 +15,9 @@ export function toNotificationList(threads: Thread[]): NotificationList {
   for (const thread of threads) {
     const { repository } = thread
 
-    if (!repoThreadsMap.has(repository.id))
+    if (!repoThreadsMap.has(repository.id)) {
       repoThreadsMap.set(repository.id, [])
+    }
 
     repoThreadsMap.get(repository.id)!.push(thread)
   }
diff --git a/src/utils/url.ts b/src/utils/url.ts
index fc290f6..9921742 100644
--- a/src/utils/url.ts
+++ b/src/utils/url.ts
@@ -13,8 +13,9 @@ export function createURL({ url, query }: CreateURLArgs) {
 
     const queries = [] as string[]
 
-    for (const [key, value] of Object.entries(query))
+    for (const [key, value] of Object.entries(query)) {
       queries.push(`${key}=${value}`)
+    }
 
     mURL += decodeURIComponent(queries.join('&'))
   }
diff --git a/src/utils/wowerlay.ts b/src/utils/wowerlay.ts
index dc98184..ab05a2b 100644
--- a/src/utils/wowerlay.ts
+++ b/src/utils/wowerlay.ts
@@ -49,8 +49,9 @@ export const handleTransition: WowerlayTransitionFn = (type, { popover }, done)
   })
 
   animation.onfinish = () => {
-    if (type === 'enter')
+    if (type === 'enter') {
       popover.style.transformOrigin = oldTransformOrigin
+    }
 
     done()
   }