feat: show vue node settings toggle and show banner to switch back (#6382)

## Summary

- When switching from litegraph to vue nodes, show a toast that opens
settings to switch back
- Show a toggle in settings under Vue nodes for now called Modern Node
Design (Vue Nodes)
- Plan to update all the nomenclature as we get closer to GA

## Screenshots (if applicable)

<img width="1480" height="911" alt="image"
src="https://github.com/user-attachments/assets/fa3a34b9-2631-4175-917a-aa319f9fe415"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6382-feat-show-vue-node-settings-toggle-and-show-banner-to-switch-back-29b6d73d365081d29252c83349f06c0a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

src/composables/graph/useVueNodeLifecycle.ts

@@ -4,6 +4,7 @@ import { shallowRef, watch } from 'vue'
 import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import type { GraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
+import { useVueNodesMigrationDismissed } from '@/composables/useVueNodesMigrationDismissed'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
@@ -11,6 +12,7 @@ import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync'
 import { ensureCorrectLayoutScale } from '@/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale'
 import { app as comfyApp } from '@/scripts/app'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 
 function useVueNodeLifecycleIndividual() {
   const canvasStore = useCanvasStore()
@@ -21,6 +23,8 @@ function useVueNodeLifecycleIndividual() {
 
   const { startSync } = useLayoutSync()
 
+  const isVueNodeToastDismissed = useVueNodesMigrationDismissed()
+
   const initializeNodeManager = () => {
     // Use canvas graph if available (handles subgraph contexts), fallback to app graph
     const activeGraph = comfyApp.canvas?.graph
@@ -75,11 +79,20 @@ function useVueNodeLifecycleIndividual() {
   // Watch for Vue nodes enabled state changes
   watch(
     () => shouldRenderVueNodes.value && Boolean(comfyApp.canvas?.graph),
-    (enabled) => {
+    (enabled, wasEnabled) => {
       if (enabled) {
         initializeNodeManager()
         ensureCorrectLayoutScale()
+
+        if (!wasEnabled && !isVueNodeToastDismissed.value) {
+          useToastStore().add({
+            group: 'vue-nodes-migration',
+            severity: 'info',
+            life: 0
+          })
+        }
       } else {
+        comfyApp.canvas?.setDirty(true, true)
         disposeNodeManagerAndSyncs()
       }
     },