Consistent dialog tabs

src/components/dialogs/AvatarDialog/AvatarDialog.vue

@@ -373,8 +373,8 @@
                     </div>
                 </div>
             </div>
-            <el-tabs>
+            <el-tabs ref="avatarDialogTabsRef" @tab-click="avatarDialogTabClick">
-                <el-tab-pane :label="t('dialog.avatar.info.header')">
+                <el-tab-pane name="Info" :label="t('dialog.avatar.info.header')">
                     <div class="x-friend-list" style="max-height: unset">
                         <div
                             v-if="avatarDialog.galleryImages.length || avatarDialog.ref.authorId === currentUser.id"
@@ -556,7 +556,7 @@
                         </div>
                     </div>
                 </el-tab-pane>
-                <el-tab-pane :label="t('dialog.avatar.json.header')">
+                <el-tab-pane name="JSON" :label="t('dialog.avatar.json.header')" style="max-height: 50vh" lazy>
                     <el-button
                         type="default"
                         size="mini"
@@ -658,6 +658,8 @@
     defineEmits(['openPreviousImagesDialog']);
 
     const avatarDialogRef = ref(null);
+    const avatarDialogTabsRef = ref(null);
+    const avatarDialogLastActiveTab = ref('Info');
     const changeAvatarImageDialogVisible = ref(false);
     const previousImagesFileId = ref('');
 
