displayName hex in JSON tab

src/components/dialogs/AvatarDialog/AvatarDialog.vue

@@ -594,6 +594,7 @@
         openExternalLink,
         openFolderGeneric,
         replaceVrcPackageUrl,
+        textToHex,
         timeToText
     } from '../../../shared/utils';
     import {
@@ -1017,7 +1018,10 @@
     }
 
     function refreshAvatarDialogTreeData() {
-        treeData.value = buildTreeData(avatarDialog.value.ref);
+        treeData.value = buildTreeData({
+            ...avatarDialog.value.ref,
+            _hexDisplayName: textToHex(avatarDialog.value.ref?.displayName)
+        });
     }
 
     function showSetAvatarTagsDialog(avatarId) {

src/components/dialogs/GroupDialog/GroupDialog.vue

@@ -1184,6 +1184,7 @@
         openExternalLink,
         refreshInstancePlayerCount,
         removeFromArray,
+        textToHex,
         userImage,
         userStatusClass
     } from '../../../shared/utils';
@@ -1757,6 +1758,7 @@
     function refreshGroupDialogTreeData() {
         const D = groupDialog.value;
         const treeData = buildTreeData({
+            _hexDisplayName: textToHex(D.ref.displayName),
             group: D.ref,
             posts: D.posts,
             instances: D.instances,

src/components/dialogs/WorldDialog/WorldDialog.vue

@@ -1303,7 +1303,10 @@
         nextTick(() => (D.openFlg = false));
     }
     function refreshWorldDialogTreeData() {
-        treeData.value = buildTreeData(worldDialog.value.ref);
+        treeData.value = buildTreeData({
+            ...worldDialog.value.ref,
+            _hexDisplayName: textToHex(worldDialog.value.ref?.displayName)
+        });
     }
     function copyWorldId() {
         navigator.clipboard

src/shared/utils/base/string.js

@@ -34,7 +34,7 @@ function textToHex(text) {
     const s = String(text);
     return s
         .split('')
-        .map((c) => c.charCodeAt(0).toString(16))
+        .map((c) => c.charCodeAt(0).toString(16).toUpperCase())
         .join(' ');
 }
 

src/shared/utils/common.js

@@ -321,6 +321,13 @@ function buildTreeData(json) {
     node.sort(function (a, b) {
         const A = String(a.key).toUpperCase();
         const B = String(b.key).toUpperCase();
+        // sort _ to top
+        if (A.startsWith('_') && !B.startsWith('_')) {
+            return -1;
+        }
+        if (B.startsWith('_') && !A.startsWith('_')) {
+            return 1;
+        }
         if (A < B) {
             return -1;
         }

src/stores/user.js

@@ -19,7 +19,8 @@ import {
     isRealInstance,
     parseLocation,
     removeEmojis,
-    replaceBioSymbols
+    replaceBioSymbols,
+    textToHex
 } from '../shared/utils';
 import {
     avatarRequest,
@@ -1226,12 +1227,16 @@ export const useUserStore = defineStore('User', () => {
         if (D.id === currentUser.value.id) {
             const treeData = {
                 ...currentUser.value,
-                ...D.ref
+                ...D.ref,
+                _hexDisplayName: textToHex(D.ref?.displayName)
             };
             D.treeData = buildTreeData(treeData);
             return;
         }
-        D.treeData = buildTreeData(D.ref);
+        D.treeData = buildTreeData({
+            ...D.ref,
+            _hexDisplayName: textToHex(D.ref?.displayName)
+        });
     }
 
     async function lookupUser(ref) {