Fix traveling world name, fix sorting grouped players in same instance

src/components/Location.vue

@@ -56,6 +56,13 @@
         parse();
     });
 
+    function currentInstanceId() {
+        if (typeof props.traveling !== 'undefined' && props.location === 'traveling') {
+            return props.traveling;
+        }
+        return props.location;
+    }
+
     function parse() {
         isTraveling.value = false;
         groupName.value = '';
@@ -68,7 +75,7 @@
         setText(L, L.instanceName);
         getInstanceName(instanceId)
             .then((name) => {
-                if (name && props.location === L.tag) {
+                if (name && currentInstanceId() === L.tag) {
                     setText(L, name);
                 }
             })
@@ -82,7 +89,7 @@
             groupName.value = L.groupId;
             getGroupName(instanceId)
                 .then((name) => {
-                    if (name && props.location === L.tag) {
+                    if (name && currentInstanceId() === L.tag) {
                         groupName.value = name;
                     }
                 })
@@ -114,17 +121,16 @@
                 text.value = props.hint;
             }
         } else if (L.worldId) {
+            if (L.instanceId) {
+                text.value = `${L.worldId} #${instanceName} ${L.accessTypeName}`;
+            } else {
+                text.value = L.worldId;
+            }
             const ref = cachedWorlds.get(L.worldId);
             if (typeof ref === 'undefined') {
-                const worldName = L.worldId;
-                if (L.instanceId) {
-                    text.value = `${worldName} #${instanceName} ${L.accessTypeName}`;
-                } else {
-                    text.value = worldName;
-                }
                 getWorldName(L.worldId)
                     .then((name) => {
-                        if (name && props.location === L.tag) {
+                        if (name && currentInstanceId() === L.tag) {
                             if (L.instanceId) {
                                 text.value = `${name} #${instanceName} ${L.accessTypeName}`;
                             } else {
@@ -145,10 +151,7 @@
 
     function handleShowWorldDialog() {
         if (props.link) {
-            let instanceId = props.location;
+            let instanceId = currentInstanceId();
-            if (props.traveling && props.location === 'traveling') {
-                instanceId = props.traveling;
-            }
             if (!instanceId && props.hint.length === 8) {
                 verifyShortName('', props.hint);
                 return;
@@ -162,10 +165,7 @@
     }
 
     function handleShowGroupDialog() {
-        let location = props.location;
+        let location = currentInstanceId();
-        if (isTraveling.value) {
-            location = props.traveling;
-        }
         if (!location || !props.link) {
             return;
         }

src/shared/utils/friend.js

@@ -40,6 +40,16 @@ function getFriendsSortFunction(sortMethods) {
                     ) {
                         return 0;
                     }
+                    // sort pending offline to bottom
+                    if (a.pendingOffline && !b.pendingOffline) {
+                        return 1;
+                    }
+                    if (a.pendingOffline && b.pendingOffline) {
+                        return 0;
+                    }
+                    if (!a.pendingOffline && b.pendingOffline) {
+                        return -1;
+                    }
                     if (a.state !== 'online' || b.state !== 'online') {
                         return 0;
                     }

src/stores/friend.js

@@ -16,7 +16,6 @@ import {
     getUserMemo,
     getWorldName,
     migrateMemos,
-    removeFromArray,
     isRealInstance
 } from '../shared/utils';
 import { useAuthStore } from './auth';
@@ -47,14 +46,6 @@ export const useFriendStore = defineStore('Friend', () => {
 
     const state = reactive({
         friends: new Map(),
-        onlineFriends_: [],
-        vipFriends_: [],
-        activeFriends_: [],
-        offlineFriends_: [],
-        sortOnlineFriends: false,
-        sortVIPFriends: false,
-        sortActiveFriends: false,
-        sortOfflineFriends: false,
         localFavoriteFriends: new Set(),
         isRefreshFriendsLoading: false,
         onlineFriendCount: 0,
@@ -125,125 +116,44 @@ export const useFriendStore = defineStore('Friend', () => {
 
     init();
 
-    // friends_(array) may not have change records in pinia because does not use action
-    const onlineFriends_ = computed({
-        get() {
-            return state.onlineFriends_;
-        },
-        set(value) {
-            state.onlineFriends_ = value;
-        }
-    });
-    const vipFriends_ = computed({
-        get() {
-            return state.vipFriends_;
-        },
-        set(value) {
-            state.vipFriends_ = value;
-        }
-    });
-    const activeFriends_ = computed({
-        get() {
-            return state.activeFriends_;
-        },
-        set(value) {
-            state.activeFriends_ = value;
-        }
-    });
-    const offlineFriends_ = computed({
-        get() {
-            return state.offlineFriends_;
-        },
-        set(value) {
-            state.offlineFriends_ = value;
-        }
-    });
-    const sortOnlineFriends = computed({
-        get() {
-            return state.sortOnlineFriends;
-        },
-        set(value) {
-            state.sortOnlineFriends = value;
-        }
-    });
-    const sortVIPFriends = computed({
-        get() {
-            return state.sortVIPFriends;
-        },
-        set(value) {
-            state.sortVIPFriends = value;
-        }
-    });
-    const sortActiveFriends = computed({
-        get() {
-            return state.sortActiveFriends;
-        },
-        set(value) {
-            state.sortActiveFriends = value;
-        }
-    });
-    const sortOfflineFriends = computed({
-        get() {
-            return state.sortOfflineFriends;
-        },
-        set(value) {
-            state.sortOfflineFriends = value;
-        }
-    });
-
-    // VIP friends
     const vipFriends = computed(() => {
-        if (!state.sortVIPFriends) {
+        return Array.from(state.friends.values())
-            return state.vipFriends_;
+            .filter((f) => f.state === 'online' && f.isVIP)
-        }
+            .sort(
-        state.sortVIPFriends = false;
+                getFriendsSortFunction(
-
+                    appearanceSettingsStore.sidebarSortMethods
-        state.vipFriends_.sort(
+                )
-            getFriendsSortFunction(appearanceSettingsStore.sidebarSortMethods)
             );
-        return state.vipFriends_;
     });
 
-    // Online friends
     const onlineFriends = computed(() => {
-        if (!state.sortOnlineFriends) {
+        return Array.from(state.friends.values())
-            return state.onlineFriends_;
+            .filter((f) => f.state === 'online' && !f.isVIP)
-        }
+            .sort(
-        state.sortOnlineFriends = false;
+                getFriendsSortFunction(
-
+                    appearanceSettingsStore.sidebarSortMethods
-        state.onlineFriends_.sort(
+                )
-            getFriendsSortFunction(appearanceSettingsStore.sidebarSortMethods)
             );
-
-        return state.onlineFriends_;
     });
 
-    // Active friends
     const activeFriends = computed(() => {
-        if (!state.sortActiveFriends) {
+        return Array.from(state.friends.values())
-            return state.activeFriends_;
+            .filter((f) => f.state === 'active')
-        }
+            .sort(
-        state.sortActiveFriends = false;
+                getFriendsSortFunction(
-
+                    appearanceSettingsStore.sidebarSortMethods
-        state.activeFriends_.sort(
+                )
-            getFriendsSortFunction(appearanceSettingsStore.sidebarSortMethods)
             );
-
-        return state.activeFriends_;
     });
 
-    // Offline friends
     const offlineFriends = computed(() => {
-        if (!state.sortOfflineFriends) {
+        return Array.from(state.friends.values())
-            return state.offlineFriends_;
+            .filter((f) => f.state === 'offline' || !f.state)
-        }
+            .sort(
-        state.sortOfflineFriends = false;
+                getFriendsSortFunction(
-
+                    appearanceSettingsStore.sidebarSortMethods
-        state.offlineFriends_.sort(
+                )
-            getFriendsSortFunction(appearanceSettingsStore.sidebarSortMethods)
             );
-
-        return state.offlineFriends_;
     });
 
     const isRefreshFriendsLoading = computed({
@@ -280,14 +190,6 @@ export const useFriendStore = defineStore('Friend', () => {
             friendLog.clear();
             state.friendLogTable.data = [];
             groupStore.groupInstances = [];
-            state.vipFriends_ = [];
-            state.onlineFriends_ = [];
-            state.activeFriends_ = [];
-            state.offlineFriends_ = [];
-            state.sortVIPFriends = false;
-            state.sortOnlineFriends = false;
-            state.sortActiveFriends = false;
-            state.sortOfflineFriends = false;
             state.onlineFriendCount = 0;
             if (isLoggedIn) {
                 initFriendsList();
@@ -402,18 +304,6 @@ export const useFriendStore = defineStore('Friend', () => {
                 continue;
             }
             ctx.isVIP = isVIP;
-            if (ctx.state !== 'online') {
-                continue;
-            }
-            if (ctx.isVIP) {
-                removeFromArray(state.onlineFriends_, ctx);
-                state.vipFriends_.push(ctx);
-                state.sortVIPFriends = true;
-            } else {
-                removeFromArray(state.vipFriends_, ctx);
-                state.onlineFriends_.push(ctx);
-                state.sortOnlineFriends = true;
-            }
         }
     }
 
@@ -491,40 +381,13 @@ export const useFriendStore = defineStore('Friend', () => {
                             userId: id
                         });
                     }
-                    if (ctx.isVIP) {
-                        state.sortVIPFriends = true;
-                    } else {
-                        state.sortOnlineFriends = true;
-                    }
                 }
             }
             if (ctx.isVIP !== isVIP) {
                 ctx.isVIP = isVIP;
-                if (ctx.state === 'online') {
-                    if (ctx.isVIP) {
-                        removeFromArray(state.onlineFriends_, ctx);
-                        state.vipFriends_.push(ctx);
-                        state.sortVIPFriends = true;
-                    } else {
-                        removeFromArray(state.vipFriends_, ctx);
-                        state.onlineFriends_.push(ctx);
-                        state.sortOnlineFriends = true;
-                    }
-                }
             }
             if (typeof ref !== 'undefined' && ctx.name !== ref.displayName) {
                 ctx.name = ref.displayName;
-                if (ctx.state === 'online') {
-                    if (ctx.isVIP) {
-                        state.sortVIPFriends = true;
-                    } else {
-                        state.sortOnlineFriends = true;
-                    }
-                } else if (ctx.state === 'active') {
-                    state.sortActiveFriends = true;
-                } else {
-                    state.sortOfflineFriends = true;
-                }
             }
         } else if (
             ctx.state === 'online' &&
@@ -684,32 +547,6 @@ export const useFriendStore = defineStore('Friend', () => {
                 ctx.ref.$active_for = Date.now();
             }
         }
-        if (ctx.state === 'online') {
-            if (ctx.isVIP) {
-                removeFromArray(state.vipFriends_, ctx);
-            } else {
-                removeFromArray(state.onlineFriends_, ctx);
-            }
-        } else if (ctx.state === 'active') {
-            removeFromArray(state.activeFriends_, ctx);
-        } else {
-            removeFromArray(state.offlineFriends_, ctx);
-        }
-        if (newState === 'online') {
-            if (isVIP) {
-                state.vipFriends_.push(ctx);
-                state.sortVIPFriends = true;
-            } else {
-                state.onlineFriends_.push(ctx);
-                state.sortOnlineFriends = true;
-            }
-        } else if (newState === 'active') {
-            state.activeFriends_.push(ctx);
-            state.sortActiveFriends = true;
-        } else {
-            state.offlineFriends_.push(ctx);
-            state.sortOfflineFriends = true;
-        }
         if (ctx.state !== newState) {
             ctx.state = newState;
             updateOnlineFriendCoutner();
@@ -729,17 +566,6 @@ export const useFriendStore = defineStore('Friend', () => {
             return;
         }
         state.friends.delete(id);
-        if (ctx.state === 'online') {
-            if (ctx.isVIP) {
-                removeFromArray(state.vipFriends_, ctx);
-            } else {
-                removeFromArray(state.onlineFriends_, ctx);
-            }
-        } else if (ctx.state === 'active') {
-            removeFromArray(state.activeFriends_, ctx);
-        } else {
-            removeFromArray(state.offlineFriends_, ctx);
-        }
     }
 
     /**
@@ -824,21 +650,6 @@ export const useFriendStore = defineStore('Friend', () => {
             ctx.name = ref.name;
         }
         state.friends.set(id, ctx);
-        if (ctx.state === 'online') {
-            if (ctx.isVIP) {
-                state.vipFriends_.push(ctx);
-                state.sortVIPFriends = true;
-            } else {
-                state.onlineFriends_.push(ctx);
-                state.sortOnlineFriends = true;
-            }
-        } else if (ctx.state === 'active') {
-            state.activeFriends_.push(ctx);
-            state.sortActiveFriends = true;
-        } else {
-            state.offlineFriends_.push(ctx);
-            state.sortOfflineFriends = true;
-        }
     }
 
     /**
@@ -1033,18 +844,6 @@ export const useFriendStore = defineStore('Friend', () => {
         reconnectWebSocket();
     }
 
-    /**
-     * @param {string} userId
-     */
-    function updateFriendGPS(userId) {
-        const ctx = state.friends.get(userId);
-        if (ctx.isVIP) {
-            state.sortVIPFriends = true;
-        } else {
-            state.sortOnlineFriends = true;
-        }
-    }
-
     function updateOnlineFriendCoutner() {
         const onlineFriendCount =
             vipFriends.value.length + onlineFriends.value.length;
@@ -1609,8 +1408,8 @@ export const useFriendStore = defineStore('Friend', () => {
         state.friendNumber = state.friends.size + 1;
         const friendLogTable = getFriendLogFriendOrder();
         for (let i = friendLogTable.length - 1; i > -1; i--) {
-            const friendLog = friendLogTable[i];
+            const friendLogEntry = friendLogTable[i];
-            const ref = friendLog.get(friendLog.id);
+            const ref = friendLog.get(friendLogEntry.id);
             if (!ref) {
                 continue;
             }
@@ -1620,7 +1419,7 @@ export const useFriendStore = defineStore('Friend', () => {
             ref.friendNumber = --state.friendNumber;
             friendLog.set(ref.userId, ref);
             database.setFriendLogCurrent(ref);
-            const friendRef = state.friends.get(friendLog.id);
+            const friendRef = state.friends.get(friendLogEntry.id);
             if (friendRef?.ref) {
                 friendRef.ref.$friendNumber = ref.friendNumber;
             }
@@ -1743,15 +1542,15 @@ export const useFriendStore = defineStore('Friend', () => {
             // will need to apply in reverse order instead
             return;
         }
-        for (const friendLog of friendLogTable) {
+        for (const friendLogEntry of friendLogTable) {
-            const ref = friendLog.get(friendLog.id);
+            const ref = friendLog.get(friendLogEntry.id);
             if (!ref || ref.friendNumber) {
                 continue;
             }
             ref.friendNumber = ++state.friendNumber;
             friendLog.set(ref.userId, ref);
             database.setFriendLogCurrent(ref);
-            const friendRef = state.friends.get(friendLog.id);
+            const friendRef = state.friends.get(friendLogEntry.id);
             if (friendRef?.ref) {
                 friendRef.ref.$friendNumber = ref.friendNumber;
             }
@@ -1773,13 +1572,6 @@ export const useFriendStore = defineStore('Friend', () => {
             .catch(() => {});
     }
 
-    async function saveSidebarSortOrder() {
-        state.sortVIPFriends = true;
-        state.sortOnlineFriends = true;
-        state.sortActiveFriends = true;
-        state.sortOfflineFriends = true;
-    }
-
     async function initFriendsList() {
         const userId = userStore.currentUser.id;
         state.isRefreshFriendsLoading = true;
@@ -1806,10 +1598,6 @@ export const useFriendStore = defineStore('Friend', () => {
 
         tryApplyFriendOrder(); // once again
         getAllUserStats(); // joinCount, lastSeen, timeSpent
-        state.sortVIPFriends = true;
-        state.sortOnlineFriends = true;
-        state.sortActiveFriends = true;
-        state.sortOfflineFriends = true;
 
         // remove old data from json file and migrate to SQLite (July 2021)
         if (await VRCXStorage.Get(`${userId}_friendLogUpdatedAt`)) {
@@ -1823,21 +1611,12 @@ export const useFriendStore = defineStore('Friend', () => {
         state,
 
         friends,
-        onlineFriends_,
-        vipFriends_,
-        activeFriends_,
-        offlineFriends_,
 
         vipFriends,
         onlineFriends,
         activeFriends,
         offlineFriends,
 
-        sortOnlineFriends,
-        sortVIPFriends,
-        sortActiveFriends,
-        sortOfflineFriends,
-
         localFavoriteFriends,
         isRefreshFriendsLoading,
         onlineFriendCount,
@@ -1854,7 +1633,6 @@ export const useFriendStore = defineStore('Friend', () => {
         refreshFriends,
         refreshFriendsList,
         updateOnlineFriendCoutner,
-        updateFriendGPS,
         getAllUserStats,
         initFriendLog,
         migrateFriendLog,
@@ -1862,7 +1640,6 @@ export const useFriendStore = defineStore('Friend', () => {
         getFriendRequest,
         userOnFriend,
         confirmDeleteFriend,
-        saveSidebarSortOrder,
         updateFriendships,
         updateUserCurrentStatus,
         handleFriendAdd,

src/stores/user.js

@@ -1349,7 +1349,6 @@ export const useUserStore = defineStore('User', () => {
                 };
                 feedStore.addFeed(feed);
                 database.addGPSToDatabase(feed);
-                friendStore.updateFriendGPS(ref.id);
                 // clear previousLocation after GPS
                 ref.$previousLocation = '';
                 ref.$travelingToTime = Date.now();
@@ -1363,7 +1362,6 @@ export const useUserStore = defineStore('User', () => {
             // store previous location when user is traveling
             ref.$previousLocation = props.location[1];
             ref.$travelingToTime = Date.now();
-            friendStore.updateFriendGPS(ref.id);
         }
         let imageMatches = false;
         if (

src/views/Settings/Settings.vue

@@ -466,10 +466,7 @@
                             :model-value="sidebarSortMethod1"
                             style="width: 170px"
                             :placeholder="t('view.settings.appearance.side_panel.sorting.placeholder')"
-                            @change="
+                            @change="setSidebarSortMethod1($event)">
-                                setSidebarSortMethod1($event);
-                                saveSidebarSortOrder();
-                            ">
                             <el-option-group :label="t('view.settings.appearance.side_panel.sorting.dropdown_header')">
                                 <el-option
                                     class="x-friend-item"
@@ -501,17 +498,14 @@
                                     value="Sort by Location"></el-option>
                             </el-option-group>
                         </el-select>
-                        <el-icon><ArrowRight /></el-icon>
+                        <el-icon style="padding: 5px"><ArrowRight /></el-icon>
                         <el-select
                             :model-value="sidebarSortMethod2"
                             :disabled="!sidebarSortMethod1"
                             style="width: 170px"
                             clearable
                             :placeholder="t('view.settings.appearance.side_panel.sorting.placeholder')"
-                            @change="
+                            @change="setSidebarSortMethod2($event)">
-                                setSidebarSortMethod2($event);
-                                saveSidebarSortOrder();
-                            ">
                             <el-option-group :label="t('view.settings.appearance.side_panel.sorting.dropdown_header')">
                                 <el-option
                                     class="x-friend-item"
@@ -543,17 +537,14 @@
                                     value="Sort by Location"></el-option>
                             </el-option-group>
                         </el-select>
-                        <el-icon><ArrowRight /></el-icon>
+                        <el-icon style="padding: 5px"><ArrowRight /></el-icon>
                         <el-select
                             :model-value="sidebarSortMethod3"
                             :disabled="!sidebarSortMethod2"
                             style="width: 170px"
                             clearable
                             :placeholder="t('view.settings.appearance.side_panel.sorting.placeholder')"
-                            @change="
+                            @change="setSidebarSortMethod3($event)">
-                                setSidebarSortMethod3($event);
-                                saveSidebarSortOrder();
-                            ">
                             <el-option-group :label="t('view.settings.appearance.side_panel.sorting.dropdown_header')">
                                 <el-option
                                     class="x-friend-item"
@@ -1493,7 +1484,6 @@
     const { showConsole } = useVrcxStore();
     const { disableGameLogDialog } = useGameLogStore();
     const { photonLoggingEnabled } = storeToRefs(usePhotonStore());
-    const { saveSidebarSortOrder } = useFriendStore();
     const { cachedWorlds } = useWorldStore();
     const { cachedInstances } = useInstanceStore();
     const { showLaunchOptions } = useLaunchStore();

src/views/Sidebar/components/FriendsSidebar.vue

@@ -175,7 +175,7 @@
     import { useI18n } from 'vue-i18n';
     import FriendItem from '../../../components/FriendItem.vue';
     import configRepository from '../../../service/config';
-    import { isRealInstance, userImage, userStatusClass } from '../../../shared/utils';
+    import { isRealInstance, userImage, userStatusClass, getFriendsSortFunction } from '../../../shared/utils';
     import {
         useAdvancedSettingsStore,
         useAppearanceSettingsStore,
@@ -189,7 +189,7 @@
     const { t } = useI18n();
 
     const { vipFriends, onlineFriends, activeFriends, offlineFriends } = storeToRefs(useFriendStore());
-    const { isSidebarGroupByInstance, isHideFriendsInSameInstance, isSidebarDivideByFriendGroup } =
+    const { isSidebarGroupByInstance, isHideFriendsInSameInstance, isSidebarDivideByFriendGroup, sidebarSortMethods } =
         storeToRefs(useAppearanceSettingsStore());
     const { gameLogDisabled } = storeToRefs(useAdvancedSettingsStore());
     const { showUserDialog } = useUserStore();
@@ -234,7 +234,7 @@
         const sortedFriendsList = [];
         for (const group of Object.values(friendsList)) {
             if (group.length > 1) {
-                sortedFriendsList.push(group.sort((a, b) => a.ref?.$location_at - b.ref?.$location_at));
+                sortedFriendsList.push(group.sort(getFriendsSortFunction(sidebarSortMethods.value)));
             }
         }