rework sort, clean up old sort settings, and refactor badly named friend groups (#913)

* rework sort, clean up old sort settings, and refactor badly named friend groups

* switch sorting to user selected dynamic number of methods

html/src/app.js

@@ -8972,24 +8972,20 @@ speechSynthesis.getVoices();
     $app.data.pendingActiveFriends = new Set();
     $app.data.friendsNo = 0;
     $app.data.isFriendsGroupMe = true;
-    $app.data.isFriendsGroup0 = true;
+    $app.data.isVIPFriends = true;
-    $app.data.isFriendsGroup1 = true;
+    $app.data.isOnlineFriends = true;
-    $app.data.isFriendsGroup2 = true;
+    $app.data.isActiveFriends = true;
-    $app.data.isFriendsGroup3 = false;
+    $app.data.isOfflineFriends = false;
     $app.data.isGroupInstances = false;
     $app.data.groupInstances = [];
-    $app.data.friendsGroup0_ = [];
+    $app.data.vipFriends_ = [];
-    $app.data.friendsGroup1_ = [];
+    $app.data.onlineFriends_ = [];
-    $app.data.friendsGroup2_ = [];
+    $app.data.activeFriends_ = [];
-    $app.data.friendsGroup3_ = [];
+    $app.data.offlineFriends_ = [];
-    $app.data.friendsGroupA_ = [];
+    $app.data.sortVIPFriends = false;
-    $app.data.friendsGroupB_ = [];
+    $app.data.sortOnlineFriends = false;
-    $app.data.friendsGroupC_ = [];
+    $app.data.sortActiveFriends = false;
-    $app.data.friendsGroupD_ = [];
+    $app.data.sortOfflineFriends = false;
-    $app.data.sortFriendsGroup0 = false;
-    $app.data.sortFriendsGroup1 = false;
-    $app.data.sortFriendsGroup2 = false;
-    $app.data.sortFriendsGroup3 = false;
 
     $app.methods.saveFriendsGroupStates = async function () {
         await configRepository.setBool(
@@ -8998,19 +8994,19 @@ speechSynthesis.getVoices();
         );
         await configRepository.setBool(
             'VRCX_isFriendsGroupFavorites',
-            this.isFriendsGroup0
+            this.isVIPFriends
         );
         await configRepository.setBool(
             'VRCX_isFriendsGroupOnline',
-            this.isFriendsGroup1
+            this.isOnlineFriends
         );
         await configRepository.setBool(
             'VRCX_isFriendsGroupActive',
-            this.isFriendsGroup2
+            this.isActiveFriends
         );
         await configRepository.setBool(
             'VRCX_isFriendsGroupOffline',
-            this.isFriendsGroup3
+            this.isOfflineFriends
         );
     };
 
@@ -9019,19 +9015,19 @@ speechSynthesis.getVoices();
             'VRCX_isFriendsGroupMe',
             true
         );
-        this.isFriendsGroup0 = await configRepository.getBool(
+        this.isVIPFriends = await configRepository.getBool(
             'VRCX_isFriendsGroupFavorites',
             true
         );
-        this.isFriendsGroup1 = await configRepository.getBool(
+        this.isOnlineFriends = await configRepository.getBool(
             'VRCX_isFriendsGroupOnline',
             true
         );
-        this.isFriendsGroup2 = await configRepository.getBool(
+        this.isActiveFriends = await configRepository.getBool(
             'VRCX_isFriendsGroupActive',
             false
         );
-        this.isFriendsGroup3 = await configRepository.getBool(
+        this.isOfflineFriends = await configRepository.getBool(
             'VRCX_isFriendsGroupOffline',
             false
         );
@@ -9082,22 +9078,18 @@ speechSynthesis.getVoices();
         $app.friends.clear();
         $app.pendingActiveFriends.clear();
         $app.friendsNo = 0;
-        $app.isFriendsGroup0 = true;
+        $app.isVIPFriends = true;
-        $app.isFriendsGroup1 = true;
+        $app.isOnlineFriends = true;
-        $app.isFriendsGroup2 = true;
+        $app.isActiveFriends = true;
-        $app.isFriendsGroup3 = false;
+        $app.isOfflineFriends = false;
-        $app.friendsGroup0_ = [];
+        $app.vipFriends_ = [];
-        $app.friendsGroup1_ = [];
+        $app.onlineFriends_ = [];
-        $app.friendsGroup2_ = [];
+        $app.activeFriends_ = [];
-        $app.friendsGroup3_ = [];
+        $app.offlineFriends_ = [];
-        $app.friendsGroupA_ = [];
+        $app.sortVIPFriends = false;
-        $app.friendsGroupB_ = [];
+        $app.sortOnlineFriends = false;
-        $app.friendsGroupC_ = [];
+        $app.sortActiveFriends = false;
-        $app.friendsGroupD_ = [];
+        $app.sortOfflineFriends = false;
-        $app.sortFriendsGroup0 = false;
-        $app.sortFriendsGroup1 = false;
-        $app.sortFriendsGroup2 = false;
-        $app.sortFriendsGroup3 = false;
     });
 
     API.$on('USER:CURRENT', function (args) {
@@ -9137,9 +9129,9 @@ speechSynthesis.getVoices();
         // If we just got user less then 1 min before code call, don't call it again
         if ($app.nextCurrentUserRefresh < 720)
         {
-            await API.getCurrentUser().catch((err) => {
+        await API.getCurrentUser().catch((err) => {
-                console.error(err);
+            console.error(err);
-            });
+        });
         }
         await API.refreshFriends();
         API.reconnectWebSocket();
@@ -9213,22 +9205,18 @@ speechSynthesis.getVoices();
         this.friends.set(id, ctx);
         if (ctx.state === 'online') {
             if (ctx.isVIP) {
-                this.friendsGroup0_.push(ctx);
+                this.vipFriends_.push(ctx);
-                this.friendsGroupA_.unshift(ctx);
+                this.sortVIPFriends = true;
-                this.sortFriendsGroup0 = true;
             } else {
-                this.friendsGroup1_.push(ctx);
+                this.onlineFriends_.push(ctx);
-                this.friendsGroupB_.unshift(ctx);
+                this.sortOnlineFriends = true;
-                this.sortFriendsGroup1 = true;
             }
         } else if (ctx.state === 'active') {
-            this.friendsGroup2_.push(ctx);
+            this.activeFriends_.push(ctx);
-            this.friendsGroupC_.unshift(ctx);
+            this.sortActiveFriends = true;
-            this.sortFriendsGroup2 = true;
         } else {
-            this.friendsGroup3_.push(ctx);
+            this.offlineFriends_.push(ctx);
-            this.friendsGroupD_.unshift(ctx);
+            this.sortOfflineFriends = true;
-            this.sortFriendsGroup3 = true;
         }
     };
 
@@ -9240,18 +9228,14 @@ speechSynthesis.getVoices();
         this.friends.delete(id);
         if (ctx.state === 'online') {
             if (ctx.isVIP) {
-                removeFromArray(this.friendsGroup0_, ctx);
+                removeFromArray(this.vipFriends_, ctx);
-                removeFromArray(this.friendsGroupA_, ctx);
             } else {
-                removeFromArray(this.friendsGroup1_, ctx);
+                removeFromArray(this.onlineFriends_, ctx);
-                removeFromArray(this.friendsGroupB_, ctx);
             }
         } else if (ctx.state === 'active') {
-            removeFromArray(this.friendsGroup2_, ctx);
+            removeFromArray(this.activeFriends_, ctx);
-            removeFromArray(this.friendsGroupC_, ctx);
         } else {
-            removeFromArray(this.friendsGroup3_, ctx);
+            removeFromArray(this.offlineFriends_, ctx);
-            removeFromArray(this.friendsGroupD_, ctx);
         }
     };
 
@@ -9329,37 +9313,23 @@ speechSynthesis.getVoices();
                         });
                     }
                     if (ctx.isVIP) {
-                        removeFromArray(this.friendsGroupA_, ctx);
+                        this.sortVIPFriends = true;
-                        this.friendsGroupA_.unshift(ctx);
-                        this.sortFriendsGroup0 = true;
                     } else {
-                        removeFromArray(this.friendsGroupB_, ctx);
+                        this.sortOnlineFriends = true;
-                        this.friendsGroupB_.unshift(ctx);
-                        this.sortFriendsGroup0 = true;
                     }
