replace el-tree with vue-json-pretty

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