From b27c741d7df6d8a61c2d38978862dd07157a9276 Mon Sep 17 00:00:00 2001
From: Simula_r <18093452+simula-r@users.noreply.github.com>
Date: Wed, 29 Oct 2025 21:46:47 -0700
Subject: [PATCH] Feat/vue nodes try it now banner (#6362)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Banner to try vue nodes. Clicking try it now will flip
shouldRenderVueNodes = true.

## Screenshots (if applicable)

<img width="1512" height="824" alt="image"
src="https://github.com/user-attachments/assets/dfd4bdc3-6753-45ee-86f1-ed7dc077f868"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6362-Feat-vue-nodes-try-it-now-banner-29b6d73d365081c29f04f9126f06ee9d)
by [Unito](https://www.unito.io)
---
 .../fixtures/utils/litegraphUtils.ts          |  2 +-
 src/components/graph/GraphCanvas.vue          |  6 +-
 src/components/toast/GlobalToast.vue          |  1 +
 src/components/topbar/TryVueNodeBanner.vue    | 71 +++++++++++++++++++
 src/locales/en/main.json                      |  4 ++
 5 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 src/components/topbar/TryVueNodeBanner.vue

diff --git a/browser_tests/fixtures/utils/litegraphUtils.ts b/browser_tests/fixtures/utils/litegraphUtils.ts
index 0449d05e4..5533fcaaa 100644
--- a/browser_tests/fixtures/utils/litegraphUtils.ts
+++ b/browser_tests/fixtures/utils/litegraphUtils.ts
@@ -503,7 +503,7 @@ export class NodeReference {
       for (const position of clickPositions) {
         // Clear any selection first
         await this.comfyPage.canvas.click({
-          position: { x: 50, y: 50 },
+          position: { x: 250, y: 250 },
           force: true
         })
         await this.comfyPage.nextFrame()
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 90d2b30b9..a8ecbaab2 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -3,8 +3,10 @@
   <!-- If load immediately, the top-level splitter stateKey won't be correctly
   synced with the stateStorage (localStorage). -->
   <LiteGraphCanvasSplitterOverlay v-if="comfyAppReady">
-    <template v-if="showUI && workflowTabsPosition === 'Topbar'" #workflow-tabs>
+    <template v-if="showUI" #workflow-tabs>
+      <TryVueNodeBanner />
       <div
+        v-if="workflowTabsPosition === 'Topbar'"
         class="workflow-tabs-container pointer-events-auto relative h-9.5 w-full"
       >
         <!-- Native drag area for Electron -->
@@ -152,6 +154,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/toast/GlobalToast.vue b/src/components/toast/GlobalToast.vue
index 73d3e9161..1955afe65 100644
--- a/src/components/toast/GlobalToast.vue
+++ b/src/components/toast/GlobalToast.vue
@@ -66,6 +66,7 @@ function updateToastPosition() {
     .p-toast.p-component.p-toast-top-right {
       top: ${rect.top + 100}px !important;
       right: ${window.innerWidth - (rect.left + rect.width) + 20}px !important;
+       z-index: 10000 !important;
     }
   `
 }
diff --git a/src/components/topbar/TryVueNodeBanner.vue b/src/components/topbar/TryVueNodeBanner.vue
new file mode 100644
index 000000000..30035904e
--- /dev/null
+++ b/src/components/topbar/TryVueNodeBanner.vue
@@ -0,0 +1,71 @@
+<template>
+  <div
+    v-if="showVueNodesBanner"
+    class="pointer-events-auto relative w-full h-10 bg-gradient-to-r from-blue-600 to-blue-700 flex items-center justify-center px-4"
+  >
+    <div class="flex items-center">
+      <i class="icon-[lucide--sparkles]"></i>
+      <span class="pl-2">{{ $t('vueNodesBanner.message') }}</span>
+      <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 absolute right-4"
+      unstyled
+      @click="handleDismiss"
+    >
+      <i class="w-5 h-5 icon-[lucide--x]"></i>
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLocalStorage } from '@vueuse/core'
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+
+const STORAGE_KEY = 'vueNodesBannerDismissed'
+
+const settingStore = useSettingStore()
+const bannerDismissed = useLocalStorage(STORAGE_KEY, false)
+
+const vueNodesEnabled = computed(() => {
+  try {
+    return settingStore.get('Comfy.VueNodes.Enabled') ?? false
+  } catch {
+    return false
+  }
+})
+
+const showVueNodesBanner = computed(() => {
+  if (vueNodesEnabled.value) {
+    return false
+  }
+
+  if (bannerDismissed.value) {
+    return false
+  }
+
+  return true
+})
+
+const handleDismiss = (): void => {
+  bannerDismissed.value = true
+}
+
+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()
+  }
+}
+</script>
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 51037d036..c4a3c7b0e 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -1819,5 +1819,9 @@
         "Close": "Close"
       }
     }
+  },
+  "vueNodesBanner": {
+    "message": "Nodes just got a new look and feel",
+    "tryItOut": "Try it out"
   }
 }
\ No newline at end of file