[API Node] User management (#3567)

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Chenlei Hu <hcl@comfy.org>

src/composables/setting/useSettingUI.ts

@@ -9,7 +9,13 @@ import { normalizeI18nKey } from '@/utils/formatUtil'
 import { buildTree } from '@/utils/treeUtil'
 
 export function useSettingUI(
-  defaultPanel?: 'about' | 'keybinding' | 'extension' | 'server-config'
+  defaultPanel?:
+    | 'about'
+    | 'keybinding'
+    | 'extension'
+    | 'server-config'
+    | 'user'
+    | 'credits'
 ) {
   const { t } = useI18n()
   const firebaseAuthStore = useFirebaseAuthStore()
@@ -55,6 +61,12 @@ export function useSettingUI(
     children: []
   }
 
+  const userPanelNode: SettingTreeNode = {
+    key: 'user',
+    label: 'User',
+    children: []
+  }
+
   const keybindingPanelNode: SettingTreeNode = {
     key: 'keybinding',
     label: 'Keybinding',
@@ -84,10 +96,13 @@ export function useSettingUI(
    * The default category to show when the dialog is opened.
    */
   const defaultCategory = computed<SettingTreeNode>(() => {
-    return defaultPanel
-      ? settingCategories.value.find((x) => x.key === defaultPanel) ??
-          settingCategories.value[0]
-      : settingCategories.value[0]
+    if (!defaultPanel) return settingCategories.value[0]
+    // Search through all groups in groupedMenuTreeNodes
+    for (const group of groupedMenuTreeNodes.value) {
+      const found = group.children?.find((node) => node.key === defaultPanel)
+      if (found) return found
+    }
+    return settingCategories.value[0]
   })
 
   const translateCategory = (node: SettingTreeNode) => ({
@@ -99,16 +114,15 @@ export function useSettingUI(
   })
 
   const groupedMenuTreeNodes = computed<SettingTreeNode[]>(() => [
-    // Account settings - only show when user is authenticated
-    ...(firebaseAuthStore.isAuthenticated
-      ? [
-          {
-            key: 'account',
-            label: 'Account',
-            children: [creditsPanelNode].map(translateCategory)
-          }
-        ]
-      : []),
+    // Account settings - only show credits when user is authenticated
+    {
+      key: 'account',
+      label: 'Account',
+      children: [
+        userPanelNode,
+        ...(firebaseAuthStore.isAuthenticated ? [creditsPanelNode] : [])
+      ].map(translateCategory)
+    },
     // Normal settings stored in the settingStore
     {
       key: 'settings',