@@ -720,19 +722,44 @@
 
     watch(
         () => avatarDialog.value.loading,
-        (newVal) => {
+        () => {
-            if (newVal) {
+            if (avatarDialog.value.visible) {
                 nextTick(() => {
-                    const D = avatarDialog.value;
+                    if (avatarDialogRef.value?.$el) {
-                    if (D.visible) {
                         adjustDialogZ(avatarDialogRef.value.$el);
                     }
                 });
                 handleDialogOpen();
+                !avatarDialog.value.loading && toggleLastActiveTab();
             }
         }
     );
 
+    function handleAvatarDialogTab(name) {
+        if (name === 'JSON') {
+            refreshAvatarDialogTreeData();
+        }
+    }
+
+    function toggleLastActiveTab() {
+        let tabName = avatarDialogTabsRef.value.currentName;
+        console.log(tabName);
+        if (tabName === '0') {
+            tabName = avatarDialogLastActiveTab.value;
+            avatarDialogTabsRef.value.setCurrentName(tabName);
+        }
+        handleAvatarDialogTab(tabName);
+        avatarDialogLastActiveTab.value = tabName;
+    }
+
+    function avatarDialogTabClick(obj) {
+        if (avatarDialogLastActiveTab.value === obj.name) {
+            return;
+        }
+        handleAvatarDialogTab(obj.name);
+        avatarDialogLastActiveTab.value = obj.name;
+    }
+
     function getImageUrlFromImageId(imageId) {
         return `https://api.vrchat.cloud/api/1/file/${imageId}/1/`;
     }

src/components/dialogs/UserDialog/UserDialog.vue

@@ -553,7 +553,7 @@
             </div>
 
             <el-tabs ref="userDialogTabsRef" @tab-click="userDialogTabClick">
-                <el-tab-pane :label="t('dialog.user.info.header')">
+                <el-tab-pane name="Info" :label="t('dialog.user.info.header')">
                     <template v-if="isFriendOnline(userDialog.friend) || currentUser.id === userDialog.id">
                         <div
                             v-if="userDialog.ref.location"
@@ -1085,7 +1085,7 @@
                     </div>
                 </el-tab-pane>
 
-                <el-tab-pane :label="t('dialog.user.groups.header')" lazy>
+                <el-tab-pane name="Groups" :label="t('dialog.user.groups.header')" lazy>
                     <div style="display: flex; align-items: center; justify-content: space-between">
                         <div style="display: flex; align-items: center">
                             <el-button
@@ -1488,7 +1488,7 @@
                     </div>
                 </el-tab-pane>
 
-                <el-tab-pane :label="t('dialog.user.worlds.header')" lazy>
+                <el-tab-pane name="Worlds" :label="t('dialog.user.worlds.header')" lazy>
                     <div style="display: flex; align-items: center; justify-content: space-between">
                         <div style="display: flex; align-items: center">
                             <el-button
@@ -1570,7 +1570,7 @@
                     </div>
                 </el-tab-pane>
 
-                <el-tab-pane :label="t('dialog.user.favorite_worlds.header')" lazy>
+                <el-tab-pane name="Favorite Worlds" :label="t('dialog.user.favorite_worlds.header')" lazy>
                     <el-button
                         v-if="userFavoriteWorlds && userFavoriteWorlds.length > 0"
                         type="default"
@@ -1628,7 +1628,7 @@
                     </el-tabs>
                 </el-tab-pane>
 
-                <el-tab-pane :label="t('dialog.user.avatars.header')" lazy>
+                <el-tab-pane name="Avatars" :label="t('dialog.user.avatars.header')" lazy>
                     <div style="display: flex; align-items: center; justify-content: space-between">
                         <div style="display: flex; align-items: center">
                             <el-button
@@ -1736,7 +1736,7 @@
                     </div>
                 </el-tab-pane>
 
-                <el-tab-pane :label="t('dialog.user.json.header')" lazy style="height: 50vh">
+                <el-tab-pane name="JSON" :label="t('dialog.user.json.header')" lazy style="height: 50vh">
                     <el-button
                         type="default"
                         size="mini"
@@ -1900,7 +1900,11 @@
         () => userDialog.value.loading,
         () => {
             if (userDialog.value.visible) {
-                nextTick(() => adjustDialogZ(userDialogRef.value.$el));
+                nextTick(() => {
+                    if (userDialogTabsRef.value?.$el) {
+                        adjustDialogZ(userDialogTabsRef.value.$el);
+                    }
+                });
                 !userDialog.value.loading && toggleLastActiveTab(userDialog.value.id);
             }
         }
@@ -1914,7 +1918,7 @@
     const userDialogGroupAllSelected = ref(false);
     const userDialogGroupEditSelectedGroupIds = ref([]); // selected groups in edit mode
 
-    const userDialogLastActiveTab = ref('');
+    const userDialogLastActiveTab = ref('Info');
     const userDialogLastGroup = ref('');
     const userDialogLastAvatar = ref('');
     const userDialogLastWorld = ref('');
@@ -1996,42 +2000,57 @@
         userDialog.value.note = note.replace(/[\r\n]/g, '');
     }
 
-    function toggleLastActiveTab(userId) {
+    function handleUserDialogTab(name, userId) {
-        if (userDialogTabsRef.value.currentName === '0') {
+        if (name === 'Groups') {
-            userDialogLastActiveTab.value = t('dialog.user.info.header');
-        } else if (userDialogTabsRef.value.currentName === '1') {
-            userDialogLastActiveTab.value = t('dialog.user.groups.header');
             if (userDialogLastGroup.value !== userId) {
                 userDialogLastGroup.value = userId;
                 getUserGroups(userId);
             }
-        } else if (userDialogTabsRef.value.currentName === '2') {
+        } else if (name === 'Avatars') {
-            userDialogLastActiveTab.value = t('dialog.user.worlds.header');
+            setUserDialogAvatars(userId);
+            if (userDialogLastAvatar.value !== userId) {
+                userDialogLastAvatar.value = userId;
+                if (userId === currentUser.value.id) {
+                    refreshUserDialogAvatars();
+                } else {
+                    setUserDialogAvatarsRemote(userId);
+                }
+            }
+        } else if (name === 'Worlds') {
             setUserDialogWorlds(userId);
             if (userDialogLastWorld.value !== userId) {
                 userDialogLastWorld.value = userId;
                 refreshUserDialogWorlds();
             }
-        } else if (userDialogTabsRef.value.currentName === '3') {
+        } else if (name === 'Favorite Worlds') {
-            userDialogLastActiveTab.value = t('dialog.user.favorite_worlds.header');
             if (userDialogLastFavoriteWorld.value !== userId) {
                 userDialogLastFavoriteWorld.value = userId;
                 getUserFavoriteWorlds(userId);
             }
-        } else if (userDialogTabsRef.value.currentName === '4') {
+        } else if (name === 'JSON') {
-            userDialogLastActiveTab.value = t('dialog.user.avatars.header');
-            setUserDialogAvatars(userId);
-            userDialogLastAvatar.value = userId;
-            if (userId === currentUser.value.id) {
-                refreshUserDialogAvatars();
-            }
-            setUserDialogAvatarsRemote(userId);
-        } else if (userDialogTabsRef.value.currentName === '5') {
-            userDialogLastActiveTab.value = t('dialog.user.json.header');
             refreshUserDialogTreeData();
         }
     }
 
+    function toggleLastActiveTab(userId) {
+        let tabName = userDialogTabsRef.value.currentName;
+        if (tabName === '0') {
+            tabName = userDialogLastActiveTab.value;
+            userDialogTabsRef.value.setCurrentName(tabName);
+        }
+        handleUserDialogTab(tabName, userId);
+        userDialogLastActiveTab.value = tabName;
+    }
+
+    function userDialogTabClick(obj) {
+        const userId = userDialog.value.id;
+        if (userDialogLastActiveTab.value === obj.name) {
+            return;
+        }
+        handleUserDialogTab(obj.name, userId);
+        userDialogLastActiveTab.value = obj.label;
+    }
+
     function showPronounsDialog() {
         const D = pronounsDialog.value;
         D.pronouns = currentUser.value.pronouns;
@@ -2743,43 +2762,6 @@
         userDialog.value.isFavoriteWorldsLoading = false;
     }
 
-    function userDialogTabClick(obj) {
-        const userId = userDialog.value.id;
-        if (userDialogLastActiveTab.value === obj.label) {
-            return;
-        }
-        if (obj.label === t('dialog.user.groups.header')) {
-            if (userDialogLastGroup.value !== userId) {
-                userDialogLastGroup.value = userId;
-                getUserGroups(userId);
-            }
-        } else if (obj.label === t('dialog.user.avatars.header')) {
-            setUserDialogAvatars(userId);
-            if (userDialogLastAvatar.value !== userId) {
-                userDialogLastAvatar.value = userId;
-                if (userId === currentUser.value.id) {
-                    refreshUserDialogAvatars();
-                } else {
-                    setUserDialogAvatarsRemote(userId);
-                }
-            }
-        } else if (obj.label === t('dialog.user.worlds.header')) {
-            setUserDialogWorlds(userId);
-            if (userDialogLastWorld.value !== userId) {
-                userDialogLastWorld.value = userId;
-                refreshUserDialogWorlds();
-            }
-        } else if (obj.label === t('dialog.user.favorite_worlds.header')) {
-            if (userDialogLastFavoriteWorld.value !== userId) {
-                userDialogLastFavoriteWorld.value = userId;
-                getUserFavoriteWorlds(userId);
-            }
-        } else if (obj.label === t('dialog.user.json.header')) {
-            refreshUserDialogTreeData();
-        }
-        userDialogLastActiveTab.value = obj.label;
-    }
-
     function checkNote(ref, note) {
         if (ref.note !== note) {
             addNote(ref.id, note);

src/components/dialogs/WorldDialog/WorldDialog.vue

@@ -325,7 +325,7 @@
                 </div>
             </div>
             <el-tabs ref="worldDialogTabsRef" @tab-click="worldDialogTabClick">
-                <el-tab-pane :label="t('dialog.world.instances.header')">
+                <el-tab-pane name="Instances" :label="t('dialog.world.instances.header')">
                     <div class="">
                         <i class="el-icon-user" />
                         {{ t('dialog.world.instances.public_count', { count: worldDialog.ref.publicOccupants }) }}
@@ -436,7 +436,7 @@
                         </template>
                     </div>
                 </el-tab-pane>
-                <el-tab-pane :label="t('dialog.world.info.header')" lazy>
+                <el-tab-pane name="Info" :label="t('dialog.world.info.header')" lazy>
                     <div class="x-friend-list" style="max-height: none">
                         <div class="x-friend-item" style="width: 100%; cursor: default">
                             <div class="detail">
@@ -719,13 +719,13 @@
                         </div>
                     </div>
                 </el-tab-pane>
-                <el-tab-pane :label="t('dialog.world.json.header')" style="max-height: 50vh" lazy>
+                <el-tab-pane name="JSON" :label="t('dialog.world.json.header')" style="max-height: 50vh" lazy>
                     <el-button
                         type="default"
                         size="mini"
                         icon="el-icon-refresh"
                         circle
-                        @click="refreshWorldDialogTreeData()"></el-button>
+                        @click="refreshWorldDialogTreeData"></el-button>
                     <el-button
                         type="default"
                         size="mini"
@@ -928,7 +928,7 @@
 
     const worldDialogRef = ref(null);
     const worldDialogTabsRef = ref(null);
-    const worldDialogLastActiveTab = ref('');
+    const worldDialogLastActiveTab = ref('Instances');
 
     watch(
         () => worldDialog.value.loading,
@@ -944,25 +944,28 @@
         }
     );
 
-    function toggleLastActiveTab() {
+    function handleWorldDialogTab(tabName) {
-        if (worldDialogTabsRef.value.currentName === '0') {
+        if (tabName === 'JSON') {
-            worldDialogLastActiveTab.value = t('dialog.world.instances.header');
-        } else if (worldDialogTabsRef.value.currentName === '1') {
-            worldDialogLastActiveTab.value = t('dialog.world.info.header');
-        } else if (worldDialogTabsRef.value.currentName === '2') {
-            worldDialogLastActiveTab.value = t('dialog.world.json.header');
             refreshWorldDialogTreeData();
         }
     }
 
+    function toggleLastActiveTab() {
+        let tabName = worldDialogTabsRef.value.currentName;
+        if (tabName === '0') {
+            tabName = worldDialogLastActiveTab.value;
+            worldDialogTabsRef.value.setCurrentName(tabName);
+        }
+        handleWorldDialogTab(tabName);
+        worldDialogLastActiveTab.value = tabName;
+    }
+
     function worldDialogTabClick(obj) {
-        if (worldDialogLastActiveTab.value === obj.label) {
+        if (worldDialogLastActiveTab.value === obj.name) {
             return;
         }
-        if (obj.label === t('dialog.world.json.header')) {
+        handleWorldDialogTab(obj.name);
-            refreshWorldDialogTreeData();
+        worldDialogLastActiveTab.value = obj.name;
-        }
-        worldDialogLastActiveTab.value = obj.label;
     }
 
     function displayPreviousImages(command) {

src/localization/en/en.json

@@ -130,7 +130,7 @@
             "copy": "Copy",
             "clear": "Clear",
             "bulk_unfavorite": "Bulk Unfavorite",
-            "refresh_tooltip": "Refresh all favorites",
+            "refresh_favorites_tooltip": "Refresh VRChat favorites",
             "export": "Export",
             "import": "Import",
             "move_tooltip": "Move",

src/views/Favorites/Favorites.vue

@@ -14,7 +14,10 @@
                 <span class="name">{{ t('view.favorite.edit_mode') }}</span>
                 <el-switch v-model="editFavoritesMode" style="margin-left: 5px"></el-switch>
             </div>
-            <el-tooltip placement="bottom" :content="t('view.favorite.refresh_tooltip')" :disabled="hideTooltips">
+            <el-tooltip
+                placement="bottom"
+                :content="t('view.favorite.refresh_favorites_tooltip')"
+                :disabled="hideTooltips">
                 <el-button
                     type="default"
                     :loading="isFavoriteLoading"