fix(DisplayCarousel): use back button in grid view and remove hover icons

- Change grid view top-left icon from square to arrow-left (back button)
- Make back button always visible (not hover-dependent)
- Remove hover opacity effect on grid thumbnails
- Use sticky positioning so back button stays visible on scroll

src/renderer/extensions/vueNodes/widgets/components/DisplayCarousel.test.ts

@@ -347,11 +347,7 @@ describe('DisplayCarousel Grid Mode', () => {
     await wrapper.find('[aria-label="Switch to grid view"]').trigger('click')
     await nextTick()
 
-    // Focus the grid container to reveal toggle
-    await findImageContainer(wrapper).trigger('focusin')
-    await nextTick()
-
-    // Switch back to single
+    // Back button is always visible in grid mode (no hover/focus needed)
     const singleToggle = wrapper.find('[aria-label="Switch to single view"]')
     expect(singleToggle.exists()).toBe(true)
 

src/renderer/extensions/vueNodes/widgets/components/DisplayCarousel.vue

@@ -142,41 +142,29 @@
           ref="gridContainerEl"
           class="relative h-72 overflow-x-hidden overflow-y-auto rounded-sm bg-component-node-background"
           tabindex="0"
-          @mouseenter="isHovered = true"
-          @mouseleave="isHovered = false"
-          @focusin="isFocused = true"
-          @focusout="handleFocusOut"
         >
-          <!-- Toggle to Single (hover, top-left) -->
+          <!-- Back to Single (top-left, always visible) -->
           <button
-            v-if="showControls"
             :class="toggleButtonClass"
-            class="absolute top-2 left-2 z-10"
+            class="sticky top-2 left-2 z-10 mt-2 ml-2"
             :aria-label="t('g.switchToSingleView')"
             @click="switchToSingle"
           >
-            <i class="icon-[lucide--square] size-4" />
+            <i class="icon-[lucide--arrow-left] size-4" />
           </button>
 
-          <div class="flex flex-wrap content-start gap-1">
+          <div class="-mt-10 flex flex-wrap content-start gap-1">
             <button
               v-for="(item, index) in galleryImages"
               :key="getItemSrc(item)"
               class="size-14 shrink-0 cursor-pointer overflow-hidden border-0 p-0"
               :aria-label="getItemAlt(item, index)"
-              @mouseenter="hoveredGridIndex = index"
-              @mouseleave="hoveredGridIndex = -1"
               @click="selectFromGrid(index)"
             >
               <img
                 :src="getItemThumbnail(item)"
                 :alt="getItemAlt(item, index)"
-                :class="
-                  cn(
-                    'size-full object-cover transition-opacity',
-                    hoveredGridIndex === index && 'opacity-50'
-                  )
-                "
+                class="size-full object-cover"
               />
             </button>
           </div>
@@ -229,7 +217,6 @@ const activeIndex = ref(0)
 const displayMode = ref<DisplayMode>('single')
 const isHovered = ref(false)
 const isFocused = ref(false)
-const hoveredGridIndex = ref(-1)
 const imageDimensions = ref<string | null>(null)
 const thumbnailRefs = ref<(HTMLElement | null)[]>([])
 const imageContainerEl = ref<HTMLDivElement>()