refactor: import dialogs (#1187)

* refactor: import dialogs

* fix: world dialog z-index issue

* fix: world dialog z-index issue

.prettierrc.json

@@ -7,12 +7,15 @@
     "trailingComma": "none",
     "bracketSpacing": true,
     "arrowParens": "always",
-    "vueIndentScriptAndStyle": true,
     "endOfLine": "auto",
-    "plugins": [
-        "@prettier/plugin-pug"
-    ],
+    "plugins": ["@prettier/plugin-pug"],
     "overrides": [
+        {
+            "files": "*.js",
+            "options": {
+                "parser": "meriyah"
+            }
+        },
         {
             "files": "*.pug",
             "options": {
@@ -25,8 +28,9 @@
             "files": "*.vue",
             "options": {
                 "printWidth": 120,
-                "bracketSameLine": true
+                "bracketSameLine": true,
+                "vueIndentScriptAndStyle": true
             }
         }
     ]
-}
+}

src/app.js

@@ -67,6 +67,9 @@ import Location from './components/common/Location.vue';
 // dialogs
 import WorldDialog from './views/dialogs/WorldDialog.vue';
 import PreviousInstanceInfoDialog from './views/dialogs/PreviousInstanceInfoDialog.vue';
+import FriendImportDialog from './views/dialogs/FriendImportDialog.vue';
+import WorldImportDialog from './views/dialogs/WorldImportDialog.vue';
+import AvatarImportDialog from './views/dialogs/AvatarImportDialog.vue';
 
 // main app classes
 import _sharedFeed from './classes/sharedFeed.js';
@@ -213,7 +216,11 @@ console.log(`isLinux: ${LINUX}`);
 
             // - dialogs
             PreviousInstanceInfoDialog,
-            WorldDialog
+            WorldDialog,
+            //  - import dialogs
+            FriendImportDialog,
+            WorldImportDialog,
+            AvatarImportDialog
         },
         provide() {
             return {
@@ -228,7 +235,12 @@ console.log(`isLinux: ${LINUX}`);
                 showFullscreenImageDialog: this.showFullscreenImageDialog,
                 statusClass: this.statusClass,
                 getFaviconUrl: this.getFaviconUrl,
-                openExternalLink: this.openExternalLink
+                openExternalLink: this.openExternalLink,
+                beforeDialogClose: this.beforeDialogClose,
+                dialogMouseDown: this.dialogMouseDown,
+                dialogMouseUp: this.dialogMouseUp,
+                showWorldDialog: this.showWorldDialog,
+                showAvatarDialog: this.showAvatarDialog
             };
         },
         el: '#root',
@@ -258,7 +270,6 @@ console.log(`isLinux: ${LINUX}`);
             API.$on('SHOW_USER_DIALOG', (userId) =>
                 this.showUserDialog(userId)
             );
-            API.$on('SHOW_WORLD_DIALOG', (tag) => this.showWorldDialog(tag));
             API.$on('SHOW_WORLD_DIALOG_SHORTNAME', (tag) =>
                 this.verifyShortName('', tag)
             );
@@ -396,7 +407,7 @@ console.log(`isLinux: ${LINUX}`);
         observer: true,
         observerOptions: {
             rootMargin: '0px',
-            threshold: 0.1
+            threshold: 0
         },
         attempt: 3
     });
@@ -11377,42 +11388,6 @@ console.log(`isLinux: ${LINUX}`);
             });
     };
 
-    $app.methods.addFavoriteWorld = function (ref, group, message) {
-        return favoriteRequest
-            .addFavorite({
-                type: 'world',
-                favoriteId: ref.id,
-                tags: group.name
-            })
-            .then((args) => {
-                if (message) {
-                    this.$message({
-                        message: 'World added to favorites',
-                        type: 'success'
-                    });
-                }
-                return args;
-            });
-    };
-
-    $app.methods.addFavoriteUser = function (ref, group, message) {
-        return favoriteRequest
-            .addFavorite({
-                type: 'friend',
-                favoriteId: ref.id,
-                tags: group.name
-            })
-            .then((args) => {
-                if (message) {
-                    this.$message({
-                        message: 'Friend added to favorites',
-                        type: 'success'
-                    });
-                }
-                return args;
-            });
-    };
-
     $app.methods.showFavoriteDialog = function (type, objectId) {
         this.$nextTick(() => $app.adjustDialogZ(this.$refs.favoriteDialog.$el));
         var D = this.favoriteDialog;
@@ -16984,12 +16959,31 @@ console.log(`isLinux: ${LINUX}`);
         return false;
     };
 
