Split Favorite Friends

src/app.js

@@ -2925,9 +2925,16 @@ console.log(`isLinux: ${LINUX}`);
         // 애초에 $isDeleted인데 여기로 올 수 가 있나..?
         this.cachedFavoritesByObjectId.delete(args.params.objectId);
         $app.localFavoriteFriends.delete(args.params.objectId);
-        for (var group of $app.localFavoriteFriendsDivideByGroup.values()) {
+        $app.localFavoriteFriendsDivideByGroup.forEach((key, group) => {
-            group.delete(args.params.objectId);
+            for (let i = group.length - 1; i >= 0; i--) {
-        }
+                if (group[i].id === args.params.objectId) {
+                    group.splice(i, 1);
+                }
+            }
+            if (group.length === 0) {
+                $app.localFavoriteFriendsDivideByGroup.delete(key);
+            }
+        });
         $app.updateSidebarFriendsList();
         if (ref.$isDeleted) {
             return;
@@ -2982,9 +2989,16 @@ console.log(`isLinux: ${LINUX}`);
             }
             this.cachedFavoritesByObjectId.delete(ref.favoriteId);
             $app.localFavoriteFriends.delete(ref.favoriteId);
-            for (var group of $app.localFavoriteFriendsDivideByGroup.values()) {
+            $app.localFavoriteFriendsDivideByGroup.forEach((key, group) => {
-                group.delete(ref.favoriteId);
+                for (let i = group.length - 1; i >= 0; i--) {
-            }
+                    if (group[i].id === ref.favoriteId) {
+                        group.splice(i, 1);
+                    }
+                }
+                if (group.length === 0) {
+                    $app.localFavoriteFriendsDivideByGroup.delete(key);
+                }
+            });
             $app.updateSidebarFriendsList();
             ref.$isDeleted = true;
             API.$emit('FAVORITE:@DELETE', {
@@ -3052,9 +3066,6 @@ console.log(`isLinux: ${LINUX}`);
                     $app.localFavoriteFriendsGroups.includes(ref.groupKey))
             ) {
                 $app.localFavoriteFriends.add(ref.favoriteId);
-                $app.localFavoriteFriendsDivideByGroup
-                    .get(ref.$groupKey)
-                    .push(ref.favoriteId);
                 $app.updateSidebarFriendsList();
             }
         } else {
@@ -3062,6 +3073,16 @@ console.log(`isLinux: ${LINUX}`);
             ref.$isExpired = false;
         }
         ref.$groupKey = `${ref.type}:${String(ref.tags[0])}`;
