[refactor] Unify small modal dialog styles with showSmallLayoutDialog

.storybook/main.ts

@@ -100,8 +100,7 @@ const config: StorybookConfig = {
         rolldownOptions: {
           treeshake: false,
           output: {
-            keepNames: true,
-            strictExecutionOrder: true
+            keepNames: true
           },
           onwarn: (warning, warn) => {
             // Suppress specific warnings

src/composables/useHelpCenter.ts

@@ -4,11 +4,11 @@ import { computed, onMounted } from 'vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
-import { useDialogService } from '@/services/dialogService'
 import { useHelpCenterStore } from '@/stores/helpCenterStore'
 import type { HelpCenterTriggerLocation } from '@/stores/helpCenterStore'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
+import { useNodeConflictDialog } from '@/workbench/extensions/manager/composables/useNodeConflictDialog'
 
 export function useHelpCenter(
   triggerFrom: HelpCenterTriggerLocation = 'sidebar'
@@ -21,7 +21,7 @@ export function useHelpCenter(
   const { shouldShowRedDot: showReleaseRedDot } = storeToRefs(releaseStore)
 
   const conflictDetection = useConflictDetection()
-  const { showNodeConflictDialog } = useDialogService()
+  const { show: showNodeConflictDialog } = useNodeConflictDialog()
 
   // Use conflict acknowledgment state from composable - call only once
   const { shouldShowRedDot: shouldShowConflictRedDot, markConflictsAsSeen } =

src/composables/useMissingModelsDialog.ts

@@ -0,0 +1,26 @@
+import type { ComponentAttrs } from 'vue-component-type-helpers'
+
+import MissingModelsWarning from '@/components/dialog/content/MissingModelsWarning.vue'
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const DIALOG_KEY = 'global-missing-models-warning'
+
+export function useMissingModelsDialog() {
+  const { showSmallLayoutDialog } = useDialogService()
+  const dialogStore = useDialogStore()
+
+  function hide() {
+    dialogStore.closeDialog({ key: DIALOG_KEY })
+  }
+
+  function show(props: ComponentAttrs<typeof MissingModelsWarning>) {
+    showSmallLayoutDialog({
+      key: DIALOG_KEY,
+      component: MissingModelsWarning,
+      props
+    })
+  }
+
+  return { show, hide }
+}

src/composables/useMissingNodesDialog.ts

@@ -0,0 +1,30 @@
+import type { ComponentAttrs } from 'vue-component-type-helpers'
+
+import MissingNodesContent from '@/components/dialog/content/MissingNodesContent.vue'
+import MissingNodesFooter from '@/components/dialog/content/MissingNodesFooter.vue'
+import MissingNodesHeader from '@/components/dialog/content/MissingNodesHeader.vue'
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const DIALOG_KEY = 'global-missing-nodes'
+
+export function useMissingNodesDialog() {
+  const { showSmallLayoutDialog } = useDialogService()
+  const dialogStore = useDialogStore()
+
+  function hide() {
+    dialogStore.closeDialog({ key: DIALOG_KEY })
+  }
+
+  function show(props: ComponentAttrs<typeof MissingNodesContent>) {
+    showSmallLayoutDialog({
+      key: DIALOG_KEY,
+      headerComponent: MissingNodesHeader,
+      footerComponent: MissingNodesFooter,
+      component: MissingNodesContent,
+      props
+    })
+  }
+
+  return { show, hide }
+}

src/platform/workflow/core/services/workflowService.ts

@@ -17,6 +17,8 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useWorkflowThumbnail } from '@/renderer/core/thumbnail/useWorkflowThumbnail'
 import { app } from '@/scripts/app'
 import { blankGraph, defaultGraph } from '@/scripts/defaultGraph'
+import { useMissingModelsDialog } from '@/composables/useMissingModelsDialog'
+import { useMissingNodesDialog } from '@/composables/useMissingNodesDialog'
 import { useDialogService } from '@/services/dialogService'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -27,6 +29,8 @@ export const useWorkflowService = () => {
   const workflowStore = useWorkflowStore()
   const toastStore = useToastStore()
   const dialogService = useDialogService()
+  const missingModelsDialog = useMissingModelsDialog()
+  const missingNodesDialog = useMissingNodesDialog()
   const workflowThumbnail = useWorkflowThumbnail()
   const domWidgetStore = useDomWidgetStore()
   const workflowDraftStore = useWorkflowDraftStore()
@@ -455,13 +459,13 @@ export const useWorkflowService = () => {
       missingNodeTypes?.length &&
       settingStore.get('Comfy.Workflow.ShowMissingNodesWarning')
     ) {
-      void dialogService.showLoadWorkflowWarning({ missingNodeTypes })
+      missingNodesDialog.show({ missingNodeTypes })
     }
     if (
       missingModels &&
       settingStore.get('Comfy.Workflow.ShowMissingModelsWarning')
     ) {
-      void dialogService.showMissingModelsWarning(missingModels)
+      missingModelsDialog.show(missingModels)
     }
   }
 

src/scripts/app.ts

@@ -52,6 +52,7 @@ import {
 } from '@/scripts/domWidget'
 import { useDialogService } from '@/services/dialogService'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { useMissingNodesDialog } from '@/composables/useMissingNodesDialog'
 import { useExtensionService } from '@/services/extensionService'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useSubgraphService } from '@/services/subgraphService'
@@ -1068,7 +1069,7 @@ export class ComfyApp {
 
   private showMissingNodesError(missingNodeTypes: MissingNodeType[]) {
     if (useSettingStore().get('Comfy.Workflow.ShowMissingNodesWarning')) {
-      useDialogService().showLoadWorkflowWarning({ missingNodeTypes })
+      useMissingNodesDialog().show({ missingNodeTypes })
     }
   }
 

src/services/dialogService.ts

@@ -16,22 +16,9 @@ import type {
   ShowDialogOptions
 } from '@/stores/dialogStore'
 
-import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
 import type { ComponentAttrs } from 'vue-component-type-helpers'
 
-// Type-only imports for ComponentAttrs inference (no runtime cost)
-import type MissingNodesContent from '@/components/dialog/content/MissingNodesContent.vue'
-import type MissingModelsWarning from '@/components/dialog/content/MissingModelsWarning.vue'
-
 // Lazy loaders for dialogs - components are loaded on first use
-const lazyMissingNodesContent = () =>
-  import('@/components/dialog/content/MissingNodesContent.vue')
-const lazyMissingNodesHeader = () =>
-  import('@/components/dialog/content/MissingNodesHeader.vue')
-const lazyMissingNodesFooter = () =>
-  import('@/components/dialog/content/MissingNodesFooter.vue')
-const lazyMissingModelsWarning = () =>
-  import('@/components/dialog/content/MissingModelsWarning.vue')
 const lazyApiNodesSignInContent = () =>
   import('@/components/dialog/content/ApiNodesSignInContent.vue')
 const lazySignInContent = () =>
@@ -40,18 +27,6 @@ const lazyUpdatePasswordContent = () =>
   import('@/components/dialog/content/UpdatePasswordContent.vue')
 const lazyComfyOrgHeader = () =>
   import('@/components/dialog/header/ComfyOrgHeader.vue')
-const lazyImportFailedNodeContent = () =>
-  import('@/workbench/extensions/manager/components/manager/ImportFailedNodeContent.vue')
-const lazyImportFailedNodeHeader = () =>
-  import('@/workbench/extensions/manager/components/manager/ImportFailedNodeHeader.vue')
-const lazyImportFailedNodeFooter = () =>
-  import('@/workbench/extensions/manager/components/manager/ImportFailedNodeFooter.vue')
-const lazyNodeConflictDialogContent = () =>
-  import('@/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue')
-const lazyNodeConflictHeader = () =>
-  import('@/workbench/extensions/manager/components/manager/NodeConflictHeader.vue')
-const lazyNodeConflictFooter = () =>
-  import('@/workbench/extensions/manager/components/manager/NodeConflictFooter.vue')
 
 export type ConfirmationDialogType =
   | 'default'
@@ -77,56 +52,6 @@ export interface ExecutionErrorDialogInput {
 export const useDialogService = () => {
   const dialogStore = useDialogStore()
 
-  async function showLoadWorkflowWarning(
-    props: ComponentAttrs<typeof MissingNodesContent>
-  ) {
-    const [
-      { default: MissingNodesContent },
-      { default: MissingNodesHeader },
-      { default: MissingNodesFooter }
-    ] = await Promise.all([
-      lazyMissingNodesContent(),
-      lazyMissingNodesHeader(),
-      lazyMissingNodesFooter()
-    ])
-
-    dialogStore.showDialog({
-      key: 'global-missing-nodes',
-      headerComponent: MissingNodesHeader,
-      footerComponent: MissingNodesFooter,
-      component: MissingNodesContent,
-      dialogComponentProps: {
-        closable: true,
-        pt: {
-          root: { class: 'bg-base-background border-border-default' },
-          header: { class: '!p-0 !m-0' },
-          content: { class: '!p-0 overflow-y-hidden' },
-          footer: { class: '!p-0' },
-          pcCloseButton: {
-            root: {
-              class: '!w-7 !h-7 !border-none !outline-none !p-2 !m-1.5'
-            }
-          }
-        }
-      },
-      props,
-      footerProps: {
-        missingNodeTypes: props.missingNodeTypes
-      }
-    })
-  }
-
-  async function showMissingModelsWarning(
-    props: ComponentAttrs<typeof MissingModelsWarning>
-  ) {
-    const { default: MissingModelsWarning } = await lazyMissingModelsWarning()
-    dialogStore.showDialog({
-      key: 'global-missing-models-warning',
-      component: MissingModelsWarning,
-      props
-    })
-  }
-
   function showExecutionErrorDialog(executionError: ExecutionErrorDialogInput) {
     const props: ComponentAttrs<typeof ErrorDialogContent> = {
       error: {
@@ -440,29 +365,15 @@ export const useDialogService = () => {
     })
   }
 
-  async function showImportFailedNodeDialog(
-    options: {
-      conflictedPackages?: ConflictDetectionResult[]
-      dialogComponentProps?: DialogComponentProps
-    } = {}
+  function showSmallLayoutDialog(
+    options: Omit<ShowDialogOptions, 'dialogComponentProps'> & {
+      dialogComponentProps?: Omit<DialogComponentProps, 'pt'>
+    }
   ) {
-    const [
-      { default: ImportFailedNodeHeader },
-      { default: ImportFailedNodeFooter },
-      { default: ImportFailedNodeContent }
-    ] = await Promise.all([
-      lazyImportFailedNodeHeader(),
-      lazyImportFailedNodeFooter(),
-      lazyImportFailedNodeContent()
-    ])
-
-    const { dialogComponentProps, conflictedPackages } = options
+    const { dialogComponentProps: callerProps, ...rest } = options
 
     return dialogStore.showDialog({
-      key: 'global-import-failed',
-      headerComponent: ImportFailedNodeHeader,
-      footerComponent: ImportFailedNodeFooter,
-      component: ImportFailedNodeContent,
+      ...rest,
       dialogComponentProps: {
         closable: true,
         pt: {
@@ -476,71 +387,7 @@ export const useDialogService = () => {
             }
           }
         },
-        ...dialogComponentProps
-      },
-      props: {
-        conflictedPackages: conflictedPackages ?? []
-      },
-      footerProps: {
-        conflictedPackages: conflictedPackages ?? []
-      }
-    })
-  }
-
-  async function showNodeConflictDialog(
-    options: {
-      showAfterWhatsNew?: boolean
-      conflictedPackages?: ConflictDetectionResult[]
-      dialogComponentProps?: DialogComponentProps
-      buttonText?: string
-      onButtonClick?: () => void
-    } = {}
-  ) {
-    const [
-      { default: NodeConflictHeader },
-      { default: NodeConflictFooter },
-      { default: NodeConflictDialogContent }
-    ] = await Promise.all([
-      lazyNodeConflictHeader(),
-      lazyNodeConflictFooter(),
-      lazyNodeConflictDialogContent()
-    ])
-
-    const {
-      dialogComponentProps,
-      buttonText,
-      onButtonClick,
-      showAfterWhatsNew,
-      conflictedPackages
-    } = options
-
-    return dialogStore.showDialog({
-      key: 'global-node-conflict',
-      headerComponent: NodeConflictHeader,
-      footerComponent: NodeConflictFooter,
-      component: NodeConflictDialogContent,
-      dialogComponentProps: {
-        closable: true,
-        pt: {
-          header: { class: '!p-0 !m-0' },
-          content: { class: '!p-0 overflow-y-hidden' },
-          footer: { class: '!p-0' },
-          pcCloseButton: {
-            root: {
-              class:
-                '!w-7 !h-7 !border-none !outline-none !p-2 !m-1.5 bg-dialog-surface text-white'
-            }
-          }
-        },
-        ...dialogComponentProps
-      },
-      props: {
-        showAfterWhatsNew,
-        conflictedPackages
-      },
-      footerProps: {
-        buttonText,
-        onButtonClick
+        ...callerProps
       }
     })
   }
@@ -715,8 +562,6 @@ export const useDialogService = () => {
   }
 
   return {
-    showLoadWorkflowWarning,
-    showMissingModelsWarning,
     showExecutionErrorDialog,
     showApiNodesSignInDialog,
     showSignInDialog,
@@ -728,8 +573,7 @@ export const useDialogService = () => {
     showErrorDialog,
     confirm,
     showLayoutDialog,
-    showImportFailedNodeDialog,
-    showNodeConflictDialog,
+    showSmallLayoutDialog,
     showDeleteWorkspaceDialog,
     showCreateWorkspaceDialog,
     showLeaveWorkspaceDialog,

src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue

@@ -36,11 +36,11 @@ import ToggleSwitch from 'primevue/toggleswitch'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useDialogService } from '@/services/dialogService'
 import type { components } from '@/types/comfyRegistryTypes'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useImportFailedDetection } from '@/workbench/extensions/manager/composables/useImportFailedDetection'
 import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import { useNodeConflictDialog } from '@/workbench/extensions/manager/composables/useNodeConflictDialog'
 import { useConflictDetectionStore } from '@/workbench/extensions/manager/stores/conflictDetectionStore'
 import type { components as ManagerComponents } from '@/workbench/extensions/manager/types/generatedManagerTypes'
 
@@ -54,7 +54,7 @@ const { t } = useI18n()
 const { isPackEnabled, enablePack, disablePack, installedPacks } =
   useComfyManagerStore()
 const { getConflictsForPackageByID } = useConflictDetectionStore()
-const { showNodeConflictDialog } = useDialogService()
+const { show: showNodeConflictDialog } = useNodeConflictDialog()
 const { acknowledgmentState, markConflictsAsSeen } = useConflictAcknowledgment()
 const { showImportFailedDialog } = useImportFailedDetection(nodePack.id || '')