split json tab

src/components/dialogs/AvatarDialog/AvatarDialog.vue

@@ -507,33 +507,13 @@
                     </div>
                 </template>
                 <template #JSON>
-                    <Button
+                    <DialogJsonTab
-                        class="rounded-full mr-2"
+                        :tree-data="treeData"
-                        size="icon-sm"
+                        :tree-data-key="treeData?.id"
-                        variant="ghost"
+                        :dialog-id="avatarDialog.id"
-                        @click="refreshAvatarDialogTreeData()">
+                        :dialog-ref="avatarDialog.ref"
-                        <RefreshCw />
+                        :file-analysis="avatarDialog.fileAnalysis"
-                    </Button>
+                        @refresh="refreshAvatarDialogTreeData()" />
-                    <Button
-                        class="rounded-full"
-                        size="icon-sm"
-                        variant="ghost"
-                        @click="downloadAndSaveJson(avatarDialog.id, avatarDialog.ref)">
-                        <Download />
-                    </Button>
-                    <vue-json-pretty
-                        :key="treeData?.id"
-                        :data="treeData"
-                        :deep="2"
-                        :theme="isDarkMode ? 'dark' : 'light'"
-                        show-icon />
-                    <br />
-                    <vue-json-pretty
-                        v-if="Object.keys(avatarDialog.fileAnalysis).length"
-                        :data="avatarDialog.fileAnalysis"
-                        :deep="2"
-                        :theme="isDarkMode ? 'dark' : 'light'"
-                        show-icon />
                 </template>
             </TabsUnderline>
             <template v-if="avatarDialog.visible">
@@ -630,6 +610,7 @@
     import { database } from '../../../service/database';
     import { formatJsonVars } from '../../../shared/utils/base/ui';
 
+    import DialogJsonTab from '../DialogJsonTab.vue';
     import ImageCropDialog from '../ImageCropDialog.vue';
 
     const SetAvatarStylesDialog = defineAsyncComponent(() => import('./SetAvatarStylesDialog.vue'));

src/components/dialogs/DialogJsonTab.vue

@@ -0,0 +1,50 @@
+<script setup>
+    import { Download, RefreshCw } from 'lucide-vue-next';
+    import { Button } from '@/components/ui/button';
+    import { storeToRefs } from 'pinia';
+
+    import VueJsonPretty from 'vue-json-pretty';
+
+    import { downloadAndSaveJson } from '../../shared/utils';
+    import { useAppearanceSettingsStore } from '../../stores';
+
+    defineProps({
+        treeData: {
+            type: Object,
+            default: () => ({})
+        },
+        treeDataKey: {
+            type: [String, Number, null],
+            default: null
+        },
+        dialogId: {
+            type: String,
+            required: true
+        },
+        dialogRef: {
+            type: Object,
+            required: true
+        },
+        fileAnalysis: {
+            type: Object,
+            default: null
+        }
+    });
+
+    const emit = defineEmits(['refresh']);
+    const { isDarkMode } = storeToRefs(useAppearanceSettingsStore());
+</script>
+
+<template>
+    <Button class="rounded-full mr-2" size="icon-sm" variant="ghost" @click="emit('refresh')">
+        <RefreshCw />
+    </Button>
+    <Button class="rounded-full" size="icon-sm" variant="ghost" @click="downloadAndSaveJson(dialogId, dialogRef)">
+        <Download />
+    </Button>
+    <vue-json-pretty :key="treeDataKey" :data="treeData" :deep="2" :theme="isDarkMode ? 'dark' : 'light'" show-icon />
+    <template v-if="fileAnalysis && Object.keys(fileAnalysis).length">
+        <br />
+        <vue-json-pretty :data="fileAnalysis" :deep="2" :theme="isDarkMode ? 'dark' : 'light'" show-icon />
+    </template>
+</template>

src/components/dialogs/GroupDialog/GroupDialog.vue

@@ -1143,26 +1143,12 @@
                     </TabsUnderline>
                 </template>
                 <template #JSON>
