refactor: v3 ui slots connection dots (#5316)

* refactor: v3 ui slots connection dots

* fix: use the new useTemplateRef

* fix: slot dark-theme border and hover styles

---------

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

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

@@ -2,13 +2,13 @@
   <div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
   <div
     v-else
-    class="lg-slot lg-slot--input flex items-center cursor-crosshair group"
+    class="lg-slot lg-slot--input flex items-center cursor-crosshair group rounded-r-lg"
     :class="{
       'opacity-70': readonly,
       'lg-slot--connected': connected,
       'lg-slot--compatible': compatible,
       'lg-slot--dot-only': dotOnly,
-      'pr-2 hover:bg-black/5': !dotOnly
+      'pr-6 hover:bg-black/5 hover:dark:bg-white/5': !dotOnly
     }"
     :style="{
       height: slotHeight + 'px'
@@ -16,15 +16,11 @@
     @pointerdown="handleClick"
   >
     <!-- Connection Dot -->
-    <div class="w-5 h-5 flex items-center justify-center group/slot">
-      <div
-        ref="slotElRef"
-        class="w-2 h-2 rounded-full bg-white transition-all duration-150 group-hover/slot:w-2.5 group-hover/slot:h-2.5 group-hover/slot:border-2 group-hover/slot:border-white"
-        :style="{
-          backgroundColor: slotColor
-        }"
-      />
-    </div>
+    <SlotConnectionDot
+      ref="connectionDotRef"
+      :color="slotColor"
+      class="-translate-x-1/2"
+    />
 
     <!-- Slot Name -->
     <span
@@ -37,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onErrorCaptured, ref } from 'vue'
+import { type Ref, computed, inject, onErrorCaptured, ref, watch } from 'vue'
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getSlotColor } from '@/constants/slotColors'
@@ -52,6 +48,8 @@ import {
   useDomSlotRegistration
 } from '@/renderer/core/layout/slots/useDomSlotRegistration'
 
+import SlotConnectionDot from './SlotConnectionDot.vue'
+
 interface InputSlotProps {
   node?: LGraphNode
   nodeId?: string
@@ -97,10 +95,25 @@ const transformState = inject<TransformState | undefined>(
   undefined
 )
 
-const { slotElRef } = useDomSlotRegistration(
-  props.nodeId ?? '',
-  props.index,
-  true,
-  transformState
+const connectionDotRef = ref<{ slotElRef: Ref<HTMLElement> }>()
+const slotElRef = ref<HTMLElement | null>(null)
+
+// Watch for connection dot ref changes and sync the element ref
+watch(
+  connectionDotRef,
+  (newValue) => {
+    if (newValue?.slotElRef) {
+      slotElRef.value = newValue.slotElRef.value
+    }
+  },
+  { immediate: true }
 )
+
+useDomSlotRegistration({
+  nodeId: props.nodeId ?? '',
+  slotIndex: props.index,
+  isInput: true,
+  element: slotElRef,
+  transform: transformState
+})
 </script>