feat: Optimize dialog

- Change the method of open dialog
- Fix the problem of open dialog disappearing due to virtual scrolling
- Float the active dialog to the top

src/App.vue

@@ -1,31 +1,79 @@
 <template>
-  <DialogManager></DialogManager>
-  <DialogDownload></DialogDownload>
   <GlobalToast></GlobalToast>
-  <ConfirmDialog></ConfirmDialog>
+  <GlobalConfirm></GlobalConfirm>
   <GlobalLoading></GlobalLoading>
+  <GlobalDialogStack></GlobalDialogStack>
 </template>
 
 <script setup lang="ts">
-import GlobalToast from 'components/GlobalToast.vue'
 import DialogManager from 'components/DialogManager.vue'
 import DialogDownload from 'components/DialogDownload.vue'
+import GlobalToast from 'components/GlobalToast.vue'
 import GlobalLoading from 'components/GlobalLoading.vue'
-import ConfirmDialog from 'primevue/confirmdialog'
+import GlobalDialogStack from 'components/GlobalDialogStack.vue'
+import GlobalConfirm from 'primevue/confirmdialog'
 import { $el, app, ComfyButton } from 'scripts/comfyAPI'
 import { onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStoreProvider } from 'hooks/store'
+import { useToast } from 'hooks/toast'
 
 const { t } = useI18n()
-const { dialogManager } = useStoreProvider()
+const { dialog, models, config, download } = useStoreProvider()
+const { toast } = useToast()
 
 onMounted(() => {
+  const refreshModelsAndConfig = async () => {
+    await Promise.all([models.refresh(), config.refresh()])
+    toast.add({
+      severity: 'success',
+      summary: 'Refreshed Models',
+      life: 2000,
+    })
+  }
+
+  const openDownloadDialog = () => {
+    dialog.open({
+      key: 'model-manager-download-list',
+      title: t('downloadList'),
+      content: DialogDownload,
+      headerButtons: [
+        {
+          icon: 'pi pi-refresh',
+          command: () => download.refresh(),
+        },
+      ],
+    })
+  }
+
+  const openManagerDialog = () => {
+    const { cardWidth, gutter, aspect } = config
+
+    dialog.open({
+      key: 'model-manager',
+      title: t('modelManager'),
+      content: DialogManager,
+      keepAlive: true,
+      headerButtons: [
+        {
+          icon: 'pi pi-refresh',
+          command: refreshModelsAndConfig,
+        },
+        {
+          icon: 'pi pi-download',
+          command: openDownloadDialog,
+        },
+      ],
+      minWidth: cardWidth * 2 + gutter + 42,
+      minHeight: (cardWidth / aspect) * 0.5 + 162,
+    })
+  }
+
   app.ui?.menuContainer?.appendChild(
     $el('button', {
       id: 'comfyui-model-manager-button',
       textContent: t('modelManager'),
-      onclick: () => dialogManager.toggle(),
+      onclick: openManagerDialog,
     }),
   )
 
@@ -34,7 +82,7 @@ onMounted(() => {
       icon: 'folder-search',
       tooltip: t('openModelManager'),
       content: t('modelManager'),
-      action: () => dialogManager.toggle(),
+      action: openManagerDialog,
     }),
   )
 })