Make dialog maximizable

src/components/dialog/GlobalDialog.vue

@@ -6,19 +6,29 @@
     closable
     closeOnEscape
     dismissableMask
+    :maximizable="dialogStore.props.maximizable ?? false"
     @hide="dialogStore.closeDialog"
+    @maximize="maximized = true"
+    @unmaximize="maximized = false"
   >
     <template #header v-if="dialogStore.title">
       <h3>{{ dialogStore.title }}</h3>
     </template>
 
-    <component :is="dialogStore.component" v-bind="dialogStore.props" />
+    <component
+      :is="dialogStore.component"
+      v-bind="dialogStore.props"
+      :maximized="maximized"
+    />
   </Dialog>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
 import { useDialogStore } from '@/stores/dialogStore'
 import Dialog from 'primevue/dialog'
 
 const dialogStore = useDialogStore()
+
+const maximized = ref(false)
 </script>

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -7,7 +7,8 @@
     <ListBox
       :options="uniqueNodes"
       optionLabel="label"
-      class="missing-nodes-list"
+      scrollHeight="100%"
+      :class="'missing-nodes-list' + (props.maximized ? ' maximized' : '')"
       :pt="{
         list: { class: 'border-none' }
       }"
@@ -50,6 +51,7 @@ interface NodeType {
 const props = defineProps<{
   missingNodeTypes: (string | NodeType)[]
   hasAddedNodes: boolean
+  maximized: boolean
 }>()
 
 const uniqueNodes = computed(() => {
@@ -82,16 +84,15 @@ const uniqueNodes = computed(() => {
 
 <style scoped>
 .comfy-missing-nodes {
-  font-family: var(--font-family);
-  color: var(--text-color);
+  font-family: monospace;
+  color: var(--red-600);
   padding: 1.5rem;
   background-color: var(--surface-ground);
   border-radius: var(--border-radius);
   box-shadow: var(--card-shadow);
 }
 
 .warning-title {
-  color: var(--red-600);
   margin-top: 0;
   margin-bottom: 1rem;
 }
@@ -105,6 +106,10 @@ const uniqueNodes = computed(() => {
   overflow-y: auto;
 }
 
+.missing-nodes-list.maximized {
+  max-height: unset;
+}
+
 .missing-node-item {
   display: flex;
   align-items: center;
@@ -129,6 +134,5 @@ const uniqueNodes = computed(() => {
 .added-nodes-warning {
   margin-top: 1rem;
   font-style: italic;
-  color: var(--red-600);
 }
 </style>

src/scripts/app.ts

@@ -2125,7 +2125,11 @@ export class ComfyApp {
 
   showMissingNodesError(missingNodeTypes, hasAddedNodes = true) {
     if (this.vueAppReady)
-      showLoadWorkflowWarning(missingNodeTypes, hasAddedNodes)
+      showLoadWorkflowWarning({
+        missingNodeTypes,
+        hasAddedNodes,
+        maximizable: true
+      })
 
     this.logging.addEntry('Comfy.App', 'warn', {
       MissingNodes: missingNodeTypes

src/services/dialogService.ts

@@ -2,16 +2,14 @@ import { useDialogStore } from '@/stores/dialogStore'
 import LoadWorkflowWarning from '@/components/dialog/content/LoadWorkflowWarning.vue'
 import { markRaw } from 'vue'
 
-export function showLoadWorkflowWarning(
-  missingNodeTypes: any[],
+export function showLoadWorkflowWarning(props: {
+  missingNodeTypes: any[]
   hasAddedNodes: boolean
-) {
+  [key: string]: any
+}) {
   const dialogStore = useDialogStore()
   dialogStore.showDialog({
     component: markRaw(LoadWorkflowWarning),
-    props: {
-      missingNodeTypes,
-      hasAddedNodes
-    }
+    props
   })
 }

src/stores/dialogStore.ts

@@ -1,3 +1,6 @@
+// We should consider moving to https://primevue.org/dynamicdialog/ once everything is in Vue.
+// Currently we need to bridge between legacy app code and Vue app with a Pinia store.
+
 import { defineStore } from 'pinia'
 import { Component } from 'vue'