-                } else if (ctx.state === 'active') {
-                    removeFromArray(this.friendsGroupC_, ctx);
-                    this.friendsGroupC_.push(ctx);
-                } else {
-                    removeFromArray(this.friendsGroupD_, ctx);
-                    this.friendsGroupD_.push(ctx);
                 }
             }
             if (ctx.isVIP !== isVIP) {
                 ctx.isVIP = isVIP;
                 if (ctx.state === 'online') {
                     if (ctx.isVIP) {
-                        removeFromArray(this.friendsGroup1_, ctx);
+                        removeFromArray(this.onlineFriends_, ctx);
-                        removeFromArray(this.friendsGroupB_, ctx);
+                        this.vipFriends_.push(ctx);
-                        this.friendsGroup0_.push(ctx);
+                        this.sortVIPFriends = true;
-                        this.friendsGroupA_.unshift(ctx);
-                        this.sortFriendsGroup0 = true;
                     } else {
-                        removeFromArray(this.friendsGroup0_, ctx);
+                        removeFromArray(this.vipFriends_, ctx);
-                        removeFromArray(this.friendsGroupA_, ctx);
+                        this.onlineFriends_.push(ctx);
-                        this.friendsGroup1_.push(ctx);
+                        this.sortOnlineFriends = true;
-                        this.friendsGroupB_.unshift(ctx);
-                        this.sortFriendsGroup1 = true;
                     }
                 }
             }
@@ -9367,14 +9337,14 @@ speechSynthesis.getVoices();
                 ctx.name = ref.displayName;
                 if (ctx.state === 'online') {
                     if (ctx.isVIP) {
-                        this.sortFriendsGroup0 = true;
+                        this.sortVIPFriends = true;
                     } else {
-                        this.sortFriendsGroup1 = true;
+                        this.sortOnlineFriends = true;
                     }
                 } else if (ctx.state === 'active') {
-                    this.sortFriendsGroup2 = true;
+                    this.sortActiveFriends = true;
                 } else {
-                    this.sortFriendsGroup3 = true;
+                    this.sortOfflineFriends = true;
                 }
             }
             // FIXME: 도배 가능성 있음
@@ -9490,6 +9460,9 @@ speechSynthesis.getVoices();
                 ctx.ref.$online_for = '';
                 ctx.ref.$offline_for = Date.now();
                 ctx.ref.$active_for = '';
+                if (newState === 'active') {
+                    ctx.ref.$active_for = Date.now();
+                }
                 var ts = Date.now();
                 var time = ts - $location_at;
                 var worldName = await this.getWorldName(location);
