chore: test code

src/components/sidebar/SidebarHelpCenterIcon.vue

@@ -64,12 +64,12 @@ import { storeToRefs } from 'pinia'
 import { computed, onMounted, toRefs } from 'vue'
 
 import HelpCenterMenuContent from '@/components/helpcenter/HelpCenterMenuContent.vue'
+import { useNodeConflictDialog } from '@/composables/useNodeConflictDialog'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import ReleaseNotificationToast from '@/platform/updates/components/ReleaseNotificationToast.vue'
 import WhatsNewPopup from '@/platform/updates/components/WhatsNewPopup.vue'
-import { useDialogService } from '@/services/dialogService'
 import { useHelpCenterStore } from '@/stores/helpCenterStore'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
@@ -84,7 +84,7 @@ 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/useMissingNodesDialog.ts

@@ -0,0 +1,29 @@
+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'
+import type { ComponentProps } from 'vue-component-type-helpers'
+
+const DIALOG_KEY = 'global-missing-nodes'
+
+export const useMissingNodesDialog = () => {
+  const dialogService = useDialogService()
+  const dialogStore = useDialogStore()
+
+  function hide() {
+    dialogStore.closeDialog({ key: DIALOG_KEY })
+  }
+
+  function show(props: ComponentProps<typeof MissingNodesContent>) {
+    dialogService.showSmallDialog({
+      key: DIALOG_KEY,
+      headerComponent: MissingNodesHeader,
+      footerComponent: MissingNodesFooter,
+      component: MissingNodesContent,
+      props
+    })
+  }
+
+  return { show, hide }
+}

src/composables/useNodeConflictDialog.ts

@@ -0,0 +1,48 @@
+import NodeConflictDialogContent from '@/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue'
+import NodeConflictFooter from '@/workbench/extensions/manager/components/manager/NodeConflictFooter.vue'
+import NodeConflictHeader from '@/workbench/extensions/manager/components/manager/NodeConflictHeader.vue'
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
+import type { DialogComponentProps } from '@/stores/dialogStore'
+import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+
+const DIALOG_KEY = 'global-node-conflict'
+
+export const useNodeConflictDialog = () => {
+  const dialogService = useDialogService()
+  const dialogStore = useDialogStore()
+
+  function hide() {
+    dialogStore.closeDialog({ key: DIALOG_KEY })
+  }
+
+  function show(
+    options: {
+      showAfterWhatsNew?: boolean
+      conflictedPackages?: ConflictDetectionResult[]
+      dialogComponentProps?: DialogComponentProps
+      buttonText?: string
+      onButtonClick?: () => void
+    } = {}
+  ) {
+    const { buttonText, onButtonClick, showAfterWhatsNew, conflictedPackages } =
+      options
+
+    return dialogService.showSmallDialog({
+      key: DIALOG_KEY,
+      headerComponent: NodeConflictHeader,
+      footerComponent: NodeConflictFooter,
+      component: NodeConflictDialogContent,
+      props: {
+        showAfterWhatsNew,
+        conflictedPackages
+      },
+      footerProps: {
+        buttonText,
+        onButtonClick
+      }
+    })
+  }
+
+  return { show, hide }
+}

src/scripts/app.ts

@@ -46,6 +46,7 @@ import {
   ComponentWidgetImpl,
   DOMWidgetImpl
 } from '@/scripts/domWidget'
+import { useMissingNodesDialog } from '@/composables/useMissingNodesDialog'
 import { useDialogService } from '@/services/dialogService'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useExtensionService } from '@/services/extensionService'
