refactor: Avatar dialog (#1208)

src/app.pug

@@ -43,14 +43,14 @@ doctype html
         include ./mixins/tabs/search.pug
         +searchTab
 
-        favorites-tab(v-bind='favoritesTabBind' v-on='favoritesTabEvent')
+        FavoritesTab(v-bind='favoritesTabBind' v-on='favoritesTabEvent')
 
         //- friendLog
         include ./mixins/tabs/friendLog.pug
         +friendLogTab
 
         //- moderation
-        moderation-tab(v-bind='moderationTabBind')
+        ModerationTab(v-bind='moderationTabBind')
 
         //- notification
         include ./mixins/tabs/notifications.pug
@@ -61,25 +61,22 @@ doctype html
         +profileTab
 
         //- friends list
-        friends-list-tab(v-bind='friendsListTabBind' v-on='friendsListTabEvent')
+        FriendsListTab(v-bind='friendsListTabBind' v-on='friendsListTabEvent')
 
         //- charts
         keep-alive
-            charts-tab(v-if='menuActiveIndex === "charts"' v-bind='chartsTabBind' v-on='chartsTabEvent')
+            ChartsTab(v-if='menuActiveIndex === "charts"' v-bind='chartsTabBind' v-on='chartsTabEvent')
 
         //- settings
         include ./mixins/tabs/settings.pug
         +settingsTab
 
-        side-bar(v-bind='sideBarTabBind' v-on='sideBarTabEvent')
+        SideBar(v-bind='sideBarTabBind' v-on='sideBarTabEvent')
 
     //- ## Dialogs ## -\\
     include ./mixins/dialogs/userDialog.pug
     +userDialog
 
-    include ./mixins/dialogs/avatarDialog.pug
-    +avatarDialog
-
     include ./mixins/dialogs/images.pug
     +images
 
@@ -107,40 +104,40 @@ doctype html
     include ./mixins/dialogs/settings.pug
     +settings
 
-    include ./mixins/dialogs/tags.pug
-    +tags
-
     include ./mixins/dialogs/boops.pug
     +boops
 
     //- previous instances
-    previous-instances-info-dialog(v-bind='previousInstancesInfoDialogBind' v-on='previousInstancesInfoDialogEvent')
+    PreviousInstancesInfoDialog(v-bind='previousInstancesInfoDialogBind' v-on='previousInstancesInfoDialogEvent')
 
-    previous-instances-user-dialog(v-bind='previousInstancesUserDialogBind' v-on='previousInstancesUserDialogEvent')
+    PreviousInstancesUserDialog(v-bind='previousInstancesUserDialogBind' v-on='previousInstancesUserDialogEvent')
 
     //- favorites
-    friend-import-dialog(v-bind='friendImportDialogBind' v-on='friendImportDialogEvent')
+    FriendImportDialog(v-bind='friendImportDialogBind' v-on='friendImportDialogEvent')
 
-    world-import-dialog(v-bind='worldImportDialogBind' v-on='worldImportDialogEvent')
+    WorldImportDialog(v-bind='worldImportDialogBind' v-on='worldImportDialogEvent')
 
-    avatar-import-dialog(v-bind='avatarImportDialogBind' v-on='avatarImportDialogEvent')
+    AvatarImportDialog(v-bind='avatarImportDialogBind' v-on='avatarImportDialogEvent')
 
     //- favorites dialog
-    favorite-dialog(v-bind='favoriteDialogBind' v-on='favoriteDialogEvent')
+    FavoriteDialog(v-bind='favoriteDialogBind' v-on='favoriteDialogEvent')
 
-    export-friends-list-dialog(v-bind='exportFriendsListDialogBind' v-on='exportFriendsListDialogEvent')
+    ExportFriendsListDialog(v-bind='exportFriendsListDialogBind' v-on='exportFriendsListDialogEvent')
 
-    export-avatars-list-dialog(v-bind='exportAvatarsListDialogBind' v-on='exportAvatarsListDialogEvent')
+    ExportAvatarsListDialog(v-bind='exportAvatarsListDialogBind' v-on='exportAvatarsListDialogEvent')
 
     //- launch
-    launch-dialog(v-bind='launchDialogBind' v-on='launchDialogEvent')
+    LaunchDialog(v-bind='launchDialogBind' v-on='launchDialogEvent')
 
     //- world
-    world-dialog(v-bind='worldDialogBind' v-on='worldDialogEvent')
+    WorldDialog(v-bind='worldDialogBind' v-on='worldDialogEvent')
 
     //- group
     GroupDialog(v-bind='groupDialogBind' v-on='groupDialogEvent')
 
     InviteGroupDialog(v-bind='inviteGroupDialogBind' v-on='inviteGroupDialogEvent')
 
+    //- avatar
+    AvatarDialog(v-bind='avatarDialogBind' v-on='avatarDialogEvent')
+
     //- el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="templateDialog" :visible.sync="templateDialog.visible" :title="$t('dialog.template_dialog.header')" width="450px")

src/classes/gameRealtimeLogging.js

@@ -1240,7 +1240,7 @@ export default class extends baseClass {
                 platform = 'Desktop';
             }
             this.photonUserSusieCheck(photonId, user, gameLogDate);
-            this.checkVRChatCache(avatar).then((cacheInfo) => {
+            $utils.checkVRChatCache(avatar).then((cacheInfo) => {
                 var inCache = false;
                 if (cacheInfo.Item1 > 0) {
                     inCache = true;
@@ -1412,7 +1412,7 @@ export default class extends baseClass {
             ) {
                 avatar.name = this.replaceBioSymbols(avatar.name);
                 avatar.description = this.replaceBioSymbols(avatar.description);
-                this.checkVRChatCache(avatar).then((cacheInfo) => {
+                $utils.checkVRChatCache(avatar).then((cacheInfo) => {
                     var inCache = false;
                     if (cacheInfo.Item1 > 0) {
                         inCache = true;

src/classes/memos.js

@@ -95,11 +95,6 @@ export default class extends baseClass {
             }
         },
 
-        onAvatarMemoChange() {
-            var D = this.avatarDialog;
-            this.saveAvatarMemo(D.id, D.memo);
-        },
-
         async getAvatarMemo(avatarId) {
             try {
                 return await database.getAvatarMemoDB(avatarId);
@@ -111,18 +106,6 @@ export default class extends baseClass {
                     memo: ''
                 };
             }
-        },
-
-        saveAvatarMemo(avatarId, memo) {
-            if (memo) {
-                database.setAvatarMemo({
-                    avatarId,
-                    editedAt: new Date().toJSON(),
-                    memo
-                });
-            } else {
-                database.deleteAvatarMemo(avatarId);
-            }
         }
     };
 }

src/classes/prompts.js

@@ -362,82 +362,6 @@ export default class extends baseClass {
             );
         },
 
-        promptRenameAvatar(avatar) {
-            this.$prompt(
-                $t('prompt.rename_avatar.description'),
-                $t('prompt.rename_avatar.header'),
-                {
-                    distinguishCancelAndClose: true,
-                    confirmButtonText: $t('prompt.rename_avatar.ok'),
-                    cancelButtonText: $t('prompt.rename_avatar.cancel'),
-                    inputValue: avatar.ref.name,
-                    inputErrorMessage: $t('prompt.rename_avatar.input_error'),
-                    callback: (action, instance) => {
-                        if (
-                            action === 'confirm' &&
-                            instance.inputValue !== avatar.ref.name
-                        ) {
-                            avatarRequest
-                                .saveAvatar({
-                                    id: avatar.id,
-                                    name: instance.inputValue
-                                })
-                                .then((args) => {
-                                    this.$message({
-                                        message: $t(
-                                            'prompt.rename_avatar.message.success'
-                                        ),
-                                        type: 'success'
-                                    });
-                                    return args;
-                                });
-                        }
-                    }
-                }
-            );
-        },
-
-        promptChangeAvatarDescription(avatar) {
-            this.$prompt(
-                $t('prompt.change_avatar_description.description'),
-                $t('prompt.change_avatar_description.header'),
-                {
-                    distinguishCancelAndClose: true,
-                    confirmButtonText: $t(
-                        'prompt.change_avatar_description.ok'
-                    ),
-                    cancelButtonText: $t(
-                        'prompt.change_avatar_description.cancel'
-                    ),
-                    inputValue: avatar.ref.description,
-                    inputErrorMessage: $t(
-                        'prompt.change_avatar_description.input_error'
-                    ),
-                    callback: (action, instance) => {
-                        if (
-                            action === 'confirm' &&
-                            instance.inputValue !== avatar.ref.description
-                        ) {
-                            avatarRequest
-                                .saveAvatar({
-                                    id: avatar.id,
-                                    description: instance.inputValue
-                                })
-                                .then((args) => {
-                                    this.$message({
-                                        message: $t(
-                                            'prompt.change_avatar_description.message.success'
-                                        ),
-                                        type: 'success'
-                                    });
-                                    return args;
-                                });
-                        }
-                    }
-                }
-            );
-        },
-
         promptRenameWorld(world) {
             this.$prompt(
                 $t('prompt.rename_world.description'),

src/classes/request/avatar.js

@@ -132,7 +132,7 @@ const avatarReq = {
                 json,
                 params
             };
-            window.API.$emit('AVATAR:IMPOSTER:CREATE', args);
+            // window.API.$emit('AVATAR:IMPOSTER:CREATE', args);
             return args;
         });
     },
@@ -149,7 +149,7 @@ const avatarReq = {
                 json,
                 params
             };
-            window.API.$emit('AVATAR:IMPOSTER:DELETE', args);
+            // window.API.$emit('AVATAR:IMPOSTER:DELETE', args);
             return args;
         });
     }

src/classes/request/avatarModeration.js

@@ -8,7 +8,7 @@ const avatarModerationReq = {
             const args = {
                 json
             };
-            window.API.$emit('AVATAR-MODERATION:LIST', args);
+            // window.API.$emit('AVATAR-MODERATION:LIST', args);
             return args;
         });
     },
@@ -26,7 +26,7 @@ const avatarModerationReq = {
                 json,
                 params
             };
-            window.API.$emit('AVATAR-MODERATION', args);
+            // window.API.$emit('AVATAR-MODERATION', args);
             return args;
         });
     },

