From 561bb008507b727aa94710a736b4029895cb5fd1 Mon Sep 17 00:00:00 2001
From: shivansh-gupta4 <shivansh672004@gmail.com>
Date: Mon, 21 Jul 2025 00:58:56 +0530
Subject: [PATCH] Corrected persisting logic in versioncompatibility store,
 corrected placement of component in graphview.vue so that it only loads after
 the versions are fetched from api and corrected the UI of the banner to be
 more smooth with better UX

---
 .../dialog/content/VersionMismatchWarning.vue       | 13 ++++++++++---
 src/stores/versionCompatibilityStore.ts             |  4 +++-
 src/views/GraphView.vue                             |  4 +---
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/dialog/content/VersionMismatchWarning.vue b/src/components/dialog/content/VersionMismatchWarning.vue
index 0465e6dca7..4efcaf4df3 100644
--- a/src/components/dialog/content/VersionMismatchWarning.vue
+++ b/src/components/dialog/content/VersionMismatchWarning.vue
@@ -3,11 +3,11 @@
     v-if="versionStore.shouldShowWarning"
     severity="warn"
     icon="pi pi-exclamation-triangle"
-    class="my-2 mx-2"
-    :closable="true"
+    class="my-2 mx-2 version-warning-fix"
     :pt="{
       root: { class: 'flex-col' },
-      text: { class: 'flex-1' }
+      text: { class: 'flex-1' },
+      icon: { class: 'flex items-start mt-1' }
     }"
     @close="handleDismiss"
   >
@@ -77,3 +77,10 @@ const handleUpdate = () => {
   )
 }
 </script>
+
+<style scoped>
+.version-warning-fix :deep(.p-message-icon) {
+  align-self: flex-start;
+  margin-top: 0.125rem;
+}
+</style>
diff --git a/src/stores/versionCompatibilityStore.ts b/src/stores/versionCompatibilityStore.ts
index 236d31b9ff..a23ba980fc 100644
--- a/src/stores/versionCompatibilityStore.ts
+++ b/src/stores/versionCompatibilityStore.ts
@@ -13,7 +13,9 @@ export const useVersionCompatibilityStore = defineStore(
     const settingStore = useSettingStore()
 
     const isDismissed = ref(false)
-    const dismissedVersion = ref<string | null>(null)
+    const dismissedVersion = ref<string | null>(
+      settingStore.get('Comfy.VersionMismatch.DismissedVersion') ?? null
+    )
 
     const frontendVersion = computed(() => config.app_version)
     const backendVersion = computed(
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index 73dea2212a..2de7eeed78 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -217,9 +217,6 @@ onMounted(() => {
   } catch (e) {
     console.error('Failed to init ComfyUI frontend', e)
   }
-
-  // Initialize version compatibility checking (fire-and-forget)
-  void versionCompatibilityStore.initialize()
 })
 
 onBeforeUnmount(() => {
@@ -257,6 +254,7 @@ const onGraphReady = () => {
       // Explicitly initialize nodeSearchService to avoid indexing delay when
       // node search is triggered
       useNodeDefStore().nodeSearchService.searchNode('')
+      void versionCompatibilityStore.initialize()
     },
     { timeout: 1000 }
   )