replace el-tree with vue-json-pretty

package.json

@@ -47,7 +47,7 @@
         "@tanstack/vue-table": "^8.21.3",
         "@tanstack/vue-virtual": "^3.13.18",
         "@types/jest": "^30.0.0",
-        "@types/node": "^25.0.3",
+        "@types/node": "^25.0.5",
         "@vitejs/plugin-vue": "^6.0.3",
         "@vitejs/plugin-vue-jsx": "^5.1.3",
         "@vueuse/core": "^14.1.0",
@@ -60,8 +60,8 @@
         "dayjs": "^1.11.19",
         "echarts": "^6.0.0",
         "electron": "^39.2.7",
-        "electron-builder": "^26.0.12",
-        "element-plus": "^2.13.0",
+        "electron-builder": "^26.4.0",
+        "element-plus": "^2.13.1",
         "esbuild-jest": "^0.5.0",
         "eslint": "^9.39.2",
         "eslint-config-prettier": "^10.1.8",
@@ -79,13 +79,14 @@
         "tailwind-merge": "^3.4.0",
         "tailwindcss": "^4.1.18",
         "tw-animate-css": "^1.4.0",
-        "vite": "^7.3.0",
+        "vite": "^7.3.1",
         "vue": "^3.5.26",
         "vue-i18n": "^11.2.8",
+        "vue-json-pretty": "^2.6.0",
         "vue-marquee-text-component": "^2.0.1",
         "vue-router": "^4.6.4",
         "vue-showdown": "^4.2.0",
