refactor: replace dialogService method call with useWorkflowTemplateSelectorDialog hook

src/composables/useCoreCommands.ts

@@ -45,6 +45,8 @@ import {
 } from '@/utils/graphTraversalUtil'
 import { filterOutputNodes } from '@/utils/nodeFilterUtil'
 
+import { useWorkflowTemplateSelectorDialog } from './useWorkflowTemplateSelectorDialog'
+
 const moveSelectedNodesVersionAdded = '1.22.2'
 
 export function useCoreCommands(): ComfyCommand[] {
@@ -251,7 +253,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-folder-open',
       label: 'Browse Templates',
       function: () => {
-        dialogService.showWorkflowTemplateSelectorDialog()
+        useWorkflowTemplateSelectorDialog().show()
       }
     },
     {

src/composables/useWorkflowTemplateSelectorDialog.ts

@@ -18,6 +18,15 @@ export const useWorkflowTemplateSelectorDialog = () => {
       component: NewWorkflowTemplateSelectorDialog,
       props: {
         onClose: hide
+      },
+      dialogComponentProps: {
+        pt: {
+          content: { class: '!px-0 overflow-hidden h-full !py-0' },
+          root: {
+            style:
+              'width: 90vw; height: 85vh; max-width: 1400px; display: flex;'
+          }
+        }
       }
     })
   }

src/services/dialogService.ts

@@ -1,7 +1,6 @@
 import { merge } from 'es-toolkit/compat'
 import { Component } from 'vue'
 
-import NewWorkflowTemplateSelectorDialog from '@/components/custom/widget/NewWorkflowTemplateSelectorDialog.vue'
 import ApiNodesSignInContent from '@/components/dialog/content/ApiNodesSignInContent.vue'
 import ConfirmationDialogContent from '@/components/dialog/content/ConfirmationDialogContent.vue'
 import ErrorDialogContent from '@/components/dialog/content/ErrorDialogContent.vue'
@@ -129,32 +128,6 @@ export const useDialogService = () => {
     })
   }
 
-  function showWorkflowTemplateSelectorDialog() {
-    const layoutDefaultProps: DialogComponentProps = {
-      headless: true,
-      modal: true,
-      closable: false,
-      pt: {
-        content: { class: '!px-0 overflow-hidden h-full !py-0' },
-        // Let internal layout manage its own max-width; prevent child from exceeding and causing scrollWidth > clientWidth
-        root: {
-          style: 'width: 90vw; height: 85vh; max-width: 1400px; display: flex;'
-        }
-      }
-    }
-
-    showLayoutDialog({
-      key: 'global-workflow-template-selector',
-      component: NewWorkflowTemplateSelectorDialog,
-      // Pass through sizing hint so inner layout adapts to parent rather than viewport
-      props: {
-        onClose: () =>
-          dialogStore.closeDialog({ key: 'global-workflow-template-selector' })
-      },
-      dialogComponentProps: layoutDefaultProps
-    })
-  }
-
   function showManagerDialog(
     props: InstanceType<typeof ManagerDialogContent>['$props'] = {}
   ) {
@@ -539,7 +512,7 @@ export const useDialogService = () => {
     showAboutDialog,
     showExecutionErrorDialog,
     showTemplateWorkflowsDialog,
-    showWorkflowTemplateSelectorDialog,
+    // showWorkflowTemplateSelectorDialog,
     showManagerDialog,
     showManagerProgressDialog,
     showApiNodesSignInDialog,