From fed177eaf4ca013c67b058021684e347a477961c Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Sat, 13 Sep 2025 21:59:09 -0700
Subject: [PATCH] [refactor] convert watch to computed pattern - addresses
 @DrJKL's structure comment

Replaced ref + watch pattern with computed for displayTitle, providing cleaner
reactive behavior and eliminating the need for manual sync logic.
---
 .../vueNodes/components/NodeHeader.vue        | 28 ++++++-------------
 1 file changed, 9 insertions(+), 19 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
index 2af0653170..3197a872cd 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onErrorCaptured, ref, watch } from 'vue'
+import { computed, onErrorCaptured, ref } from 'vue'
 
 import EditableText from '@/components/common/EditableText.vue'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
@@ -74,26 +74,18 @@ const isEditing = ref(false)
 
 const nodeInfo = computed(() => props.nodeData || props.node)
 
+const EMPTY_STRING = ''
+const DEFAULT_TITLE = 'Untitled'
+
 const resolveTitle = (info: LGraphNode | VueNodeData | undefined) => {
-  const title = (info?.title ?? '').trim()
+  const title = (info?.title ?? EMPTY_STRING).trim()
   if (title.length > 0) return title
-  const type = (info?.type ?? '').trim()
-  return type.length > 0 ? type : 'Untitled'
+  const type = (info?.type ?? EMPTY_STRING).trim()
+  return type.length > 0 ? type : DEFAULT_TITLE
 }
 
-// Local state for title to provide immediate feedback
-const displayTitle = ref(resolveTitle(nodeInfo.value))
-
-// Watch for external changes to the node title or type
-watch(
-  () => [nodeInfo.value?.title, nodeInfo.value?.type] as const,
-  () => {
-    const next = resolveTitle(nodeInfo.value)
-    if (next !== displayTitle.value) {
-      displayTitle.value = next
-    }
-  }
-)
+// Computed title that provides reactive updates
+const displayTitle = computed(() => resolveTitle(nodeInfo.value))
 
 // Event handlers
 const handleCollapse = () => {
@@ -117,7 +109,5 @@ const handleTitleEdit = (newTitle: string) => {
 
 const handleTitleCancel = () => {
   isEditing.value = false
-  // Reset displayTitle to the current node title
-  displayTitle.value = nodeInfo.value?.title || 'Untitled'
 }
 </script>