-    $app.methods.userImage = function (user, isIcon, resolution = '64') {
+    /**
+     * @param {object} user - User Ref Object
+     * @param {boolean} isIcon - is use for icon (about 40x40)
+     * @param {string} resolution - requested icon resolution (default 128),
+     * @param {boolean} isUserDialogIcon - is use for user dialog icon
+     * @returns {string} - img url
+     *
+     * VRC's 64 scaling doesn't look good, 128 is better, but some images might be overly sharp.
+     * 128 is smaller than 256 or the original image size, making it a good choice.
+     *
+     * TODO: code is messy cause I haven't figured out the img field, maybe refactor it later
+     */
+    $app.methods.userImage = function (
+        user,
+        isIcon,
+        resolution = '128',
+        isUserDialogIcon = false
+    ) {
         if (!user) {
             return '';
         }
-        // Only VRC+ icon users have the userIcon field ?
-        if (this.displayVRCPlusIconsAsAvatar && user.userIcon) {
+        if (
+            (isUserDialogIcon && user.userIcon) ||
+            (this.displayVRCPlusIconsAsAvatar && user.userIcon)
+        ) {
             if (isIcon) {
                 const baseUrl = user.userIcon.replace('/file/', '/image/');
                 return user.userIcon.endsWith('/')
@@ -16998,6 +16992,7 @@ console.log(`isLinux: ${LINUX}`);
             }
             return user.userIcon;
         }
+
         if (user.profilePicOverrideThumbnail) {
             if (isIcon) {
                 return user.profilePicOverrideThumbnail.replace(
@@ -17013,13 +17008,28 @@ console.log(`isLinux: ${LINUX}`);
         if (user.thumbnailUrl) {
             return user.thumbnailUrl;
         }
-        if (isIcon && user.currentAvatarThumbnailImageUrl) {
-            return user.currentAvatarThumbnailImageUrl.replace(
-                '256',
-                resolution
-            );
+        if (user.currentAvatarThumbnailImageUrl) {
+            if (isIcon) {
+                return user.currentAvatarThumbnailImageUrl.replace(
+                    '256',
+                    resolution
+                );
+            }
+            return user.currentAvatarThumbnailImageUrl;
         }
-        return user.currentAvatarThumbnailImageUrl || '';
+        if (user.currentAvatarImageUrl) {
+            if (isIcon) {
+                const baseUrl = user.currentAvatarImageUrl.replace(
+                    '/file/',
+                    '/image/'
+                );
+                const url = baseUrl.split('/');
+                url[url.length - 1] = resolution;
+                return url.join('/');
+            }
+            return user.currentAvatarImageUrl;
+        }
+        return '';
     };
 
     $app.methods.userImageFull = function (user) {
@@ -17431,14 +17441,14 @@ console.log(`isLinux: ${LINUX}`);
                 if (!type) break;
                 var data = input.replace(`import/${type}/`, '');
                 if (type === 'avatar') {
+                    this.avatarImportDialogInput = data;
                     this.showAvatarImportDialog();
-                    this.avatarImportDialog.input = data;
                 } else if (type === 'world') {
+                    this.worldImportDialogInput = data;
                     this.showWorldImportDialog();
-                    this.worldImportDialog.input = data;
                 } else if (type === 'friend') {
+                    this.friendImportDialogInput = data;
                     this.showFriendImportDialog();
-                    this.friendImportDialog.input = data;
                 }
                 break;
         }
@@ -18148,488 +18158,29 @@ console.log(`isLinux: ${LINUX}`);
     // #endregion
     // #region | App: world favorite import
 
-    $app.data.worldImportDialog = {
-        visible: false,
-        loading: false,
-        progress: 0,
-        progressTotal: 0,
-        input: '',
-        worldIdList: new Set(),
-        errors: '',
-        worldImportFavoriteGroup: null,
-        worldImportLocalFavoriteGroup: null,
-        importProgress: 0,
-        importProgressTotal: 0
-    };
-
-    $app.data.worldImportTable = {
-        data: [],
-        tableProps: {
-            stripe: true,
-            size: 'mini'
-        },
-        layout: 'table'
-    };
-
+    $app.data.worldImportDialogVisible = false;
+    $app.data.worldImportDialogInput = '';
     $app.methods.showWorldImportDialog = function () {
-        this.$nextTick(() =>
-            $app.adjustDialogZ(this.$refs.worldImportDialog.$el)
-        );
-        var D = this.worldImportDialog;
-        this.resetWorldImport();
-        D.visible = true;
+        this.worldImportDialogVisible = true;
     };
 
-    $app.methods.processWorldImportList = async function () {
-        var D = this.worldImportDialog;
-        D.loading = true;
-        var regexWorldId =
-            /wrld_[0-9A-Fa-f]{8}-([0-9A-Fa-f]{4}-){3}[0-9A-Fa-f]{12}/g;
-        var match = [];
-        var worldIdList = new Set();
-        while ((match = regexWorldId.exec(D.input)) !== null) {
-            worldIdList.add(match[0]);
-        }
-        D.input = '';
-        D.errors = '';
-        D.progress = 0;
-        D.progressTotal = worldIdList.size;
-        var data = Array.from(worldIdList);
-        for (var i = 0; i < data.length; ++i) {
-            if (!D.visible) {
-                this.resetWorldImport();
-            }
-            if (!D.loading || !D.visible) {
-                break;
-            }
-            var worldId = data[i];
-            if (!D.worldIdList.has(worldId)) {
-                try {
-                    var args = await worldRequest.getWorld({
-                        worldId
-                    });
-                    this.worldImportTable.data.push(args.ref);
-                    D.worldIdList.add(worldId);
-                } catch (err) {
-                    D.errors = D.errors.concat(
-                        `WorldId: ${worldId}\n${err}\n\n`
-                    );
-                }
-            }
-            D.progress++;
-            if (D.progress === worldIdList.size) {
-                D.progress = 0;
-            }
-        }
-        D.loading = false;
-    };
-
-    $app.methods.deleteItemWorldImport = function (ref) {
-        var D = this.worldImportDialog;
-        $app.removeFromArray(this.worldImportTable.data, ref);
-        D.worldIdList.delete(ref.id);
-    };
-
-    $app.methods.resetWorldImport = function () {
-        var D = this.worldImportDialog;
-        D.input = '';
-        D.errors = '';
-    };
-
-    $app.methods.clearWorldImportTable = function () {
-        var D = this.worldImportDialog;
-        this.worldImportTable.data = [];
-        D.worldIdList = new Set();
-    };
-
-    $app.methods.selectWorldImportGroup = function (group) {
-        var D = this.worldImportDialog;
-        D.worldImportLocalFavoriteGroup = null;
-        D.worldImportFavoriteGroup = group;
-    };
-
-    $app.methods.selectWorldImportLocalGroup = function (group) {
-        var D = this.worldImportDialog;
-        D.worldImportFavoriteGroup = null;
-        D.worldImportLocalFavoriteGroup = group;
-    };
-
-    $app.methods.cancelWorldImport = function () {
-        var D = this.worldImportDialog;
-        D.loading = false;
-    };
-
-    $app.methods.importWorldImportTable = async function () {
-        var D = this.worldImportDialog;
-        if (!D.worldImportFavoriteGroup && !D.worldImportLocalFavoriteGroup) {
-            return;
-        }
-        D.loading = true;
-        var data = [...this.worldImportTable.data].reverse();
-        D.importProgressTotal = data.length;
-        try {
-            for (var i = data.length - 1; i >= 0; i--) {
-                if (!D.loading || !D.visible) {
-                    break;
-                }
-                var ref = data[i];
-                if (D.worldImportFavoriteGroup) {
-                    await this.addFavoriteWorld(
-                        ref,
-                        D.worldImportFavoriteGroup,
-                        false
-                    );
-                } else if (D.worldImportLocalFavoriteGroup) {
-                    this.addLocalWorldFavorite(
-                        ref.id,
-                        D.worldImportLocalFavoriteGroup
-                    );
-                }
-                $app.removeFromArray(this.worldImportTable.data, ref);
-                D.worldIdList.delete(ref.id);
-                D.importProgress++;
-            }
-        } catch (err) {
-            D.errors = `Name: ${ref.name}\nWorldId: ${ref.id}\n${err}\n\n`;
-        } finally {
-            D.importProgress = 0;
-            D.importProgressTotal = 0;
-            D.loading = false;
-        }
-    };
-
-    API.$on('LOGIN', function () {
-        $app.clearWorldImportTable();
-        $app.resetWorldImport();
-        $app.worldImportDialog.visible = false;
-        $app.worldImportFavoriteGroup = null;
-        $app.worldImportLocalFavoriteGroup = null;
-    });
-
     // #endregion
     // #region | App: avatar favorite import
 
-    $app.data.avatarImportDialog = {
-        visible: false,
-        loading: false,
-        progress: 0,
-        progressTotal: 0,
-        input: '',
-        avatarIdList: new Set(),
-        errors: '',
-        avatarImportFavoriteGroup: null,
-        avatarImportLocalFavoriteGroup: null,
-        importProgress: 0,
-        importProgressTotal: 0
-    };
-
-    $app.data.avatarImportTable = {
-        data: [],
-        tableProps: {
-            stripe: true,
-            size: 'mini'
-        },
-        layout: 'table'
-    };
-
+    $app.data.avatarImportDialogVisible = false;
+    $app.data.avatarImportDialogInput = '';
     $app.methods.showAvatarImportDialog = function () {
-        this.$nextTick(() =>
-            $app.adjustDialogZ(this.$refs.avatarImportDialog.$el)
-        );
-        var D = this.avatarImportDialog;
-        this.resetAvatarImport();
-        D.visible = true;
+        this.avatarImportDialogVisible = true;
     };
 
-    $app.methods.processAvatarImportList = async function () {
-        var D = this.avatarImportDialog;
-        D.loading = true;
-        var regexAvatarId =
-            /avtr_[0-9A-Fa-f]{8}-([0-9A-Fa-f]{4}-){3}[0-9A-Fa-f]{12}/g;
-        var match = [];
-        var avatarIdList = new Set();
-        while ((match = regexAvatarId.exec(D.input)) !== null) {
-            avatarIdList.add(match[0]);
-        }
-        D.input = '';
-        D.errors = '';
-        D.progress = 0;
-        D.progressTotal = avatarIdList.size;
-        var data = Array.from(avatarIdList);
-        for (var i = 0; i < data.length; ++i) {
-            if (!D.visible) {
-                this.resetAvatarImport();
-            }
-            if (!D.loading || !D.visible) {
-                break;
-            }
-            var avatarId = data[i];
-            if (!D.avatarIdList.has(avatarId)) {
-                try {
-                    var args = await avatarRequest.getAvatar({
-                        avatarId
-                    });
-                    this.avatarImportTable.data.push(args.ref);
-                    D.avatarIdList.add(avatarId);
-                } catch (err) {
-                    D.errors = D.errors.concat(
-                        `AvatarId: ${avatarId}\n${err}\n\n`
-                    );
-                }
-            }
-            D.progress++;
-            if (D.progress === avatarIdList.size) {
-                D.progress = 0;
-            }
-        }
-        D.loading = false;
-    };
-
-    $app.methods.deleteItemAvatarImport = function (ref) {
-        var D = this.avatarImportDialog;
-        $app.removeFromArray(this.avatarImportTable.data, ref);
-        D.avatarIdList.delete(ref.id);
-    };
-
-    $app.methods.resetAvatarImport = function () {
-        var D = this.avatarImportDialog;
-        D.input = '';
-        D.errors = '';
-    };
-
-    $app.methods.clearAvatarImportTable = function () {
-        var D = this.avatarImportDialog;
-        this.avatarImportTable.data = [];
-        D.avatarIdList = new Set();
-    };
-
-    $app.methods.selectAvatarImportGroup = function (group) {
-        var D = this.avatarImportDialog;
-        D.avatarImportLocalFavoriteGroup = null;
-        D.avatarImportFavoriteGroup = group;
-    };
-
-    $app.methods.selectAvatarImportLocalGroup = function (group) {
-        var D = this.avatarImportDialog;
-        D.avatarImportFavoriteGroup = null;
-        D.avatarImportLocalFavoriteGroup = group;
-    };
-
-    $app.methods.cancelAvatarImport = function () {
-        var D = this.avatarImportDialog;
-        D.loading = false;
-    };
-
-    $app.methods.importAvatarImportTable = async function () {
-        const addFavoriteAvatar = function (ref, group, message) {
-            return favoriteRequest
-                .addFavorite({
-                    type: 'avatar',
-                    favoriteId: ref.id,
-                    tags: group.name
-                })
-                .then((args) => {
-                    if (message) {
-                        this.$message({
-                            message: 'Avatar added to favorites',
-                            type: 'success'
-                        });
-                    }
-                    return args;
-                });
-        };
-        var D = this.avatarImportDialog;
-        if (!D.avatarImportFavoriteGroup && !D.avatarImportLocalFavoriteGroup) {
-            return;
-        }
-        D.loading = true;
-        var data = [...this.avatarImportTable.data].reverse();
-        D.importProgressTotal = data.length;
-        try {
-            for (var i = data.length - 1; i >= 0; i--) {
-                if (!D.loading || !D.visible) {
-                    break;
-                }
-                var ref = data[i];
-                if (D.avatarImportFavoriteGroup) {
-                    await addFavoriteAvatar(
-                        ref,
-                        D.avatarImportFavoriteGroup,
-                        false
-                    );
-                } else if (D.avatarImportLocalFavoriteGroup) {
-                    this.addLocalAvatarFavorite(
-                        ref.id,
-                        D.avatarImportLocalFavoriteGroup
-                    );
-                }
-                $app.removeFromArray(this.avatarImportTable.data, ref);
-                D.avatarIdList.delete(ref.id);
-                D.importProgress++;
-            }
-        } catch (err) {
-            D.errors = `Name: ${ref.name}\nAvatarId: ${ref.id}\n${err}\n\n`;
-        } finally {
-            D.importProgress = 0;
-            D.importProgressTotal = 0;
-            D.loading = false;
-        }
-    };
-
-    API.$on('LOGIN', function () {
-        $app.clearAvatarImportTable();
-        $app.resetAvatarImport();
-        $app.avatarImportDialog.visible = false;
-        $app.avatarImportFavoriteGroup = null;
-        $app.avatarImportLocalFavoriteGroup = null;
-    });
-
     // #endregion
     // #region | App: friend favorite import
-
-    $app.data.friendImportDialog = {
-        visible: false,
-        loading: false,
-        progress: 0,
-        progressTotal: 0,
-        input: '',
-        userIdList: new Set(),
-        errors: '',
-        friendImportFavoriteGroup: null,
-        importProgress: 0,
-        importProgressTotal: 0
-    };
-
-    $app.data.friendImportTable = {
-        data: [],
-        tableProps: {
-            stripe: true,
-            size: 'mini'
-        },
-        layout: 'table'
-    };
-
+    $app.data.friendImportDialogVisible = false;
+    $app.data.friendImportDialogInput = '';
     $app.methods.showFriendImportDialog = function () {
-        this.$nextTick(() =>
-            $app.adjustDialogZ(this.$refs.friendImportDialog.$el)
-        );
-        var D = this.friendImportDialog;
-        this.resetFriendImport();
-        D.visible = true;
+        this.friendImportDialogVisible = true;
     };
 
-    $app.methods.processFriendImportList = async function () {
-        var D = this.friendImportDialog;
-        D.loading = true;
-        var regexFriendId =
-            /usr_[0-9A-Fa-f]{8}-([0-9A-Fa-f]{4}-){3}[0-9A-Fa-f]{12}/g;
-        var match = [];
-        var userIdList = new Set();
-        while ((match = regexFriendId.exec(D.input)) !== null) {
-            userIdList.add(match[0]);
-        }
-        D.input = '';
-        D.errors = '';
-        D.progress = 0;
-        D.progressTotal = userIdList.size;
-        var data = Array.from(userIdList);
-        for (var i = 0; i < data.length; ++i) {
-            if (!D.visible) {
-                this.resetFriendImport();
-            }
-            if (!D.loading || !D.visible) {
-                break;
-            }
-            var userId = data[i];
-            if (!D.userIdList.has(userId)) {
-                try {
-                    var args = await userRequest.getUser({
-                        userId
-                    });
-                    this.friendImportTable.data.push(args.ref);
-                    D.userIdList.add(userId);
-                } catch (err) {
-                    D.errors = D.errors.concat(`UserId: ${userId}\n${err}\n\n`);
-                }
-            }
-            D.progress++;
-            if (D.progress === userIdList.size) {
-                D.progress = 0;
-            }
-        }
-        D.loading = false;
-    };
-
-    $app.methods.deleteItemFriendImport = function (ref) {
-        var D = this.friendImportDialog;
-        $app.removeFromArray(this.friendImportTable.data, ref);
-        D.userIdList.delete(ref.id);
-    };
-
-    $app.methods.resetFriendImport = function () {
-        var D = this.friendImportDialog;
-        D.input = '';
-        D.errors = '';
-    };
-
-    $app.methods.clearFriendImportTable = function () {
-        var D = this.friendImportDialog;
-        this.friendImportTable.data = [];
-        D.userIdList = new Set();
-    };
-
-    $app.methods.selectFriendImportGroup = function (group) {
-        var D = this.friendImportDialog;
-        D.friendImportFavoriteGroup = group;
-    };
-
-    $app.methods.cancelFriendImport = function () {
-        var D = this.friendImportDialog;
-        D.loading = false;
-    };
-
-    $app.methods.importFriendImportTable = async function () {
-        var D = this.friendImportDialog;
-        D.loading = true;
-        if (!D.friendImportFavoriteGroup) {
-            return;
-        }
-        var data = [...this.friendImportTable.data].reverse();
-        D.importProgressTotal = data.length;
-        try {
-            for (var i = data.length - 1; i >= 0; i--) {
-                if (!D.loading || !D.visible) {
-                    break;
-                }
-                var ref = data[i];
-                await this.addFavoriteUser(
-                    ref,
-                    D.friendImportFavoriteGroup,
-                    false
-                );
-                $app.removeFromArray(this.friendImportTable.data, ref);
-                D.userIdList.delete(ref.id);
-                D.importProgress++;
-            }
-        } catch (err) {
-            D.errors = `Name: ${ref.displayName}\nUserId: ${ref.id}\n${err}\n\n`;
-        } finally {
-            D.importProgress = 0;
-            D.importProgressTotal = 0;
-            D.loading = false;
-        }
-    };
-
-    API.$on('LOGIN', function () {
-        $app.clearFriendImportTable();
-        $app.resetFriendImport();
-        $app.friendImportDialog.visible = false;
-        $app.friendImportFavoriteGroup = null;
-
-        $app.friendExportDialogVisible = false;
-        $app.friendExportFavoriteGroup = null;
-    });
-
     // #endregion
     // #region | App: user dialog notes
 
@@ -18894,44 +18445,37 @@ console.log(`isLinux: ${LINUX}`);
     // #endregion
     // #region | App: bulk unfavorite
 
-    $app.methods.bulkCopyFavoriteSelection = function () {
-        var idList = '';
-        var type = '';
-        for (var ctx of this.favoriteFriends) {
-            if (ctx.$selected) {
-                idList += ctx.id + '\n';
-                type = 'friend';
-            }
-        }
-        for (var ctx of this.favoriteWorlds) {
-            if (ctx.$selected) {
-                idList += ctx.id + '\n';
-                type = 'world';
-            }
-        }
-        for (var ctx of this.favoriteAvatars) {
-            if (ctx.$selected) {
-                idList += ctx.id + '\n';
-                type = 'avatar';
-            }
-        }
+    $app.methods.bulkCopyFavoriteSelection = function (type) {
+        let idList = '';
         switch (type) {
             case 'friend':
+                for (let ctx of this.favoriteFriends) {
+                    if (ctx.$selected) {
+                        idList += `${ctx.id}\n`;
+                    }
+                }
+                this.friendImportDialogInput = idList;
                 this.showFriendImportDialog();
-                this.friendImportDialog.input = idList;
-                this.processFriendImportList();
                 break;
 
             case 'world':
+                for (let ctx of this.favoriteWorlds) {
+                    if (ctx.$selected) {
+                        idList += `${ctx.id}\n`;
+                    }
+                }
+                this.worldImportDialogInput = idList;
                 this.showWorldImportDialog();
-                this.worldImportDialog.input = idList;
-                this.processWorldImportList();
                 break;
 
             case 'avatar':
+                for (let ctx of this.favoriteAvatars) {
+                    if (ctx.$selected) {
+                        idList += `${ctx.id}\n`;
+                    }
+                }
+                this.avatarImportDialogInput = idList;
                 this.showAvatarImportDialog();
-                this.avatarImportDialog.input = idList;
-                this.processAvatarImportList();
                 break;
 
             default:
@@ -20636,7 +20180,7 @@ console.log(`isLinux: ${LINUX}`);
         );
     };
 
-    $app.methods.getSmallThumbnailUrl = function (url, resolution = 64) {
+    $app.methods.getSmallThumbnailUrl = function (url, resolution = 128) {
         return (
             url
                 ?.replace('/file/', '/image/')
@@ -20793,6 +20337,63 @@ console.log(`isLinux: ${LINUX}`);
                 this.showPreviousInstanceInfoDialog
         };
     };
+
+    $app.computed.friendImportDialogBind = function () {
+        return {
+            'friend-import-dialog-visible': this.friendImportDialogVisible,
+            'friend-import-dialog-input': this.friendImportDialogInput
+        };
+    };
+
+    $app.computed.friendImportDialogEvent = function () {
+        return {
+            'update:friend-import-dialog-visible': (event) =>
+                (this.friendImportDialogVisible = event),
+            'update:friend-import-dialog-input': (event) =>
+                (this.friendImportDialogInput = event)
+        };
+    };
+
+    $app.computed.worldImportDialogBind = function () {
+        return {
+            'world-import-dialog-visible': this.worldImportDialogVisible,
+            'world-import-dialog-input': this.worldImportDialogInput,
+            'get-local-world-favorite-group-length':
+                this.getLocalWorldFavoriteGroupLength,
+            'local-world-favorite-groups': this.localWorldFavoriteGroups
+        };
+    };
+
+    $app.computed.worldImportDialogEvent = function () {
+        return {
+            'update:world-import-dialog-visible': (event) =>
+                (this.worldImportDialogVisible = event),
+            'update:world-import-dialog-input': (event) =>
+                (this.worldImportDialogInput = event),
+            'add-local-world-favorite': this.addLocalWorldFavorite
+        };
+    };
+
+    $app.computed.avatarImportDialogBind = function () {
+        return {
+            'avatar-import-dialog-visible': this.avatarImportDialogVisible,
+            'avatar-import-dialog-input': this.avatarImportDialogInput,
+            'get-local-avatar-favorite-group-length':
+                this.getLocalAvatarFavoriteGroupLength,
+            'local-avatar-favorite-groups': this.localAvatarFavoriteGroups
+        };
+    };
+
+    $app.computed.avatarImportDialogEvent = function () {
+        return {
+            'update:avatar-import-dialog-visible': (event) =>
+                (this.avatarImportDialogVisible = event),
+            'update:avatar-import-dialog-input': (event) =>
+                (this.avatarImportDialogInput = event),
+            'add-local-avatar-favorite': this.addLocalAvatarFavorite
+        };
+    };
+
     // #endregion
 
     // #region | Electron

src/app.pug

@@ -131,4 +131,10 @@ doctype html
     include ./mixins/dialogs/boops.pug
     +boops
 
+    friend-import-dialog(v-bind='friendImportDialogBind' v-on='friendImportDialogEvent')
+
+    world-import-dialog(v-bind='worldImportDialogBind' v-on='worldImportDialogEvent')
+
+    avatar-import-dialog(v-bind='avatarImportDialogBind' v-on='avatarImportDialogEvent')
+
     //- 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/components/common/Location.vue

@@ -4,7 +4,7 @@
         <span v-show="text">
             <span
                 :class="{ 'x-link': link && location !== 'private' && location !== 'offline' }"
-                @click="showWorldDialog">
+                @click="handleShowWorldDialog">
                 <i v-if="isTraveling" class="el-icon el-icon-loading" style="display: inline-block"></i>
                 <span>{{ text }}</span>
             </span>
@@ -26,7 +26,8 @@
             // not good idea, it's temporary
             API: { default: window.API },
             getWorldName: { default: window.$app?.getWorldName },
-            getGroupName: { default: window.$app?.getGroupName }
+            getGroupName: { default: window.$app?.getGroupName },
+            showWorldDialog: { default: window.$app?.showWorldDialog }
         },
         props: {
             location: String,
@@ -122,7 +123,7 @@
                 }
                 this.strict = L.strict;
             },
-            showWorldDialog() {
+            handleShowWorldDialog() {
                 if (this.link) {
                     let instanceId = this.location;
                     if (this.traveling && this.location === 'traveling') {
@@ -136,7 +137,7 @@
                     if (this.isOpenPreviousInstanceInfoDialog) {
                         this.$emit('open-previous-instance-info-dialog', instanceId);
                     } else {
-                        this.API.$emit('SHOW_WORLD_DIALOG', instanceId);
+                        this.showWorldDialog(instanceId);
                     }
                 }
             },

src/components/favorites/FavoritesAvatarItem.vue

@@ -163,7 +163,7 @@
             },
             smallThumbnail() {
                 return (
-                    this.localFavFakeRef.thumbnailImageUrl.replace('256', '64') ||
+                    this.localFavFakeRef.thumbnailImageUrl.replace('256', '128') ||
                     this.localFavFakeRef.thumbnailImageUrl
                 );
             }

src/components/favorites/FavoritesAvatarLocalHistoryItem.vue

@@ -56,7 +56,7 @@
         },
         computed: {
             smallThumbnail() {
-                return this.favorite.thumbnailImageUrl.replace('256', '64') || this.favorite.thumbnailImageUrl;
+                return this.favorite.thumbnailImageUrl.replace('256', '128') || this.favorite.thumbnailImageUrl;
             }
         },
         methods: {

src/components/favorites/FavoritesAvatarTab.vue

@@ -244,7 +244,7 @@
     export default {
         name: 'FavoritesAvatarTab',
         components: { FavoritesAvatarItem, FavoritesAvatarLocalHistoryItem, AvatarExportDialog },
-        inject: ['API'],
+        inject: ['API', 'showAvatarDialog'],
         props: {
             sortFavorites: Boolean,
             hideTooltips: Boolean,
@@ -364,9 +364,6 @@
             saveSortFavoritesOption() {
                 this.$emit('save-sort-favorites-option');
             },
-            showAvatarDialog(id) {
-                this.$emit('show-avatar-dialog', id);
-            },
             changeFavoriteGroupName(group) {
                 this.$emit('change-favorite-group-name', group);
             },

src/components/favorites/FavoritesWorldItem.vue

@@ -157,7 +157,7 @@
             },
             smallThumbnail() {
                 return (
-                    this.localFavFakeRef.thumbnailImageUrl.replace('256', '64') ||
+                    this.localFavFakeRef.thumbnailImageUrl.replace('256', '128') ||
                     this.localFavFakeRef.thumbnailImageUrl
                 );
             }

src/components/favorites/FavoritesWorldTab.vue

@@ -237,7 +237,7 @@
             FavoritesWorldItem,
             WorldExportDialog
         },
-        inject: ['API'],
+        inject: ['API', 'showWorldDialog'],
         props: {
             sortFavorites: Boolean,
             hideTooltips: Boolean,
@@ -428,9 +428,6 @@
             changeFavoriteGroupName(group) {
                 this.$emit('change-favorite-group-name', group);
             },
-            showWorldDialog(event) {
-                this.$emit('show-world-dialog', event);
-            },
             newInstanceSelfInvite(event) {
                 this.$emit('new-instance-self-invite', event);
             },

src/mixins/dialogs/currentUser.pug

@@ -83,6 +83,7 @@ mixin currentUser
         ref='bioDialog'
         :visible.sync='bioDialog.visible'
         :title='$t("dialog.bio.header")'
+        :close-on-click-modal='false'
         width='600px')
         div(v-loading='bioDialog.loading')
             el-input(

src/mixins/dialogs/favoritesDialog.pug

@@ -98,250 +98,3 @@ mixin favoritesDialog
             readonly
             style='margin-top: 15px'
             @click.native='$event.target.tagName === "TEXTAREA" && $event.target.select()')
-
-    //- dialog: World import dialog
-    el-dialog.x-dialog(
-        :before-close='beforeDialogClose'
-        @mousedown.native='dialogMouseDown'
-        @mouseup.native='dialogMouseUp'
-        ref='worldImportDialog'
-        :visible.sync='worldImportDialog.visible'
-        :title='$t("dialog.world_import.header")'
-        width='650px'
-        top='10vh')
-        div(style='display: flex; align-items: center; justify-content: space-between')
-            div(style='font-size: 12px') {{ $t('dialog.world_import.description') }}
-            div(style='display: flex; align-items: center')
-                div(v-if='worldImportDialog.progress') {{ $t('dialog.world_import.process_progress') }} {{ worldImportDialog.progress }} / {{ worldImportDialog.progressTotal }} #[i.el-icon-loading(style='margin: 0 5px')]
-                el-button(v-if='worldImportDialog.loading' size='small' @click='cancelWorldImport') {{ $t('dialog.world_import.cancel') }}
-                el-button(v-else size='small' @click='processWorldImportList' :disabled='!worldImportDialog.input') {{ $t('dialog.world_import.process_list') }}
-        el-input(
-            type='textarea'
-            v-model='worldImportDialog.input'
-            size='mini'
-            rows='10'
-            resize='none'
-            style='margin-top: 10px')
-        div(style='display: flex; align-items: center; justify-content: space-between; margin-top: 5px')
-            div
-                el-dropdown(@click.native.stop trigger='click' size='small' style='margin-right: 5px')
-                    el-button(size='mini')
-                        span(v-if='worldImportDialog.worldImportFavoriteGroup') {{ worldImportDialog.worldImportFavoriteGroup.displayName }} ({{ worldImportDialog.worldImportFavoriteGroup.count }}/{{ worldImportDialog.worldImportFavoriteGroup.capacity }}) #[i.el-icon-arrow-down.el-icon--right]
-                        span(v-else) {{ $t('dialog.world_import.select_vrchat_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right]
-                    el-dropdown-menu(#default='dropdown')
-                        template(v-for='groupAPI in API.favoriteWorldGroups')
-                            el-dropdown-item(
-                                :key='groupAPI.name'
-                                style='display: block; margin: 10px 0'
-                                @click.native='selectWorldImportGroup(groupAPI)'
-                                :disabled='groupAPI.count >= groupAPI.capacity') {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
-                el-dropdown(@click.native.stop trigger='click' size='small' style='margin: 5px')
-                    el-button(size='mini')
-                        span(v-if='worldImportDialog.worldImportLocalFavoriteGroup') {{ worldImportDialog.worldImportLocalFavoriteGroup }} ({{ getLocalWorldFavoriteGroupLength(worldImportDialog.worldImportLocalFavoriteGroup) }}) #[i.el-icon-arrow-down.el-icon--right]
-                        span(v-else) {{ $t('dialog.world_import.select_local_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right]
-                    el-dropdown-menu(#default='dropdown')
-                        template(v-for='group in localWorldFavoriteGroups')
-                            el-dropdown-item(
-                                :key='group'
-                                style='display: block; margin: 10px 0'
-                                @click.native='selectWorldImportLocalGroup(group)') {{ group }} ({{ getLocalWorldFavoriteGroupLength(group) }})
-                span(v-if='worldImportDialog.worldImportFavoriteGroup' style='margin-left: 5px') {{ worldImportTable.data.length }} / {{ worldImportDialog.worldImportFavoriteGroup.capacity - worldImportDialog.worldImportFavoriteGroup.count }}
-            div
-                el-button(size='small' @click='clearWorldImportTable' :disabled='worldImportTable.data.length === 0') {{ $t('dialog.world_import.clear_table') }}
-                el-button(
-                    size='small'
-                    type='primary'
-                    @click='importWorldImportTable'
-                    style='margin: 5px'
-                    :disabled='worldImportTable.data.length === 0 || (!worldImportDialog.worldImportFavoriteGroup && !worldImportDialog.worldImportLocalFavoriteGroup)') {{ $t('dialog.world_import.import') }}
-        span(v-if='worldImportDialog.importProgress' style='margin: 10px') #[i.el-icon-loading(style='margin-right: 5px')] {{ $t('dialog.world_import.import_progress') }} {{ worldImportDialog.importProgress }}/{{ worldImportDialog.importProgressTotal }}
-        br
-        template(v-if='worldImportDialog.errors')
-            el-button(size='small' @click='worldImportDialog.errors = ""') {{ $t('dialog.world_import.clear_errors') }}
-            h2(style='font-weight: bold; margin: 5px 0') {{ $t('dialog.world_import.errors') }}
-            pre(v-text='worldImportDialog.errors' style='white-space: pre-wrap; font-size: 12px')
-        data-tables(
-            v-if='worldImportDialog.visible'
-            v-bind='worldImportTable'
-            v-loading='worldImportDialog.loading'
-            style='margin-top: 10px')
-            el-table-column(:label='$t("table.import.image")' width='70' prop='thumbnailImageUrl')
-                template(#default='scope')
-                    el-popover(placement='right' height='500px' trigger='hover')
-                        img.friends-list-avatar(slot='reference' v-lazy='scope.row.thumbnailImageUrl')
-                        img.friends-list-avatar(
-                            v-lazy='scope.row.imageUrl'
-                            style='height: 500px; cursor: pointer'
-                            @click='showFullscreenImageDialog(scope.row.imageUrl)')
-            el-table-column(:label='$t("table.import.name")' prop='name')
-                template(#default='scope')
-                    span.x-link(v-text='scope.row.name' @click='showWorldDialog(scope.row.id)')
-            el-table-column(:label='$t("table.import.author")' width='120' prop='authorName')
-                template(#default='scope')
-                    span.x-link(v-text='scope.row.authorName' @click='showUserDialog(scope.row.authorId)')
-            el-table-column(:label='$t("table.import.status")' width='70' prop='releaseStatus')
-                template(#default='scope')
-                    span(
-                        v-text='scope.row.releaseStatus.charAt(0).toUpperCase() + scope.row.releaseStatus.slice(1)'
-                        :style='{ color: scope.row.releaseStatus === "public" ? "#67c23a" : scope.row.releaseStatus === "private" ? "#f56c6c" : undefined }')
-            el-table-column(:label='$t("table.import.action")' width='90' align='right')
-                template(#default='scope')
-                    el-button(type='text' icon='el-icon-close' size='mini' @click='deleteItemWorldImport(scope.row)')
-
-    //- dialog: Avatar import dialog
-    el-dialog.x-dialog(
-        :before-close='beforeDialogClose'
-        @mousedown.native='dialogMouseDown'
-        @mouseup.native='dialogMouseUp'
-        ref='avatarImportDialog'
-        :visible.sync='avatarImportDialog.visible'
-        :title='$t("dialog.avatar_import.header")'
-        width='650px')
-        div(style='display: flex; align-items: center; justify-content: space-between')
-            div(style='font-size: 12px') {{ $t('dialog.avatar_import.description') }}
-            div(style='display: flex; align-items: center')
-                div(v-if='avatarImportDialog.progress') {{ $t('dialog.avatar_import.process_progress') }} {{ avatarImportDialog.progress }} / {{ avatarImportDialog.progressTotal }} #[i.el-icon-loading(style='margin: 0 5px')] 
-                el-button(v-if='avatarImportDialog.loading' size='small' @click='cancelAvatarImport') {{ $t('dialog.avatar_import.cancel') }}
-                el-button(v-else size='small' @click='processAvatarImportList' :disabled='!avatarImportDialog.input') {{ $t('dialog.avatar_import.process_list') }}
-        el-input(
-            type='textarea'
-            v-model='avatarImportDialog.input'
-            size='mini'
-            rows='10'
-            resize='none'
-            style='margin-top: 10px')
-        div(style='display: flex; align-items: center; justify-content: space-between; margin-top: 5px')
-            div
-                el-dropdown(@click.native.stop trigger='click' size='small')
-                    el-button(size='mini')
-                        span(v-if='avatarImportDialog.avatarImportFavoriteGroup') {{ avatarImportDialog.avatarImportFavoriteGroup.displayName }} ({{ avatarImportDialog.avatarImportFavoriteGroup.count }}/{{ avatarImportDialog.avatarImportFavoriteGroup.capacity }}) #[i.el-icon-arrow-down.el-icon--right]
-                        span(v-else) {{ $t('dialog.avatar_import.select_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right]
-                    el-dropdown-menu(#default='dropdown')
-                        template(v-for='groupAPI in API.favoriteAvatarGroups')
-                            el-dropdown-item(
-                                :key='groupAPI.name'
-                                style='display: block; margin: 10px 0'
-                                @click.native='selectAvatarImportGroup(groupAPI)'
-                                :disabled='groupAPI.count >= groupAPI.capacity') {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
-                el-dropdown(@click.native.stop trigger='click' size='small' style='margin: 5px')
-                    el-button(size='mini')
-                        span(v-if='avatarImportDialog.avatarImportLocalFavoriteGroup') {{ avatarImportDialog.avatarImportLocalFavoriteGroup }} ({{ getLocalAvatarFavoriteGroupLength(avatarImportDialog.avatarImportLocalFavoriteGroup) }}) #[i.el-icon-arrow-down.el-icon--right]
-                        span(v-else) {{ $t('dialog.avatar_import.select_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right]
-                    el-dropdown-menu(#default='dropdown')
-                        template(v-for='group in localAvatarFavoriteGroups')
-                            el-dropdown-item(
-                                :key='group'
-                                style='display: block; margin: 10px 0'
-                                @click.native='selectAvatarImportLocalGroup(group)') {{ group }} ({{ getLocalAvatarFavoriteGroupLength(group) }})
-                span(v-if='avatarImportDialog.avatarImportFavoriteGroup' style='margin-left: 5px') {{ avatarImportTable.data.length }} / {{ avatarImportDialog.avatarImportFavoriteGroup.capacity - avatarImportDialog.avatarImportFavoriteGroup.count }}
-            div
-                el-button(size='small' @click='clearAvatarImportTable') {{ $t('dialog.avatar_import.clear_table') }}
-                el-button(
-                    size='small'
-                    type='primary'
-                    @click='importAvatarImportTable'
-                    style='margin: 5px'
-                    :disabled='avatarImportTable.data.length === 0 || (!avatarImportDialog.avatarImportFavoriteGroup && !avatarImportDialog.avatarImportLocalFavoriteGroup)') {{ $t('dialog.avatar_import.import') }}
-        span(v-if='avatarImportDialog.importProgress' style='margin: 10px') #[i.el-icon-loading(style='margin-right: 5px')] {{ $t('dialog.avatar_import.import_progress') }} {{ avatarImportDialog.importProgress }}/{{ avatarImportDialog.importProgressTotal }}
-        br
-        template(v-if='avatarImportDialog.errors')
-            el-button(size='small' @click='avatarImportDialog.errors = ""') {{ $t('dialog.avatar_import.clear_errors') }}
-            h2(style='font-weight: bold; margin: 5px 0') {{ $t('dialog.avatar_import.errors') }}
-            pre(v-text='avatarImportDialog.errors' style='white-space: pre-wrap; font-size: 12px')
-        data-tables(
-            v-if='avatarImportDialog.visible'
-            v-bind='avatarImportTable'
-            v-loading='avatarImportDialog.loading'
-            style='margin-top: 10px')
-            el-table-column(:label='$t("table.import.image")' width='70' prop='thumbnailImageUrl')
-                template(#default='scope')
-                    el-popover(placement='right' height='500px' trigger='hover')
-                        img.friends-list-avatar(slot='reference' v-lazy='scope.row.thumbnailImageUrl')
-                        img.friends-list-avatar(
-                            v-lazy='scope.row.imageUrl'
-                            style='height: 500px; cursor: pointer'
-                            @click='showFullscreenImageDialog(scope.row.imageUrl)')
-            el-table-column(:label='$t("table.import.name")' prop='name')
-                template(#default='scope')
-                    span.x-link(v-text='scope.row.name' @click='showAvatarDialog(scope.row.id)')
-            el-table-column(:label='$t("table.import.author")' width='120' prop='authorName')
-                template(#default='scope')
-                    span.x-link(v-text='scope.row.authorName' @click='showUserDialog(scope.row.authorId)')
-            el-table-column(:label='$t("table.import.status")' width='70' prop='releaseStatus')
-                template(#default='scope')
-                    span(
-                        v-text='scope.row.releaseStatus.charAt(0).toUpperCase() + scope.row.releaseStatus.slice(1)'
-                        :style='{ color: scope.row.releaseStatus === "public" ? "#67c23a" : scope.row.releaseStatus === "private" ? "#f56c6c" : undefined }')
-            el-table-column(:label='$t("table.import.action")' width='90' align='right')
-                template(#default='scope')
-                    el-button(type='text' icon='el-icon-close' size='mini' @click='deleteItemAvatarImport(scope.row)')
-
-    //- dialog: Friend import dialog
-    el-dialog.x-dialog(
-        :before-close='beforeDialogClose'
-        @mousedown.native='dialogMouseDown'
-        @mouseup.native='dialogMouseUp'
-        ref='friendImportDialog'
-        :visible.sync='friendImportDialog.visible'
-        :title='$t("dialog.friend_import.header")'
-        width='650px')
-        div(style='display: flex; align-items: center; justify-content: space-between')
-            div(style='font-size: 12px') {{ $t('dialog.friend_import.description') }}
-            div(style='display: flex; align-items: center')
-                div(v-if='friendImportDialog.progress') {{ $t('dialog.friend_import.process_progress') }} {{ friendImportDialog.progress }} / {{ friendImportDialog.progressTotal }} #[i.el-icon-loading(style='margin: 0 5px')]
-                el-button(v-if='friendImportDialog.loading' size='small' @click='cancelFriendImport') {{ $t('dialog.friend_import.cancel') }}
-                el-button(v-else size='small' @click='processFriendImportList' :disabled='!friendImportDialog.input') {{ $t('dialog.friend_import.process_list') }}
-        el-input(
-            type='textarea'
-            v-model='friendImportDialog.input'
-            size='mini'
-            rows='10'
-            resize='none'
-            style='margin-top: 10px')
-        div(style='display: flex; align-items: center; justify-content: space-between; margin-top: 5px')
-            div
-                el-dropdown(@click.native.stop trigger='click' size='small')
-                    el-button(size='mini')
-                        span(v-if='friendImportDialog.friendImportFavoriteGroup') {{ friendImportDialog.friendImportFavoriteGroup.displayName }} ({{ friendImportDialog.friendImportFavoriteGroup.count }}/{{ friendImportDialog.friendImportFavoriteGroup.capacity }}) #[i.el-icon-arrow-down.el-icon--right]
-                        span(v-else) {{ $t('dialog.friend_import.select_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right]
-                    el-dropdown-menu(#default='dropdown')
-                        template(v-for='groupAPI in API.favoriteFriendGroups')
-                            el-dropdown-item(
-                                :key='groupAPI.name'
-                                style='display: block; margin: 10px 0'
-                                @click.native='selectFriendImportGroup(groupAPI)'
-                                :disabled='groupAPI.count >= groupAPI.capacity') {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
-                span(v-if='friendImportDialog.friendImportFavoriteGroup' style='margin-left: 5px') {{ friendImportTable.data.length }} / {{ friendImportDialog.friendImportFavoriteGroup.capacity - friendImportDialog.friendImportFavoriteGroup.count }}
-            div
-                el-button(size='small' @click='clearFriendImportTable' :disabled='friendImportTable.data.length === 0') {{ $t('dialog.friend_import.clear_table') }}
-                el-button(
-                    size='small'
-                    type='primary'
-                    @click='importFriendImportTable'
-                    style='margin: 5px'
-                    :disabled='friendImportTable.data.length === 0 || !friendImportDialog.friendImportFavoriteGroup') {{ $t('dialog.friend_import.import') }}
-        span(v-if='friendImportDialog.importProgress' style='margin: 10px') #[i.el-icon-loading(style='margin-right: 5px')] {{ $t('dialog.friend_import.import_progress') }} {{ friendImportDialog.importProgress }}/{{ friendImportDialog.importProgressTotal }}
-        br
-        template(v-if='friendImportDialog.errors')
-            el-button(size='small' @click='friendImportDialog.errors = ""') {{ $t('dialog.friend_import.clear_errors') }}
-            h2(style='font-weight: bold; margin: 5px 0') {{ $t('dialog.friend_import.errors') }}
-            pre(v-text='friendImportDialog.errors' style='white-space: pre-wrap; font-size: 12px')
-        data-tables(
-            v-if='friendImportDialog.visible'
-            v-bind='friendImportTable'
-            v-loading='friendImportDialog.loading'
-            style='margin-top: 10px')
-            el-table-column(:label='$t("table.import.image")' width='70' prop='currentAvatarThumbnailImageUrl')
-                template(#default='scope')
-                    el-popover(placement='right' height='500px' trigger='hover')
-                        img.friends-list-avatar(slot='reference' v-lazy='userImage(scope.row)')
-                        img.friends-list-avatar(
-                            v-lazy='userImageFull(scope.row)'
-                            style='height: 500px; cursor: pointer'
-                            @click='showFullscreenImageDialog(userImageFull(scope.row))')
-            el-table-column(:label='$t("table.import.name")' prop='displayName')
-                template(#default='scope')
-                    span.x-link(v-text='scope.row.displayName' @click='showUserDialog(scope.row.id)')
-            el-table-column(:label='$t("table.import.action")' width='90' align='right')
-                template(#default='scope')
-                    el-button(type='text' icon='el-icon-close' size='mini' @click='deleteItemFriendImport(scope.row)')

src/mixins/dialogs/userDialog.pug

@@ -140,7 +140,7 @@ mixin userDialog
                                 size='mini'
                                 style='margin-right: 5px; margin-top: 5px') {{ userDialog.ref.last_platform }}
                             el-tag.x-tag-age-verification(
-                                v-if='userDialog.ref.ageVerificationStatus || userDialog.ref.ageVerificationStatus !== "hidden"'
+                                v-if='userDialog.ref.ageVerificationStatus && userDialog.ref.ageVerificationStatus !== "hidden"'
                                 type='info'
                                 effect='plain'
                                 size='mini'
@@ -195,7 +195,7 @@ mixin userDialog
                         el-popover(placement='right' width='500px' trigger='click')
                             img.x-link(
                                 slot='reference'
-                                :src='userImage(userDialog.ref, true, "256")'
+                                :src='userImage(userDialog.ref, true, "256", true)'
                                 style='flex: none; width: 120px; height: 120px; border-radius: 12px; object-fit: cover')
                             img.x-link(
                                 v-lazy='userDialog.ref.userIcon'

src/views/dialogs/AvatarImportDialog.vue

@@ -0,0 +1,368 @@
+<template>
+    <el-dialog
+        ref="avatarImportDialog"
+        :before-close="beforeDialogClose"
+        :visible.sync="isVisible"
+        :title="$t('dialog.avatar_import.header')"
+        width="650px"
+        @mousedown.native="dialogMouseDown"
+        @mouseup.native="dialogMouseUp">
+        <div style="display: flex; align-items: center; justify-content: space-between">
+            <div style="font-size: 12px">{{ $t('dialog.avatar_import.description') }}</div>
+            <div style="display: flex; align-items: center">
+                <div v-if="avatarImportDialog.progress">
+                    {{ $t('dialog.avatar_import.process_progress') }} {{ avatarImportDialog.progress }} /
+                    {{ avatarImportDialog.progressTotal }}
+                    <i class="el-icon-loading" style="margin: 0 5px"></i>
+                </div>
+                <el-button v-if="avatarImportDialog.loading" size="small" @click="cancelAvatarImport">
+                    {{ $t('dialog.avatar_import.cancel') }}
+                </el-button>
+                <el-button v-else size="small" :disabled="!avatarImportDialog.input" @click="processAvatarImportList">
+                    {{ $t('dialog.avatar_import.process_list') }}
+                </el-button>
+            </div>
+        </div>
+        <el-input
+            v-model="avatarImportDialog.input"
+            type="textarea"
+            size="mini"
+            rows="10"
+            resize="none"
+            style="margin-top: 10px"></el-input>
+        <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 5px">
+            <div>
+                <el-dropdown trigger="click" size="small" @click.native.stop>
+                    <el-button size="mini">
+                        <span v-if="avatarImportDialog.avatarImportFavoriteGroup">
+                            {{ avatarImportDialog.avatarImportFavoriteGroup.displayName }} ({{
+                                avatarImportDialog.avatarImportFavoriteGroup.count
+                            }}/{{ avatarImportDialog.avatarImportFavoriteGroup.capacity }})
+                            <i class="el-icon-arrow-down el-icon--right"></i>
+                        </span>
+                        <span v-else>
+                            {{ $t('dialog.avatar_import.select_group_placeholder') }}
+                            <i class="el-icon-arrow-down el-icon--right"></i>
+                        </span>
+                    </el-button>
+                    <el-dropdown-menu slot="dropdown">
+                        <template v-for="groupAPI in API.favoriteAvatarGroups">
+                            <el-dropdown-item
+                                :key="groupAPI.name"
+                                style="display: block; margin: 10px 0"
+                                :disabled="groupAPI.count >= groupAPI.capacity"
+                                @click.native="selectAvatarImportGroup(groupAPI)">
+                                {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
+                            </el-dropdown-item>
+                        </template>
+                    </el-dropdown-menu>
+                </el-dropdown>
+                <el-dropdown trigger="click" size="small" style="margin: 5px" @click.native.stop>
+                    <el-button size="mini">
+                        <span v-if="avatarImportDialog.avatarImportLocalFavoriteGroup">
+                            {{ avatarImportDialog.avatarImportLocalFavoriteGroup }} ({{
+                                getLocalAvatarFavoriteGroupLength(avatarImportDialog.avatarImportLocalFavoriteGroup)
+                            }})
+                            <i class="el-icon-arrow-down el-icon--right"></i>
+                        </span>
+                        <span v-else>
+                            {{ $t('dialog.avatar_import.select_group_placeholder') }}
+                            <i class="el-icon-arrow-down el-icon--right"></i>
+                        </span>
+                    </el-button>
+                    <el-dropdown-menu slot="dropdown">
+                        <template v-for="group in localAvatarFavoriteGroups">
+                            <el-dropdown-item
+                                :key="group"
+                                style="display: block; margin: 10px 0"
+                                @click.native="selectAvatarImportLocalGroup(group)">
+                                {{ group }} ({{ getLocalAvatarFavoriteGroupLength(group) }})
+                            </el-dropdown-item>
+                        </template>
+                    </el-dropdown-menu>
+                </el-dropdown>
+                <span v-if="avatarImportDialog.avatarImportFavoriteGroup" style="margin-left: 5px">
+                    {{ avatarImportTable.data.length }} /
+                    {{
+                        avatarImportDialog.avatarImportFavoriteGroup.capacity -
+                        avatarImportDialog.avatarImportFavoriteGroup.count
+                    }}
+                </span>
+            </div>
+            <div>
+                <el-button size="small" @click="clearAvatarImportTable">
+                    {{ $t('dialog.avatar_import.clear_table') }}
+                </el-button>
+                <el-button
+                    size="small"
+                    type="primary"
+                    style="margin: 5px"
+                    :disabled="
+                        avatarImportTable.data.length === 0 ||
+                        (!avatarImportDialog.avatarImportFavoriteGroup &&
+                            !avatarImportDialog.avatarImportLocalFavoriteGroup)
+                    "
+                    @click="importAvatarImportTable">
+                    {{ $t('dialog.avatar_import.import') }}
+                </el-button>
+            </div>
+        </div>
+        <span v-if="avatarImportDialog.importProgress" style="margin: 10px">
+            <i class="el-icon-loading" style="margin-right: 5px"></i>
+            {{ $t('dialog.avatar_import.import_progress') }}
+            {{ avatarImportDialog.importProgress }}/{{ avatarImportDialog.importProgressTotal }}
+        </span>
+        <br />
+        <template v-if="avatarImportDialog.errors">
+            <el-button size="small" @click="avatarImportDialog.errors = ''">
+                {{ $t('dialog.avatar_import.clear_errors') }}
+            </el-button>
+            <h2 style="font-weight: bold; margin: 5px 0">
+                {{ $t('dialog.avatar_import.errors') }}
+            </h2>
+            <pre style="white-space: pre-wrap; font-size: 12px" v-text="avatarImportDialog.errors"></pre>
+        </template>
+        <data-tables v-loading="avatarImportDialog.loading" v-bind="avatarImportTable" style="margin-top: 10px">
+            <el-table-column :label="$t('table.import.image')" width="70" prop="thumbnailImageUrl">
+                <template slot-scope="scope">
+                    <el-popover placement="right" height="500px" trigger="hover">
+                        <img slot="reference" v-lazy="scope.row.thumbnailImageUrl" class="friends-list-avatar" />
+                        <img
+                            v-lazy="scope.row.imageUrl"
+                            class="friends-list-avatar"
+                            style="height: 500px; cursor: pointer"
+                            @click="showFullscreenImageDialog(scope.row.imageUrl)" />
+                    </el-popover>
+                </template>
+            </el-table-column>
+            <el-table-column :label="$t('table.import.name')" prop="name">
+                <template slot-scope="scope">
+                    <span class="x-link" @click="showAvatarDialog(scope.row.id)">
+                        {{ scope.row.name }}
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column :label="$t('table.import.author')" width="120" prop="authorName">
+                <template slot-scope="scope">
+                    <span class="x-link" @click="showUserDialog(scope.row.authorId)">
+                        {{ scope.row.authorName }}
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column :label="$t('table.import.status')" width="70" prop="releaseStatus">
+                <template slot-scope="scope">
+                    <span
+                        :style="{
+                            color:
+                                scope.row.releaseStatus === 'public'
+                                    ? '#67c23a'
+                                    : scope.row.releaseStatus === 'private'
+                                      ? '#f56c6c'
+                                      : undefined
+                        }">
+                        {{ scope.row.releaseStatus.charAt(0).toUpperCase() + scope.row.releaseStatus.slice(1) }}
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column :label="$t('table.import.action')" width="90" align="right">
+                <template slot-scope="scope">
+                    <el-button type="text" icon="el-icon-close" size="mini" @click="deleteItemAvatarImport(scope.row)">
+                    </el-button>
+                </template>
+            </el-table-column>
+        </data-tables>
+    </el-dialog>
+</template>
+
+<script>
+    import { avatarRequest, favoriteRequest } from '../../classes/request';
+    import utils from '../../classes/utils';
+
+    export default {
+        name: 'AvatarImportDialog',
+        inject: [
+            'API',
+            'beforeDialogClose',
+            'dialogMouseDown',
+            'dialogMouseUp',
+            'adjustDialogZ',
+            'showFullscreenImageDialog',
+            'showUserDialog',
+            'showAvatarDialog'
+        ],
+        props: {
+            getLocalAvatarFavoriteGroupLength: Function,
+            localAvatarFavoriteGroups: Array,
+            avatarImportDialogInput: String,
+            avatarImportDialogVisible: Boolean
+        },
+        data() {
+            return {
+                avatarImportDialog: {
+                    loading: false,
+                    progress: 0,
+                    progressTotal: 0,
+                    input: '',
+                    avatarIdList: new Set(),
+                    errors: '',
+                    avatarImportFavoriteGroup: null,
+                    avatarImportLocalFavoriteGroup: null,
+                    importProgress: 0,
+                    importProgressTotal: 0
+                },
+                avatarImportTable: {
+                    data: [],
+                    tableProps: {
+                        stripe: true,
+                        size: 'mini'
+                    },
+                    layout: 'table'
+                }
+            };
+        },
+        computed: {
+            isVisible: {
+                get() {
+                    return this.avatarImportDialogVisible;
+                },
+                set(value) {
+                    this.$emit('update:avatar-import-dialog-visible', value);
+                }
+            }
+        },
+        watch: {
+            avatarImportDialogVisible(value) {
+                if (value) {
+                    this.adjustDialogZ(this.$refs.avatarImportDialog.$el);
+                    this.clearAvatarImportTable();
+                    this.resetAvatarImport();
+                    if (this.avatarImportDialogInput) {
+                        this.avatarImportDialog.input = this.avatarImportDialogInput;
+                        this.processAvatarImportList();
+                        this.$emit('update:avatar-import-dialog-input', '');
+                    }
+                }
+            }
+        },
+        methods: {
+            async processAvatarImportList() {
+                const D = this.avatarImportDialog;
+                D.loading = true;
+                const regexAvatarId = /avtr_[0-9A-Fa-f]{8}-([0-9A-Fa-f]{4}-){3}[0-9A-Fa-f]{12}/g;
+                let match = [];
+                const avatarIdList = new Set();
+                while ((match = regexAvatarId.exec(D.input)) !== null) {
+                    avatarIdList.add(match[0]);
+                }
+                D.input = '';
+                D.errors = '';
+                D.progress = 0;
+                D.progressTotal = avatarIdList.size;
+                const data = Array.from(avatarIdList);
+                for (let i = 0; i < data.length; ++i) {
+                    if (!this.isVisible) {
+                        this.resetAvatarImport();
+                    }
+                    if (!D.loading || !this.isVisible) {
+                        break;
+                    }
+                    const avatarId = data[i];
+                    if (!D.avatarIdList.has(avatarId)) {
+                        try {
+                            const args = await avatarRequest.getAvatar({
+                                avatarId
+                            });
+                            this.avatarImportTable.data.push(args.ref);
+                            D.avatarIdList.add(avatarId);
+                        } catch (err) {
+                            D.errors = D.errors.concat(`AvatarId: ${avatarId}\n${err}\n\n`);
+                        }
+                    }
+                    D.progress++;
+                    if (D.progress === avatarIdList.size) {
+                        D.progress = 0;
+                    }
+                }
+                D.loading = false;
+            },
+
+            deleteItemAvatarImport(ref) {
+                utils.removeFromArray(this.avatarImportTable.data, ref);
+                this.avatarImportDialog.avatarIdList.delete(ref.id);
+            },
+
+            resetAvatarImport() {
+                this.avatarImportDialog.input = '';
+                this.avatarImportDialog.errors = '';
+            },
+
+            clearAvatarImportTable() {
+                this.avatarImportTable.data = [];
+                this.avatarImportDialog.avatarIdList = new Set();
+            },
+
+            selectAvatarImportGroup(group) {
+                this.avatarImportDialog.avatarImportLocalFavoriteGroup = null;
+                this.avatarImportDialog.avatarImportFavoriteGroup = group;
+            },
+
+            selectAvatarImportLocalGroup(group) {
+                this.avatarImportDialog.avatarImportFavoriteGroup = null;
+                this.avatarImportDialog.avatarImportLocalFavoriteGroup = group;
+            },
+
+            cancelAvatarImport() {
+                this.avatarImportDialog.loading = false;
+            },
+            addFavoriteAvatar(ref, group, message) {
+                return favoriteRequest
+                    .addFavorite({
+                        type: 'avatar',
+                        favoriteId: ref.id,
+                        tags: group.name
+                    })
+                    .then((args) => {
+                        if (message) {
+                            this.$message({
+                                message: 'Avatar added to favorites',
+                                type: 'success'
+                            });
+                        }
+                        return args;
+                    });
+            },
+            async importAvatarImportTable() {
+                const D = this.avatarImportDialog;
+                if (!D.avatarImportFavoriteGroup && !D.avatarImportLocalFavoriteGroup) {
+                    return;
+                }
+                D.loading = true;
+                const data = [...this.avatarImportTable.data].reverse();
+                D.importProgressTotal = data.length;
+                let ref = '';
+                try {
+                    for (let i = data.length - 1; i >= 0; i--) {
+                        if (!D.loading || !this.isVisible) {
+                            break;
+                        }
+                        ref = data[i];
+                        if (D.avatarImportFavoriteGroup) {
+                            await this.addFavoriteAvatar(ref, D.avatarImportFavoriteGroup, false);
+                        } else if (D.avatarImportLocalFavoriteGroup) {
+                            this.$emit('add-local-avatar-favorite', ref.id, D.avatarImportLocalFavoriteGroup);
+                        }
+                        utils.removeFromArray(this.avatarImportTable.data, ref);
+                        D.avatarIdList.delete(ref.id);
+                        D.importProgress++;
+                    }
+                } catch (err) {
+                    D.errors = `Name: ${ref.name}\nAvatarId: ${ref.id}\n${err}\n\n`;
+                } finally {
+                    D.importProgress = 0;
+                    D.importProgressTotal = 0;
+                    D.loading = false;
+                }
+            }
+        }
+    };
+</script>

src/views/dialogs/FriendImportDialog.vue

@@ -0,0 +1,309 @@
+<template>
+    <el-dialog
+        ref="friendImportDialog"
+        :before-close="beforeDialogClose"
+        :visible.sync="isVisible"
+        :title="$t('dialog.friend_import.header')"
+        width="650px"
+        @mousedown.native="dialogMouseDown"
+        @mouseup.native="dialogMouseUp">
+        <div style="display: flex; align-items: center; justify-content: space-between">
+            <div style="font-size: 12px">{{ $t('dialog.friend_import.description') }}</div>
+            <div style="display: flex; align-items: center">
+                <div v-if="friendImportDialog.progress">
+                    {{ $t('dialog.friend_import.process_progress') }} {{ friendImportDialog.progress }} /
+                    {{ friendImportDialog.progressTotal }}
+                    <i class="el-icon-loading" style="margin: 0 5px"></i>
+                </div>
+                <el-button v-if="friendImportDialog.loading" size="small" @click="cancelFriendImport">
+                    {{ $t('dialog.friend_import.cancel') }}
+                </el-button>
+                <el-button v-else size="small" :disabled="!friendImportDialog.input" @click="processFriendImportList">
+                    {{ $t('dialog.friend_import.process_list') }}
+                </el-button>
+            </div>
+        </div>
+        <el-input
+            v-model="friendImportDialog.input"
+            type="textarea"
+            size="mini"
+            rows="10"
+            resize="none"
+            style="margin-top: 10px" />
+        <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 5px">
+            <div>
+                <el-dropdown trigger="click" size="small" @click.native.stop>
+                    <el-button size="mini">
+                        <span v-if="friendImportDialog.friendImportFavoriteGroup">
+                            {{ friendImportDialog.friendImportFavoriteGroup.displayName }} ({{
+                                friendImportDialog.friendImportFavoriteGroup.count
+                            }}/{{ friendImportDialog.friendImportFavoriteGroup.capacity }})
+                            <i class="el-icon-arrow-down el-icon--right"></i>
+                        </span>
+                        <span v-else
+                            >{{ $t('dialog.friend_import.select_group_placeholder') }}
+                            <i class="el-icon-arrow-down el-icon--right"></i
+                        ></span>
+                    </el-button>
+                    <el-dropdown-menu slot="dropdown">
+                        <template v-for="groupAPI in API.favoriteFriendGroups">
+                            <el-dropdown-item
+                                :key="groupAPI.name"
+                                style="display: block; margin: 10px 0"
+                                :disabled="groupAPI.count >= groupAPI.capacity"
+                                @click.native="selectFriendImportGroup(groupAPI)">
+                                {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
+                            </el-dropdown-item>
+                        </template>
+                    </el-dropdown-menu>
+                </el-dropdown>
+                <span v-if="friendImportDialog.friendImportFavoriteGroup" style="margin-left: 5px">
+                    {{ friendImportTable.data.length }} /
+                    {{
+                        friendImportDialog.friendImportFavoriteGroup.capacity -
+                        friendImportDialog.friendImportFavoriteGroup.count
+                    }}
+                </span>
+            </div>
+            <div>
+                <el-button size="small" :disabled="friendImportTable.data.length === 0" @click="clearFriendImportTable">
+                    {{ $t('dialog.friend_import.clear_table') }}
+                </el-button>
+                <el-button
+                    size="small"
+                    type="primary"
+                    style="margin: 5px"
+                    :disabled="friendImportTable.data.length === 0 || !friendImportDialog.friendImportFavoriteGroup"
+                    @click="importFriendImportTable">
+                    {{ $t('dialog.friend_import.import') }}
+                </el-button>
+            </div>
+        </div>
+        <span v-if="friendImportDialog.importProgress" style="margin: 10px">
+            <i class="el-icon-loading" style="margin-right: 5px"></i>
+            {{ $t('dialog.friend_import.import_progress') }} {{ friendImportDialog.importProgress }}/{{
+                friendImportDialog.importProgressTotal
+            }}
+        </span>
+        <br />
+        <template v-if="friendImportDialog.errors">
+            <el-button size="small" @click="friendImportDialog.errors = ''">
+                {{ $t('dialog.friend_import.clear_errors') }}
+            </el-button>
+            <h2 style="font-weight: bold; margin: 5px 0">{{ $t('dialog.friend_import.errors') }}</h2>
+            <pre style="white-space: pre-wrap; font-size: 12px" v-text="friendImportDialog.errors"></pre>
+        </template>
+        <data-tables v-loading="friendImportDialog.loading" v-bind="friendImportTable" style="margin-top: 10px">
+            <el-table-column :label="$t('table.import.image')" width="70" prop="currentAvatarThumbnailImageUrl">
+                <template slot-scope="scope">
+                    <el-popover placement="right" height="500px" trigger="hover">
+                        <template slot="reference">
+                            <img class="friends-list-avatar" :src="userImage(scope.row)" />
+                        </template>
+                        <img
+                            class="friends-list-avatar"
+                            :src="userImageFull(scope.row)"
+                            style="height: 500px; cursor: pointer"
+                            @click="showFullscreenImageDialog(userImageFull(scope.row))" />
+                    </el-popover>
+                </template>
+            </el-table-column>
+            <el-table-column :label="$t('table.import.name')" prop="displayName">
+                <template slot-scope="scope">
+                    <span class="x-link" :title="scope.row.displayName" @click="showUserDialog(scope.row.id)">
+                        {{ scope.row.displayName }}
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column :label="$t('table.import.action')" width="90" align="right">
+                <template slot-scope="scope">
+                    <el-button type="text" icon="el-icon-close" size="mini" @click="deleteItemFriendImport(scope.row)">
+                    </el-button>
+                </template>
+            </el-table-column>
+        </data-tables>
+    </el-dialog>
+</template>
+
+<script>
+    import utils from '../../classes/utils';
+    import { favoriteRequest, userRequest } from '../../classes/request';
+
+    export default {
+        name: 'FriendImportDialog',
+        inject: [
+            'API',
+            'userImage',
+            'userImageFull',
+            'showFullscreenImageDialog',
+            'showUserDialog',
+            'beforeDialogClose',
+            'dialogMouseDown',
+            'dialogMouseUp',
+            'adjustDialogZ'
+        ],
+        props: {
+            friendImportDialogVisible: {
+                type: Boolean,
+                required: true
+            },
+            friendImportDialogInput: {
+                type: String,
+                required: false,
+                default: ''
+            }
+        },
+        data() {
+            return {
+                friendImportDialog: {
+                    loading: false,
+                    progress: 0,
+                    progressTotal: 0,
+                    input: '',
+                    userIdList: new Set(),
+                    errors: '',
+                    friendImportFavoriteGroup: null,
+                    importProgress: 0,
+                    importProgressTotal: 0
+                },
+                friendImportTable: {
+                    data: [],
+                    tableProps: {
+                        stripe: true,
+                        size: 'mini'
+                    },
+                    layout: 'table'
+                }
+            };
+        },
+        computed: {
+            isVisible: {
+                get() {
+                    return this.friendImportDialogVisible;
+                },
+                set(value) {
+                    this.$emit('update:friend-import-dialog-visible', value);
+                }
+            }
+        },
+        watch: {
+            friendImportDialogVisible(value) {
+                if (value) {
+                    this.adjustDialogZ(this.$refs.friendImportDialog.$el);
+                    this.clearFriendImportTable();
+                    this.resetFriendImport();
+                    if (this.friendImportDialogInput) {
+                        this.friendImportDialog.input = this.friendImportDialogInput;
+                        this.processFriendImportList();
+                        this.$emit('update:friend-import-dialog-input', '');
+                    }
+                }
+            }
+        },
+        methods: {
+            cancelFriendImport() {
+                this.friendImportDialog.loading = false;
+            },
+            deleteItemFriendImport(ref) {
+                utils.removeFromArray(this.friendImportTable.data, ref);
+                this.friendImportDialog.userIdList.delete(ref.id);
+            },
+            clearFriendImportTable() {
+                this.friendImportTable.data = [];
+                this.friendImportDialog.userIdList = new Set();
+            },
+            selectFriendImportGroup(group) {
+                this.friendImportDialog.friendImportFavoriteGroup = group;
+            },
+            async importFriendImportTable() {
+                const D = this.friendImportDialog;
+                D.loading = true;
+                if (!D.friendImportFavoriteGroup) {
+                    return;
+                }
+                const data = [...this.friendImportTable.data].reverse();
+                D.importProgressTotal = data.length;
+                let ref = '';
+                try {
+                    for (let i = data.length - 1; i >= 0; i--) {
+                        if (!D.loading || !this.isVisible) {
+                            break;
+                        }
+                        ref = data[i];
+                        await this.addFavoriteUser(ref, D.friendImportFavoriteGroup, false);
+                        utils.removeFromArray(this.friendImportTable.data, ref);
+                        D.userIdList.delete(ref.id);
+                        D.importProgress++;
+                    }
+                } catch (err) {
+                    D.errors = `Name: ${ref.displayName}\nUserId: ${ref.id}\n${err}\n\n`;
+                } finally {
+                    D.importProgress = 0;
+                    D.importProgressTotal = 0;
+                    D.loading = false;
+                }
+            },
+            addFavoriteUser(ref, group, message) {
+                return favoriteRequest
+                    .addFavorite({
+                        type: 'friend',
+                        favoriteId: ref.id,
+                        tags: group.name
+                    })
+                    .then((args) => {
+                        if (message) {
+                            this.$message({
+                                message: 'Friend added to favorites',
+                                type: 'success'
+                            });
+                        }
+                        return args;
+                    });
+            },
+            async processFriendImportList() {
+                const D = this.friendImportDialog;
+                D.loading = true;
+                const regexFriendId = /usr_[0-9A-Fa-f]{8}-([0-9A-Fa-f]{4}-){3}[0-9A-Fa-f]{12}/g;
+                let match = [];
+                const userIdList = new Set();
+                while ((match = regexFriendId.exec(D.input)) !== null) {
+                    userIdList.add(match[0]);
+                }
+                D.input = '';
+                D.errors = '';
+                D.progress = 0;
+                D.progressTotal = userIdList.size;
+                const data = Array.from(userIdList);
+                for (let i = 0; i < data.length; ++i) {
+                    if (!this.isVisible) {
+                        this.resetFriendImport();
+                    }
+                    if (!D.loading || !this.isVisible) {
+                        break;
+                    }
+                    const userId = data[i];
+                    if (!D.userIdList.has(userId)) {
+                        try {
+                            const args = await userRequest.getUser({
+                                userId
+                            });
+                            this.friendImportTable.data.push(args.ref);
+                            D.userIdList.add(userId);
+                        } catch (err) {
+                            D.errors = D.errors.concat(`UserId: ${userId}\n${err}\n\n`);
+                        }
+                    }
+                    D.progress++;
+                    if (D.progress === userIdList.size) {
+                        D.progress = 0;
+                    }
+                }
+                D.loading = false;
+            },
+            resetFriendImport() {
+                this.friendImportDialog.input = '';
+                this.friendImportDialog.errors = '';
+            }
+        }
+    };
+</script>

src/views/dialogs/WorldDialog.vue

@@ -812,7 +812,7 @@
             }
         },
         watch: {
-            'worldDialog.visible'(value) {
+            'worldDialog.loading'(value) {
                 if (value) {
                     this.$nextTick(() => this.adjustDialogZ(this.$refs.worldDialog.$el));
                 }

src/views/dialogs/WorldImportDialog.vue

@@ -0,0 +1,372 @@
+<template>
+    <el-dialog
+        ref="worldImportDialog"
+        :before-close="beforeDialogClose"
+        :visible.sync="isVisible"
+        :title="$t('dialog.world_import.header')"
+        width="650px"
+        top="10vh"
+        class="x-dialog"
+        @mousedown.native="dialogMouseDown"
+        @mouseup.native="dialogMouseUp">
+        <div style="display: flex; align-items: center; justify-content: space-between">
+            <div style="font-size: 12px">{{ $t('dialog.world_import.description') }}</div>
+            <div style="display: flex; align-items: center">
+                <div v-if="worldImportDialog.progress">
+                    {{ $t('dialog.world_import.process_progress') }}
+                    {{ worldImportDialog.progress }} / {{ worldImportDialog.progressTotal }}
+                    <i class="el-icon-loading" style="margin: 0 5px"></i>
+                </div>
+                <el-button v-if="worldImportDialog.loading" size="small" @click="cancelWorldImport">
+                    {{ $t('dialog.world_import.cancel') }}
+                </el-button>
+                <el-button v-else size="small" :disabled="!worldImportDialog.input" @click="processWorldImportList">
+                    {{ $t('dialog.world_import.process_list') }}
+                </el-button>
+            </div>
+        </div>
+        <el-input
+            v-model="worldImportDialog.input"
+            type="textarea"
+            size="mini"
+            rows="10"
+            resize="none"
+            style="margin-top: 10px"></el-input>
+        <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 5px">
+            <div>
+                <el-dropdown trigger="click" size="small" style="margin-right: 5px" @click.native.stop>
+                    <el-button size="mini">
+                        <span v-if="worldImportDialog.worldImportFavoriteGroup">
+                            {{ worldImportDialog.worldImportFavoriteGroup.displayName }}
+                            ({{ worldImportDialog.worldImportFavoriteGroup.count }}/{{
+                                worldImportDialog.worldImportFavoriteGroup.capacity
+                            }})
+                            <i class="el-icon-arrow-down el-icon--right"></i>
+                        </span>
+                        <span v-else>
+                            {{ $t('dialog.world_import.select_vrchat_group_placeholder') }}
+                            <i class="el-icon-arrow-down el-icon--right"></i>
+                        </span>
+                    </el-button>
+                    <el-dropdown-menu slot="dropdown">
+                        <template v-for="groupAPI in API.favoriteWorldGroups">
+                            <el-dropdown-item
+                                :key="groupAPI.name"
+                                style="display: block; margin: 10px 0"
+                                :disabled="groupAPI.count >= groupAPI.capacity"
+                                @click.native="selectWorldImportGroup(groupAPI)">
+                                {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
+                            </el-dropdown-item>
+                        </template>
+                    </el-dropdown-menu>
+                </el-dropdown>
+                <el-dropdown trigger="click" size="small" style="margin: 5px" @click.native.stop>
+                    <el-button size="mini">
+                        <span v-if="worldImportDialog.worldImportLocalFavoriteGroup">
+                            {{ worldImportDialog.worldImportLocalFavoriteGroup }}
+                            ({{ getLocalWorldFavoriteGroupLength(worldImportDialog.worldImportLocalFavoriteGroup) }})
+                            <i class="el-icon-arrow-down el-icon--right"></i>
+                        </span>
+                        <span v-else>
+                            {{ $t('dialog.world_import.select_local_group_placeholder') }}
+                            <i class="el-icon-arrow-down el-icon--right"></i>
+                        </span>
+                    </el-button>
+                    <el-dropdown-menu slot="dropdown">
+                        <template v-for="group in localWorldFavoriteGroups">
+                            <el-dropdown-item
+                                :key="group"
+                                style="display: block; margin: 10px 0"
+                                @click.native="selectWorldImportLocalGroup(group)">
+                                {{ group }} ({{ getLocalWorldFavoriteGroupLength(group) }})
+                            </el-dropdown-item>
+                        </template>
+                    </el-dropdown-menu>
+                </el-dropdown>
+                <span v-if="worldImportDialog.worldImportFavoriteGroup" style="margin-left: 5px">
+                    {{ worldImportTable.data.length }} /
+                    {{
+                        worldImportDialog.worldImportFavoriteGroup.capacity -
+                        worldImportDialog.worldImportFavoriteGroup.count
+                    }}
+                </span>
+            </div>
+            <div>
+                <el-button size="small" :disabled="worldImportTable.data.length === 0" @click="clearWorldImportTable">
+                    {{ $t('dialog.world_import.clear_table') }}
+                </el-button>
+                <el-button
+                    size="small"
+                    type="primary"
+                    style="margin: 5px"
+                    :disabled="
+                        worldImportTable.data.length === 0 ||
+                        (!worldImportDialog.worldImportFavoriteGroup &&
+                            !worldImportDialog.worldImportLocalFavoriteGroup)
+                    "
+                    @click="importWorldImportTable">
+                    {{ $t('dialog.world_import.import') }}
+                </el-button>
+            </div>
+        </div>
+        <span v-if="worldImportDialog.importProgress" style="margin: 10px">
+            <i class="el-icon-loading" style="margin-right: 5px"></i>
+            {{ $t('dialog.world_import.import_progress') }}
+            {{ worldImportDialog.importProgress }}/{{ worldImportDialog.importProgressTotal }}
+        </span>
+        <br />
+        <template v-if="worldImportDialog.errors">
+            <el-button size="small" @click="worldImportDialog.errors = ''">
+                {{ $t('dialog.world_import.clear_errors') }}
+            </el-button>
+            <h2 style="font-weight: bold; margin: 5px 0">
+                {{ $t('dialog.world_import.errors') }}
+            </h2>
+            <pre style="white-space: pre-wrap; font-size: 12px" v-text="worldImportDialog.errors"></pre>
+        </template>
+        <data-tables v-loading="worldImportDialog.loading" v-bind="worldImportTable" style="margin-top: 10px">
+            <el-table-column :label="$t('table.import.image')" width="70" prop="thumbnailImageUrl">
+                <template slot-scope="scope">
+                    <el-popover placement="right" height="500px" trigger="hover">
+                        <img slot="reference" v-lazy="scope.row.thumbnailImageUrl" class="friends-list-avatar" />
+                        <img
+                            v-lazy="scope.row.imageUrl"
+                            class="friends-list-avatar"
+                            style="height: 500px; cursor: pointer"
+                            @click="showFullscreenImageDialog(scope.row.imageUrl)" />
+                    </el-popover>
+                </template>
+            </el-table-column>
+            <el-table-column :label="$t('table.import.name')" prop="name">
+                <template slot-scope="scope">
+                    <span class="x-link" @click="showWorldDialog(scope.row.id)" v-text="scope.row.name"></span>
+                </template>
+            </el-table-column>
+            <el-table-column :label="$t('table.import.author')" width="120" prop="authorName">
+                <template slot-scope="scope">
+                    <span
+                        class="x-link"
+                        @click="showUserDialog(scope.row.authorId)"
+                        v-text="scope.row.authorName"></span>
+                </template>
+            </el-table-column>
+            <el-table-column :label="$t('table.import.status')" width="70" prop="releaseStatus">
+                <template slot-scope="scope">
+                    <span
+                        :style="{
+                            color:
+                                scope.row.releaseStatus === 'public'
+                                    ? '#67c23a'
+                                    : scope.row.releaseStatus === 'private'
+                                      ? '#f56c6c'
+                                      : undefined
+                        }"
+                        v-text="
+                            scope.row.releaseStatus.charAt(0).toUpperCase() + scope.row.releaseStatus.slice(1)
+                        "></span>
+                </template>
+            </el-table-column>
+            <el-table-column :label="$t('table.import.action')" width="90" align="right">
+                <template slot-scope="scope">
+                    <el-button
+                        type="text"
+                        icon="el-icon-close"
+                        size="mini"
+                        @click="deleteItemWorldImport(scope.row)"></el-button>
+                </template>
+            </el-table-column>
+        </data-tables>
+    </el-dialog>
+</template>
+
+<script>
+    import { favoriteRequest, worldRequest } from '../../classes/request';
+    import utils from '../../classes/utils';
+
+    export default {
+        name: 'WorldImportDialog',
+        inject: [
+            'API',
+            'beforeDialogClose',
+            'dialogMouseDown',
+            'dialogMouseUp',
+            'showFullscreenImageDialog',
+            'showUserDialog',
+            'adjustDialogZ',
+            'showWorldDialog'
+        ],
+        props: {
+            worldImportDialogVisible: Boolean,
+            worldImportDialogInput: String,
+            getLocalWorldFavoriteGroupLength: Function,
+            localWorldFavoriteGroups: Array
+        },
+        data() {
+            return {
+                worldImportDialog: {
+                    loading: false,
+                    progress: 0,
+                    progressTotal: 0,
+                    input: '',
+                    worldIdList: new Set(),
+                    errors: '',
+                    worldImportFavoriteGroup: null,
+                    worldImportLocalFavoriteGroup: null,
+                    importProgress: 0,
+                    importProgressTotal: 0
+                },
+                worldImportTable: {
+                    data: [],
+                    tableProps: {
+                        stripe: true,
+                        size: 'mini'
+                    },
+                    layout: 'table'
+                }
+            };
+        },
+        computed: {
+            isVisible: {
+                get() {
+                    return this.worldImportDialogVisible;
+                },
+                set(visible) {
+                    this.$emit('update:world-import-dialog-visible', visible);
+                }
+            }
+        },
+        watch: {
+            worldImportDialogVisible(visible) {
+                if (visible) {
+                    this.adjustDialogZ(this.$refs.worldImportDialog.$el);
+                    this.clearWorldImportTable();
+                    this.resetWorldImport();
+                    if (this.worldImportDialogInput) {
+                        this.worldImportDialog.input = this.worldImportDialogInput;
+                        this.processWorldImportList();
+                        this.$emit('update:world-import-dialog-input', '');
+                    }
+                }
+            }
+        },
+        methods: {
+            resetWorldImport() {
+                this.worldImportDialog.input = '';
+                this.worldImportDialog.errors = '';
+            },
+            async processWorldImportList() {
+                const D = this.worldImportDialog;
+                D.loading = true;
+                const regexWorldId = /wrld_[0-9A-Fa-f]{8}-([0-9A-Fa-f]{4}-){3}[0-9A-Fa-f]{12}/g;
+                let match = [];
+                const worldIdList = new Set();
+                while ((match = regexWorldId.exec(D.input)) !== null) {
+                    worldIdList.add(match[0]);
+                }
+                D.input = '';
+                D.errors = '';
+                D.progress = 0;
+                D.progressTotal = worldIdList.size;
+                const data = Array.from(worldIdList);
+                for (let i = 0; i < data.length; ++i) {
+                    if (!this.isVisible) {
+                        this.resetWorldImport();
+                    }
+                    if (!D.loading || !this.isVisible) {
+                        break;
+                    }
+                    const worldId = data[i];
+                    if (!D.worldIdList.has(worldId)) {
+                        try {
+                            const args = await worldRequest.getWorld({
+                                worldId
+                            });
+                            this.worldImportTable.data.push(args.ref);
+                            D.worldIdList.add(worldId);
+                        } catch (err) {
+                            D.errors = D.errors.concat(`WorldId: ${worldId}\n${err}\n\n`);
+                        }
+                    }
+                    D.progress++;
+                    if (D.progress === worldIdList.size) {
+                        D.progress = 0;
+                    }
+                }
+                D.loading = false;
+            },
+            deleteItemWorldImport(ref) {
+                utils.removeFromArray(this.worldImportTable.data, ref);
+                this.worldImportDialog.worldIdList.delete(ref.id);
+            },
+
+            clearWorldImportTable() {
+                this.worldImportTable.data = [];
+                this.worldImportDialog.worldIdList = new Set();
+            },
+
+            selectWorldImportGroup(group) {
+                this.worldImportDialog.worldImportLocalFavoriteGroup = null;
+                this.worldImportDialog.worldImportFavoriteGroup = group;
+            },
+
+            selectWorldImportLocalGroup(group) {
+                this.worldImportDialog.worldImportFavoriteGroup = null;
+                this.worldImportDialog.worldImportLocalFavoriteGroup = group;
+            },
+
+            cancelWorldImport() {
+                this.worldImportDialog.loading = false;
+            },
+
+            async importWorldImportTable() {
+                const D = this.worldImportDialog;
+                if (!D.worldImportFavoriteGroup && !D.worldImportLocalFavoriteGroup) {
+                    return;
+                }
+                D.loading = true;
+                const data = [...this.worldImportTable.data].reverse();
+                D.importProgressTotal = data.length;
+                let ref = '';
+                try {
+                    for (let i = data.length - 1; i >= 0; i--) {
+                        if (!D.loading || !this.isVisible) {
+                            break;
+                        }
+                        ref = data[i];
+                        if (D.worldImportFavoriteGroup) {
+                            await this.addFavoriteWorld(ref, D.worldImportFavoriteGroup, false);
+                        } else if (D.worldImportLocalFavoriteGroup) {
+                            this.$emit('add-local-world-favorite', ref.id, D.worldImportLocalFavoriteGroup);
+                        }
+                        utils.removeFromArray(this.worldImportTable.data, ref);
+                        D.worldIdList.delete(ref.id);
+                        D.importProgress++;
+                    }
+                } catch (err) {
+                    D.errors = `Name: ${ref.name}\nWorldId: ${ref.id}\n${err}\n\n`;
+                } finally {
+                    D.importProgress = 0;
+                    D.importProgressTotal = 0;
+                    D.loading = false;
+                }
+            },
+            addFavoriteWorld(ref, group, message) {
+                return favoriteRequest
+                    .addFavorite({
+                        type: 'world',
+                        favoriteId: ref.id,
+                        tags: group.name
+                    })
+                    .then((args) => {
+                        if (message) {
+                            this.$message({
+                                message: 'World added to favorites',
+                                type: 'success'
+                            });
+                        }
+                        return args;
+                    });
+            }
+        }
+    };
+</script>

src/views/tabs/Favorites.vue

@@ -25,8 +25,8 @@
                     circle></el-button>
             </el-tooltip>
         </div>
-        <el-tabs type="card" v-loading="API.isFavoriteLoading" style="height: 100%">
-            <el-tab-pane :label="$t('view.favorite.friends.header')" lazy>
+        <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
                     :favorite-friends="favoriteFriends"
                     :sort-favorites.sync="isSortByTime"
@@ -37,11 +37,10 @@
                     @save-sort-favorites-option="saveSortFavoritesOption"
                     @change-favorite-group-name="changeFavoriteGroupName" />
             </el-tab-pane>
-            <el-tab-pane :label="$t('view.favorite.worlds.header')" lazy>
+            <el-tab-pane name="world" :label="$t('view.favorite.worlds.header')" lazy>
                 <favorites-world-tab
                     @show-world-import-dialog="showWorldImportDialog"
                     @save-sort-favorites-option="saveSortFavoritesOption"
-                    @show-world-dialog="showWorldDialog"
                     @change-favorite-group-name="changeFavoriteGroupName"
                     @new-instance-self-invite="newInstanceSelfInvite"
                     @show-favorite-dialog="showFavoriteDialog"
@@ -60,7 +59,7 @@
                     :local-world-favorites="localWorldFavorites"
                     :local-world-favorites-list="localWorldFavoritesList" />
             </el-tab-pane>
-            <el-tab-pane :label="$t('view.favorite.avatars.header')" lazy>
+            <el-tab-pane name="avatar" :label="$t('view.favorite.avatars.header')" lazy>
                 <favorites-avatar-tab
                     :sort-favorites.sync="isSortByTime"
                     :hide-tooltips="hideTooltips"
@@ -74,7 +73,6 @@
                     :local-avatar-favorites-list="localAvatarFavoritesList"
                     @show-avatar-import-dialog="showAvatarImportDialog"
                     @save-sort-favorites-option="saveSortFavoritesOption"
-                    @show-avatar-dialog="showAvatarDialog"
                     @show-favorite-dialog="showFavoriteDialog"
                     @change-favorite-group-name="changeFavoriteGroupName"
                     @remove-local-avatar-favorite="removeLocalAvatarFavorite"
@@ -124,7 +122,8 @@
         data() {
             return {
                 editFavoritesMode: false,
-                refreshingLocalFavorites: false
+                refreshingLocalFavorites: false,
+                currentTabName: 'friend'
             };
         },
         computed: {
@@ -184,7 +183,6 @@
                 }
                 this.editFavoritesMode = false;
             },
-
             changeFavoriteGroupName(ctx) {
                 this.$prompt(
                     $t('prompt.change_favorite_group_name.description'),
@@ -267,7 +265,7 @@
                 this.$emit('clear-bulk-favorite-selection');
             },
             bulkCopyFavoriteSelection() {
-                this.$emit('bulk-copy-favorite-selection');
+                this.$emit('bulk-copy-favorite-selection', this.currentTabName);
             },
             getLocalWorldFavorites() {
                 this.$emit('get-local-world-favorites');
@@ -281,9 +279,6 @@
             showWorldImportDialog() {
                 this.$emit('show-world-import-dialog');
             },
-            showWorldDialog(tag, shortName) {
-                this.$emit('show-world-dialog', tag, shortName);
-            },
             newInstanceSelfInvite(worldId) {
                 this.$emit('new-instance-self-invite', worldId);
             },
@@ -299,9 +294,6 @@
             showAvatarImportDialog() {
                 this.$emit('show-avatar-import-dialog');
             },
-            showAvatarDialog(avatarId) {
-                this.$emit('show-avatar-dialog', avatarId);
-            },
             removeLocalAvatarFavorite(avatarId, group) {
                 this.$emit('remove-local-avatar-favorite', avatarId, group);
             },