-                    <Button
+                    <DialogJsonTab
-                        class="rounded-full mr-2"
+                        :tree-data="treeData"
-                        size="icon-sm"
+                        :tree-data-key="treeData?.group?.id"
-                        variant="ghost"
+                        :dialog-id="groupDialog.id"
-                        @click="refreshGroupDialogTreeData()">
+                        :dialog-ref="groupDialog.ref"
-                        <RefreshCw />
+                        @refresh="refreshGroupDialogTreeData()" />
-                    </Button>
-                    <Button
-                        class="rounded-full"
-                        size="icon-sm"
-                        variant="ghost"
-                        @click="downloadAndSaveJson(groupDialog.id, groupDialog.ref)">
-                        <Download />
-                    </Button>
-                    <vue-json-pretty
-                        :key="treeData?.group?.id"
-                        :data="treeData"
-                        :deep="2"
-                        :theme="isDarkMode ? 'dark' : 'light'"
-                        show-icon />
                 </template>
             </TabsUnderline>
         </div>
@@ -1245,6 +1231,7 @@
     import { formatJsonVars } from '../../../shared/utils/base/ui';
     import { groupRequest } from '../../../api';
 
+    import DialogJsonTab from '../DialogJsonTab.vue';
     import GroupCalendarEventCard from '../../../views/Tools/components/GroupCalendarEventCard.vue';
     import GroupPostEditDialog from './GroupPostEditDialog.vue';
     import InstanceActionBar from '../../InstanceActionBar.vue';

src/components/dialogs/UserDialog/UserDialog.vue

@@ -1307,22 +1307,12 @@
             </template>
 
             <template #JSON>
-                <Button class="rounded-full mr-2" size="icon-sm" variant="ghost" @click="refreshUserDialogTreeData()">
+                <DialogJsonTab
-                    <RefreshCw />
+                    :tree-data="treeData"
-                </Button>
+                    :tree-data-key="treeData?.id"
-                <Button
+                    :dialog-id="userDialog.id"
-                    class="rounded-full"
+                    :dialog-ref="userDialog.ref"
-                    size="icon-sm"
+                    @refresh="refreshUserDialogTreeData()" />
-                    variant="ghost"
-                    @click="downloadAndSaveJson(userDialog.id, userDialog.ref)">
-                    <Download />
-                </Button>
-                <vue-json-pretty
-                    :key="treeData?.id"
-                    :data="treeData"
-                    :deep="2"
-                    :theme="isDarkMode ? 'dark' : 'light'"
-                    show-icon />
             </template>
         </TabsUnderline>
         <SendInviteDialog
@@ -1441,6 +1431,7 @@
     import { formatJsonVars } from '../../../shared/utils/base/ui';
     import { processBulk } from '../../../service/request';
 
+    import DialogJsonTab from '../DialogJsonTab.vue';
     import InstanceActionBar from '../../InstanceActionBar.vue';
     import SendInviteDialog from '../InviteDialog/SendInviteDialog.vue';
     import UserSummaryHeader from './UserSummaryHeader.vue';

src/components/dialogs/WorldDialog/WorldDialog.vue

@@ -694,33 +694,13 @@
                     </div>
                 </template>
                 <template #JSON>
-                    <Button
+                    <DialogJsonTab
-                        class="rounded-full mr-2"
+                        :tree-data="treeData"
-                        size="icon-sm"
+                        :tree-data-key="treeData?.id"
-                        variant="ghost"
+                        :dialog-id="worldDialog.id"
-                        @click="refreshWorldDialogTreeData()">
+                        :dialog-ref="worldDialog.ref"
-                        <RefreshCw />
+                        :file-analysis="worldDialog.fileAnalysis"
-                    </Button>
+                        @refresh="refreshWorldDialogTreeData()" />
-                    <Button
-                        class="rounded-full"
-                        size="icon-sm"
-                        variant="ghost"
-                        @click="downloadAndSaveJson(worldDialog.id, worldDialog.ref)">
-                        <Download />
-                    </Button>
-                    <vue-json-pretty
-                        :key="treeData?.id"
-                        :data="treeData"
-                        :deep="2"
-                        :theme="isDarkMode ? 'dark' : 'light'"
-                        show-icon />
-                    <br />
-                    <vue-json-pretty
-                        v-if="Object.keys(worldDialog.fileAnalysis).length"
-                        :data="worldDialog.fileAnalysis"
-                        :deep="2"
-                        :theme="isDarkMode ? 'dark' : 'light'"
-                        show-icon />
                 </template>
             </TabsUnderline>
         </div>
@@ -837,6 +817,7 @@
     import { database } from '../../../service/database';
     import { formatJsonVars } from '../../../shared/utils/base/ui';
 
+    import DialogJsonTab from '../DialogJsonTab.vue';
     import ImageCropDialog from '../ImageCropDialog.vue';
     import InstanceActionBar from '../../InstanceActionBar.vue';