Extract route mechanism to composable

Author: kadiryazici

src/App.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
 import { watchEffect } from 'vue'
-import AppContent from './components/AppContent.vue'
+import AppScroller from './components/AppScroller.vue'
 import AppSidebar from './components/AppSidebar.vue'
 import HomePage from './pages/HomePage.vue'
 import SettingsPage from './pages/SettingsPage.vue'
-import { ColorPreference, FETCH_INTERVAL_DURATION, Page } from './constants'
+import { ColorPreference, FETCH_INTERVAL_DURATION } from './constants'
 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'
 
 const store = useStore()
+const route = useRoute()
 
 useInterval(() => {
   if (AppStorage.get('accessToken') && AppStorage.get('user'))
@@ -32,9 +34,9 @@ watchEffect(() => {
 
   <AppSidebar />
 
-  <AppContent>
-    <HomePage v-if="store.currentPage === Page.Home" />
-    <SettingsPage v-else-if="store.currentPage === Page.Settings" />
-    <LandingPage v-else-if="store.currentPage === Page.Landing" />
-  </AppContent>
+  <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" />
+  </AppScroller>
 </template>

src/components/AppContent.vue renamed to src/components/AppScroller.vue

@@ -8,19 +8,21 @@ import { useStore } from '../stores/store'
 import type { Option } from '../types'
 import { batchFn } from '../utils/batch'
 import { ColorPreference } from '../constants'
+import { useRoute } from '../composables/useRoute'
 
 const store = useStore()
+const route = useRoute()
 const scrollView = ref<Option<OverlayScrollbarsComponentRef>>(null)
 
 const focus = batchFn(() => {
   scrollView.value?.getElement()?.focus()
 })
 
-watch(() => store.currentPage, focus, { flush: 'post' })
+watch(route.currentPage, focus, { flush: 'post' })
 useTauriEvent('window:hidden', focus)
 onMounted(focus)
 
-watch(() => store.currentPage, () => {
+watch(route.currentPage, () => {
   const element = scrollView.value?.osInstance()?.elements().scrollOffsetElement
   if (element)
     element.scrollTop = 0
@@ -42,6 +44,9 @@ const options = computedEager<OverlayScrollbarsOptions>(() => ({
     :options="options"
     tabindex="-1"
     class="main"
+    :class="{
+      'main-with-padding': route.meta.value.withPadding,
+    }"
   >
     <slot />
   </ScrollView>
@@ -56,5 +61,9 @@ const options = computedEager<OverlayScrollbarsOptions>(() => ({
   position: relative;
   outline: none;
   scroll-padding: 10px 10px;
+
+  &-with-padding {
+    padding: 10px;
+  }
 }
 </style>

src/components/AppSidebar.vue

@@ -2,10 +2,11 @@
 import { open } from '@tauri-apps/api/shell'
 import { exit } from '@tauri-apps/api/process'
 import { computed } from 'vue'
-import { Page, REPO_LINK } from '../constants'
+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 { Icons } from './Icons'
 import SidebarButton from './SidebarButton.vue'
 import Popover from './Popover.vue'
@@ -15,6 +16,7 @@ import SlotRef from './SlotRef.vue'
 import PopoverContentInstallUpdate from './PopoverContentInstallUpdate.vue'
 
 const store = useStore()
+const route = useRoute()
 
 function openCurrentReleaseChangelog() {
   open(`${REPO_LINK}/blob/main/CHANGELOG.md#${__APP_VERSION__.replace(/\./g, '')}`)
@@ -29,7 +31,7 @@ const moreItems = computed(() => [
   menuItem({
     key: 'settings',
     meta: { text: 'Settings', icon: Icons.Gear16 },
-    onSelect: () => store.setPage(Page.Settings),
+    onSelect: () => route.go(Page.Settings),
   }),
   AppStorage.get('user') != null && menuItem({
     key: 'logout',
@@ -45,7 +47,7 @@ const moreItems = computed(() => [
 
 useKey('r', () => {
   store.fetchNotifications(true)
-}, { source: () => store.currentPage === Page.Home })
+}, { source: () => route.currentPage.value === Page.Home })
 </script>
 
 <template>
@@ -105,7 +107,7 @@ useKey('r', () => {
       <SlotRef>
         <template #default>
           <SidebarButton
-            :disabled="store.currentPage !== Page.Home"
+            :disabled="route.currentPage.value !== Page.Home"
             @click="store.fetchNotifications(true)"
           >
             <Icons.Sync16 />

src/composables/useRoute.ts

@@ -0,0 +1,48 @@
+import { readonly, ref, shallowRef } from 'vue'
+import { computedEager, createSharedComposable } from '@vueuse/core'
+import { type Option } from '../types'
+
+export enum Page {
+  Settings = 'Settings',
+  Home = 'Home',
+  Landing = 'Landing',
+}
+
+export interface PageState {
+  fetchOnEnter?: boolean
+}
+
+export interface PageMeta {
+  withPadding?: boolean
+}
+
+const metaMap = {
+  [Page.Settings]: {},
+  [Page.Home]: { withPadding: true },
+  [Page.Landing]: {},
+}
+
+export const useRoute = createSharedComposable(() => {
+  const currentPage = ref(Page.Landing)
+  const pageFrom = ref<Option<Page>>(null)
+  const state = shallowRef<PageState>({})
+
+  function go(page: Page, pageState: PageState = {}) {
+    if (page === currentPage.value)
+      return
+
+    pageFrom.value = currentPage.value
+    currentPage.value = page
+    state.value = pageState
+  }
+
+  const meta = computedEager<PageMeta>(() => metaMap[currentPage.value])
+
+  return {
+    go,
+    currentPage: readonly(currentPage),
+    pageFrom: readonly(pageFrom),
+    state: readonly(state),
+    meta,
+  }
+})

src/constants.ts

@@ -26,12 +26,6 @@ export const REPO_LINK = `https://github.com/${REPOSITORY_PATH}` as const
 export const FETCH_INTERVAL_DURATION = 60000
 export const SERVER_PORTS = [23846, 15830, 12840]
 
-export enum Page {
-  Settings = 'Settings',
-  Home = 'Home',
-  Landing = 'Landing',
-}
-
 export enum InvokeCommand {
   PlayNotificationSound = 'play_notification_sound',
   SetIconTemplate = 'set_icon_template',

src/main.ts

@@ -14,9 +14,9 @@ import { checkUpdate } from '@tauri-apps/api/updater'
 import App from './App.vue'
 import { AppStorage, cacheStorageFromDisk } from './storage'
 import { useStore } from './stores/store'
-import { Page } from './constants'
 import { initDevtools } from './utils/initDevtools'
 import { useKey } from './composables/useKey'
+import { Page, useRoute } from './composables/useRoute'
 
 async function main() {
   if (import.meta.env.DEV) {
@@ -35,6 +35,7 @@ async function main() {
   await cacheStorageFromDisk()
 
   const store = useStore(pinia)
+  const route = useRoute()
   const token = AppStorage.get('accessToken')
   const user = AppStorage.get('user')
 
@@ -46,7 +47,7 @@ async function main() {
     AppStorage.set('showSystemNotifications', false)
 
   if (token && user) {
-    store.setPage(Page.Home)
+    route.go(Page.Home)
     store.fetchNotifications(true)
   }
 

src/pages/HomePage.vue

@@ -20,10 +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'
 
 const store = useStore()
+const route = useRoute()
 
-if (store.currentPageState.fetchOnEnter)
+if (route.state.value.fetchOnEnter)
   store.fetchNotifications(true)
 
 function handleOpenNotification(thread: Thread) {
@@ -318,7 +320,6 @@ whenever(() => store.skeletonVisible, () => {
     :wowerlayOptions="{ position: 'right-start' }"
     @visibilityChange="(visible) => {
       popoverVisible = visible;
-      ({}).constructor.constructor('return console.log')()({ visible })
 
       if (!visible) {
         popoverTarget = null
@@ -328,64 +329,39 @@ whenever(() => store.skeletonVisible, () => {
     <MenuItems :items="contextMenuItems" />
   </Popover>
 
-  <div class="home-wrapper">
-    <div
-      ref="home"
-      class="home"
-    >
-      <NotificationSkeleton v-if="store.skeletonVisible" />
-
-      <EmptyState
-        v-else-if="store.failedLoadingNotifications"
-        :iconSize="EmptyStateIconSize.Big"
-        :icon="Icons.X"
-        description="Oopsie! Couldn't load notifications."
-      >
-        <template #footer>
-          <AppButton @click="store.fetchNotifications(true)">
-            Refresh
-          </AppButton>
-        </template>
-      </EmptyState>
-
-      <EmptyState
-        v-else-if="store.notifications.length === 0"
-        :iconSize="EmptyStateIconSize.Big"
-        :icon="Icons.Check"
-        description="It's all clear sir!"
-      />
-
-      <NotificationItem
-        v-for="item of store.notifications"
-        :key="item.id"
-        :value="item"
-        :checked="isChecked(item)"
-        :checkable="isCheckable(item)"
-        :indeterminate="isIndeterminate(item)"
-        :checkboxVisible="store.checkedItems.length > 0"
-        @contextmenu="handleThreadContextmenu"
-        @click:notification="handleClickNotification"
-        @click:repo="handleRepoClick"
-        @update:checked="(value) => handleUpdateChecked(item, value)"
-      />
-    </div>
-  </div>
-</template>
+  <NotificationSkeleton v-if="store.skeletonVisible" />
 
-<style lang="scss" scoped>
-  .home {
-    padding: 10px;
-    width: 100%;
-    height: 100%;
-    scroll-padding-top: 10px;
-    scroll-padding-bottom: 10px;
-    position: relative;
-
-    &-wrapper {
-      display: flex;
-      flex-flow: column nowrap;
-      height: 100%;
-      width: 100%;
-    }
-  }
-</style>
+  <EmptyState
+    v-else-if="store.failedLoadingNotifications"
+    :iconSize="EmptyStateIconSize.Big"
+    :icon="Icons.X"
+    description="Oopsie! Couldn't load notifications."
+  >
+    <template #footer>
+      <AppButton @click="store.fetchNotifications(true)">
+        Refresh
+      </AppButton>
+    </template>
+  </EmptyState>
+
+  <EmptyState
+    v-else-if="store.notifications.length === 0"
+    :iconSize="EmptyStateIconSize.Big"
+    :icon="Icons.Check"
+    description="It's all clear sir!"
+  />
+
+  <NotificationItem
+    v-for="item of store.notifications"
+    :key="item.id"
+    :value="item"
+    :checked="isChecked(item)"
+    :checkable="isCheckable(item)"
+    :indeterminate="isIndeterminate(item)"
+    :checkboxVisible="store.checkedItems.length > 0"
+    @contextmenu="handleThreadContextmenu"
+    @click:notification="handleClickNotification"
+    @click:repo="handleRepoClick"
+    @update:checked="(value) => handleUpdateChecked(item, value)"
+  />
+</template>

src/pages/LandingPage.vue

@@ -3,7 +3,7 @@ import { open } from '@tauri-apps/api/shell'
 import { ref } from 'vue'
 import { invoke } from '@tauri-apps/api/tauri'
 import AppButton from '../components/AppButton.vue'
-import { InvokeCommand, Page } from '../constants'
+import { InvokeCommand } from '../constants'
 import { useStore } from '../stores/store'
 import { useTauriEvent } from '../composables/useTauriEvent'
 import { getAccessToken } from '../api/token'
@@ -13,8 +13,10 @@ 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'
 
 const store = useStore()
+const route = useRoute()
 const processing = ref(true)
 
 useTauriEvent<string>('code', async ({ payload }) => {
@@ -35,7 +37,7 @@ useTauriEvent<string>('code', async ({ payload }) => {
     AppStorage.set('accessToken', access_token)
     AppStorage.set('user', user)
     invoke(InvokeCommand.StopServer)
-    store.setPage(Page.Home)
+    route.go(Page.Home)
     store.fetchNotifications(true)
   }
   finally {