[backport core/1.38] fix(vue-nodes): hide slot labels for reroute nodes with empty names (#8727)

Backport of #8574 to `core/1.38`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8727-backport-core-1-38-fix-vue-nodes-hide-slot-labels-for-reroute-nodes-with-empty-names-3006d73d365081cc85b0fbb503fc130b)
by [Unito](https://www.unito.io)

Co-authored-by: Christian Byrne <cbyrne@comfy.org>

src/renderer/extensions/vueNodes/components/InputSlot.vue

@@ -7,7 +7,7 @@
       cn(
         'lg-slot lg-slot--input flex items-center group rounded-r-lg m-0',
         'cursor-crosshair',
-        props.dotOnly ? 'lg-slot--dot-only' : 'pr-6',
+        dotOnly ? 'lg-slot--dot-only' : 'pr-6',
         {
           'lg-slot--connected': props.connected,
           'lg-slot--compatible': props.compatible,
@@ -36,7 +36,7 @@
     <!-- Slot Name -->
     <div class="h-full flex items-center min-w-0">
       <span
-        v-if="!dotOnly"
+        v-if="!props.dotOnly && !hasNoLabel"
         :class="
           cn(
             'truncate text-node-component-slot-text',
@@ -47,8 +47,7 @@
         {{
           slotData.label ||
           slotData.localized_name ||
-          slotData.name ||
+          (slotData.name ?? `Input ${index}`)
-          `Input ${index}`
         }}
       </span>
     </div>
@@ -84,6 +83,14 @@ interface InputSlotProps {
 
 const props = defineProps<InputSlotProps>()
 
+const hasNoLabel = computed(
+  () =>
+    !props.slotData.label &&
+    !props.slotData.localized_name &&
+    props.slotData.name === ''
+)
+const dotOnly = computed(() => props.dotOnly || hasNoLabel.value)
+
 const executionStore = useExecutionStore()
 
 const hasSlotError = computed(() => {

src/renderer/extensions/vueNodes/components/OutputSlot.vue

@@ -3,8 +3,11 @@
   <div v-else v-tooltip.right="tooltipConfig" :class="slotWrapperClass">
     <div class="relative h-full flex items-center min-w-0">
       <!-- Slot Name -->
-      <span v-if="!dotOnly" class="truncate text-node-component-slot-text">
+      <span
-        {{ slotData.localized_name || slotData.name || `Output ${index}` }}
+        v-if="!props.dotOnly && !hasNoLabel"
+        class="truncate text-node-component-slot-text"
+      >
+        {{ slotData.localized_name || (slotData.name ?? `Output ${index}`) }}
       </span>
     </div>
     <!-- Connection Dot -->
@@ -44,6 +47,11 @@ interface OutputSlotProps {
 
 const props = defineProps<OutputSlotProps>()
 
+const hasNoLabel = computed(
+  () => !props.slotData.localized_name && props.slotData.name === ''
+)
+const dotOnly = computed(() => props.dotOnly || hasNoLabel.value)
+
 // Error boundary implementation
 const renderError = ref<string | null>(null)
 
@@ -79,7 +87,7 @@ const slotWrapperClass = computed(() =>
   cn(
     'lg-slot lg-slot--output flex items-center justify-end group rounded-l-lg h-6',
     'cursor-crosshair',
-    props.dotOnly ? 'lg-slot--dot-only justify-center' : 'pl-6',
+    dotOnly.value ? 'lg-slot--dot-only justify-center' : 'pl-6',
     {
       'lg-slot--connected': props.connected,
       'lg-slot--compatible': props.compatible,