@@ -9537,37 +9510,29 @@ speechSynthesis.getVoices();
         }
         if (ctx.state === 'online') {
             if (ctx.isVIP) {
-                removeFromArray(this.friendsGroup0_, ctx);
+                removeFromArray(this.vipFriends_, ctx);
-                removeFromArray(this.friendsGroupA_, ctx);
             } else {
-                removeFromArray(this.friendsGroup1_, ctx);
+                removeFromArray(this.onlineFriends_, ctx);
-                removeFromArray(this.friendsGroupB_, ctx);
             }
         } else if (ctx.state === 'active') {
-            removeFromArray(this.friendsGroup2_, ctx);
+            removeFromArray(this.activeFriends_, ctx);
-            removeFromArray(this.friendsGroupC_, ctx);
         } else {
-            removeFromArray(this.friendsGroup3_, ctx);
+            removeFromArray(this.offlineFriends_, ctx);
-            removeFromArray(this.friendsGroupD_, ctx);
         }
         if (newState === 'online') {
             if (isVIP) {
-                this.friendsGroup0_.push(ctx);
+                this.vipFriends_.push(ctx);
-                this.friendsGroupA_.unshift(ctx);
+                this.sortVIPFriends = true;
-                this.sortFriendsGroup0 = true;
             } else {
-                this.friendsGroup1_.push(ctx);
+                this.onlineFriends_.push(ctx);
-                this.friendsGroupB_.unshift(ctx);
+                this.sortOnlineFriends = true;
-                this.sortFriendsGroup1 = true;
             }
         } else if (newState === 'active') {
-            this.friendsGroup2_.push(ctx);
+            this.activeFriends_.push(ctx);
-            this.friendsGroupC_.unshift(ctx);
+            this.sortActiveFriends = true;
-            this.sortFriendsGroup2 = true;
         } else {
-            this.friendsGroup3_.push(ctx);
+            this.offlineFriends_.push(ctx);
-            this.friendsGroupD_.unshift(ctx);
+            this.sortOfflineFriends = true;
-            this.sortFriendsGroup3 = true;
         }
         if (ctx.state !== newState) {
             this.updateOnlineFriendCoutner();
@@ -9616,31 +9581,18 @@ speechSynthesis.getVoices();
     };
 
     $app.methods.updateFriendGPS = function (userId) {
-        if (!this.orderFriendsGroupGPS) {
-            if (this.orderFriendsGroupPrivate || this.orderFriendsGroupStatus) {
-                this.sortFriendsGroup0 = true;
-                this.sortFriendsGroup1 = true;
-            }
-            return;
-        }
         var ctx = this.friends.get(userId);
-        if (typeof ctx.ref !== 'undefined' && ctx.state === 'online') {
+        if (ctx.isVIP) {
-            if (ctx.isVIP) {
+            this.sortVIPFriends = true;
-                removeFromArray(this.friendsGroupA_, ctx);
+        } else {
-                this.friendsGroupA_.unshift(ctx);
+            this.sortOnlineFriends = true;
-                this.sortFriendsGroup1 = true;
-            } else {
-                removeFromArray(this.friendsGroupB_, ctx);
-                this.friendsGroupB_.unshift(ctx);
-                this.sortFriendsGroup0 = true;
-            }
         }
     };
 
     $app.data.onlineFriendCount = 0;
     $app.methods.updateOnlineFriendCoutner = function () {
         var onlineFriendCount =
-            this.friendsGroup0.length + this.friendsGroup1.length;
+            this.vipFriends.length + this.onlineFriends.length;
         if (onlineFriendCount !== this.onlineFriendCount) {
             AppApi.ExecuteVrFeedFunction(
                 'updateOnlineFriendCount',
@@ -9722,17 +9674,10 @@ speechSynthesis.getVoices();
         return 0;
     };
 
-    // status
     var compareByStatus = function (a, b) {
         if (typeof a.ref === 'undefined' || typeof b.ref === 'undefined') {
             return 0;
         }
-        if (
-            $app.orderFriendsGroupPrivate &&
-            (a.ref.location !== 'private' || b.ref.location !== 'private')
-        ) {
-            return 0;
-        }
         if (a.ref.status === b.ref.status) {
             return 0;
         }
@@ -9742,10 +9687,6 @@ speechSynthesis.getVoices();
         return $app.sortStatus(a.ref.status, b.ref.status);
     };
 
-    $app.methods.sortByStatus = function (a, b, field) {
-        return this.sortStatus(a[field], b[field]);
-    };
-
     $app.methods.sortStatus = function (a, b) {
         switch (b) {
             case 'join me':
@@ -9812,76 +9753,143 @@ speechSynthesis.getVoices();
         return 0;
     };
 
+    // location at but for the sidebar
+    var compareByLocation = function (a, b) {
+        if (typeof a.ref === 'undefined' || typeof b.ref === 'undefined') {
+            return 0;
+        }
+
+        return a.ref.location.localeCompare(b.ref.location);
+    }
+
+    var compareByActivityField = function (a, b, field) {
+        if (typeof a.ref === 'undefined' || typeof b.ref === 'undefined') {
+            return 0;
+        }
+
+        // When the field is just and empty string, it means they've been
+        // in whatever active state for the longest
+        if (a.ref[field] < b.ref[field] || a.ref[field] !== '' && b.ref[field] === '') {
+            return 1;
+        }
+        if (a.ref[field] > b.ref[field] || a.ref[field] === '' && b.ref[field] !== '') {
+            return -1;
+        }
+        return 0;
+    }
+
+    // online for
+    var compareByOnlineFor = function (a, b) {
+        return compareByActivityField(a, b, "$online_for");
+    }
+
+    // offline for
+    var compareByOfflineFor = function (a, b) {
+        return compareByActivityField(a, b, "$offline_for");
+    }
+
+    // active for
+    var compareByActiveFor = function (a, b) {
+        return compareByActivityField(a, b, "$active_for");
+    }
+
+    var getFriendsSortFunction = function (sortMethods) {
+        const sorts = [];
+        for (const sortMethod of sortMethods) {
+            switch (sortMethod) {
+                case "Sort Private to Bottom":
+                    sorts.push(compareByPrivate);
+                    break;
+                case "Sort by Status":
+                    sorts.push(compareByStatus);
+                    break;
+                case "Sort by Name":
+                    sorts.push(compareByStatusAndPrivate);
+                    break;
+                case "Sort by Online For":
+                    sorts.push(compareByOnlineFor);
+                    break;
+                case "Sort by Offline For":
+                    sorts.push(compareByOfflineFor);
+                    break;
+                case "Sort by Active For":
+                    sorts.push(compareByActiveFor);
+                    break;
+                case "Sort by Time in Instance":
+                    sorts.push((a, b) => {
+                        if (typeof a.ref === 'undefined' || typeof b.ref === 'undefined') {
+                            return 0;
+                        }
+
+                        return compareByLocationAt(a.ref, b.ref);
+                    });
+                    break;
+                case "Sort by Location":
+                    sorts.push(compareByLocation);
+                    break;
+                case "None":
+                    sorts.push(() => 0);
+                    break;
+            }
+        }
+
+        return (a, b) => {
+            let res;
+            for (const sort of sorts) {
+                res = sort(a, b);
+                if (res !== 0) {
+                    return res;
+                }
+            }
+            return res;
+        }
+    }
+
     // VIP friends
-    $app.computed.friendsGroup0 = function () {
+    $app.computed.vipFriends = function () {
-        if (this.orderFriendsGroup0) {
+        if (!this.sortVIPFriends) {
-            if (this.orderFriendsGroupPrivate) {
+            return this.vipFriends_;
-                this.friendsGroupA_.sort(compareByPrivate);
-            }
-            if (this.orderFriendsGroupStatus) {
-                this.friendsGroupA_.sort(compareByStatus);
-            }
-            return this.friendsGroupA_;
         }
-        if (this.sortFriendsGroup0) {
+        this.sortVIPFriends = false;
-            this.sortFriendsGroup0 = false;
+
-            this.friendsGroup0_.sort(compareByName);
+        this.vipFriends_.sort(getFriendsSortFunction(this.vipFriendsSortMethod));
-            if (this.orderFriendsGroupPrivate) {
+        return this.vipFriends_;
-                this.friendsGroup0_.sort(compareByPrivate);
-            }
-            if (this.orderFriendsGroupStatus) {
-                this.friendsGroup0_.sort(compareByStatus);
-            }
-        }
-        return this.friendsGroup0_;
     };
 
     // Online friends
-    $app.computed.friendsGroup1 = function () {
+    $app.computed.onlineFriends = function () {
-        if (this.orderFriendsGroup1) {
+        if (!this.sortOnlineFriends) {
-            if (this.orderFriendsGroupPrivate) {
+            return this.onlineFriends_;
-                this.friendsGroupB_.sort(compareByPrivate);
-            }
-            if (this.orderFriendsGroupStatus) {
-                this.friendsGroupB_.sort(compareByStatus);
-            }
-            return this.friendsGroupB_;
         }
-        if (this.sortFriendsGroup1) {
+        this.sortOnlineFriends = false;
-            this.sortFriendsGroup1 = false;
+
-            this.friendsGroup1_.sort(compareByName);
+        this.onlineFriends_.sort(getFriendsSortFunction(this.onlineFriendsSortMethod));
-            if (this.orderFriendsGroupPrivate) {
+
-                this.friendsGroup1_.sort(compareByPrivate);
+        return this.onlineFriends_;
-            }
-            if (this.orderFriendsGroupStatus) {
-                this.friendsGroup1_.sort(compareByStatus);
-            }
-        }
-        return this.friendsGroup1_;
     };
 
     // Active friends
-    $app.computed.friendsGroup2 = function () {
+    $app.computed.activeFriends = function () {
-        if (this.orderFriendsGroup2) {
+        if (!this.sortActiveFriends) {
-            return this.friendsGroupC_;
+            return this.activeFriends_;
         }
-        if (this.sortFriendsGroup2) {
+        this.sortActiveFriends = false;
-            this.sortFriendsGroup2 = false;
+
-            this.friendsGroup2_.sort(compareByName);
+        this.activeFriends_.sort(getFriendsSortFunction(this.activeFriendsSortMethod));
-        }
+
-        return this.friendsGroup2_;
+        return this.activeFriends_;
     };
 
     // Offline friends
-    $app.computed.friendsGroup3 = function () {
+    $app.computed.offlineFriends = function () {
-        if (this.orderFriendsGroup3) {
+        if (!this.sortOfflineFriends) {
-            return this.friendsGroupD_;
+            return this.offlineFriends_;
         }
-        if (this.sortFriendsGroup3) {
+        this.sortOfflineFriends = false;
-            this.sortFriendsGroup3 = false;
+
-            this.friendsGroup3_.sort(compareByName);
+        this.offlineFriends_.sort(getFriendsSortFunction(this.offlineFriendsSortMethod));
-        }
+
-        return this.friendsGroup3_;
+        return this.offlineFriends_;
     };
 
     $app.methods.userStatusClass = function (user, pendingOffline) {
@@ -15970,65 +15978,72 @@ speechSynthesis.getVoices();
             this.vrcRegistryAutoBackup
         );
     };
-    $app.data.orderFriendsGroup0 = await configRepository.getBool(
+    // TODO: FIX DEFAULTS BEFORE MEGNING PLS
-        'orderFriendGroup0',
+    $app.data.vipFriendsSortMethod = JSON.parse(await configRepository.getString(
-        true
+        'vipFriendsSortMethod',
-    );
+        '["Default"]'
-    $app.data.orderFriendsGroup1 = await configRepository.getBool(
+    ));
-        'orderFriendGroup1',
+    $app.data.onlineFriendsSortMethod = JSON.parse(await configRepository.getString(
-        true
+        'onlineFriendsSortMethod',
-    );
+        '["Default"]'
-    $app.data.orderFriendsGroup2 = await configRepository.getBool(
+    ));
-        'orderFriendGroup2',
+    $app.data.activeFriendsSortMethod = JSON.parse(await configRepository.getString(
-        true
+        'activeFriendsSortMethod',
-    );
+        '["Default"]'
-    $app.data.orderFriendsGroup3 = await configRepository.getBool(
+    ));
-        'orderFriendGroup3',
+    $app.data.offlineFriendsSortMethod = JSON.parse(await configRepository.getString(
-        true
+        'offlineFriendsSortMethod',
-    );
+        '["Default"]'
-    $app.data.orderFriendsGroupPrivate = await configRepository.getBool(
+    ));
-        'orderFriendGroupPrivate',
+
-        false
+    // Migrate old settings
-    );
+    // Assume all exist if one does
-    $app.data.orderFriendsGroupStatus = await configRepository.getBool(
+
-        'orderFriendsGroupStatus',
+    // TODO: FIX THIS BEFORE MERGING PLS
-        false
+    const orderFriendsGroupPrivate = await configRepository.getBool(
-    );
+        'orderFriendGroupPrivate'
-    $app.data.orderFriendsGroupGPS = await configRepository.getBool(
-        'orderFriendGroupGPS',
-        true
     );
+    if (orderFriendsGroupPrivate !== null) {
+        await configRepository.remove('orderFriendGroupPrivate');
+        const orderFriendsGroupStatus = await configRepository.getBool(
+            'orderFriendsGroupStatus'
+        );
+        await configRepository.remove('orderFriendsGroupStatus');
+        const orderFriendsGroupGPS = await configRepository.getBool(
+            'orderFriendGroupGPS'
+        );
+        await configRepository.remove('orderFriendGroupGPS');
+
+        if (orderFriendsGroupGPS) {
+            $app.data.onlineAndVIPFriendsSortMethod = "Sort by Location";
+        } else if (orderFriendsGroupPrivate && orderFriendsGroupStatus) {
+            $app.data.onlineAndVIPFriendsSortMethod = "Sort by Status and Private to Bottom";
+        } else if (orderFriendsGroupPrivate) {
+            $app.data.onlineAndVIPFriendsSortMethod = "Sort Private to Bottom";
+        } else if (orderFriendsGroupStatus) {
+            $app.data.onlineAndVIPFriendsSortMethod = "Sort by Status"
+        }
+    }
+
     $app.methods.saveOrderFriendGroup = async function () {
-        await configRepository.setBool(
+        await configRepository.setString(
-            'orderFriendGroup0',
+            'vipFriendsSortMethod',
-            this.orderFriendsGroup0
+            JSON.stringify(this.vipFriendsSortMethod)
         );
-        await configRepository.setBool(
+        await configRepository.setString(
-            'orderFriendGroup1',
+            'onlineFriendsSortMethod',
-            this.orderFriendsGroup1
+            JSON.stringify(this.onlineFriendsSortMethod)
         );
-        await configRepository.setBool(
+        await configRepository.setString(
-            'orderFriendGroup2',
+            'activeFriendsSortMethod',
-            this.orderFriendsGroup2
+            JSON.stringify(this.activeFriendsSortMethod)
         );
-        await configRepository.setBool(
+        await configRepository.setString(
-            'orderFriendGroup3',
+            'offlineFriendsSortMethod',
-            this.orderFriendsGroup3
+            JSON.stringify(this.offlineFriendsSortMethod)
         );
-        await configRepository.setBool(
+        this.sortVIPFriends = true;
-            'orderFriendGroupPrivate',
+        this.sortOnlineFriends = true;
-            this.orderFriendsGroupPrivate
-        );
-        await configRepository.setBool(
-            'orderFriendsGroupStatus',
-            this.orderFriendsGroupStatus
-        );
-        await configRepository.setBool(
-            'orderFriendGroupGPS',
-            this.orderFriendsGroupGPS
-        );
-        this.sortFriendsGroup0 = true;
-        this.sortFriendsGroup1 = true;
     };
     $app.data.discordActive = await configRepository.getBool(
         'discordActive',
@@ -20232,7 +20247,7 @@ speechSynthesis.getVoices();
 
     $app.methods.addFavoriteFriendsToInvite = function () {
         var D = this.inviteDialog;
-        for (var friend of this.friendsGroup0) {
+        for (var friend of this.vipFriends) {
             if (!D.userIds.includes(friend.id)) {
                 D.userIds.push(friend.id);
             }
@@ -21925,11 +21940,11 @@ speechSynthesis.getVoices();
 
     $app.methods.userOnlineFor = function (ctx) {
         if (ctx.ref.state === 'online' && ctx.ref.$online_for) {
-            return Date.now() - ctx.ref.$online_for;
+            return timeToText(Date.now() - ctx.ref.$online_for);
         } else if (ctx.ref.state === 'active' && ctx.ref.$active_for) {
-            return Date.now() - ctx.ref.$active_for;
+            return timeToText(Date.now() - ctx.ref.$active_for);
         } else if (ctx.ref.$offline_for) {
-            return Date.now() - ctx.ref.$offline_for;
+            return timeToText(Date.now() - ctx.ref.$offline_for);
         }
         return '-';
     };
@@ -28798,17 +28813,13 @@ speechSynthesis.getVoices();
                 continue;
             }
             if (ctx.isVIP) {
-                removeFromArray(this.friendsGroup1_, ctx);
+                removeFromArray(this.onlineFriends_, ctx);
-                removeFromArray(this.friendsGroupB_, ctx);
+                this.vipFriends_.push(ctx);
-                this.friendsGroup0_.push(ctx);
+                this.sortVIPFriends = true;
-                this.friendsGroupA_.unshift(ctx);
-                this.sortFriendsGroup0 = true;
             } else {
-                removeFromArray(this.friendsGroup0_, ctx);
+                removeFromArray(this.vipFriends_, ctx);
-                removeFromArray(this.friendsGroupA_, ctx);
+                this.onlineFriends_.push(ctx);
-                this.friendsGroup1_.push(ctx);
+                this.sortOnlineFriends = true;
-                this.friendsGroupB_.unshift(ctx);
-                this.sortFriendsGroup1 = true;
             }
         }
     };

html/src/index.pug

@@ -127,11 +127,11 @@ html
                                             location.extra(v-if="isGameRunning && !gameLogDisabled" :location="lastLocation.location" :traveling="lastLocationDestination" :link="false")
                                             location.extra(v-else-if="isRealInstance(API.currentUser.$locationTag) || isRealInstance(API.currentUser.$travelingToLocation)" :location="API.currentUser.$locationTag" :traveling="API.currentUser.$travelingToLocation" :link="false")
                                             span.extra(v-else v-text="API.currentUser.statusDescription")
-                                .x-friend-group.x-link(@click="isFriendsGroup0 = !isFriendsGroup0; saveFriendsGroupStates()" v-show="friendsGroup0.length")
+                                .x-friend-group.x-link(@click="isVIPFriends = !isVIPFriends; saveFriendsGroupStates()" v-show="vipFriends.length")
-                                    i.el-icon-arrow-right(:class="{ rotate: isFriendsGroup0 }")
+                                    i.el-icon-arrow-right(:class="{ rotate: isVIPFriends }")
-                                    span(style="margin-left:5px") {{ $t('side_panel.favorite') }} ― {{ friendsGroup0.length }}
+                                    span(style="margin-left:5px") {{ $t('side_panel.favorite') }} ― {{ vipFriends.length }}
-                                div(v-show="isFriendsGroup0")
+                                div(v-show="isVIPFriends")
-                                    .x-friend-item(v-for="friend in friendsGroup0" :key="friend.id" @click="showUserDialog(friend.id)")
+                                    .x-friend-item(v-for="friend in vipFriends" :key="friend.id" @click="showUserDialog(friend.id)")
                                         template(v-if="friend.ref")
                                             .avatar(:class="userStatusClass(friend.ref, friend.pendingOffline)")
                                                 img(v-lazy="userImage(friend.ref)")
@@ -143,11 +143,11 @@ html
                                         template(v-else)
                                             span(v-text="friend.name || friend.id")
                                             el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
-                                .x-friend-group.x-link(@click="isFriendsGroup1 = !isFriendsGroup1; saveFriendsGroupStates()" v-show="friendsGroup1.length")
+                                .x-friend-group.x-link(@click="isOnlineFriends = !isOnlineFriends; saveFriendsGroupStates()" v-show="onlineFriends.length")
-                                    i.el-icon-arrow-right(:class="{ rotate: isFriendsGroup1 }")
+                                    i.el-icon-arrow-right(:class="{ rotate: isOnlineFriends }")
-                                    span(style="margin-left:5px") {{ $t('side_panel.online') }} ― {{ friendsGroup1.length }}
+                                    span(style="margin-left:5px") {{ $t('side_panel.online') }} ― {{ onlineFriends.length }}
-                                div(v-show="isFriendsGroup1")
+                                div(v-show="isOnlineFriends")
-                                    .x-friend-item(v-for="friend in friendsGroup1" :key="friend.id" @click="showUserDialog(friend.id)")
+                                    .x-friend-item(v-for="friend in onlineFriends" :key="friend.id" @click="showUserDialog(friend.id)")
                                         template(v-if="friend.ref")
                                             .avatar(:class="userStatusClass(friend.ref, friend.pendingOffline)")
                                                 img(v-lazy="userImage(friend.ref)")
@@ -159,11 +159,11 @@ html
                                         template(v-else)
                                             span(v-text="friend.name || friend.id")
                                             el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
-                                .x-friend-group.x-link(@click="isFriendsGroup2 = !isFriendsGroup2; saveFriendsGroupStates()" v-show="friendsGroup2.length")
+                                .x-friend-group.x-link(@click="isActiveFriends = !isActiveFriends; saveFriendsGroupStates()" v-show="activeFriends.length")
-                                    i.el-icon-arrow-right(:class="{ rotate: isFriendsGroup2 }")
+                                    i.el-icon-arrow-right(:class="{ rotate: isActiveFriends }")
-                                    span(style="margin-left:5px") {{ $t('side_panel.active') }} ― {{ friendsGroup2.length }}
+                                    span(style="margin-left:5px") {{ $t('side_panel.active') }} ― {{ activeFriends.length }}
-                                div(v-show="isFriendsGroup2")
+                                div(v-show="isActiveFriends")
-                                    .x-friend-item(v-for="friend in friendsGroup2" :key="friend.id" @click="showUserDialog(friend.id)")
+                                    .x-friend-item(v-for="friend in activeFriends" :key="friend.id" @click="showUserDialog(friend.id)")
                                         template(v-if="friend.ref")
                                             .avatar
                                                 img(v-lazy="userImage(friend.ref)")
@@ -174,11 +174,11 @@ html
                                         template(v-else)
                                             span(v-text="friend.name || friend.id")
                                             el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
-                                .x-friend-group.x-link(@click="isFriendsGroup3 = !isFriendsGroup3; saveFriendsGroupStates()" v-show="friendsGroup3.length")
+                                .x-friend-group.x-link(@click="isOfflineFriends = !isOfflineFriends; saveFriendsGroupStates()" v-show="offlineFriends.length")
-                                    i.el-icon-arrow-right(:class="{ rotate: isFriendsGroup3 }")
+                                    i.el-icon-arrow-right(:class="{ rotate: isOfflineFriends }")
-                                    span(style="margin-left:5px") {{ $t('side_panel.offline') }} ― {{ friendsGroup3.length }}
+                                    span(style="margin-left:5px") {{ $t('side_panel.offline') }} ― {{ offlineFriends.length }}
-                                div(v-show="isFriendsGroup3")
+                                div(v-show="isOfflineFriends")
-                                    .x-friend-item(v-for="friend in friendsGroup3" :key="friend.id" @click="showUserDialog(friend.id)")
+                                    .x-friend-item(v-for="friend in offlineFriends" :key="friend.id" @click="showUserDialog(friend.id)")
                                         template(v-if="friend.ref")
                                             .avatar
                                                 img(v-lazy="userImage(friend.ref)")
@@ -1329,7 +1329,7 @@ html
                     br
                     el-button(size="mini" v-text="$t('dialog.invite.add_self')" @click="addSelfToInvite" style="margin-top:10px")
                     el-button(size="mini" v-text="$t('dialog.invite.add_friends_in_instance')" @click="addFriendsInInstanceToInvite" :disabled="inviteDialog.friendsInInstance.length === 0" style="margin-top:10px")
-                    el-button(size="mini" v-text="$t('dialog.invite.add_favorite_friends')" @click="addFavoriteFriendsToInvite" :disabled="friendsGroup0.length === 0" style="margin-top:10px")
+                    el-button(size="mini" v-text="$t('dialog.invite.add_favorite_friends')" @click="addFavoriteFriendsToInvite" :disabled="vipFriends.length === 0" style="margin-top:10px")
                     el-select(v-model="inviteDialog.userIds" multiple clearable :placeholder="$t('dialog.invite.select_placeholder')" filterable :disabled="inviteDialog.loading" style="width:100%;margin-top:15px")
                         el-option-group(v-if="API.currentUser" :label="$t('side_panel.me')")
                             el-option.x-friend-item(:label="API.currentUser.displayName" :value="API.currentUser.id" style="height:auto")
@@ -1345,24 +1345,24 @@ html
                                     .detail
                                         span.name(v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
                                 span(v-else v-text="friend.id")
-                        el-option-group(v-if="friendsGroup0.length" :label="$t('side_panel.favorite')")
+                        el-option-group(v-if="vipFriends.length" :label="$t('side_panel.favorite')")
-                            el-option.x-friend-item(v-for="friend in friendsGroup0" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
+                            el-option.x-friend-item(v-for="friend in vipFriends" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
                                 template(v-if="friend.ref")
                                     .avatar(:class="userStatusClass(friend.ref)")
                                         img(v-lazy="userImage(friend.ref)")
                                     .detail
                                         span.name(v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
                                 span(v-else v-text="friend.id")
-                        el-option-group(v-if="friendsGroup1.length" :label="$t('side_panel.online')")
+                        el-option-group(v-if="onlineFriends.length" :label="$t('side_panel.online')")
-                            el-option.x-friend-item(v-for="friend in friendsGroup1" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
+                            el-option.x-friend-item(v-for="friend in onlineFriends" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
                                 template(v-if="friend.ref")
                                     .avatar(:class="userStatusClass(friend.ref)")
                                         img(v-lazy="userImage(friend.ref)")
                                     .detail
                                         span.name(v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
                                 span(v-else v-text="friend.id")
-                        el-option-group(v-if="friendsGroup2.length" :label="$t('side_panel.active')")
+                        el-option-group(v-if="activeFriends.length" :label="$t('side_panel.active')")
-                            el-option.x-friend-item(v-for="friend in friendsGroup2" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
+                            el-option.x-friend-item(v-for="friend in activeFriends" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
                                 template(v-if="friend.ref")
                                     .avatar
                                         img(v-lazy="userImage(friend.ref)")
@@ -1515,32 +1515,32 @@ html
                                                 img(v-lazy="userImage(API.currentUser)")
                                             .detail
                                                 span.name(v-text="API.currentUser.displayName")
-                                    el-option-group(v-if="friendsGroup0.length" :label="$t('side_panel.favorite')")
+                                    el-option-group(v-if="vipFriends.length" :label="$t('side_panel.favorite')")
-                                        el-option.x-friend-item(v-for="friend in friendsGroup0" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
+                                        el-option.x-friend-item(v-for="friend in vipFriends" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
                                             template(v-if="friend.ref")
                                                 .avatar(:class="userStatusClass(friend.ref)")
                                                     img(v-lazy="userImage(friend.ref)")
                                                 .detail
                                                     span.name(v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
                                             span(v-else v-text="friend.id")
-                                    el-option-group(v-if="friendsGroup1.length" :label="$t('side_panel.online')")
+                                    el-option-group(v-if="onlineFriends.length" :label="$t('side_panel.online')")
-                                        el-option.x-friend-item(v-for="friend in friendsGroup1" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
+                                        el-option.x-friend-item(v-for="friend in onlineFriends" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
                                             template(v-if="friend.ref")
                                                 .avatar(:class="userStatusClass(friend.ref)")
                                                     img(v-lazy="userImage(friend.ref)")
                                                 .detail
                                                     span.name(v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
                                             span(v-else v-text="friend.id")
-                                    el-option-group(v-if="friendsGroup2.length" :label="$t('side_panel.active')")
+                                    el-option-group(v-if="activeFriends.length" :label="$t('side_panel.active')")
-                                        el-option.x-friend-item(v-for="friend in friendsGroup2" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
+                                        el-option.x-friend-item(v-for="friend in activeFriends" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
                                             template(v-if="friend.ref")
                                                 .avatar
                                                     img(v-lazy="userImage(friend.ref)")
                                                 .detail
                                                     span.name(v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
                                             span(v-else v-text="friend.id")
-                                    el-option-group(v-if="friendsGroup3.length" :label="$t('side_panel.offline')")
+                                    el-option-group(v-if="offlineFriends.length" :label="$t('side_panel.offline')")
-                                        el-option.x-friend-item(v-for="friend in friendsGroup3" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
+                                        el-option.x-friend-item(v-for="friend in offlineFriends" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
                                             template(v-if="friend.ref")
                                                 .avatar
                                                     img(v-lazy="userImage(friend.ref)")
@@ -2900,32 +2900,32 @@ html
                                     .detail
                                         span.name(v-text="inviteGroupDialog.userObject.displayName" :style="{'color':inviteGroupDialog.userObject.$userColour}")
                                 span(v-else v-text="inviteGroupDialog.userId")
-                        el-option-group(v-if="friendsGroup0.length" :label="$t('side_panel.favorite')")
+                        el-option-group(v-if="vipFriends.length" :label="$t('side_panel.favorite')")
-                            el-option.x-friend-item(v-for="friend in friendsGroup0" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
+                            el-option.x-friend-item(v-for="friend in vipFriends" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
                                 template(v-if="friend.ref")
                                     .avatar(:class="userStatusClass(friend.ref)")
                                         img(v-lazy="userImage(friend.ref)")
                                     .detail
                                         span.name(v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
                                 span(v-else v-text="friend.id")
-                        el-option-group(v-if="friendsGroup1.length" :label="$t('side_panel.online')")
+                        el-option-group(v-if="onlineFriends.length" :label="$t('side_panel.online')")
-                            el-option.x-friend-item(v-for="friend in friendsGroup1" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
+                            el-option.x-friend-item(v-for="friend in onlineFriends" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
                                 template(v-if="friend.ref")
                                     .avatar(:class="userStatusClass(friend.ref)")
                                         img(v-lazy="userImage(friend.ref)")
                                     .detail
                                         span.name(v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
                                 span(v-else v-text="friend.id")
-                        el-option-group(v-if="friendsGroup2.length" :label="$t('side_panel.active')")
+                        el-option-group(v-if="activeFriends.length" :label="$t('side_panel.active')")
-                            el-option.x-friend-item(v-for="friend in friendsGroup2" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
+                            el-option.x-friend-item(v-for="friend in activeFriends" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
                                 template(v-if="friend.ref")
                                     .avatar
                                         img(v-lazy="userImage(friend.ref)")
                                     .detail
                                         span.name(v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
                                 span(v-else v-text="friend.id")
-                        el-option-group(v-if="friendsGroup3.length" :label="$t('side_panel.offline')")
+                        el-option-group(v-if="offlineFriends.length" :label="$t('side_panel.offline')")
-                            el-option.x-friend-item(v-for="friend in friendsGroup3" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
+                            el-option.x-friend-item(v-for="friend in offlineFriends" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
                                 template(v-if="friend.ref")
                                     .avatar
                                         img(v-lazy="userImage(friend.ref)")
@@ -3325,32 +3325,32 @@ html
             el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="sendBoopDialog" :visible.sync="sendBoopDialog.visible" :title="$t('dialog.boop_dialog.header')" width="450px")
                 div(v-if="sendBoopDialog.visible")
                     el-select(v-model="sendBoopDialog.userId" :placeholder="$t('dialog.new_instance.instance_creator_placeholder')" filterable style="width:100%")
-                        el-option-group(v-if="friendsGroup0.length" :label="$t('side_panel.favorite')")
+                        el-option-group(v-if="vipFriends.length" :label="$t('side_panel.favorite')")
-                            el-option.x-friend-item(v-for="friend in friendsGroup0" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
+                            el-option.x-friend-item(v-for="friend in vipFriends" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
                                 template(v-if="friend.ref")
                                     .avatar(:class="userStatusClass(friend.ref)")
                                         img(v-lazy="userImage(friend.ref)")
                                     .detail
                                         span.name(v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
                                 span(v-else v-text="friend.id")
-                        el-option-group(v-if="friendsGroup1.length" :label="$t('side_panel.online')")
+                        el-option-group(v-if="onlineFriends.length" :label="$t('side_panel.online')")
-                            el-option.x-friend-item(v-for="friend in friendsGroup1" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
+                            el-option.x-friend-item(v-for="friend in onlineFriends" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
                                 template(v-if="friend.ref")
                                     .avatar(:class="userStatusClass(friend.ref)")
                                         img(v-lazy="userImage(friend.ref)")
                                     .detail
                                         span.name(v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
                                 span(v-else v-text="friend.id")
-                        el-option-group(v-if="friendsGroup2.length" :label="$t('side_panel.active')")
+                        el-option-group(v-if="activeFriends.length" :label="$t('side_panel.active')")
-                            el-option.x-friend-item(v-for="friend in friendsGroup2" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
+                            el-option.x-friend-item(v-for="friend in activeFriends" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
                                 template(v-if="friend.ref")
                                     .avatar
                                         img(v-lazy="userImage(friend.ref)")
                                     .detail
                                         span.name(v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
                                 span(v-else v-text="friend.id")
-                        el-option-group(v-if="friendsGroup3.length" :label="$t('side_panel.offline')")
+                        el-option-group(v-if="offlineFriends.length" :label="$t('side_panel.offline')")
-                            el-option.x-friend-item(v-for="friend in friendsGroup3" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
+                            el-option.x-friend-item(v-for="friend in offlineFriends" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
                                 template(v-if="friend.ref")
                                     .avatar
                                         img(v-lazy="userImage(friend.ref)")

html/src/localization/en/en.json

@@ -293,10 +293,11 @@
                     "header": "Side Panel",
                     "sorting": {
                         "header": "Sorting",
+                        "sort_default": "Default",
                         "sort_private_to_bottom": "Sort Private to bottom",
-                        "sort_by_status": "Sort by status",
+                        "sort_by_status": "Sort by Status",
-                        "sort_gps_to_top": "Sort GPS to top",
+                        "sort_by_status_and_private_to_bottom": "Sort by Status and Private to Bottom",
-                        "sort_gps_to_top_notice": "(online for only)",
+                        "sort_by_location": "Sort by Location",
                         "sort_favorite_by": "Sort Favorites by",
                         "sort_favorite_by_alphabet": "alphabetical",
                         "sort_favorite_by_online_time": "online for",

html/src/localization/es/en.json

@@ -293,10 +293,11 @@
                     "header": "Panel Lateral",
                     "sorting": {
                         "header": "Clasificación",
+                        "sort_default": "Default",
                         "sort_private_to_bottom": "Ordenar privados abajo",
                         "sort_by_status": "Ordenar por estado",
-                        "sort_gps_to_top": "Ordenar GPS arriba",
+                        "sort_by_status_and_private_to_bottom": "Sort by Status and Private to Bottom",
-                        "sort_gps_to_top_notice": "(sólo en línea)",
+                        "sort_by_location": "Sort by Location",
                         "sort_favorite_by": "Ordenar Favoritos por",
                         "sort_favorite_by_alphabet": "alfabético",
                         "sort_favorite_by_online_time": "en línea desde",

html/src/localization/fr/en.json

@@ -293,10 +293,11 @@
                     "header": "Panneau latéral",
                     "sorting": {
                         "header": "Comportement du tri",
+                        "sort_default": "Default",
                         "sort_private_to_bottom": "Joueurs en privé en fin de liste",
                         "sort_by_status": "Trier par statut",
-                        "sort_gps_to_top": "Trier les GPS vers le haut",
+                        "sort_by_status_and_private_to_bottom": "Sort by Status and Private to Bottom",
-                        "sort_gps_to_top_notice": "(seulement en ligne)",
+                        "sort_by_location": "Sort by Location",
                         "sort_favorite_by": "Trier les favoris par",
                         "sort_favorite_by_alphabet": "alphabétique",
                         "sort_favorite_by_online_time": "en ligne depuis",

html/src/localization/hu/en.json

@@ -293,10 +293,11 @@
                     "header": "Side Panel",
                     "sorting": {
                         "header": "Sorting",
+                        "sort_default": "Default",
                         "sort_private_to_bottom": "Sort Private to bottom",
                         "sort_by_status": "Sort by status",
-                        "sort_gps_to_top": "Sort GPS to top",
+                        "sort_by_status_and_private_to_bottom": "Sort by Status and Private to Bottom",
-                        "sort_gps_to_top_notice": "(online for only)",
+                        "sort_by_location": "Sort by Location",
                         "sort_favorite_by": "Kedvencek rendezése",
                         "sort_favorite_by_alphabet": "betűrend",
                         "sort_favorite_by_online_time": "online for",

html/src/localization/ja/en.json

@@ -293,10 +293,11 @@
                     "header": "サイドパネル",
                     "sorting": {
                         "header": "並び替え",
+                        "sort_default": "Default",
                         "sort_private_to_bottom": "プライベートを下に並び替え",
                         "sort_by_status": "ステータスで並べ替え",
-                        "sort_gps_to_top": "GPSで並べ替え",
+                        "sort_by_status_and_private_to_bottom": "Sort by Status and Private to Bottom",
-                        "sort_gps_to_top_notice": "(オンラインのみ)",
+                        "sort_by_location": "Sort by Location",
                         "sort_favorite_by": "お気に入り欄の並べ替え:",
                         "sort_favorite_by_alphabet": "アルファベット順",
                         "sort_favorite_by_online_time": "オンライン順",

html/src/localization/ko/en.json

@@ -293,10 +293,11 @@
                     "header": "친구 목록",
                     "sorting": {
                         "header": "정렬",
+                        "sort_default": "Default",
                         "sort_private_to_bottom": "비공개 월드는 마지막에 표시",
                         "sort_by_status": "상태순",
-                        "sort_gps_to_top": "GPS순",
+                        "sort_by_status_and_private_to_bottom": "Sort by Status and Private to Bottom",
-                        "sort_gps_to_top_notice": "(온라인만 해당)",
+                        "sort_by_location": "Sort by Location",
                         "sort_favorite_by": "친한 친구 순서",
                         "sort_favorite_by_alphabet": "이름순",
                         "sort_favorite_by_online_time": "시간순",

html/src/localization/pl/en.json

@@ -293,10 +293,11 @@
                     "header": "Panel boczny",
                     "sorting": {
                         "header": "Sortowanie",
+                        "sort_default": "Default",
                         "sort_private_to_bottom": "Sortuj prywatne niżej",
                         "sort_by_status": "Sortuj wg statusu",
-                        "sort_gps_to_top": "Sortuj GPS wyżej",
+                        "sort_by_status_and_private_to_bottom": "Sort by Status and Private to Bottom",
-                        "sort_gps_to_top_notice": "(tylko dla czasu online)",
+                        "sort_by_location": "Sort by Location",
                         "sort_favorite_by": "Sortuj ulubione wg",
                         "sort_favorite_by_alphabet": "alfabetycznie",
                         "sort_favorite_by_online_time": "czas online",

html/src/localization/pt/en.json

@@ -293,10 +293,11 @@
                     "header": "Painel lateral",
                     "sorting": {
                         "header": "Ordenação",
+                        "sort_default": "Default",
                         "sort_private_to_bottom": "Ordenar Privado para baixo",
                         "sort_by_status": "Ordenar por status",
-                        "sort_gps_to_top": "Ordenar GPS para cima",
+                        "sort_by_status_and_private_to_bottom": "Sort by Status and Private to Bottom",
-                        "sort_gps_to_top_notice": "(apenas online)",
+                        "sort_by_location": "Sort by Location",
                         "sort_favorite_by": "Ordenar Favoritos por",
                         "sort_favorite_by_alphabet": "alfabético",
                         "sort_favorite_by_online_time": "online para",

html/src/localization/ru/en.json

@@ -293,10 +293,11 @@
                     "header": "Боковая панель",
                     "sorting": {
                         "header": "Сортировка",
+                        "sort_default": "Default",
                         "sort_private_to_bottom": "Упорядочить приватных внизу",
                         "sort_by_status": "Сортировать по статусу",
-                        "sort_gps_to_top": "Сортировать GPS сверху",
+                        "sort_by_status_and_private_to_bottom": "Sort by Status and Private to Bottom",
-                        "sort_gps_to_top_notice": "(Только онлайн)",
+                        "sort_by_location": "Sort by Location",
                         "sort_favorite_by": "Сортировать избранные по",
                         "sort_favorite_by_alphabet": "алфавиту",
                         "sort_favorite_by_online_time": "онлайн",

html/src/localization/vi/en.json

@@ -293,10 +293,11 @@
                     "header": "Bẳng điều khiển bên cạnh",
                     "sorting": {
                         "header": "Sắp xếp",
+                        "sort_default": "Default",
                         "sort_private_to_bottom": "Sắp xếp Private xuống dưới cùng",
                         "sort_by_status": "Sắp xếp theo status",
-                        "sort_gps_to_top": "Sắp xếp vị trí GPS lên đầu",
+                        "sort_by_status_and_private_to_bottom": "Sort by Status and Private to Bottom",
-                        "sort_gps_to_top_notice": "(Chỉ bao gồm online trong thời gian)",
+                        "sort_by_location": "Sort by Location",
                         "sort_favorite_by": "Sắp xếp mục yêu thích theo",
                         "sort_favorite_by_alphabet": "bảng chữ cái",
                         "sort_favorite_by_online_time": "online trong",

html/src/localization/zh-CN/en.json

@@ -293,10 +293,11 @@
                     "header": "侧边栏",
                     "sorting": {
                         "header": "排序",
+                        "sort_default": "Default",
                         "sort_private_to_bottom": "将处在私人世界的好友置于底部",
                         "sort_by_status": "按状态排序",
-                        "sort_gps_to_top": "将GPS动态置于顶部",
+                        "sort_by_status_and_private_to_bottom": "Sort by Status and Private to Bottom",
-                        "sort_gps_to_top_notice": "(仅限在线好友)",
+                        "sort_by_location": "Sort by Location",
                         "sort_favorite_by": "星标好友排序规则",
                         "sort_favorite_by_alphabet": "字母顺序",
                         "sort_favorite_by_online_time": "在线时长",

html/src/localization/zh-TW/en.json

@@ -293,10 +293,11 @@
                     "header": "側板",
                     "sorting": {
                         "header": "排序",
+                        "sort_default": "Default",
                         "sort_private_to_bottom": "將 私人世界 排序到底部",
                         "sort_by_status": "依狀態排序",
-                        "sort_gps_to_top": "將 GPS 排序到頂部",
+                        "sort_by_status_and_private_to_bottom": "Sort by Status and Private to Bottom",
-                        "sort_gps_to_top_notice": "（僅限上線玩家）",
+                        "sort_by_location": "Sort by Location",
                         "sort_favorite_by": "收藏玩家 排序依據",
                         "sort_favorite_by_alphabet": "字母順序",
                         "sort_favorite_by_online_time": "上線時長",

html/src/mixins/tabs/settings.pug

@@ -199,27 +199,24 @@ mixin settingsTab()
                     br
                     span.sub-header {{ $t('view.settings.appearance.side_panel.sorting.header') }}
                     div.options-container-item
-                        span.name {{ $t('view.settings.appearance.side_panel.sorting.sort_private_to_bottom') }}
+                        el-radio-group(v-model="onlineAndVIPFriendsSortMethod" @change="saveOrderFriendGroup" size="mini")
-                        el-switch(v-model="orderFriendsGroupPrivate" @change="saveOrderFriendGroup")
+                            el-radio-button(label="Default") {{ $t('view.settings.appearance.side_panel.sorting.sort_default') }}
-                    div.options-container-item
+                            el-radio-button(label="Sort Private to Bottom") {{ $t('view.settings.appearance.side_panel.sorting.sort_private_to_bottom') }}
-                        span.name {{ $t('view.settings.appearance.side_panel.sorting.sort_by_status') }}
+                            el-radio-button(label="Sort by Status") {{ $t('view.settings.appearance.side_panel.sorting.sort_by_status') }}
-                        el-switch(v-model="orderFriendsGroupStatus" @change="saveOrderFriendGroup")
+                            el-radio-button(label="Sort by Status and Private to Bottom") {{ $t('view.settings.appearance.side_panel.sorting.sort_by_status_and_private_to_bottom') }}
-                    div.options-container-item
+                            el-radio-button(label="Sort by Location") {{ $t('view.settings.appearance.side_panel.sorting.sort_by_location') }}
-                        span.name {{ $t('view.settings.appearance.side_panel.sorting.sort_gps_to_top') }}
-                        el-switch(v-model="orderFriendsGroupGPS" @change="saveOrderFriendGroup")
-                        span.name(style="margin-left:5px") {{ $t('view.settings.appearance.side_panel.sorting.sort_gps_to_top_notice') }}
                     div.options-container-item
                         span.name {{ $t('view.settings.appearance.side_panel.sorting.sort_favorite_by') }}
-                        el-switch(v-model="orderFriendsGroup0" :inactive-text="$t('view.settings.appearance.side_panel.sorting.sort_favorite_by_alphabet')" :active-text="$t('view.settings.appearance.side_panel.sorting.sort_favorite_by_online_time')" @change="saveOrderFriendGroup")
+                        el-switch(v-model="orderVIPFriends" :inactive-text="$t('view.settings.appearance.side_panel.sorting.sort_favorite_by_alphabet')" :active-text="$t('view.settings.appearance.side_panel.sorting.sort_favorite_by_online_time')" @change="saveOrderFriendGroup")
                     div.options-container-item
                         span.name {{ $t('view.settings.appearance.side_panel.sorting.sort_online_by') }}
-                        el-switch(v-model="orderFriendsGroup1" :inactive-text="$t('view.settings.appearance.side_panel.sorting.sort_online_by_alphabet')" :active-text="$t('view.settings.appearance.side_panel.sorting.sort_online_by_online_time')" @change="saveOrderFriendGroup")
+                        el-switch(v-model="orderOnlineFriends" :inactive-text="$t('view.settings.appearance.side_panel.sorting.sort_online_by_alphabet')" :active-text="$t('view.settings.appearance.side_panel.sorting.sort_online_by_online_time')" @change="saveOrderFriendGroup")
                     div.options-container-item
                         span.name {{ $t('view.settings.appearance.side_panel.sorting.sort_active_by') }}
-                        el-switch(v-model="orderFriendsGroup2" :inactive-text="$t('view.settings.appearance.side_panel.sorting.sort_active_by_alphabet')" :active-text="$t('view.settings.appearance.side_panel.sorting.sort_active_by_online_time')" @change="saveOrderFriendGroup")
+                        el-switch(v-model="orderActiveFriends" :inactive-text="$t('view.settings.appearance.side_panel.sorting.sort_active_by_alphabet')" :active-text="$t('view.settings.appearance.side_panel.sorting.sort_active_by_online_time')" @change="saveOrderFriendGroup")
                     div.options-container-item
                         span.name {{ $t('view.settings.appearance.side_panel.sorting.sort_offline_by') }}
-                        el-switch(v-model="orderFriendsGroup3" :inactive-text="$t('view.settings.appearance.side_panel.sorting.sort_offline_by_alphabet')" :active-text="$t('view.settings.appearance.side_panel.sorting.sort_offline_by_offline_time')" @change="saveOrderFriendGroup")
+                        el-switch(v-model="orderOfflineFriends" :inactive-text="$t('view.settings.appearance.side_panel.sorting.sort_offline_by_alphabet')" :active-text="$t('view.settings.appearance.side_panel.sorting.sort_offline_by_offline_time')" @change="saveOrderFriendGroup")
                     span.sub-header {{ $t('view.settings.appearance.side_panel.width') }}
                     div.options-container-item
                         el-slider(v-model="asideWidth" @input="setAsideWidth" :show-tooltip="false" :marks="{300: ''}" :min="200" :max="500" style="width:300px")