@@ -1029,7 +1030,7 @@ export class ComfyApp {
 
   private showMissingNodesError(missingNodeTypes: MissingNodeType[]) {
     if (useSettingStore().get('Comfy.Workflow.ShowMissingNodesWarning')) {
-      useDialogService().showLoadWorkflowWarning({ missingNodeTypes })
+      useMissingNodesDialog().show({ missingNodeTypes })
     }
   }
 

src/services/dialogService.ts

@@ -2,9 +2,6 @@ import { merge } from 'es-toolkit/compat'
 import type { Component } from 'vue'
 
 import ApiNodesSignInContent from '@/components/dialog/content/ApiNodesSignInContent.vue'
-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 ConfirmationDialogContent from '@/components/dialog/content/ConfirmationDialogContent.vue'
 import ErrorDialogContent from '@/components/dialog/content/ErrorDialogContent.vue'
 import MissingModelsWarning from '@/components/dialog/content/MissingModelsWarning.vue'
@@ -30,11 +27,7 @@ import ManagerProgressFooter from '@/workbench/extensions/manager/components/Man
 import ManagerProgressHeader from '@/workbench/extensions/manager/components/ManagerProgressHeader.vue'
 import ManagerDialogContent from '@/workbench/extensions/manager/components/manager/ManagerDialogContent.vue'
 import ManagerHeader from '@/workbench/extensions/manager/components/manager/ManagerHeader.vue'
-import NodeConflictDialogContent from '@/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue'
-import NodeConflictFooter from '@/workbench/extensions/manager/components/manager/NodeConflictFooter.vue'
-import NodeConflictHeader from '@/workbench/extensions/manager/components/manager/NodeConflictHeader.vue'
-import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
-import type { ComponentAttrs } from 'vue-component-type-helpers'
+import type { ComponentAttrs, ComponentProps } from 'vue-component-type-helpers'
 
 export type ConfirmationDialogType =
   | 'default'
@@ -47,32 +40,6 @@ export type ConfirmationDialogType =
 export const useDialogService = () => {
   const dialogStore = useDialogStore()
 
-  function showLoadWorkflowWarning(
-    props: ComponentAttrs<typeof MissingNodesContent>
-  ) {
-    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
-    })
-  }
-
   function showMissingModelsWarning(
     props: ComponentAttrs<typeof MissingModelsWarning>
   ) {
@@ -450,6 +417,44 @@ export const useDialogService = () => {
     }
   }
 
+  function showSmallDialog<T extends Component>(options: {
+    key: string
+    component: T
+    headerComponent?: Component
+    footerComponent?: Component
+    props?: ComponentProps<T>
+    footerProps?: Record<string, unknown>
+    dialogComponentProps?: DialogComponentProps
+  }) {
+    const smallDialogDefaultProps: 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'
+          }
+        }
+      }
+    }
+
+    return dialogStore.showDialog({
+      key: options.key,
+      component: options.component,
+      headerComponent: options.headerComponent,
+      footerComponent: options.footerComponent,
+      props: options.props,
+      footerProps: options.footerProps,
+      dialogComponentProps: merge(
+        smallDialogDefaultProps,
+        options.dialogComponentProps || {}
+      )
+    })
+  }
+
   function showLayoutDialog(options: {
     key: string
     component: Component
@@ -482,54 +487,6 @@ export const useDialogService = () => {
     })
   }
 
