fix: vue nodes image preview widget, better multi image gallery support

Author: simula-r

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

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="imageUrls.length > 0"
-    class="image-preview group relative flex size-full min-h-16 min-w-16 flex-col px-2 justify-center"
+    class="image-preview outline-none group relative flex size-full min-h-16 min-w-16 flex-col px-2 justify-center"
     tabindex="0"
     role="region"
     :aria-label="$t('g.imagePreview')"
@@ -11,7 +11,7 @@
   >
     <!-- Image Wrapper -->
     <div
-      class="h-full w-full overflow-hidden rounded-[5px] bg-node-component-surface"
+      class="h-full w-full overflow-hidden rounded-[5px] bg-node-component-surface relative"
     >
       <!-- Error State -->
       <div
@@ -24,16 +24,13 @@
           {{ getImageFilename(currentImageUrl) }}
         </p>
       </div>
-
       <!-- Loading State -->
       <Skeleton
         v-if="isLoading && !imageError"
-        class="absolute inset-0 size-full"
         border-radius="5px"
-        width="16rem"
-        height="16rem"
+        width="100%"
+        height="100%"
       />
-
       <!-- Main Image -->
       <img
         v-if="!imageError"
@@ -83,29 +80,10 @@
           <i class="icon-[lucide--x] h-4 w-4" />
         </button>
       </div>
-
-      <!-- Multiple Images Navigation -->
-      <div
-        v-if="hasMultipleImages"
-        class="absolute right-2 bottom-2 left-2 flex justify-center gap-1"
-      >
-        <button
-          v-for="(_, index) in imageUrls"
-          :key="index"
-          :class="getNavigationDotClass(index)"
-          :aria-label="
-            $t('g.viewImageOfTotal', {
-              index: index + 1,
-              total: imageUrls.length
-            })
-          "
-          @click="setCurrentIndex(index)"
-        />
-      </div>
     </div>
 
     <!-- Image Dimensions -->
-    <div class="mt-2 text-center text-xs text-white">
+    <div class="pt-2 text-center text-xs text-white">
       <span v-if="imageError" class="text-red-400">
         {{ $t('g.errorLoadingImage') }}
       </span>
@@ -116,6 +94,21 @@
         {{ actualDimensions || $t('g.calculatingDimensions') }}
       </span>
     </div>
+    <!-- Multiple Images Navigation -->
+    <div v-if="hasMultipleImages" class="flex justify-center gap-1 pt-4">
+      <button
+        v-for="(_, index) in imageUrls"
+        :key="index"
+        :class="getNavigationDotClass(index)"
+        :aria-label="
+          $t('g.viewImageOfTotal', {
+            index: index + 1,
+            total: imageUrls.length
+          })
+        "
+        @click="setCurrentIndex(index)"
+      />
+    </div>
   </div>
 </template>
 
@@ -230,6 +223,7 @@ const handleRemove = () => {
 }
 
 const setCurrentIndex = (index: number) => {
+  if (currentIndex.value === index) return
   if (index >= 0 && index < props.imageUrls.length) {
     currentIndex.value = index
     actualDimensions.value = null
@@ -248,8 +242,8 @@ const handleMouseLeave = () => {
 
 const getNavigationDotClass = (index: number) => {
   return [
-    'w-2 h-2 rounded-full transition-all duration-200 border-0 cursor-pointer',
-    index === currentIndex.value ? 'bg-white' : 'bg-white/50 hover:bg-white/80'
+    'size-2 rounded-full transition-all duration-200 border-0 cursor-pointer p-0',
+    index === currentIndex.value ? 'bg-white' : 'bg-white/75 hover:bg-white/80'
   ]
 }