+        if (!$app.localFavoriteFriendsDivideByGroup.has(ref.$groupKey)) {
+            $app.localFavoriteFriendsDivideByGroup.set(ref.$groupKey, [
+                ref.favoriteId
+            ]);
+        } else {
+            $app.localFavoriteFriendsDivideByGroup
+                .get(ref.$groupKey)
+                .push(ref.favoriteId);
+        }
+
         if (ref.$isDeleted === false && ref.$groupRef === null) {
             var group = this.cachedFavoriteGroupsByTypeName.get(ref.$groupKey);
             if (typeof group !== 'undefined') {
@@ -3280,7 +3301,9 @@ console.log(`isLinux: ${LINUX}`);
             for (var group of groups) {
                 if (group.assign === false && group.name === ref.name) {
                     group.assign = true;
-                    group.displayName = ref.displayName;
+                    if (ref.displayName) {
+                        group.displayName = ref.displayName;
+                    }
                     group.visibility = ref.visibility;
                     ref.$groupRef = group;
                     assigns.add(ref.id);
@@ -4509,12 +4532,15 @@ console.log(`isLinux: ${LINUX}`);
         if (ctx.state === 'online') {
             if (ctx.isVIP) {
                 $app.removeFromArray(this.vipFriends_, ctx);
-                this.vipFriendsDivideByGroup_.forEach((group) => {
+                this.vipFriendsDivideByGroup_.forEach((key, group) => {
                     for (let i = group.length - 1; i >= 0; i--) {
                         if (group[i].id === ctx.id) {
                             group.splice(i, 1);
                         }
                     }
+                    if (group.length === 0) {
+                        this.vipFriendsDivideByGroup_.delete(key);
+                    }
                 });
             } else {
                 $app.removeFromArray(this.onlineFriends_, ctx);
@@ -4594,12 +4620,15 @@ console.log(`isLinux: ${LINUX}`);
                         this.sortVIPFriends = true;
                     } else {
                         $app.removeFromArray(this.vipFriends_, ctx);
-                        this.vipFriendsDivideByGroup_.forEach((group) => {
+                        this.vipFriendsDivideByGroup_.forEach((key, group) => {
                             for (let i = group.length - 1; i >= 0; i--) {
                                 if (group[i].id === ctx.id) {
                                     group.splice(i, 1);
                                 }
                             }
+                            if (group.length === 0) {
+                                this.vipFriendsDivideByGroup_.delete(key);
+                            }
                         });
                         this.onlineFriends_.push(ctx);
                         this.sortOnlineFriends = true;
@@ -4794,12 +4823,15 @@ console.log(`isLinux: ${LINUX}`);
         if (ctx.state === 'online') {
             if (ctx.isVIP) {
                 $app.removeFromArray(this.vipFriends_, ctx);
-                this.vipFriendsDivideByGroup_.forEach((group) => {
+                this.vipFriendsDivideByGroup_.forEach((key, group) => {
                     for (let i = group.length - 1; i >= 0; i--) {
                         if (group[i].id === ctx.id) {
                             group.splice(i, 1);
                         }
                     }
+                    if (group.length === 0) {
+                        this.vipFriendsDivideByGroup_.delete(key);
+                    }
                 });
             } else {
                 $app.removeFromArray(this.onlineFriends_, ctx);
@@ -5184,8 +5216,8 @@ console.log(`isLinux: ${LINUX}`);
         return this.vipFriends_;
     };
 
-    // VIP friends devide by group
+    // VIP friends divide by group
-    $app.computed.vipFriendsDividebyGroup = function () {
+    $app.computed.vipFriendsDivideByGroup = function () {
         if (this.sortVIPFriends) {
             this.vipFriendsDivideByGroup_.forEach((group) => {
                 group.sort(getFriendsSortFunction(this.sidebarSortMethods));
@@ -5204,14 +5236,16 @@ console.log(`isLinux: ${LINUX}`);
             });
         }
         // 对this.vipFriendsDivideByGroup_的每一项的value值数组进行filter操作，只留下id存在于this.vipFriendsByGroupStatus中的所有项的id中的项
-        const vipFriendsByGroupStatusIds = new Set(
+        if (this.isSidebarGroupByInstance) {
-            this.vipFriendsByGroupStatus.map((friend) => friend.id)
+            const vipFriendsByGroupStatusIds = new Set(
-        );
+                this.vipFriendsByGroupStatus.map((friend) => friend.id)
-        arr.forEach((group) => {
-            group.value = group.value.filter((friend) =>
-                vipFriendsByGroupStatusIds.has(friend.id)
             );
-        });
+            arr.forEach((group) => {
+                group.value = group.value.filter((friend) =>
+                    vipFriendsByGroupStatusIds.has(friend.id)
+                );
+            });
+        }
         return arr;
     };
 
@@ -22113,12 +22147,15 @@ console.log(`isLinux: ${LINUX}`);
                 this.sortVIPFriends = true;
             } else {
                 $app.removeFromArray(this.vipFriends_, ctx);
-                this.vipFriendsDivideByGroup_.forEach((group) => {
+                this.vipFriendsDivideByGroup_.forEach((key, group) => {
                     for (let i = group.length - 1; i >= 0; i--) {
                         if (group[i].id === ctx.id) {
                             group.splice(i, 1);
                         }
                     }
+                    if (group.length === 0) {
+                        this.vipFriendsDivideByGroup_.delete(key);
+                    }
                 });
                 this.onlineFriends_.push(ctx);
                 this.sortOnlineFriends = true;
@@ -23235,6 +23272,22 @@ console.log(`isLinux: ${LINUX}`);
     };
 
     // friendsListSidebar
+
+    //  - DivideByFriendGroup
+
+    $app.data.isSidebarDivideByFriendGroup = await configRepository.getBool(
+        'VRCX_sidebarDivideByFriendGroup',
+        true
+    );
+
+    $app.methods.handleSwitchDivideByFriendGroup = async function () {
+        this.isSidebarDivideByFriendGroup = !this.isSidebarDivideByFriendGroup;
+        await configRepository.setBool(
+            'VRCX_sidebarDivideByFriendGroup',
+            this.isSidebarDivideByFriendGroup
+        );
+    };
+
     //  - SidebarGroupByInstance
 
     $app.methods.handleSwitchGroupByInstance = async function () {

src/classes/prompts.js

@@ -326,7 +326,8 @@ export default class extends baseClass {
                                     ),
                                     type: 'success'
                                 });
-                                return args;
+                                // load new group name
+                                API.refreshFavoriteGroups();
                             });
                         }
                     }

src/localization/en/en.json

@@ -385,7 +385,9 @@
                     },
                     "width": "Width",
                     "group_by_instance": "Group by Instance",
-                    "group_by_instance_tooltip": "Enabling this will group friends by instance when there is more than one friend in the same instance."
+                    "group_by_instance_tooltip": "Enabling this will group friends by instance when there is more than one friend in the same instance.",
+                    "split_favorite_friends": "Split Favorite Friends",
+                    "split_favorite_friends_tooltip": "Separate favorite friends into their individual groups."
                 },
                 "user_dialog": {
                     "header": "User Dialog",

src/mixins/friendsListSidebar.pug

@@ -73,25 +73,73 @@ mixin friendsListSidebar
                         v-show='vipFriendsByGroupStatus.length')
                         i.el-icon-arrow-right(:class='{ rotate: isVIPFriends }')
                         span(style='margin-left: 5px') {{ $t('side_panel.favorite') }} ― {{ vipFriendsByGroupStatus.length }}
-                    div(v-show="isVIPFriends")
+                    div(v-show='isVIPFriends')
-                        div(v-for="(group, idx) in vipFriendsDividebyGroup" :key="idx")
+                        template(v-if='isSidebarDivideByFriendGroup')
-                            div(style="margin-bottom: 3px")
+                            div(v-for='(group, idx) in vipFriendsDivideByGroup' :key='idx')
-                                span(style="color:#c7c7c7") {{ group.displayName }}
+                                div(style='margin-bottom: 3px')
-                                span(style="margin-left: 5px") {{ `(${group.value.length})` }}
+                                    span.extra {{ group.displayName }}
-                            div(style="margin-bottom: 10px")
+                                    span.extra(style='margin-left: 5px') {{ `(${group.value.length})` }}
-                                div.x-friend-item(v-if="group.value && group.value.length" v-for="friend in group.value" :key="friend.id" @click="showUserDialog(friend.id)")
+                                div(style='margin-bottom: 10px')
-                                    template(v-if="friend.ref")
+                                    .x-friend-item(
-                                        .avatar(:class="userStatusClass(friend.ref, friend.pendingOffline)")
+                                        v-if='group.value && group.value.length'
-                                            img(v-lazy="userImage(friend.ref)")
+                                        v-for='friend in group.value'
-                                        .detail
+                                        :key='friend.id'
-                                            span.name(v-if="!hideNicknames && friend.$nickName" :style="{'color':friend.ref.$userColour}") {{ friend.ref.displayName }} ({{ friend.$nickName }})
+                                        @click='showUserDialog(friend.id)')
-                                            span.name(v-else v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
+                                        template(v-if='friend.ref')
-                                            span.extra(v-if="friend.pendingOffline") #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
+                                            .avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
-                                            location.extra(v-else :location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
+                                                img(v-lazy='userImage(friend.ref)')
-                                    template(v-else)
+                                            .detail
-                                        span(v-text="friend.name || friend.id")
+                                                span.name(
-                                        el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
+                                                    v-if='!hideNicknames && friend.$nickName'
-
+                                                    :style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
+                                                span.name(
+                                                    v-else
+                                                    v-text='friend.ref.displayName'
+                                                    :style='{ color: friend.ref.$userColour }')
+                                                span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
+                                                location.extra(
+                                                    v-else
+                                                    :location='friend.ref.location'
+                                                    :traveling='friend.ref.travelingToLocation'
+                                                    :link='false')
+                                        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')
+                        template(v-else)
+                            .x-friend-item(
+                                v-for='friend in vipFriendsByGroupStatus'
+                                :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)')
+                                    .detail
+                                        span.name(
+                                            v-if='!hideNicknames && friend.$nickName'
+                                            :style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
+                                        span.name(
+                                            v-else
+                                            v-text='friend.ref.displayName'
+                                            :style='{ color: friend.ref.$userColour }')
+                                        span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
+                                        location.extra(
+                                            v-else
+                                            :location='friend.ref.location'
+                                            :traveling='friend.ref.travelingToLocation'
+                                            :link='false')
+                                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')
                     //- Group By Instance
                     template(v-if='isSidebarGroupByInstance && friendsInSameInstance.length')
                         .x-friend-group.x-link(@click='toggleSwitchGroupByInstanceCollapsed')

src/mixins/tabs/favorites.pug

@@ -24,7 +24,7 @@ mixin favoritesTab()
                                 el-radio(:label="true") {{ $t('view.settings.appearance.appearance.sort_favorite_by_date') }}
                     el-collapse-item(v-for="group in API.favoriteFriendGroups" :key="group.name")
                         template(slot="title")
-                            span(v-text="group.displayName ? group.displayName : group.name" style="font-weight:bold;font-size:14px;margin-left:10px")
+                            span(v-text="group.displayName" style="font-weight:bold;font-size:14px;margin-left:10px")
                             span(style="color:#909399;font-size:12px;margin-left:10px") {{ group.count }}/{{ group.capacity }}
                             el-tooltip(placement="top" :content="$t('view.favorite.rename_tooltip')" :disabled="hideTooltips")
                                 el-button(@click.stop="changeFavoriteGroupName(group)" size="mini" icon="el-icon-edit" circle style="margin-left:10px")
@@ -91,7 +91,7 @@ mixin favoritesTab()
                     el-collapse-item(v-for="group in API.favoriteWorldGroups" :key="group.name")
                         template(slot="title")
                             div(style="display:flex;align-items:center;")
-                                span(v-text="group.displayName ? group.displayName : group.name" style="font-weight:bold;font-size:14px;margin-left:10px")
+                                span(v-text="group.displayName" style="font-weight:bold;font-size:14px;margin-left:10px")
                                 el-tag(style="margin:1px 0 0 5px" size="mini" :type="userFavoriteWorldsStatusForFavTab(group.visibility)" effect="plain") {{ group.visibility.charAt(0).toUpperCase() + group.visibility.slice(1) }}
                                 span(style="color:#909399;font-size:12px;margin-left:10px") {{ group.count }}/{{ group.capacity }}
                                 el-tooltip(placement="top" :content="$t('view.favorite.visibility_tooltip')" :disabled="hideTooltips")
@@ -215,7 +215,7 @@ mixin favoritesTab()
                     span(style="display:block;margin-top:20px") {{ $t('view.favorite.avatars.vrchat_favorites') }}
                     el-collapse-item(v-for="group in API.favoriteAvatarGroups" :key="group.name")
                         template(slot="title")
-                            span(v-text="group.displayName ? group.displayName : group.name" style="font-weight:bold;font-size:14px;margin-left:10px")
+                            span(v-text="group.displayName" style="font-weight:bold;font-size:14px;margin-left:10px")
                             span(style="color:#909399;font-size:12px;margin-left:10px") {{ group.count }}/{{ group.capacity }}
                             el-tooltip(placement="top" :content="$t('view.favorite.rename_tooltip')" :disabled="hideTooltips")
                                 el-button(@click.stop="changeFavoriteGroupName(group)" size="mini" icon="el-icon-edit" circle style="margin-left:10px")

src/mixins/tabs/settings.pug

@@ -62,9 +62,9 @@ mixin settingsTab()
                     br
                     el-select(v-model="localFavoriteFriendsGroups" multiple clearable :placeholder="$t('view.settings.general.favorites.group_placeholder')" @change="updateLocalFavoriteFriends" style="margin-top:8px")
                         el-option-group(:label="$t('view.settings.general.favorites.group_placeholder')")
-                            el-option.x-friend-item(v-for="group in API.favoriteFriendGroups" :key="group.key" :label="group.displayName ? group.displayName : group.name" :value="group.key")
+                            el-option.x-friend-item(v-for="group in API.favoriteFriendGroups" :key="group.key" :label="group.displayName" :value="group.key")
                                 .detail
-                                    span.name(v-text="group.displayName ? group.displayName : group.name")
+                                    span.name(v-text="group.displayName")
                 //- General | Game Log
                 div.options-container
                     span.header {{ $t('view.settings.general.logging.header') }}
@@ -233,6 +233,8 @@ mixin settingsTab()
                         el-slider(v-model="asideWidth" @input="setAsideWidth" :show-tooltip="false" :marks="{300: ''}" :min="200" :max="500" style="display:inline-block;width:300px")
                     div.options-container-item
                         simple-switch(:label='$t("view.settings.appearance.side_panel.group_by_instance")' :value='isSidebarGroupByInstance' @change='handleSwitchGroupByInstance' :tooltip='$t("view.settings.appearance.side_panel.group_by_instance_tooltip")')
+                    div.options-container-item
+                        simple-switch(:label='$t("view.settings.appearance.side_panel.split_favorite_friends")' :value='isSidebarDivideByFriendGroup' @change='handleSwitchDivideByFriendGroup' :tooltip='$t("view.settings.appearance.side_panel.split_favorite_friends_tooltip")')
                 //- Appearance | User Dialog
                 div.options-container
                     span.header {{ $t('view.settings.appearance.user_dialog.header') }}