-  function showNodeConflictDialog(
-    options: {
-      showAfterWhatsNew?: boolean
-      conflictedPackages?: ConflictDetectionResult[]
-      dialogComponentProps?: DialogComponentProps
-      buttonText?: string
-      onButtonClick?: () => void
-    } = {}
-  ) {
-    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
-      }
-    })
-  }
-
   async function showSubscriptionRequiredDialog() {
     if (!isCloud || !window.__CONFIG__?.subscription_required) {
       return
@@ -542,7 +499,6 @@ export const useDialogService = () => {
   }
 
   return {
-    showLoadWorkflowWarning,
     showMissingModelsWarning,
     showSettingsDialog,
     showAboutDialog,
@@ -560,7 +516,7 @@ export const useDialogService = () => {
     confirm,
     toggleManagerDialog,
     toggleManagerProgressDialog,
-    showLayoutDialog,
-    showNodeConflictDialog
+    showSmallDialog,
+    showLayoutDialog
   }
 }

src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue

@@ -14,7 +14,7 @@
       <!-- Import Failed List Wrapper -->
       <div
         v-if="importFailedConflicts.length > 0"
-        class="flex min-h-8 w-full flex-col rounded-lg bg-base-background"
+        class="flex min-h-8 w-full flex-col rounded-lg bg-secondary-background"
       >
         <div
           data-testid="conflict-dialog-panel-toggle"
@@ -50,7 +50,7 @@
           <div
             v-for="(packageName, i) in importFailedConflicts"
             :key="i"
-            class="conflict-list-item flex h-6 shrink-0 items-center justify-between px-4"
+            class="hover:bg-alpha-azure-600-30 flex h-6 flex-shrink-0 items-center justify-between px-4"
           >
             <span class="text-xs text-muted">
               {{ packageName }}
@@ -62,7 +62,7 @@
       <!-- Conflict List Wrapper -->
       <div
         v-if="allConflictDetails.length > 0"
-        class="flex min-h-8 w-full flex-col rounded-lg bg-base-background"
+        class="flex min-h-8 w-full flex-col rounded-lg bg-secondary-background"
       >
         <div
           data-testid="conflict-dialog-panel-toggle"
@@ -98,7 +98,7 @@
           <div
             v-for="(conflict, i) in allConflictDetails"
             :key="i"
-            class="conflict-list-item flex h-6 shrink-0 items-center justify-between px-4"
+            class="hover:bg-alpha-azure-600-30 flex h-6 flex-shrink-0 items-center justify-between px-4"
           >
             <span class="text-xs text-muted">{{
               getConflictMessage(conflict, t)
@@ -110,7 +110,7 @@
       <!-- Extension List Wrapper -->
       <div
         v-if="conflictData.length > 0"
-        class="flex min-h-8 w-full flex-col rounded-lg bg-base-background"
+        class="flex min-h-8 w-full flex-col rounded-lg bg-secondary-background"
       >
         <div
           data-testid="conflict-dialog-panel-toggle"
@@ -146,7 +146,7 @@
           <div
             v-for="conflictResult in conflictData"
             :key="conflictResult.package_id"
-            class="conflict-list-item flex h-6 shrink-0 items-center justify-between px-4"
+            class="hover:bg-alpha-azure-600-30 flex h-6 flex-shrink-0 items-center justify-between px-4"
           >
             <span class="text-xs text-muted">
               {{ conflictResult.package_name }}
@@ -236,8 +236,3 @@ const toggleExtensionsPanel = () => {
   importFailedExpanded.value = false
 }
 </script>
-<style scoped>
-.conflict-list-item:hover {
-  background-color: rgb(0 122 255 / 0.2);
-}
-</style>

src/workbench/extensions/manager/components/manager/NodeConflictHeader.vue

@@ -1,10 +1,8 @@
 <template>
-  <div class="flex h-12 w-full items-center justify-between pl-6">
+  <div class="flex w-full items-center justify-between p-4">
     <div class="flex items-center gap-2">
-      <!-- Warning Icon -->
-      <i class="pi pi-exclamation-triangle text-lg"></i>
-      <!-- Title -->
-      <p class="text-base font-bold">
+      <i class="icon-[lucide--triangle-alert] text-gold-600"></i>
+      <p class="m-0 text-sm">
         {{ $t('manager.conflicts.title') }}
       </p>
     </div>

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

@@ -34,7 +34,7 @@ import ToggleSwitch from 'primevue/toggleswitch'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useDialogService } from '@/services/dialogService'
+import { useNodeConflictDialog } from '@/composables/useNodeConflictDialog'
 import type { components } from '@/types/comfyRegistryTypes'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
@@ -51,7 +51,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 isLoading = ref(false)

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

@@ -20,12 +20,12 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import DotSpinner from '@/components/common/DotSpinner.vue'
 import Button from '@/components/ui/button/Button.vue'
 import type { ButtonVariants } from '@/components/ui/button/button.variants'
-import { useDialogService } from '@/services/dialogService'
+import { useNodeConflictDialog } from '@/composables/useNodeConflictDialog'
+import { t } from '@/i18n'
 import type { components } from '@/types/comfyRegistryTypes'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
@@ -54,8 +54,7 @@ const {
 }>()
 
 const managerStore = useComfyManagerStore()
-const { showNodeConflictDialog } = useDialogService()
-const { t } = useI18n()
+const { show: showNodeConflictDialog } = useNodeConflictDialog()
 
 // Check if any of the packs are currently being installed
 const isInstalling = computed(() => {