feat: add vue-router

src/stores/search.js

@@ -2,6 +2,7 @@ import { computed, ref, watch } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 
 import { compareByName, localeIncludes } from '../shared/utils';
 import { instanceRequest, userRequest } from '../api';
@@ -11,14 +12,13 @@ import { useAppearanceSettingsStore } from './settings/appearance';
 import { useAvatarStore } from './avatar';
 import { useFriendStore } from './friend';
 import { useGroupStore } from './group';
-import { useUiStore } from './ui';
 import { useUserStore } from './user';
 import { useWorldStore } from './world';
 import { watchState } from '../service/watchState';
 
 export const useSearchStore = defineStore('Search', () => {
     const userStore = useUserStore();
-    const uiStore = useUiStore();
+    const router = useRouter();
     const appearanceSettingsStore = useAppearanceSettingsStore();
     const friendStore = useFriendStore();
     const worldStore = useWorldStore();
@@ -180,20 +180,22 @@ export const useSearchStore = defineStore('Search', () => {
     }
 
     function quickSearchChange(value) {
-        if (value) {
-            if (value.startsWith('search:')) {
-                const searchText = value.substr(7);
-                if (quickSearchItems.value.length > 1 && searchText.length) {
-                    friendsListSearch.value = searchText;
-                    uiStore.menuActiveIndex = 'friendList';
-                } else {
-                    uiStore.menuActiveIndex = 'search';
-                    searchText.value = searchText;
-                    userStore.lookupUser({ displayName: searchText });
-                }
+        if (!value) {
+            return;
+        }
+
+        if (value.startsWith('search:')) {
+            const searchTerm = value.slice(7);
+            if (quickSearchItems.value.length > 1 && searchTerm.length) {
+                friendsListSearch.value = searchTerm;
+                router.push({ name: 'friendList' });
             } else {
-                userStore.showUserDialog(value);
+                router.push({ name: 'search' });
+                searchText.value = searchTerm;
+                userStore.lookupUser({ displayName: searchTerm });
             }
+        } else {
+            userStore.showUserDialog(value);
         }
     }
 

src/stores/settings/appearance.js

@@ -2,6 +2,7 @@ import { computed, ref, watch } from 'vue';
 import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 
 import {
     HueToHex,
@@ -18,7 +19,6 @@ import { useFriendStore } from '../friend';
 import { useGameLogStore } from '../gameLog';
 import { useModerationStore } from '../moderation';
 import { useNotificationStore } from '../notification';
-import { useUiStore } from '../ui';
 import { useUserStore } from '../user';
 import { useVrStore } from '../vr';
 import { useVrcxStore } from '../vrcx';
@@ -38,7 +38,7 @@ export const useAppearanceSettingsStore = defineStore(
         const gameLogStore = useGameLogStore();
         const vrcxStore = useVrcxStore();
         const userStore = useUserStore();
-        const uiStore = useUiStore();
+        const router = useRouter();
 
         const { t, availableLocales, locale } = useI18n();
 
@@ -80,9 +80,10 @@ export const useAppearanceSettingsStore = defineStore(
         });
         const currentCulture = ref('');
         const isSideBarTabShow = computed(() => {
+            const currentRouteName = router.currentRoute.value?.name;
             return !(
-                uiStore.menuActiveIndex === 'friendList' ||
-                uiStore.menuActiveIndex === 'charts'
+                currentRouteName === 'friendList' ||
+                currentRouteName === 'charts'
             );
         });
 

src/stores/ui.js

@@ -1,11 +1,13 @@
 import { ref, watch } from 'vue';
 import { defineStore } from 'pinia';
+import { useRouter } from 'vue-router';
 
 import { useNotificationStore } from './notification';
 import { watchState } from '../service/watchState';
 
 export const useUiStore = defineStore('Ui', () => {
     const notificationStore = useNotificationStore();
+    const router = useRouter();
 
     document.addEventListener('keydown', function (e) {
         if (e.shiftKey) {
@@ -19,7 +21,6 @@ export const useUiStore = defineStore('Ui', () => {
         }
     });
 
-    const menuActiveIndex = ref('feed');
     const notifiedMenus = ref([]);
     const shiftHeld = ref(false);
 
@@ -27,40 +28,43 @@ export const useUiStore = defineStore('Ui', () => {
         () => watchState.isLoggedIn,
         (isLoggedIn) => {
             if (isLoggedIn) {
-                menuActiveIndex.value = 'feed';
+                router.push({ name: 'feed' });
             }
         },
         { flush: 'sync' }
     );
 
     function notifyMenu(index) {
+        const currentRouteName = router.currentRoute.value?.name;
         if (
-            index !== menuActiveIndex.value &&
+            index !== currentRouteName &&
             !notifiedMenus.value.includes(index)
         ) {
             notifiedMenus.value.push(index);
         }
     }
 
-    function selectMenu(index) {
-        menuActiveIndex.value = index;
-        removeNotify(index);
-        if (index === 'notification') {
-            notificationStore.unseenNotifications = [];
+    watch(
+        () => router.currentRoute.value.name,
+        (routeName) => {
+            if (routeName) {
+                removeNotify(routeName);
+                if (routeName === 'notification') {
+                    notificationStore.unseenNotifications = [];
+                }
+            }
         }
-    }
+    );
 
     function removeNotify(index) {
         notifiedMenus.value = notifiedMenus.value.filter((i) => i !== index);
     }
 
     return {
-        menuActiveIndex,
         notifiedMenus,
         shiftHeld,
 
         notifyMenu,
-        selectMenu,
         removeNotify
     };
 });