fix: PR feedback

Author: simula-r

src/components/graph/GraphCanvas.vue

@@ -3,9 +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 -->

src/components/topbar/TryVueNodeBanner.vue

@@ -1,12 +1,11 @@
 <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"
+    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="w-5 h-5"></div>
     <div class="flex items-center">
       <i class="icon-[lucide--sparkles]"></i>
-      <h5 class="pl-2">{{ $t('vueNodesBanner.message') }}</h5>
+      <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"
@@ -15,7 +14,7 @@
       </Button>
     </div>
     <Button
-      class="cursor-pointer bg-transparent border-0 outline-0 grid place-items-center"
+      class="cursor-pointer bg-transparent border-0 outline-0 grid place-items-center absolute right-4"
       unstyled
       @click="handleDismiss"
     >
@@ -25,34 +24,39 @@
 </template>
 
 <script setup lang="ts">
+import { useLocalStorage } from '@vueuse/core'
 import Button from 'primevue/button'
-import { onMounted, ref } from 'vue'
+import { computed } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 
 const STORAGE_KEY = 'vueNodesBannerDismissed'
 
 const settingStore = useSettingStore()
-const showVueNodesBannerRef = ref(false)
+const bannerDismissed = useLocalStorage(STORAGE_KEY, false)
 
-const checkLocalStorage = (): boolean => {
+const vueNodesEnabled = computed(() => {
   try {
-    const value = localStorage.getItem(STORAGE_KEY)
+    return settingStore.get('Comfy.VueNodes.Enabled') ?? false
+  } catch {
+    return false
+  }
+})
 
-    return value !== 'true'
-  } catch (error) {
-    console.warn('localStorage not available:', error)
-    return true
+const showVueNodesBanner = computed(() => {
+  if (vueNodesEnabled.value) {
+    return false
   }
-}
 
-const handleDismiss = (): void => {
-  showVueNodesBannerRef.value = false
-  try {
-    localStorage.setItem(STORAGE_KEY, 'true')
-  } catch (error) {
-    console.warn('Failed to save banner dismissal:', error)
+  if (bannerDismissed.value) {
+    return false
   }
+
+  return true
+})
+
+const handleDismiss = (): void => {
+  bannerDismissed.value = true
 }
 
 const handleTryItOut = async (): Promise<void> => {
@@ -64,8 +68,4 @@ const handleTryItOut = async (): Promise<void> => {
     handleDismiss()
   }
 }
-
-onMounted(() => {
-  showVueNodesBannerRef.value = checkLocalStorage()
-})
 </script>