[refactor] Migrate SettingDialog to BaseModalLayout design system (#8270)

src/platform/assets/components/UploadModelUrlInput.vue

@@ -86,15 +86,15 @@ import { computed } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { useDialogService } from '@/services/dialogService'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 
 const { flags } = useFeatureFlags()
-const dialogService = useDialogService()
+const settingsDialog = useSettingsDialog()
 
 const showSecretsHint = computed(() => flags.userSecretsEnabled)
 
 function openSecretsSettings() {
-  dialogService.showSettingsDialog('secrets')
+  settingsDialog.show('secrets')
 }
 
 const props = defineProps<{

src/platform/assets/composables/useAssetBrowserDialog.ts

@@ -1,7 +1,7 @@
 import AssetBrowserModal from '@/platform/assets/components/AssetBrowserModal.vue'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { useDialogService } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
-import type { DialogComponentProps } from '@/stores/dialogStore'
 
 interface ShowOptions {
   /** ComfyUI node type for context (e.g., 'CheckpointLoaderSimple') */
@@ -22,64 +22,51 @@ interface BrowseOptions {
   onAssetSelected?: (asset: AssetItem) => void
 }
 
-const dialogComponentProps: DialogComponentProps = {
-  headless: true,
-  modal: true,
-  closable: true,
-  pt: {
-    root: {
-      class: 'rounded-2xl overflow-hidden asset-browser-dialog'
-    },
-    header: {
-      class: '!p-0 hidden'
-    },
-    content: {
-      class: '!p-0 !m-0 h-full w-full'
-    }
-  }
-} as const
+const DIALOG_KEY = 'global-asset-browser'
 
 export const useAssetBrowserDialog = () => {
+  const dialogService = useDialogService()
   const dialogStore = useDialogStore()
-  const dialogKey = 'global-asset-browser'
 
-  async function show(props: ShowOptions) {
+  function hide() {
+    dialogStore.closeDialog({ key: DIALOG_KEY })
+  }
+
+  function show(props: ShowOptions) {
     const handleAssetSelected = (asset: AssetItem) => {
       props.onAssetSelected?.(asset)
-      dialogStore.closeDialog({ key: dialogKey })
+      hide()
     }
 
-    dialogStore.showDialog({
-      key: dialogKey,
+    dialogService.showLayoutDialog({
+      key: DIALOG_KEY,
       component: AssetBrowserModal,
       props: {
         nodeType: props.nodeType,
         inputName: props.inputName,
         currentValue: props.currentValue,
         onSelect: handleAssetSelected,
-        onClose: () => dialogStore.closeDialog({ key: dialogKey })
-      },
-      dialogComponentProps
+        onClose: hide
+      }
     })
   }
 
-  async function browse(options: BrowseOptions): Promise<void> {
+  function browse(options: BrowseOptions) {
     const handleAssetSelected = (asset: AssetItem) => {
       options.onAssetSelected?.(asset)
-      dialogStore.closeDialog({ key: dialogKey })
+      hide()
     }
 
-    dialogStore.showDialog({
-      key: dialogKey,
+    dialogService.showLayoutDialog({
+      key: DIALOG_KEY,
       component: AssetBrowserModal,
       props: {
         showLeftPanel: true,
         assetType: options.assetType,
         title: options.title,
         onSelect: handleAssetSelected,
-        onClose: () => dialogStore.closeDialog({ key: dialogKey })
-      },
-      dialogComponentProps
+        onClose: hide
+      }
     })
   }