feat: add vue-router

src/views/FriendList/FriendList.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-show="menuActiveIndex === 'friendList'" class="x-container">
+    <div class="x-container">
         <div style="padding: 0 10px 0 10px">
             <div style="display: flex; align-items: center; justify-content: space-between">
                 <span class="header">{{ t('view.friend_list.header') }}</span>
@@ -256,11 +256,12 @@
 </template>
 
 <script setup>
-    import { nextTick, onMounted, reactive, ref, watch } from 'vue';
     import { Close, Loading, Refresh, RefreshLeft } from '@element-plus/icons-vue';
+    import { nextTick, reactive, ref, watch } from 'vue';
     import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
+    import { useRoute } from 'vue-router';
 
     import {
         formatDateFilter,
@@ -279,7 +280,6 @@
         useFriendStore,
         useGalleryStore,
         useSearchStore,
-        useUiStore,
         useUserStore
     } from '../../stores';
     import { friendRequest, userRequest } from '../../api';
@@ -293,7 +293,6 @@
     const { getAllUserStats, confirmDeleteFriend, handleFriendDelete } = useFriendStore();
     const { randomUserColours } = storeToRefs(useAppearanceSettingsStore());
     const { showUserDialog } = useUserStore();
-    const { menuActiveIndex } = storeToRefs(useUiStore());
     const { stringComparer, friendsListSearch } = storeToRefs(useSearchStore());
     const { showFullscreenImageDialog } = useGalleryStore();
 
@@ -310,15 +309,19 @@
     const friendsListSearchFilterVIP = ref(false);
     const friendsListBulkUnfriendForceUpdate = ref(0);
 
-    watch(menuActiveIndex, (val) => {
-        if (val === 'friendList') nextTick(friendsListSearchChange);
-    });
+    const route = useRoute();
 
-    onMounted(() => {
-        friendsListSearchChange();
-    });
+    watch(
+        () => route.path,
+        (newPath, oldPath) => {
+            console.log('Route changed - FriendsList', newPath, oldPath);
+            nextTick(() => friendsListSearchChange());
+        },
+        { immediate: true }
+    );
 
     function friendsListSearchChange() {
+        console.log('Friends List Search Change');
         friendsListLoading.value = true;
         let query = '';
         let cleanedQuery = '';