Use pinia for router

Author: kadiryazici

src/App.vue

@@ -9,7 +9,7 @@ import { useStore } from './stores/store'
 import LandingPage from './pages/LandingPage.vue'
 import { useInterval } from './composables/useInterval'
 import { AppStorage } from './storage'
-import { Page, useRoute } from './composables/useRoute'
+import { Page, useRoute } from './stores/route'
 
 const store = useStore()
 const route = useRoute()
@@ -35,8 +35,8 @@ watchEffect(() => {
   <AppSidebar />
 
   <AppScroller>
-    <HomePage v-if="route.currentPage.value === Page.Home" />
-    <SettingsPage v-else-if="route.currentPage.value === Page.Settings" />
-    <LandingPage v-else-if="route.currentPage.value === Page.Landing" />
+    <HomePage v-if="route.currentPage === Page.Home" />
+    <SettingsPage v-else-if="route.currentPage === Page.Settings" />
+    <LandingPage v-else-if="route.currentPage === Page.Landing" />
   </AppScroller>
 </template>

src/assets/main.scss

@@ -9,7 +9,7 @@ $colors: (
     switch-bg: var(--gray) var(--gray),
     content-bg: rgba(30, 30, 30, .8) rgb(30, 30, 30),
     page-header-bg: rgba(43, 43, 43, .6) rgb(43, 43, 43),
-    popover-bg: rgba(20, 20, 20, .6) rgb(26, 26, 26),
+    popover-bg: rgba(30, 30, 30, .6) rgb(26, 26, 26),
     bottom-bar-bg: rgba(21, 21, 21, 0.2) rgb(21, 21, 21),
     sidebar-bg: rgba(50, 50, 50, .75) rgb(50, 50, 50),
     app-border: rgb(90, 90, 90) rgb(90, 90, 90),

src/components/AppScroller.vue

@@ -8,7 +8,7 @@ import { useStore } from '../stores/store'
 import type { Option } from '../types'
 import { batchFn } from '../utils/batch'
 import { ColorPreference } from '../constants'
-import { useRoute } from '../composables/useRoute'
+import { useRoute } from '../stores/route'
 
 const store = useStore()
 const route = useRoute()
@@ -18,11 +18,11 @@ const focus = batchFn(() => {
   scrollView.value?.getElement()?.focus()
 })
 
-watch(route.currentPage, focus, { flush: 'post' })
+watch(() => route.currentPage, focus, { flush: 'post' })
 useTauriEvent('window:hidden', focus)
 onMounted(focus)
 
-watch(route.currentPage, () => {
+watch(() => route.currentPage, () => {
   const element = scrollView.value?.osInstance()?.elements().scrollOffsetElement
   if (element)
     element.scrollTop = 0
@@ -45,7 +45,7 @@ const options = computedEager<OverlayScrollbarsOptions>(() => ({
     tabindex="-1"
     class="main"
     :class="{
-      'main-with-padding': route.meta.value.withPadding,
+      'main-with-padding': route.meta.withPadding,
     }"
   >
     <slot />

src/components/AppSidebar.vue

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

src/main.ts

@@ -16,7 +16,7 @@ import { AppStorage, cacheStorageFromDisk } from './storage'
 import { useStore } from './stores/store'
 import { initDevtools } from './utils/initDevtools'
 import { useKey } from './composables/useKey'
-import { Page, useRoute } from './composables/useRoute'
+import { Page, useRoute } from './stores/route'
 
 async function main() {
   if (import.meta.env.DEV) {

src/pages/HomePage.vue

@@ -20,12 +20,12 @@ import MenuItems, { menuItem } from '../components/MenuItems.vue'
 import { type UseKeyOptions, useKey } from '../composables/useKey'
 import { CheckedNotificationProcess, notificationApiMutex } from '../constants'
 import { everySome } from '../utils/array'
-import { useRoute } from '../composables/useRoute'
+import { useRoute } from '../stores/route'
 
 const store = useStore()
 const route = useRoute()
 
-if (route.state.value.fetchOnEnter)
+if (route.state.fetchOnEnter)
   store.fetchNotifications(true)
 
 function handleOpenNotification(thread: Thread) {

src/pages/LandingPage.vue

@@ -13,7 +13,7 @@ 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 '../composables/useRoute'
+import { Page, useRoute } from '../stores/route'
 
 const store = useStore()
 const route = useRoute()

src/pages/SettingsPage.vue

@@ -20,7 +20,7 @@ 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 '../composables/useRoute'
+import { Page, useRoute } from '../stores/route'
 
 const route = useRoute()
 

src/composables/useRoute.ts renamed to src/stores/route.ts

@@ -1,5 +1,6 @@
 import { readonly, ref, shallowRef } from 'vue'
-import { computedEager, createSharedComposable } from '@vueuse/core'
+import { computedEager } from '@vueuse/core'
+import { defineStore } from 'pinia'
 import { type Option } from '../types'
 
 export enum Page {
@@ -22,7 +23,7 @@ const metaMap = {
   [Page.Landing]: {},
 }
 
-export const useRoute = createSharedComposable(() => {
+export const useRoute = defineStore('route', () => {
   const currentPage = ref(Page.Landing)
   const pageFrom = ref<Option<Page>>(null)
   const state = shallowRef<PageState>({})

src/stores/store.ts

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