From c7393b0ee1e712bd3edae4ae1f806d10fca1f724 Mon Sep 17 00:00:00 2001
From: Simula_r <18093452+simula-r@users.noreply.github.com>
Date: Tue, 28 Oct 2025 21:00:14 -0700
Subject: [PATCH] feat: first cut of vue nodes try it now banner

---
 src/components/graph/GraphCanvas.vue       |  3 +
 src/components/topbar/TryVueNodeBanner.vue | 73 ++++++++++++++++++++++
 src/locales/en/main.json                   |  4 ++
 3 files changed, 80 insertions(+)
 create mode 100644 src/components/topbar/TryVueNodeBanner.vue

diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 90d2b30b9..b1b147de6 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -4,6 +4,7 @@
   synced with the stateStorage (localStorage). -->
   <LiteGraphCanvasSplitterOverlay v-if="comfyAppReady">
     <template v-if="showUI && workflowTabsPosition === 'Topbar'" #workflow-tabs>
+      <TryVueNodeBanner />
       <div
         class="workflow-tabs-container pointer-events-auto relative h-9.5 w-full"
       >
@@ -152,6 +153,8 @@ import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isNativeWindow } from '@/utils/envUtil'
 
+import TryVueNodeBanner from '../topbar/TryVueNodeBanner.vue'
+
 const emit = defineEmits<{
   ready: []
 }>()
diff --git a/src/components/topbar/TryVueNodeBanner.vue b/src/components/topbar/TryVueNodeBanner.vue
new file mode 100644
index 000000000..23a9e5416
--- /dev/null
+++ b/src/components/topbar/TryVueNodeBanner.vue
@@ -0,0 +1,73 @@
+<template>
+  <div
+    v-if="showVueNodesBannerRef"
+    class="pointer-events-auto w-full h-10 bg-gradient-to-r from-blue-600 to-blue-700 flex items-center justify-between px-4"
+  >
+    <div class="w-5 h-5"></div>
+    <div class="flex items-center">
+      <i class="icon-[lucide--sparkles]"></i>
+      <h5 class="pl-2">{{ $t('vueNodesBanner.message') }}</h5>
+      <Button
+        class="cursor-pointer bg-transparent rounded h-7 px-3 border border-white text-white ml-4 text-xs"
+        @click="handleTryItOut"
+      >
+        {{ $t('vueNodesBanner.tryItOut') }}
+      </Button>
+    </div>
+    <Button
+      class="cursor-pointer bg-transparent border-0 outline-0 grid place-items-center"
+      unstyled
+      @click="handleDismiss"
+    >
+      <i class="w-5 h-5 icon-[lucide--x]"></i>
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { onMounted, ref } from 'vue'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+
+const STORAGE_KEY = 'vueNodesBannerDismissed'
+
+const settingStore = useSettingStore()
+const showVueNodesBannerRef = ref(false)
+
+const checkLocalStorage = (): boolean => {
+  try {
+    const value = localStorage.getItem(STORAGE_KEY)
+    // Return true if the banner was NOT dismissed (value is null or 'false')
+    return value !== 'true'
+  } catch (error) {
+    // If localStorage is not available (e.g., private browsing), show the banner
+    console.warn('localStorage not available:', error)
+    return true
+  }
+}
+
+const handleDismiss = (): void => {
+  showVueNodesBannerRef.value = false
+  try {
+    localStorage.setItem(STORAGE_KEY, 'true')
+  } catch (error) {
+    // Silently fail if localStorage is not available
+    console.warn('Failed to save banner dismissal:', error)
+  }
+}
+
+const handleTryItOut = async (): Promise<void> => {
+  try {
+    await settingStore.set('Comfy.VueNodes.Enabled', true)
+  } catch (error) {
+    console.error('Failed to enable Vue nodes:', error)
+  } finally {
+    handleDismiss()
+  }
+}
+
+onMounted(() => {
+  showVueNodesBannerRef.value = checkLocalStorage()
+})
+</script>
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index f95421968..0e990df42 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -1800,5 +1800,9 @@
         "Close": "Close"
       }
     }
+  },
+  "vueNodesBanner": {
+    "message": "Nodes just got a new look and feel",
+    "tryItOut": "Try it out"
   }
 }
\ No newline at end of file