Move route to seperate composable

src/App.vue

@@ -9,13 +9,13 @@ import { useStore } from './stores/store'
 import LandingPage from './pages/LandingPage.vue'
 import { useInterval } from './composables/useInterval'
 import { AppStorage } from './storage'
-import { Page, useRoute } from './stores/route'
 import ContextMenu from './components/ContextMenu.vue'
 import { useContextmenu } from './stores/contextmenu'
 import { useTheme } from './composables/useTheme'
+import { Page, useRoute } from './composables/useRoute'
 
 const store = useStore()
-const route = useRoute()
+const { currentPage } = useRoute()
 const contextmenu = useContextmenu()
 
 useInterval(() => {
@@ -41,9 +41,9 @@ watchEffect(() => {
   <AppSidebar />
 
   <AppScroller>
-    <HomePage v-if="route.currentPage === Page.Home" />
-    <SettingsPage v-else-if="route.currentPage === Page.Settings" />
-    <LandingPage v-else-if="route.currentPage === Page.Landing" />
+    <HomePage v-if="currentPage === Page.Home" />
+    <SettingsPage v-else-if="currentPage === Page.Settings" />
+    <LandingPage v-else-if="currentPage === Page.Landing" />
   </AppScroller>
 
   <ContextMenu

src/components/AppScroller.vue

@@ -8,8 +8,8 @@ import { useStore } from '../stores/store'
 import type { Option } from '../types'
 import { batchFn } from '../utils/batch'
 import { ColorPreference } from '../constants'
-import { useRoute } from '../stores/route'
 import { useTheme } from '../composables/useTheme'
+import { useRoute } from '../composables/useRoute'
 
 const route = useRoute()
 const scrollView = ref<Option<OverlayScrollbarsComponentRef>>(null)
@@ -18,11 +18,11 @@ const focus = batchFn(() => {
   scrollView.value?.getElement()?.focus()
 })
 
-watch(() => route.currentPage, focus, { flush: 'post' })
 useTauriEvent('window:hidden', focus)
 onMounted(focus)
+watch(route.currentPage, () => {
+  focus()
 
-watch(() => route.currentPage, () => {
   const element = scrollView.value?.osInstance()?.elements().scrollOffsetElement
   if (element)
     element.scrollTop = 0

src/components/AppSidebar.vue

@@ -6,8 +6,8 @@ import { REPO_LINK } from '../constants'
 import { useStore } from '../stores/store'
 import { AppStorage } from '../storage'
 import { useKey } from '../composables/useKey'
-import { Page, useRoute } from '../stores/route'
 import { useI18n } from '../composables/useI18n'
+import { Page, useRoute } from '../composables/useRoute'
 import { Icons } from './Icons'
 import SidebarButton from './SidebarButton.vue'
 import Popover from './Popover.vue'
@@ -49,7 +49,7 @@ const moreItems = computed(() => [
 
 useKey('r', () => {
   store.fetchNotifications(true)
-}, { source: () => route.currentPage === Page.Home })
+}, { source: () => route.currentPage.value === Page.Home })
 </script>
 
 <template>
@@ -109,7 +109,7 @@ useKey('r', () => {
       <SlotRef>
         <template #default>
           <SidebarButton
-            :disabled="route.currentPage !== Page.Home"
+            :disabled="route.currentPage.value !== Page.Home"
             @click="store.fetchNotifications(true)"
           >
             <Icons.Sync16 />

src/stores/route.ts → src/composables/useRoute.ts

@@ -1,6 +1,7 @@
 import { readonly, ref, shallowRef } from 'vue'
 import { defineStore } from 'pinia'
 import type { Option } from '../types'
+import { singleton } from '../utils/common'
 
 export enum Page {
   Settings = 'Settings',
@@ -12,7 +13,7 @@ export type PageState = {
   fetchOnEnter?: boolean
 }
 
-export const useRoute = defineStore('route', () => {
+export const useRoute = singleton(() => {
   const currentPage = ref(Page.Landing)
   const pageFrom = ref<Option<Page>>(null)
   const state = shallowRef<PageState>({})

src/main.ts

@@ -15,9 +15,9 @@ import App from './App.vue'
 import { AppStorage, cacheStorageFromDisk } from './storage'
 import { useStore } from './stores/store'
 import { useKey } from './composables/useKey'
-import { Page, useRoute } from './stores/route'
 import 'dayjs/locale/en'
 import 'dayjs/locale/tr'
+import { Page, useRoute } from './composables/useRoute'
 
 async function main() {
   if (import.meta.env.MODE !== 'production') {

src/pages/HomePage.vue

@@ -17,15 +17,15 @@ import { isRepository } from '../utils/notification'
 import { type ItemMeta, menuItem } from '../components/MenuItems.vue'
 import { useKey } from '../composables/useKey'
 import { CheckedNotificationProcess } from '../constants'
-import { useRoute } from '../stores/route'
 import { vContextmenu } from '../directives/contextmenu'
 import { useI18n } from '../composables/useI18n'
+import { useRoute } from '../composables/useRoute'
 
 const store = useStore()
 const route = useRoute()
 const { t } = useI18n()
 
-if (route.state.fetchOnEnter)
+if (route.state.value.fetchOnEnter)
   store.fetchNotifications(true)
 
 function handleOpenNotification(thread: Thread) {

src/pages/LandingPage.vue

@@ -13,8 +13,8 @@ import EmptyState from '../components/EmptyState.vue'
 import { createAuthURL } from '../utils/github'
 import { useTimeoutPool } from '../composables/useTimeoutPool'
 import { getServerPort } from '../api/app'
-import { Page, useRoute } from '../stores/route'
 import { useI18n } from '../composables/useI18n'
+import { Page, useRoute } from '../composables/useRoute'
 
 const store = useStore()
 const route = useRoute()

src/pages/SettingsPage.vue

@@ -20,8 +20,8 @@ import MenuItems, { menuItem } from '../components/MenuItems.vue'
 import Popover from '../components/Popover.vue'
 import Switch from '../components/Switch.vue'
 import SettingItem from '../components/SettingItem.vue'
-import { Page, useRoute } from '../stores/route'
 import { useI18n } from '../composables/useI18n'
+import { Page, useRoute } from '../composables/useRoute'
 
 const route = useRoute()
 const { t, currentLanguage } = useI18n()

src/stores/store.ts

@@ -10,8 +10,8 @@ import { CheckedNotificationProcess, InvokeCommand, notificationApiMutex } from
 import { AppStorage } from '../storage'
 import type { NotificationList, Option } from '../types'
 import { filterNewThreads, isRepository, isThread, toNotificationList } from '../utils/notification'
-import { Page, useRoute } from '../stores/route'
 import { everySome } from '../utils/array'
+import { Page, useRoute } from '../composables/useRoute'
 
 export const useStore = defineStore('store', () => {
   const notifications = shallowRef<NotificationList>([])