-        "worker-timers": "^8.0.27",
+        "worker-timers": "^8.0.28",
         "yargs": "^18.0.0"
     },
     "build": {

src/app.css

@@ -13,6 +13,7 @@
 @import 'noty/lib/noty.css';
 @import 'remixicon/fonts/remixicon.css';
 @import 'vue-sonner/style.css';
+@import 'vue-json-pretty/lib/styles.css';
 
 @import './styles/flags.css';
 @import './styles/animated-emoji.css';

src/components/dialogs/AvatarDialog/AvatarDialog.vue

@@ -523,26 +523,14 @@
                         circle
                         style="margin-left: 5px"
                         @click="downloadAndSaveJson(avatarDialog.id, avatarDialog.ref)"></el-button>
-                    <el-tree :data="treeData" style="margin-top: 5px; font-size: 12px">
-                        <template #default="scope">
-                            <span>
-                                <span style="font-weight: bold; margin-right: 5px" v-text="scope.data.key"></span>
-                                <span v-if="!scope.data.children" v-text="scope.data.value"></span>
-                            </span>
-                        </template>
-                    </el-tree>
+                    <vue-json-pretty :data="treeData" :deep="2" :theme="isDarkMode ? 'dark' : 'light'" show-icon />
                     <br />
-                    <el-tree
+                    <vue-json-pretty
                         v-if="avatarDialog.fileAnalysis.length > 0"
                         :data="avatarDialog.fileAnalysis"
-                        style="margin-top: 5px; font-size: 12px">
-                        <template #default="scope">
-                            <span>
-                                <span style="font-weight: bold; margin-right: 5px" v-text="scope.data.key"></span>
-                                <span v-if="!scope.data.children" v-text="scope.data.value"></span>
-                            </span>
-                        </template>
-                    </el-tree>
+                        :deep="2"
+                        :theme="isDarkMode ? 'dark' : 'light'"
+                        show-icon />
                 </el-tab-pane>
             </el-tabs>
         </div>
@@ -583,8 +571,9 @@
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
+    import VueJsonPretty from 'vue-json-pretty';
+
     import {
-        buildTreeData,
         commaNumber,
         copyToClipboard,
         downloadAndSaveJson,
@@ -597,6 +586,14 @@
         textToHex,
         timeToText
     } from '../../../shared/utils';
+    import {
+        useAppearanceSettingsStore,
+        useAvatarStore,
+        useFavoriteStore,
+        useGalleryStore,
+        useGameStore,
+        useUserStore
+    } from '../../../stores';
     import {
         DropdownMenu,
         DropdownMenuContent,
@@ -604,7 +601,6 @@
         DropdownMenuSeparator,
         DropdownMenuTrigger
     } from '../../ui/dropdown-menu';
-    import { useAvatarStore, useFavoriteStore, useGalleryStore, useGameStore, useUserStore } from '../../../stores';
     import { avatarModerationRequest, avatarRequest, favoriteRequest, miscRequest } from '../../../api';
     import { AppDebug } from '../../../service/appConfig.js';
     import { Badge } from '../../ui/badge';
@@ -627,6 +623,7 @@
     const { isGameRunning } = storeToRefs(useGameStore());
     const { deleteVRChatCache } = useGameStore();
     const { showFullscreenImageDialog } = useGalleryStore();
+    const { isDarkMode } = storeToRefs(useAppearanceSettingsStore());
 
     const { t } = useI18n();
 
@@ -1018,10 +1015,10 @@
     }
 
     function refreshAvatarDialogTreeData() {
-        treeData.value = buildTreeData({
+        treeData.value = {
             ...avatarDialog.value.ref,
             _hexDisplayName: textToHex(avatarDialog.value.ref?.displayName)
-        });
+        };
     }
 
     function showSetAvatarTagsDialog(avatarId) {

src/components/dialogs/GroupDialog/GroupDialog.vue

@@ -1120,14 +1120,11 @@
                         circle
                         style="margin-left: 5px"
                         @click="downloadAndSaveJson(groupDialog.id, groupDialog.ref)" />
-                    <el-tree :data="groupDialog.treeData" style="margin-top: 5px; font-size: 12px">
-                        <template #default="scope">
-                            <span>
-                                <span style="font-weight: bold; margin-right: 5px" v-text="scope.data.key" />
-                                <span v-if="!scope.data.children" v-text="scope.data.value" />
-                            </span>
-                        </template>
-                    </el-tree>
+                    <vue-json-pretty
+                        :data="groupDialog.treeData"
+                        :deep="2"
+                        :theme="isDarkMode ? 'dark' : 'light'"
+                        show-icon />
                 </el-tab-pane>
             </el-tabs>
         </div>
@@ -1171,8 +1168,9 @@
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
+    import VueJsonPretty from 'vue-json-pretty';
+
     import {
-        buildTreeData,
         copyToClipboard,
         debounce,
         downloadAndSaveJson,
@@ -1195,7 +1193,13 @@
         DropdownMenuSeparator,
         DropdownMenuTrigger
     } from '../../ui/dropdown-menu';
-    import { useGalleryStore, useGroupStore, useLocationStore, useUserStore } from '../../../stores';
+    import {
+        useAppearanceSettingsStore,
+        useGalleryStore,
+        useGroupStore,
+        useLocationStore,
+        useUserStore
+    } from '../../../stores';
     import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants';
     import { Badge } from '../../ui/badge';
     import { getNextDialogIndex } from '../../../shared/utils/base/ui';
@@ -1227,6 +1231,8 @@
     const { lastLocation } = storeToRefs(useLocationStore());
     const { showFullscreenImageDialog } = useGalleryStore();
 
+    const { isDarkMode } = storeToRefs(useAppearanceSettingsStore());
+
     const groupDialogLastActiveTab = ref('Info');
     const groupDialogIndex = ref(2000);
     const isGroupMembersDone = ref(false);
@@ -1757,14 +1763,14 @@
 
     function refreshGroupDialogTreeData() {
         const D = groupDialog.value;
-        const treeData = buildTreeData({
+        const treeData = {
             _hexDisplayName: textToHex(D.ref.displayName),
             group: D.ref,
             posts: D.posts,
             instances: D.instances,
             members: D.members,
             galleries: D.galleries
-        });
+        };
         updateGroupDialogData({
             ...groupDialog.value,
             treeData

src/components/dialogs/UserDialog/UserDialog.vue

@@ -1274,14 +1274,11 @@
                         style="margin-left: 5px"
                         @click="downloadAndSaveJson(userDialog.id, userDialog.ref)">
                     </el-button>
-                    <el-tree :data="userDialog.treeData" style="margin-top: 5px; font-size: 12px">
-                        <template #default="scope">
-                            <span>
-                                <span style="font-weight: bold; margin-right: 5px" v-text="scope.data.key"></span>
-                                <span v-if="!scope.data.children" v-text="scope.data.value"></span>
-                            </span>
-                        </template>
-                    </el-tree>
+                    <vue-json-pretty
+                        :data="userDialog.treeData"
+                        :deep="2"
+                        :theme="isDarkMode ? 'dark' : 'light'"
+                        show-icon />
                 </el-tab-pane>
             </el-tabs>
         </div>
@@ -1330,6 +1327,8 @@
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
+    import VueJsonPretty from 'vue-json-pretty';
+
     import {
         compareByDisplayName,
         compareByFriendOrder,
@@ -1404,7 +1403,7 @@
 
     const { t } = useI18n();
 
-    const { hideUserNotes, hideUserMemos } = storeToRefs(useAppearanceSettingsStore());
+    const { hideUserNotes, hideUserMemos, isDarkMode } = storeToRefs(useAppearanceSettingsStore());
     const { bioLanguage, avatarRemoteDatabase, translationApi, translationApiType } =
         storeToRefs(useAdvancedSettingsStore());
     const { translateText } = useAdvancedSettingsStore();

src/components/dialogs/WorldDialog/WorldDialog.vue

@@ -698,26 +698,14 @@
                         circle
                         style="margin-left: 5px"
                         @click="downloadAndSaveJson(worldDialog.id, worldDialog.ref)"></el-button>
-                    <el-tree :data="treeData" style="margin-top: 5px; font-size: 12px">
-                        <template #default="{ data }">
-                            <span>
-                                <span style="font-weight: bold; margin-right: 5px" v-text="data.key"></span>
-                                <span v-if="!data.children" v-text="data.value"></span>
-                            </span>
-                        </template>
-                    </el-tree>
+                    <vue-json-pretty :data="treeData" :deep="2" :theme="isDarkMode ? 'dark' : 'light'" show-icon />
                     <br />
-                    <el-tree
+                    <vue-json-pretty
                         v-if="worldDialog.fileAnalysis.length > 0"
                         :data="worldDialog.fileAnalysis"
-                        style="margin-top: 5px; font-size: 12px">
-                        <template #default="scope">
-                            <span>
-                                <span style="font-weight: bold; margin-right: 5px" v-text="scope.data.key"></span>
-                                <span v-if="!scope.data.children" v-text="scope.data.value"></span>
-                            </span>
-                        </template>
-                    </el-tree>
+                        :deep="2"
+                        :theme="isDarkMode ? 'dark' : 'light'"
+                        show-icon />
                 </el-tab-pane>
             </el-tabs>
         </div>
@@ -772,10 +760,10 @@
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
+    import VueJsonPretty from 'vue-json-pretty';
+
     import {
-        buildTreeData,
         commaNumber,
-        copyToClipboard,
         deleteVRChatCache,
         downloadAndSaveJson,
         formatDateFilter,
@@ -819,7 +807,7 @@
     const SetWorldTagsDialog = defineAsyncComponent(() => import('./SetWorldTagsDialog.vue'));
     const WorldAllowedDomainsDialog = defineAsyncComponent(() => import('./WorldAllowedDomainsDialog.vue'));
 
-    const { isAgeGatedInstancesVisible } = storeToRefs(useAppearanceSettingsStore());
+    const { isAgeGatedInstancesVisible, isDarkMode } = storeToRefs(useAppearanceSettingsStore());
     const { showUserDialog } = useUserStore();
     const { currentUser, userDialog } = storeToRefs(useUserStore());
     const { worldDialog } = storeToRefs(useWorldStore());
@@ -1303,10 +1291,10 @@
         nextTick(() => (D.openFlg = false));
     }
     function refreshWorldDialogTreeData() {
-        treeData.value = buildTreeData({
+        treeData.value = {
             ...worldDialog.value.ref,
             _hexDisplayName: textToHex(worldDialog.value.ref?.displayName)
-        });
+        };
     }
     function copyWorldId() {
         navigator.clipboard

src/shared/utils/common.js

@@ -493,13 +493,13 @@ async function getBundleDateSize(ref) {
             // update avatar dialog
             avatarDialog.value.bundleSizes[platform] = bundleSizes[platform];
             avatarDialog.value.lastUpdated = createdAt;
-            avatarDialog.value.fileAnalysis = buildTreeData(bundleJson);
+            avatarDialog.value.fileAnalysis = bundleJson;
         }
         // update world dialog
         if (worldDialog.value.id === ref.id) {
             worldDialog.value.bundleSizes[platform] = bundleSizes[platform];
             worldDialog.value.lastUpdated = createdAt;
-            worldDialog.value.fileAnalysis = buildTreeData(bundleJson);
+            worldDialog.value.fileAnalysis = bundleJson;
         }
         // update player list
         if (currentInstanceLocation.value.worldId === ref.id) {

src/stores/user.js

@@ -6,7 +6,6 @@ import Noty from 'noty';
 
 import {
     arraysMatch,
-    buildTreeData,
     compareByDisplayName,
     compareByLocationAt,
     compareByName,
@@ -1230,13 +1229,13 @@ export const useUserStore = defineStore('User', () => {
                 ...D.ref,
                 _hexDisplayName: textToHex(D.ref?.displayName)
             };
-            D.treeData = buildTreeData(treeData);
+            D.treeData = treeData;
             return;
         }
-        D.treeData = buildTreeData({
+        D.treeData = {
             ...D.ref,
             _hexDisplayName: textToHex(D.ref?.displayName)
-        });
+        };
     }
 
     async function lookupUser(ref) {

src/views/Settings/components/Tabs/AdvancedTab.vue

@@ -368,17 +368,18 @@
                         :icon="Delete"
                         circle
                         style="margin-left: 5px"
-                        @click="configTreeData = []"></el-button>
+                        @click="configTreeData = {}"></el-button>
                 </TooltipWrapper>
             </div>
-            <el-tree v-if="configTreeData.length > 0" :data="configTreeData" style="margin-top: 10px; font-size: 12px">
-                <template #default="scope">
-                    <span>
-                        <span style="font-weight: bold; margin-right: 5px" v-text="scope.data.key"></span>
-                        <span v-if="!scope.data.children" v-text="scope.data.value"></span>
-                    </span>
-                </template>
-            </el-tree>
+            <vue-json-pretty
+                v-if="Object.keys(configTreeData).length > 0"
+                :data="configTreeData"
+                :deep="2"
+                :theme="isDarkMode ? 'dark' : 'light'"
+                :height="800"
+                :dynamic-height="false"
+                virtual
+                show-icon />
         </div>
 
         <RegistryBackupDialog />
@@ -410,8 +411,11 @@
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
+    import VueJsonPretty from 'vue-json-pretty';
+
     import {
         useAdvancedSettingsStore,
+        useAppearanceSettingsStore,
         useAuthStore,
         useAvatarProviderStore,
         useAvatarStore,
@@ -429,7 +433,6 @@
         useWorldStore
     } from '../../../../stores';
     import { authRequest, miscRequest } from '../../../../api';
-    import { buildTreeData } from '../../../../shared/utils/common';
     import { openExternalLink } from '../../../../shared/utils';
 
     import AvatarProviderDialog from '../../dialogs/AvatarProviderDialog.vue';
@@ -461,6 +464,8 @@
     const { branch } = storeToRefs(useVRCXUpdaterStore());
     const { openVR } = storeToRefs(notificationsSettingsStore);
 
+    const { isDarkMode } = storeToRefs(useAppearanceSettingsStore());
+
     const {
         enablePrimaryPassword,
         relaunchVRChatAfterCrash,
@@ -502,7 +507,7 @@
 
     const isYouTubeApiDialogVisible = ref(false);
     const isTranslationApiDialogVisible = ref(false);
-    const configTreeData = ref([]);
+    const configTreeData = ref({});
     const visits = ref(0);
 
     const cacheSize = reactive({
@@ -587,7 +592,7 @@
 
     async function refreshConfigTreeData() {
         await authRequest.getConfig();
-        configTreeData.value = buildTreeData(cachedConfig.value);
+        configTreeData.value = cachedConfig.value;
     }
 
     function getVisits() {