[API Nodes] Add credit management panel UI (#3535)

Co-authored-by: github-actions <github-actions@github.com>

src/composables/setting/useSettingUI.ts

@@ -1,6 +1,7 @@
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import { SettingTreeNode, useSettingStore } from '@/stores/settingStore'
 import type { SettingParams } from '@/types/settingTypes'
 import { isElectron } from '@/utils/envUtil'
@@ -11,6 +12,7 @@ export function useSettingUI(
   defaultPanel?: 'about' | 'keybinding' | 'extension' | 'server-config'
 ) {
   const { t } = useI18n()
+  const firebaseAuthStore = useFirebaseAuthStore()
   const settingStore = useSettingStore()
   const activeCategory = ref<SettingTreeNode | null>(null)
 
@@ -47,6 +49,12 @@ export function useSettingUI(
     children: []
   }
 
+  const creditsPanelNode: SettingTreeNode = {
+    key: 'credits',
+    label: 'Credits',
+    children: []
+  }
+
   const keybindingPanelNode: SettingTreeNode = {
     key: 'keybinding',
     label: 'Keybinding',
@@ -91,6 +99,16 @@ 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)
+          }
+        ]
+      : []),
     // Normal settings stored in the settingStore
     {
       key: 'settings',