src/classes/request/misc.js

@@ -69,7 +69,7 @@ const miscReq = {
                 json,
                 params
             };
-            window.API.$emit('FILE:ANALYSIS', args);
+            // window.API.$emit('FILE:ANALYSIS', args);
             return args;
         });
     },

src/classes/utils.js

@@ -1,6 +1,9 @@
+import Noty from 'noty';
+
 let echarts = null;
 
-export default {
+// messy here, organize later
+const _utils = {
     removeFromArray(array, item) {
         var { length } = array;
         for (var i = 0; i < length; ++i) {
@@ -483,11 +486,219 @@ export default {
         }
         return false;
     },
-    getAuditLogTypeName(auditLogType) {
+
-        if (!auditLogType) return '';
+    compareUnityVersion(unitySortNumber) {
-        return auditLogType
+        if (!window.API.cachedConfig.sdkUnityVersion) {
-            .replace('group.', '')
+            console.error('No cachedConfig.sdkUnityVersion');
-            .replace(/\./g, ' ')
+            return false;
-            .replace(/\b\w/g, (l) => l.toUpperCase());
+        }
+
+        // 2022.3.6f1  2022 03 06 000
+        // 2019.4.31f1 2019 04 31 000
+        // 5.3.4p1     5    03 04 010
+        // 2019.4.31f1c1 is a thing
+        var array = API.cachedConfig.sdkUnityVersion.split('.');
+        if (array.length < 3) {
+            console.error('Invalid cachedConfig.sdkUnityVersion');
+            return false;
+        }
+        var currentUnityVersion = array[0];
+        currentUnityVersion += array[1].padStart(2, '0');
+        var indexFirstLetter = array[2].search(/[a-zA-Z]/);
+        if (indexFirstLetter > -1) {
+            currentUnityVersion += array[2]
+                .substr(0, indexFirstLetter)
+                .padStart(2, '0');
+            currentUnityVersion += '0';
+            var letter = array[2].substr(indexFirstLetter, 1);
+            if (letter === 'p') {
+                currentUnityVersion += '1';
+            } else {
+                // f
+                currentUnityVersion += '0';
+            }
+            currentUnityVersion += '0';
+        } else {
+            // just in case
+            currentUnityVersion += '000';
+        }
+        // just in case
+        currentUnityVersion = currentUnityVersion.replace(/\D/g, '');
+
+        if (
+            parseInt(unitySortNumber, 10) <= parseInt(currentUnityVersion, 10)
+        ) {
+            return true;
+        }
+        return false;
+    },
+    async checkVRChatCache(ref) {
+        if (!ref.unityPackages) {
+            return { Item1: -1, Item2: false, Item3: '' };
+        }
+        var assetUrl = '';
+        var variant = '';
+        for (var i = ref.unityPackages.length - 1; i > -1; i--) {
+            var unityPackage = ref.unityPackages[i];
+            if (unityPackage.variant && unityPackage.variant !== 'security') {
+                continue;
+            }
+            if (
+                unityPackage.platform === 'standalonewindows' &&
+                _utils.compareUnityVersion(unityPackage.unitySortNumber)
+            ) {
+                assetUrl = unityPackage.assetUrl;
+                if (unityPackage.variant !== 'standard') {
+                    variant = unityPackage.variant;
+                }
+                break;
+            }
+        }
+        if (!assetUrl) {
+            assetUrl = ref.assetUrl;
+        }
+        var id = _utils.extractFileId(assetUrl);
+        var version = parseInt(_utils.extractFileVersion(assetUrl), 10);
+        var variantVersion = parseInt(
+            _utils.extractVariantVersion(assetUrl),
+            10
+        );
+        if (!id || !version) {
+            return { Item1: -1, Item2: false, Item3: '' };
+        }
+
+        return AssetBundleManager.CheckVRChatCache(
+            id,
+            version,
+            variant,
+            variantVersion
+        );
+    },
+    async deleteVRChatCache(ref) {
+        var assetUrl = '';
+        var variant = '';
+        for (var i = ref.unityPackages.length - 1; i > -1; i--) {
+            var unityPackage = ref.unityPackages[i];
+            if (
+                unityPackage.variant &&
+                unityPackage.variant !== 'standard' &&
+                unityPackage.variant !== 'security'
+            ) {
+                continue;
+            }
+            if (
+                unityPackage.platform === 'standalonewindows' &&
+                $utils.compareUnityVersion(unityPackage.unitySortNumber)
+            ) {
+                assetUrl = unityPackage.assetUrl;
+                if (unityPackage.variant !== 'standard') {
+                    variant = unityPackage.variant;
+                }
+                break;
+            }
+        }
+        var id = $utils.extractFileId(assetUrl);
+        var version = parseInt($utils.extractFileVersion(assetUrl), 10);
+        var variantVersion = parseInt(
+            $utils.extractVariantVersion(assetUrl),
+            10
+        );
+        await AssetBundleManager.DeleteCache(
+            id,
+            version,
+            variant,
+            variantVersion
+        );
+    },
+    downloadAndSaveJson(fileName, data) {
+        if (!fileName || !data) {
+            return;
+        }
+        try {
+            var link = document.createElement('a');
+            link.setAttribute(
+                'href',
+                `data:application/json;charset=utf-8,${encodeURIComponent(
+                    JSON.stringify(data, null, 2)
+                )}`
+            );
+            link.setAttribute('download', `${fileName}.json`);
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        } catch {
+            new Noty({
+                type: 'error',
+                text: $app.escapeTag('Failed to download JSON.')
+            }).show();
+        }
+    },
+    getAvailablePlatforms(unityPackages) {
+        var isPC = false;
+        var isQuest = false;
+        var isIos = false;
+        if (typeof unityPackages === 'object') {
+            for (var unityPackage of unityPackages) {
+                if (
+                    unityPackage.variant &&
+                    unityPackage.variant !== 'standard' &&
+                    unityPackage.variant !== 'security'
+                ) {
+                    continue;
+                }
+                if (unityPackage.platform === 'standalonewindows') {
+                    isPC = true;
+                } else if (unityPackage.platform === 'android') {
+                    isQuest = true;
+                } else if (unityPackage.platform === 'ios') {
+                    isIos = true;
+                }
+            }
+        }
+        return { isPC, isQuest, isIos };
+    },
+    getPlatformInfo(unityPackages) {
+        var pc = {};
+        var android = {};
+        var ios = {};
+        if (typeof unityPackages === 'object') {
+            for (var unityPackage of unityPackages) {
+                if (
+                    unityPackage.variant &&
+                    unityPackage.variant !== 'standard' &&
+                    unityPackage.variant !== 'security'
+                ) {
+                    continue;
+                }
+                if (unityPackage.platform === 'standalonewindows') {
+                    if (
+                        unityPackage.performanceRating === 'None' &&
+                        pc.performanceRating
+                    ) {
+                        continue;
+                    }
+                    pc = unityPackage;
+                } else if (unityPackage.platform === 'android') {
+                    if (
+                        unityPackage.performanceRating === 'None' &&
+                        android.performanceRating
+                    ) {
+                        continue;
+                    }
+                    android = unityPackage;
+                } else if (unityPackage.platform === 'ios') {
+                    if (
+                        unityPackage.performanceRating === 'None' &&
+                        ios.performanceRating
+                    ) {
+                        continue;
+                    }
+                    ios = unityPackage;
+                }
+            }
+        }
+        return { pc, android, ios };
     }
 };
+
+export default _utils;

src/classes/vrcRegistry.js

@@ -136,7 +136,7 @@ export default class extends baseClass {
         },
 
         saveVrcRegistryBackupToFile(row) {
-            this.downloadAndSaveJson(row.name, row.data);
+            $utils.downloadAndSaveJson(row.name, row.data);
         },
 
         async openJsonFileSelectorDialogElectron() {

src/components/charts/InstanceActivity.vue

@@ -102,7 +102,7 @@
                 <el-divider>·</el-divider>
             </div>
         </transition>
-        <instance-activity-detail
+        <InstanceActivityDetail
             v-for="arr in filteredActivityDetailData"
             :key="arr[0].location + arr[0].created_at"
             ref="activityDetailChartRef"

src/components/favorites/FavoritesAvatarTab.vue

@@ -83,7 +83,7 @@
                     </el-tooltip>
                 </template>
                 <div v-if="group.count" class="x-friend-list" style="margin-top: 10px">
-                    <favorites-avatar-item
+                    <FavoritesAvatarItem
                         v-for="favorite in groupedByGroupKeyFavoriteAvatars[group.key]"
                         :key="favorite.id"
                         :favorite="favorite"
@@ -126,14 +126,14 @@
                     </el-tooltip>
                 </template>
                 <div v-if="avatarHistoryArray.length" class="x-friend-list" style="margin-top: 10px">
-                    <favorites-avatar-local-history-item
+                    <FavoritesAvatarLocalHistoryItem
                         v-for="favorite in avatarHistoryArray"
                         :key="favorite.id"
                         style="display: inline-block; width: 300px; margin-right: 15px"
                         :favorite="favorite"
                         :hide-tooltips="hideTooltips"
                         @select-avatar-with-confirmation="selectAvatarWithConfirmation"
-                        @click="showAvatarDialog(favorite.id)"></favorites-avatar-local-history-item>
+                        @click="showAvatarDialog(favorite.id)" />
                 </div>
                 <div
                     v-else
@@ -194,7 +194,7 @@
                     </el-tooltip>
                 </template>
                 <div v-if="localAvatarFavorites[group].length" class="x-friend-list" :style="{ marginTop: '10px' }">
-                    <favorites-avatar-item
+                    <FavoritesAvatarItem
                         v-for="favorite in localAvatarFavorites[group]"
                         :key="favorite.id"
                         is-local-favorite
@@ -207,7 +207,7 @@
                         @handle-select="favorite.$selected = $event"
                         @remove-local-avatar-favorite="removeLocalAvatarFavorite"
                         @select-avatar-with-confirmation="selectAvatarWithConfirmation"
-                        @click="showAvatarDialog(favorite.id)"></favorites-avatar-item>
+                        @click="showAvatarDialog(favorite.id)" />
                 </div>
                 <div
                     v-else
@@ -223,7 +223,7 @@
                 </div>
             </el-collapse-item>
         </el-collapse>
-        <avatar-export-dialog
+        <AvatarExportDialog
             :avatar-export-dialog-visible.sync="avatarExportDialogVisible"
             :favorite-avatars="favoriteAvatars"
             :local-avatar-favorite-groups="localAvatarFavoriteGroups"

src/components/favorites/FavoritesFriendTab.vue

@@ -47,7 +47,7 @@
                     </el-tooltip>
                 </template>
                 <div v-if="group.count" class="x-friend-list" style="margin-top: 10px">
-                    <favorites-friend-item
+                    <FavoritesFriendItem
                         v-for="favorite in groupedByGroupKeyFavoriteFriends[group.key]"
                         :key="favorite.id"
                         style="display: inline-block; width: 300px; margin-right: 15px"
@@ -70,9 +70,9 @@
                 </div>
             </el-collapse-item>
         </el-collapse>
-        <friend-export-dialog
+        <FriendExportDialog
             :friend-export-dialog-visible.sync="friendExportDialogVisible"
-            :favorite-friends="favoriteFriends"></friend-export-dialog>
+            :favorite-friends="favoriteFriends" />
     </div>
 </template>
 

src/components/favorites/FavoritesWorldTab.vue

@@ -118,7 +118,7 @@
                     </div>
                 </template>
                 <div v-if="group.count" class="x-friend-list" style="margin-top: 10px">
-                    <favorites-world-item
+                    <FavoritesWorldItem
                         v-for="favorite in groupedByGroupKeyFavoriteWorlds[group.key]"
                         :key="favorite.id"
                         :group="group"
@@ -188,7 +188,7 @@
                     </el-tooltip>
                 </template>
                 <div v-if="localWorldFavorites[group].length" class="x-friend-list" style="margin-top: 10px">
-                    <favorites-world-item
+                    <FavoritesWorldItem
                         v-for="favorite in localWorldFavorites[group]"
                         :key="favorite.id"
                         is-local-favorite
@@ -215,7 +215,7 @@
                 </div>
             </el-collapse-item>
         </el-collapse>
-        <world-export-dialog
+        <WorldExportDialog
             :favorite-worlds="favoriteWorlds"
             :world-export-dialog-visible.sync="worldExportDialogVisible"
             :local-world-favorites="localWorldFavorites"

src/mixins/dialogs/avatarDialog.pug

@@ -1,323 +0,0 @@
-mixin avatarDialog
-    el-dialog.x-dialog.x-avatar-dialog(
-        :before-close='beforeDialogClose'
-        @mousedown.native='dialogMouseDown'
-        @mouseup.native='dialogMouseUp'
-        ref='avatarDialog'
-        :visible.sync='avatarDialog.visible'
-        :show-close='false'
-        width='600px')
-        div(v-loading='avatarDialog.loading')
-            div(style='display: flex')
-                el-popover(placement='right' width='500px' trigger='click')
-                    img.x-link(
-                        slot='reference'
-                        v-lazy='avatarDialog.ref.thumbnailImageUrl'
-                        style='flex: none; width: 160px; height: 120px; border-radius: 12px')
-                    img.x-link(
-                        v-lazy='avatarDialog.ref.imageUrl'
-                        style='width: 500px; height: 375px'
-                        @click='showFullscreenImageDialog(avatarDialog.ref.imageUrl)')
-                div(style='flex: 1; display: flex; align-items: center; margin-left: 15px')
-                    div(style='flex: 1')
-                        div
-                            span.dialog-title(v-text='avatarDialog.ref.name')
-                        div(style='margin-top: 5px')
-                            span.x-link.x-grey(
-                                v-text='avatarDialog.ref.authorName'
-                                @click='showUserDialog(avatarDialog.ref.authorId)'
-                                style='font-family: monospace')
-                        div
-                            el-tag(
-                                v-if='avatarDialog.ref.releaseStatus === "public"'
-                                type='success'
-                                effect='plain'
-                                size='mini'
-                                style='margin-right: 5px; margin-top: 5px') {{ $t('dialog.avatar.tags.public') }}
-                            el-tag(
-                                v-else
-                                type='danger'
-                                effect='plain'
-                                size='mini'
-                                style='margin-right: 5px; margin-top: 5px') {{ $t('dialog.avatar.tags.private') }}
-                            el-tag.x-tag-platform-pc(
-                                v-if='avatarDialog.isPC'
-                                type='info'
-                                effect='plain'
-                                size='mini'
-                                style='margin-right: 5px; margin-top: 5px') PC
-                                span.x-grey(
-                                    v-if='avatarDialog.platformInfo.pc'
-                                    style='margin-left: 5px; border-left: inherit; padding-left: 5px') {{ avatarDialog.platformInfo.pc.performanceRating }}
-                                span.x-grey(
-                                    v-if='avatarDialog.bundleSizes["standalonewindows"]'
-                                    style='margin-left: 5px; border-left: inherit; padding-left: 5px') {{ avatarDialog.bundleSizes['standalonewindows'].fileSize }}
-                            el-tag.x-tag-platform-quest(
-                                v-if='avatarDialog.isQuest'
-                                type='info'
-                                effect='plain'
-                                size='mini'
-                                style='margin-right: 5px; margin-top: 5px') Android
-                                span.x-grey(
-                                    v-if='avatarDialog.platformInfo.android'
-                                    style='margin-left: 5px; border-left: inherit; padding-left: 5px') {{ avatarDialog.platformInfo.android.performanceRating }}
-                                span.x-grey(
-                                    v-if='avatarDialog.bundleSizes["android"]'
-                                    style='margin-left: 5px; border-left: inherit; padding-left: 5px') {{ avatarDialog.bundleSizes['android'].fileSize }}
-                            el-tag.x-tag-platform-ios(
-                                v-if='avatarDialog.isIos'
-                                type='info'
-                                effect='plain'
-                                size='mini'
-                                style='margin-right: 5px; margin-top: 5px') iOS
-                                span.x-grey(
-                                    v-if='avatarDialog.platformInfo.ios'
-                                    style='margin-left: 5px; border-left: inherit; padding-left: 5px') {{ avatarDialog.platformInfo.ios.performanceRating }}
-                                span.x-grey(
-                                    v-if='avatarDialog.bundleSizes["ios"]'
-                                    style='margin-left: 5px; border-left: inherit; padding-left: 5px') {{ avatarDialog.bundleSizes['ios'].fileSize }}
-                            el-tag.x-link(
-                                v-if='avatarDialog.inCache'
-                                type='info'
-                                effect='plain'
-                                size='mini'
-                                @click='openFolderGeneric(avatarDialog.cachePath)'
-                                style='margin-right: 5px; margin-top: 5px')
-                                span(v-text='avatarDialog.cacheSize')
-                                |  {{ $t('dialog.avatar.tags.cache') }}
-                            el-tag(
-                                v-if='avatarDialog.isQuestFallback'
-                                type='info'
-                                effect='plain'
-                                size='mini'
-                                style='margin-right: 5px; margin-top: 5px') {{ $t('dialog.avatar.tags.fallback') }}
-                            el-tag(
-                                v-if='avatarDialog.hasImposter'
-                                type='info'
-                                effect='plain'
-                                size='mini'
-                                style='margin-right: 5px; margin-top: 5px') {{ $t('dialog.avatar.tags.impostor') }}
-                                span.x-grey(
-                                    v-if='avatarDialog.imposterVersion'
-                                    style='margin-left: 5px; border-left: inherit; padding-left: 5px') v{{ avatarDialog.imposterVersion }}
-                            el-tag(
-                                v-if='avatarDialog.ref.unityPackageUrl'
-                                type='success'
-                                effect='plain'
-                                size='mini'
-                                style='margin-right: 5px; margin-top: 5px') {{ $t('dialog.avatar.tags.future_proofing') }}
-                            div
-                                template(v-for='tag in avatarDialog.ref.tags')
-                                    el-tag(
-                                        v-if='tag.startsWith("content_")'
-                                        :key='tag'
-                                        effect='plain'
-                                        size='mini'
-                                        style='margin-right: 5px; margin-top: 5px')
-                                        template(v-if='tag === "content_horror"') {{ $t('dialog.avatar.tags.content_horror') }}
-                                        template(v-else-if='tag === "content_gore"') {{ $t('dialog.avatar.tags.content_gore') }}
-                                        template(v-else-if='tag === "content_violence"') {{ $t('dialog.avatar.tags.content_violence') }}
-                                        template(v-else-if='tag === "content_adult"') {{ $t('dialog.avatar.tags.content_adult') }}
-                                        template(v-else-if='tag === "content_sex"') {{ $t('dialog.avatar.tags.content_sex') }}
-                                        template(v-else) {{ tag.replace('content_', '') }}
-                        div(style='margin-top: 5px')
-                            span(
-                                v-show='avatarDialog.ref.name !== avatarDialog.ref.description'
-                                v-text='avatarDialog.ref.description'
-                                style='font-size: 12px')
-                    div(style='flex: none; margin-left: 10px')
-                        el-tooltip(
-                            v-if='avatarDialog.inCache'
-                            placement='top'
-                            :content='$t("dialog.avatar.actions.delete_cache_tooltip")'
-                            :disabled='hideTooltips')
-                            el-button(
-                                icon='el-icon-delete'
-                                circle
-                                @click='deleteVRChatCache(avatarDialog.ref)'
-                                :disabled='isGameRunning && avatarDialog.cacheLocked')
-                        el-tooltip(
-                            v-if='avatarDialog.isFavorite'
-                            placement='top'
-                            :content='$t("dialog.avatar.actions.favorite_tooltip")'
-                            :disabled='hideTooltips')
-                            el-button(
-                                type='warning'
-                                icon='el-icon-star-on'
-                                circle
-                                @click='avatarDialogCommand("Add Favorite")'
-                                style='margin-left: 5px')
-                        el-tooltip(
-                            v-else
-                            placement='top'
-                            :content='$t("dialog.avatar.actions.favorite_tooltip")'
-                            :disabled='hideTooltips')
-                            el-button(
-                                type='default'
-                                icon='el-icon-star-off'
-                                circle
-                                @click='avatarDialogCommand("Add Favorite")'
-                                style='margin-left: 5px')
-                        el-tooltip(
-                            placement='top'
-                            :content='$t("dialog.avatar.actions.select")'
-                            :disabled='hideTooltips')
-                            el-button(
-                                type='default'
-                                icon='el-icon-check'
-                                circle
-                                :disabled='API.currentUser.currentAvatar === avatarDialog.id'
-                                @click='selectAvatar(avatarDialog.id)'
-                                style='margin-left: 5px')
-                        el-dropdown(
-                            trigger='click'
-                            @command='avatarDialogCommand'
-                            size='small'
-                            style='margin-left: 5px')
-                            el-button(:type='avatarDialog.isBlocked ? "danger" : "default"' icon='el-icon-more' circle)
-                            el-dropdown-menu(#default='dropdown')
-                                el-dropdown-item(icon='el-icon-refresh' command='Refresh') {{ $t('dialog.avatar.actions.refresh') }}
-                                el-dropdown-item(icon='el-icon-share' command='Share') {{ $t('dialog.avatar.actions.share') }}
-                                el-dropdown-item(
-                                    v-if='avatarDialog.isBlocked'
-                                    icon='el-icon-circle-check'
-                                    command='Unblock Avatar'
-                                    style='color: #f56c6c'
-                                    divided) {{ $t('dialog.avatar.actions.unblock') }}
-                                el-dropdown-item(v-else icon='el-icon-circle-close' command='Block Avatar' divided) {{ $t('dialog.avatar.actions.block') }}
-                                el-dropdown-item(
-                                    v-if='/quest/.test(avatarDialog.ref.tags)'
-                                    icon='el-icon-check'
-                                    command='Select Fallback Avatar') {{ $t('dialog.avatar.actions.select_fallback') }}
-                                el-dropdown-item(
-                                    v-if='avatarDialog.ref.authorId !== API.currentUser.id'
-                                    icon='el-icon-picture-outline'
-                                    command='Previous Images') {{ $t('dialog.avatar.actions.show_previous_images') }}
-                                template(v-if='avatarDialog.ref.authorId === API.currentUser.id')
-                                    el-dropdown-item(
-                                        v-if='avatarDialog.ref.releaseStatus === "public"'
-                                        icon='el-icon-user-solid'
-                                        command='Make Private'
-                                        divided) {{ $t('dialog.avatar.actions.make_private') }}
-                                    el-dropdown-item(v-else icon='el-icon-user' command='Make Public' divided) {{ $t('dialog.avatar.actions.make_public') }}
-                                    el-dropdown-item(icon='el-icon-edit' command='Rename') {{ $t('dialog.avatar.actions.rename') }}
-                                    el-dropdown-item(icon='el-icon-edit' command='Change Description') {{ $t('dialog.avatar.actions.change_description') }}
-                                    el-dropdown-item(icon='el-icon-edit' command='Change Content Tags') {{ $t('dialog.avatar.actions.change_content_tags') }}
-                                    el-dropdown-item(icon='el-icon-picture-outline' command='Change Image') {{ $t('dialog.avatar.actions.change_image') }}
-                                    el-dropdown-item(
-                                        v-if='avatarDialog.ref.unityPackageUrl'
-                                        icon='el-icon-download'
-                                        command='Download Unity Package') {{ $t('dialog.avatar.actions.download_package') }}
-                                    el-dropdown-item(
-                                        v-if='avatarDialog.hasImposter'
-                                        icon='el-icon-refresh'
-                                        command='Regenerate Imposter'
-                                        style='color: #f56c6c'
-                                        divided) {{ $t('dialog.avatar.actions.regenerate_impostor') }}
-                                    el-dropdown-item(
-                                        v-if='avatarDialog.hasImposter'
-                                        icon='el-icon-delete'
-                                        command='Delete Imposter'
-                                        style='color: #f56c6c') {{ $t('dialog.avatar.actions.delete_impostor') }}
-                                    el-dropdown-item(v-else icon='el-icon-user' command='Create Imposter' divided) {{ $t('dialog.avatar.actions.create_impostor') }}
-                                    el-dropdown-item(icon='el-icon-delete' command='Delete' style='color: #f56c6c') {{ $t('dialog.avatar.actions.delete') }}
-            el-tabs
-                el-tab-pane(:label='$t("dialog.avatar.info.header")')
-                    .x-friend-list
-                        .x-friend-item(style='width: 100%; cursor: default')
-                            .detail
-                                span.name(style='margin-bottom: 5px') {{ $t('dialog.avatar.info.memo') }}
-                                el-input.extra(
-                                    v-model='avatarDialog.memo'
-                                    @change='onAvatarMemoChange'
-                                    size='mini'
-                                    type='textarea'
-                                    :rows='2'
-                                    :autosize='{ minRows: 1, maxRows: 20 }'
-                                    :placeholder='$t("dialog.avatar.info.memo_placeholder")'
-                                    resize='none')
-                        .x-friend-item(style='width: 100%; cursor: default')
-                            .detail
-                                span.name {{ $t('dialog.avatar.info.id') }}
-                                span.extra {{ avatarDialog.id }}
-                                    el-tooltip(
-                                        placement='top'
-                                        :content='$t("dialog.avatar.info.id_tooltip")'
-                                        :disabled='hideTooltips')
-                                        el-dropdown(
-                                            trigger='click'
-                                            @click.native.stop
-                                            size='mini'
-                                            style='margin-left: 5px')
-                                            el-button(type='default' icon='el-icon-s-order' size='mini' circle)
-                                            el-dropdown-menu(#default='dropdown')
-                                                el-dropdown-item(@click.native='copyAvatarId(avatarDialog.id)') {{ $t('dialog.avatar.info.copy_id') }}
-                                                el-dropdown-item(@click.native='copyAvatarUrl(avatarDialog.id)') {{ $t('dialog.avatar.info.copy_url') }}
-                        .x-friend-item(style='cursor: default')
-                            .detail
-                                span.name {{ $t('dialog.avatar.info.created_at') }}
-                                span.extra {{ avatarDialog.ref.created_at | formatDate('long') }}
-                        .x-friend-item(style='cursor: default')
-                            .detail
-                                span.name {{ $t('dialog.avatar.info.last_updated') }}
-                                span.extra(v-if='avatarDialog.lastUpdated') {{ avatarDialog.lastUpdated | formatDate('long') }}
-                                span.extra(v-else) {{ avatarDialog.ref.updated_at | formatDate('long') }}
-                        .x-friend-item(style='cursor: default')
-                            .detail
-                                span.name {{ $t('dialog.avatar.info.version') }}
-                                span.extra(v-if='avatarDialog.ref.version !== 0' v-text='avatarDialog.ref.version')
-                                span.extra(v-else) -
-                        .x-friend-item(style='cursor: default')
-                            .detail
-                                span.name {{ $t('dialog.avatar.info.time_spent') }}
-                                    el-tooltip(
-                                        v-if='!hideTooltips'
-                                        placement='top'
-                                        style='margin-left: 5px'
-                                        :content='$t("dialog.world.info.accuracy_notice")')
-                                        i.el-icon-warning
-                                span.extra(v-if='avatarDialog.timeSpent === 0') -
-                                span.extra(v-else) {{ timeToText(avatarDialog.timeSpent) }}
-                        .x-friend-item(style='width: 100%; cursor: default')
-                            .detail
-                                span.name {{ $t('dialog.avatar.info.platform') }}
-                                span.extra(v-if='avatarDialogPlatform' v-text='avatarDialogPlatform')
-                                span.extra(v-else) -
-                el-tab-pane(:label='$t("dialog.avatar.json.header")')
-                    el-button(
-                        type='default'
-                        @click='refreshAvatarDialogTreeData()'
-                        size='mini'
-                        icon='el-icon-refresh'
-                        circle)
-                    el-tooltip(
-                        placement='top'
-                        :content='$t("dialog.avatar.json.file_analysis")'
-                        :disabled='hideTooltips')
-                        el-button(
-                            type='default'
-                            @click='getAvatarFileAnalysis'
-                            size='mini'
-                            icon='el-icon-s-data'
-                            circle
-                            style='margin-left: 5px')
-                    el-button(
-                        type='default'
-                        @click='downloadAndSaveJson(avatarDialog.id, avatarDialog.ref)'
-                        size='mini'
-                        icon='el-icon-download'
-                        circle
-                        style='margin-left: 5px')
-                    el-tree(
-                        v-if='Object.keys(avatarDialog.fileAnalysis).length > 0'
-                        :data='avatarDialog.fileAnalysis'
-                        style='margin-top: 5px; font-size: 12px')
-                        template(#default='scope')
-                            span
-                                span(v-text='scope.data.key' style='font-weight: bold; margin-right: 5px')
-                                span(v-if='!scope.data.children' v-text='scope.data.value')
-                    el-tree(:data='avatarDialog.treeData' style='margin-top: 5px; font-size: 12px')
-                        template(#default='scope')
-                            span
-                                span(v-text='scope.data.key' style='font-weight: bold; margin-right: 5px')
-                                span(v-if='!scope.data.children' v-text='scope.data.value')

src/mixins/dialogs/tags.pug

@@ -1,61 +0,0 @@
-mixin tags
-    //- dialog: Set Avatar Tags
-    el-dialog.x-dialog(
-        :before-close='beforeDialogClose'
-        @mousedown.native='dialogMouseDown'
-        @mouseup.native='dialogMouseUp'
-        ref='setAvatarTagsDialog'
-        :visible.sync='setAvatarTagsDialog.visible'
-        :title='$t("dialog.set_avatar_tags.header")'
-        width='770px')
-        template(v-if='setAvatarTagsDialog.visible')
-            el-checkbox(v-model='setAvatarTagsDialog.contentHorror' @change='updateSelectedAvatarTags') {{ $t('dialog.set_avatar_tags.content_horror') }}
-            br
-            el-checkbox(v-model='setAvatarTagsDialog.contentGore' @change='updateSelectedAvatarTags') {{ $t('dialog.set_avatar_tags.content_gore') }}
-            br
-            el-checkbox(v-model='setAvatarTagsDialog.contentViolence' @change='updateSelectedAvatarTags') {{ $t('dialog.set_avatar_tags.content_violence') }}
-            br
-            el-checkbox(v-model='setAvatarTagsDialog.contentAdult' @change='updateSelectedAvatarTags') {{ $t('dialog.set_avatar_tags.content_adult') }}
-            br
-            el-checkbox(v-model='setAvatarTagsDialog.contentSex' @change='updateSelectedAvatarTags') {{ $t('dialog.set_avatar_tags.content_sex') }}
-            br
-            el-input(
-                v-model='setAvatarTagsDialog.selectedTagsCsv'
-                @input='updateInputAvatarTags'
-                size='mini'
-                :autosize='{ minRows: 2, maxRows: 5 }'
-                :placeholder='$t("dialog.set_avatar_tags.custom_tags_placeholder")'
-                style='margin-top: 10px')
-            template(v-if='setAvatarTagsDialog.ownAvatars.length === setAvatarTagsDialog.selectedCount')
-                el-button(size='small' @click='setAvatarTagsSelectToggle') {{ $t('dialog.set_avatar_tags.select_none') }}
-            template(v-else)
-                el-button(size='small' @click='setAvatarTagsSelectToggle') {{ $t('dialog.set_avatar_tags.select_all') }}
-            span(style='margin-left: 5px') {{ setAvatarTagsDialog.selectedCount }} / {{ setAvatarTagsDialog.ownAvatars.length }}
-            span(v-if='setAvatarTagsDialog.loading' style='margin-left: 5px')
-                i.el-icon-loading
-            br
-            .x-friend-list(style='margin-top: 10px; min-height: 60px; max-height: 280px')
-                .x-friend-item.x-friend-item-border(
-                    v-for='avatar in setAvatarTagsDialog.ownAvatars'
-                    :key='setAvatarTagsDialog.forceUpdate'
-                    @click='showAvatarDialog(avatar.id)'
-                    style='width: 350px')
-                    .avatar
-                        img(v-if='avatar.thumbnailImageUrl' v-lazy='avatar.thumbnailImageUrl')
-                    .detail
-                        span.name(v-text='avatar.name')
-                        span.extra(
-                            v-text='avatar.releaseStatus'
-                            v-if='avatar.releaseStatus === "public"'
-                            style='color: #67c23a')
-                        span.extra(
-                            v-text='avatar.releaseStatus'
-                            v-else-if='avatar.releaseStatus === "private"'
-                            style='color: #f56c6c')
-                        span.extra(v-text='avatar.releaseStatus' v-else)
-                        span.extra(v-text='avatar.$tagString')
-                    el-button(type='text' size='mini' @click.stop style='margin-left: 5px')
-                        el-checkbox(v-model='avatar.$selected' @change='updateAvatarTagsSelection')
-        template(#footer)
-            el-button(size='small' @click='setAvatarTagsDialog.visible = false') {{ $t('dialog.set_avatar_tags.cancel') }}
-            el-button(type='primary' size='small' @click='saveSetAvatarTagsDialog') {{ $t('dialog.set_avatar_tags.save') }}

src/views/SideBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="aside" class="x-aside-container" v-show="isSideBarTabShow">
+    <div v-show="isSideBarTabShow" id="aside" class="x-aside-container">
         <div style="display: flex; align-items: baseline">
             <el-select
                 value=""
@@ -32,7 +32,7 @@
                                     :traveling="item.ref.travelingToLocation"
                                     :link="false"></location>
                             </div>
-                            <img class="avatar" v-lazy="userImage(item.ref)" />
+                            <img v-lazy="userImage(item.ref)" class="avatar" />
                         </template>
                         <span v-else>
                             {{ $t('side_panel.search_result_more') }}
@@ -69,21 +69,21 @@
                     </span>
                 </template>
                 <el-backtop target=".zero-margin-tabs .el-tabs__content" :bottom="20" :right="20"></el-backtop>
-                <friends-sidebar
+                <FriendsSidebar
-                    @confirm-delete-friend="$emit('confirm-delete-friend', $event)"
+                    :hide-nicknames="hideNicknames"
                     :is-game-running="isGameRunning"
                     :is-sidebar-divide-by-friend-group="isSidebarDivideByFriendGroup"
                     :is-sidebar-group-by-instance="isSidebarGroupByInstance"
                     :game-log-disabled="gameLogDisabled"
                     :last-location="lastLocation"
                     :last-location-destination="lastLocationDestination"
-                    :hide-nicknames="hideNicknames"
                     :active-friends="activeFriends"
                     :offline-friends="offlineFriends"
                     :online-friends="onlineFriends"
                     :vip-friends="vipFriends"
                     :is-hide-friends-in-same-instance="isHideFriendsInSameInstance"
-                    :grouped-by-group-key-favorite-friends="groupedByGroupKeyFavoriteFriends"></friends-sidebar>
+                    :grouped-by-group-key-favorite-friends="groupedByGroupKeyFavoriteFriends"
+                    @confirm-delete-friend="$emit('confirm-delete-friend', $event)" />
             </el-tab-pane>
             <el-tab-pane lazy>
                 <template slot="label">
@@ -92,11 +92,11 @@
                         ({{ groupInstances.length }})
                     </span>
                 </template>
-                <groups-sidebar
+                <GroupsSidebar
                     :group-instances="groupInstances"
                     :group-order="inGameGroupOrder"
                     :is-age-gated-instances-visible="isAgeGatedInstancesVisible"
-                    @show-group-dialog="$emit('show-group-dialog', $event)"></groups-sidebar>
+                    @show-group-dialog="$emit('show-group-dialog', $event)" />
             </el-tab-pane>
         </el-tabs>
     </div>

src/views/dialogs/avatarDialog/SetAvatarTagsDialog.vue

@@ -0,0 +1,289 @@
+<template>
+    <el-dialog
+        ref="setAvatarTagsDialog"
+        class="x-dialog"
+        :before-close="beforeDialogClose"
+        :visible.sync="setAvatarTagsDialog.visible"
+        :title="t('dialog.set_avatar_tags.header')"
+        width="770px"
+        append-to-body
+        @mousedown.native="dialogMouseDown"
+        @mouseup.native="dialogMouseUp">
+        <template v-if="setAvatarTagsDialog.visible">
+            <el-checkbox v-model="setAvatarTagsDialog.contentHorror" @change="updateSelectedAvatarTags">{{
+                t('dialog.set_avatar_tags.content_horror')
+            }}</el-checkbox>
+            <br />
+            <el-checkbox v-model="setAvatarTagsDialog.contentGore" @change="updateSelectedAvatarTags">{{
+                t('dialog.set_avatar_tags.content_gore')
+            }}</el-checkbox>
+            <br />
+            <el-checkbox v-model="setAvatarTagsDialog.contentViolence" @change="updateSelectedAvatarTags">{{
+                t('dialog.set_avatar_tags.content_violence')
+            }}</el-checkbox>
+            <br />
+            <el-checkbox v-model="setAvatarTagsDialog.contentAdult" @change="updateSelectedAvatarTags">{{
+                t('dialog.set_avatar_tags.content_adult')
+            }}</el-checkbox>
+            <br />
+            <el-checkbox v-model="setAvatarTagsDialog.contentSex" @change="updateSelectedAvatarTags">{{
+                t('dialog.set_avatar_tags.content_sex')
+            }}</el-checkbox>
+            <br />
+            <el-input
+                v-model="setAvatarTagsDialog.selectedTagsCsv"
+                size="mini"
+                :autosize="{ minRows: 2, maxRows: 5 }"
+                :placeholder="t('dialog.set_avatar_tags.custom_tags_placeholder')"
+                style="margin-top: 10px"
+                @input="updateInputAvatarTags"></el-input>
+            <template v-if="setAvatarTagsDialog.ownAvatars.length === setAvatarTagsDialog.selectedCount">
+                <el-button size="small" @click="setAvatarTagsSelectToggle">{{
+                    t('dialog.set_avatar_tags.select_none')
+                }}</el-button>
+            </template>
+            <template v-else>
+                <el-button size="small" @click="setAvatarTagsSelectToggle">{{
+                    t('dialog.set_avatar_tags.select_all')
+                }}</el-button>
+            </template>
+            <span style="margin-left: 5px"
+                >{{ setAvatarTagsDialog.selectedCount }} / {{ setAvatarTagsDialog.ownAvatars.length }}</span
+            >
+            <span v-if="setAvatarTagsDialog.loading" style="margin-left: 5px">
+                <i class="el-icon-loading"></i>
+            </span>
+            <br />
+            <div class="x-friend-list" style="margin-top: 10px; min-height: 60px; max-height: 280px">
+                <div
+                    v-for="avatar in setAvatarTagsDialog.ownAvatars"
+                    :key="avatar.id"
+                    class="x-friend-item x-friend-item-border"
+                    style="width: 350px"
+                    @click="showAvatarDialog(avatar.id)">
+                    <div class="avatar">
+                        <img v-if="avatar.thumbnailImageUrl" v-lazy="avatar.thumbnailImageUrl" />
+                    </div>
+                    <div class="detail">
+                        <span class="name" v-text="avatar.name"></span>
+                        <span
+                            v-if="avatar.releaseStatus === 'public'"
+                            class="extra"
+                            style="color: #67c23a"
+                            v-text="avatar.releaseStatus"></span>
+                        <span
+                            v-else-if="avatar.releaseStatus === 'private'"
+                            class="extra"
+                            style="color: #f56c6c"
+                            v-text="avatar.releaseStatus"></span>
+                        <span v-else class="extra" v-text="avatar.releaseStatus"></span>
+                        <span class="extra" v-text="avatar.$tagString"></span>
+                    </div>
+                    <el-button type="text" size="mini" style="margin-left: 5px" @click.stop>
+                        <el-checkbox v-model="avatar.$selected" @change="updateAvatarTagsSelection"></el-checkbox>
+                    </el-button>
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <el-button size="small" @click="setAvatarTagsDialog.visible = false">{{
+                t('dialog.set_avatar_tags.cancel')
+            }}</el-button>
+            <el-button type="primary" size="small" @click="saveSetAvatarTagsDialog">{{
+                t('dialog.set_avatar_tags.save')
+            }}</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup>
+    import { inject, watch, getCurrentInstance } from 'vue';
+
+    import { useI18n } from 'vue-i18n-bridge';
+    import { avatarRequest } from '../../../classes/request';
+
+    const beforeDialogClose = inject('beforeDialogClose');
+    const dialogMouseDown = inject('dialogMouseDown');
+    const dialogMouseUp = inject('dialogMouseUp');
+    const showAvatarDialog = inject('showAvatarDialog');
+
+    const { t } = useI18n();
+    const instance = getCurrentInstance();
+    const $message = instance.proxy.$message;
+
+    const props = defineProps({
+        setAvatarTagsDialog: {
+            type: Object,
+            required: true
+        }
+    });
+
+    watch(
+        () => props.setAvatarTagsDialog.visible,
+        (newVal) => {
+            if (newVal) {
+                updateAvatarTagsSelection();
+                updateSelectedAvatarTags();
+            }
+        }
+    );
+
+    function updateSelectedAvatarTags() {
+        const D = props.setAvatarTagsDialog;
+        if (D.contentHorror) {
+            if (!D.selectedTags.includes('content_horror')) {
+                D.selectedTags.push('content_horror');
+            }
+        } else if (D.selectedTags.includes('content_horror')) {
+            D.selectedTags.splice(D.selectedTags.indexOf('content_horror'), 1);
+        }
+        if (D.contentGore) {
+            if (!D.selectedTags.includes('content_gore')) {
+                D.selectedTags.push('content_gore');
+            }
+        } else if (D.selectedTags.includes('content_gore')) {
+            D.selectedTags.splice(D.selectedTags.indexOf('content_gore'), 1);
+        }
+        if (D.contentViolence) {
+            if (!D.selectedTags.includes('content_violence')) {
+                D.selectedTags.push('content_violence');
+            }
+        } else if (D.selectedTags.includes('content_violence')) {
+            D.selectedTags.splice(D.selectedTags.indexOf('content_violence'), 1);
+        }
+        if (D.contentAdult) {
+            if (!D.selectedTags.includes('content_adult')) {
+                D.selectedTags.push('content_adult');
+            }
+        } else if (D.selectedTags.includes('content_adult')) {
+            D.selectedTags.splice(D.selectedTags.indexOf('content_adult'), 1);
+        }
+        if (D.contentSex) {
+            if (!D.selectedTags.includes('content_sex')) {
+                D.selectedTags.push('content_sex');
+            }
+        } else if (D.selectedTags.includes('content_sex')) {
+            D.selectedTags.splice(D.selectedTags.indexOf('content_sex'), 1);
+        }
+
+        D.selectedTagsCsv = D.selectedTags.join(',').replace(/content_/g, '');
+    }
+
+    function updateAvatarTagsSelection() {
+        const D = props.setAvatarTagsDialog;
+        D.selectedCount = 0;
+        for (const ref of D.ownAvatars) {
+            if (ref.$selected) {
+                D.selectedCount++;
+            }
+            ref.$tagString = '';
+            const conentTags = [];
+            ref.tags.forEach((tag) => {
+                if (tag.startsWith('content_')) {
+                    conentTags.push(tag.substring(8));
+                }
+            });
+            for (let i = 0; i < conentTags.length; ++i) {
+                const tag = conentTags[i];
+                if (i < conentTags.length - 1) {
+                    ref.$tagString += `${tag}, `;
+                } else {
+                    ref.$tagString += tag;
+                }
+            }
+        }
+        // props.setAvatarTagsDialog.forceUpdate++;
+    }
+
+    function setAvatarTagsSelectToggle() {
+        const D = props.setAvatarTagsDialog;
+        const allSelected = D.ownAvatars.length === D.selectedCount;
+        for (const ref of D.ownAvatars) {
+            ref.$selected = !allSelected;
+        }
+        updateAvatarTagsSelection();
+    }
+
+    async function saveSetAvatarTagsDialog() {
+        const D = props.setAvatarTagsDialog;
+        if (D.loading) {
+            return;
+        }
+        D.loading = true;
+        try {
+            for (let i = D.ownAvatars.length - 1; i >= 0; --i) {
+                const ref = D.ownAvatars[i];
+                if (!D.visible) {
+                    break;
+                }
+                if (!ref.$selected) {
+                    continue;
+                }
+                const tags = [...D.selectedTags];
+                for (const tag of ref.tags) {
+                    if (!tag.startsWith('content_')) {
+                        tags.push(tag);
+                    }
+                }
+                await avatarRequest.saveAvatar({
+                    id: ref.id,
+                    tags
+                });
+                D.selectedCount--;
+            }
+        } catch (err) {
+            console.error(err);
+            $message({
+                message: 'Error saving avatar tags',
+                type: 'error'
+            });
+        } finally {
+            D.loading = false;
+            D.visible = false;
+        }
+    }
+
+    function updateInputAvatarTags() {
+        const D = props.setAvatarTagsDialog;
+        D.contentHorror = false;
+        D.contentGore = false;
+        D.contentViolence = false;
+        D.contentAdult = false;
+        D.contentSex = false;
+        const tags = D.selectedTagsCsv.split(',');
+        D.selectedTags = [];
+        for (const tag of tags) {
+            switch (tag) {
+                case 'horror':
+                    D.contentHorror = true;
+                    break;
+                case 'gore':
+                    D.contentGore = true;
+                    break;
+                case 'violence':
+                    D.contentViolence = true;
+                    break;
+                case 'adult':
+                    D.contentAdult = true;
+                    break;
+                case 'sex':
+                    D.contentSex = true;
+                    break;
+            }
+            if (!D.selectedTags.includes(`content_${tag}`)) {
+                D.selectedTags.push(`content_${tag}`);
+            }
+        }
+    }
+
+    // useless
+    // $app.data.avatarContentTags = [
+    //     'content_horror',
+    //     'content_gore',
+    //     'content_violence',
+    //     'content_adult',
+    //     'content_sex'
+    // ];
+</script>
+
+<style scoped></style>

src/views/dialogs/groupDialog/GroupDialog.vue

@@ -1242,7 +1242,6 @@
         'get-group-dialog-group-members',
         'refresh-instance-player-count',
         'update-group-post-search',
-        'download-and-save-json',
         'set-group-member-sort-order',
         'clear-image-gallery-select'
     ]);
@@ -1780,8 +1779,8 @@
     function updateGroupPostSearch() {
         emit('update-group-post-search');
     }
-    function downloadAndSaveJson(filename, data) {
+    function downloadAndSaveJson(fileName, data) {
-        emit('download-and-save-json', filename, data);
+        utils.downloadAndSaveJson(fileName, data);
     }
     function clearImageGallerySelect() {
         emit('clear-image-gallery-select');

src/views/dialogs/groupDialog/GroupMemberModerationDialog.vue

@@ -1681,7 +1681,11 @@
     }
 
     function getAuditLogTypeName(auditLogType) {
-        return utils.getAuditLogTypeName(auditLogType);
+        if (!auditLogType) return '';
+        return auditLogType
+            .replace('group.', '')
+            .replace(/\./g, ' ')
+            .replace(/\b\w/g, (l) => l.toUpperCase());
     }
 
     function hasGroupPermission(ref, permission) {

src/views/dialogs/world/WorldDialog.vue

@@ -739,17 +739,17 @@
             </el-tabs>
         </div>
 
-        <!--  Nested Hmm-->
+        <!-- Nested -->
-        <world-allowed-domains-dialog :world-allowed-domains-dialog.sync="worldAllowedDomainsDialog" />
+        <WorldAllowedDomainsDialog :world-allowed-domains-dialog.sync="worldAllowedDomainsDialog" />
-        <set-world-tags-dialog
+        <SetWorldTagsDialog
             :is-set-world-tags-dialog-visible.sync="isSetWorldTagsDialogVisible"
             :old-tags="worldDialog.ref?.tags"
             :world-id="worldDialog.id"
             :is-world-dialog-visible="worldDialog.visible" />
-        <previous-instances-world-dialog
+        <PreviousInstancesWorldDialog
             :previous-instances-world-dialog.sync="previousInstancesWorldDialog"
             :shift-held="shiftHeld" />
-        <new-instance-dialog
+        <NewInstanceDialog
             :new-instance-dialog-location-tag="newInstanceDialogLocationTag"
             :create-new-instance="createNewInstance"
             :instance-content-settings="instanceContentSettings"
@@ -1082,8 +1082,8 @@
             refreshWorldDialogTreeData() {
                 this.treeData = utils.buildTreeData(this.worldDialog.ref);
             },
-            downloadAndSaveJson(id, ref) {
+            downloadAndSaveJson(fileName, data) {
-                this.$emit('download-and-save-json', id, ref);
+                utils.downloadAndSaveJson(fileName, data);
             },
             copyWorldId() {
                 navigator.clipboard

src/views/tabs/Charts.vue

@@ -3,14 +3,13 @@
         <div class="options-container" style="margin-top: 0">
             <span class="header">{{ $t('view.charts.header') }}</span>
         </div>
-        <instance-activity
+        <InstanceActivity
             :get-world-name="getWorldName"
             :is-dark-mode="isDarkMode"
             :dt-hour12="dtHour12"
             :friends-map="friendsMap"
-            :localFavoriteFriends="localFavoriteFriends"
+            :local-favorite-friends="localFavoriteFriends"
-            @open-previous-instance-info-dialog="$emit('open-previous-instance-info-dialog', $event)"
+            @open-previous-instance-info-dialog="$emit('open-previous-instance-info-dialog', $event)" />
-        ></instance-activity>
         <el-backtop target="#chart" :right="30" :bottom="30"></el-backtop>
     </div>
 </template>

src/views/tabs/Favorites.vue

@@ -27,7 +27,7 @@
         </div>
         <el-tabs v-model="currentTabName" v-loading="API.isFavoriteLoading" type="card" style="height: 100%">
             <el-tab-pane name="friend" :label="$t('view.favorite.friends.header')" lazy>
-                <favorites-friend-tab
+                <FavoritesFriendTab
                     :favorite-friends="favoriteFriends"
                     :sort-favorites.sync="isSortByTime"
                     :hide-tooltips="hideTooltips"
@@ -38,7 +38,7 @@
                     @change-favorite-group-name="changeFavoriteGroupName" />
             </el-tab-pane>
             <el-tab-pane name="world" :label="$t('view.favorite.worlds.header')" lazy>
-                <favorites-world-tab
+                <FavoritesWorldTab
                     @show-world-import-dialog="showWorldImportDialog"
                     @save-sort-favorites-option="saveSortFavoritesOption"
                     @change-favorite-group-name="changeFavoriteGroupName"
@@ -59,7 +59,7 @@
                     :local-world-favorites-list="localWorldFavoritesList" />
             </el-tab-pane>
             <el-tab-pane name="avatar" :label="$t('view.favorite.avatars.header')" lazy>
-                <favorites-avatar-tab
+                <FavoritesAvatarTab
                     :sort-favorites.sync="isSortByTime"
                     :hide-tooltips="hideTooltips"
                     :shift-held="shiftHeld"