Feat/vue nodes try it now banner

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()

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: []
 }>()

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;
     }
   `
 }

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>

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"
   }
 }