fix(DisplayCarousel): back arrow in carousel view after grid selection, no icons in grid view

- Carousel view shows back arrow (arrow-left) when entered from grid, grid icon otherwise
- Grid view has no overlay icons at all (removed toggle button)
- Track cameFromGrid state to toggle between grid/back icons
- Remove unused switchToSingle function

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

@@ -338,7 +338,7 @@ describe('DisplayCarousel Grid Mode', () => {
     )
   })
 
-  it('switches back to single mode via toggle button', async () => {
+  it('grid mode has no overlay icons', async () => {
     const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
 
     // Switch to grid via focus on image container
@@ -347,15 +347,42 @@ describe('DisplayCarousel Grid Mode', () => {
     await wrapper.find('[aria-label="Switch to grid view"]').trigger('click')
     await nextTick()
 
-    // 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)
+    // Grid mode should have no toggle/back button
+    expect(wrapper.find('[aria-label="Switch to single view"]').exists()).toBe(
+      false
+    )
+    expect(wrapper.find('[aria-label="Switch to grid view"]').exists()).toBe(
+      false
+    )
+  })
 
-    await singleToggle.trigger('click')
+  it('shows back arrow in single mode after selecting from grid', async () => {
+    const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+
+    // Switch to grid
+    await findImageContainer(wrapper).trigger('focusin')
+    await nextTick()
+    await wrapper.find('[aria-label="Switch to grid view"]').trigger('click')
     await nextTick()
 
-    // Should be back in single mode with main image
-    expect(wrapper.find('[aria-label="Previous image"]').exists()).toBe(true)
+    // Click first grid image to go back to single mode
+    const gridButtons = wrapper
+      .findAll('button')
+      .filter((btn) => btn.find('img').exists())
+    await gridButtons[0].trigger('click')
+    await nextTick()
+
+    // Hover to reveal controls
+    await findImageContainer(wrapper).trigger('focusin')
+    await nextTick()
+
+    // Should show back arrow (Switch to single view label) instead of grid icon
+    expect(wrapper.find('[aria-label="Switch to single view"]').exists()).toBe(
+      true
+    )
+    expect(wrapper.find('[aria-label="Switch to grid view"]').exists()).toBe(
+      false
+    )
   })
 
   it('clicking grid image switches to single mode focused on that image', async () => {
@@ -397,7 +424,9 @@ describe('DisplayCarousel Grid Mode', () => {
     await wrapper.setProps({ modelValue: [TEST_IMAGES_SMALL[0]] })
     await nextTick()
 
-    // Should revert to single mode (no grid toggle visible)
+    // Should revert to single mode with grid icon (not back arrow)
+    await findImageContainer(wrapper).trigger('focusin')
+    await nextTick()
     expect(wrapper.find('[aria-label="Switch to single view"]').exists()).toBe(
       false
     )

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

@@ -28,15 +28,23 @@
             @load="handleImageLoad"
           />
 
-          <!-- Toggle to Grid (hover, top-left) -->
+          <!-- Toggle to Grid / Back to Grid (hover, top-left) -->
           <button
             v-if="showControls && galleryImages.length > 1"
             :class="toggleButtonClass"
             class="absolute top-2 left-2"
-            :aria-label="t('g.switchToGridView')"
+            :aria-label="
+              cameFromGrid ? t('g.switchToSingleView') : t('g.switchToGridView')
+            "
             @click="switchToGrid"
           >
-            <i class="icon-[lucide--layout-grid] size-4" />
+            <i
+              :class="
+                cameFromGrid
+                  ? 'icon-[lucide--arrow-left] size-4'
+                  : 'icon-[lucide--layout-grid] size-4'
+              "
+            />
           </button>
 
           <!-- Action Buttons (hover, top-right) -->
@@ -143,17 +151,7 @@
           class="relative h-72 overflow-x-hidden overflow-y-auto rounded-sm bg-component-node-background"
           tabindex="0"
         >
-          <!-- Back to Single (top-left, always visible) -->
-          <button
-            :class="toggleButtonClass"
-            class="sticky top-2 left-2 z-10 mt-2 ml-2"
-            :aria-label="t('g.switchToSingleView')"
-            @click="switchToSingle"
-          >
-            <i class="icon-[lucide--arrow-left] size-4" />
-          </button>
-
-          <div class="-mt-10 flex flex-wrap content-start gap-1">
+          <div class="flex flex-wrap content-start gap-1">
             <button
               v-for="(item, index) in galleryImages"
               :key="getItemSrc(item)"
@@ -217,6 +215,7 @@ const activeIndex = ref(0)
 const displayMode = ref<DisplayMode>('single')
 const isHovered = ref(false)
 const isFocused = ref(false)
+const cameFromGrid = ref(false)
 const imageDimensions = ref<string | null>(null)
 const thumbnailRefs = ref<(HTMLElement | null)[]>([])
 const imageContainerEl = ref<HTMLDivElement>()
@@ -267,6 +266,7 @@ watch(galleryImages, (images) => {
   }
   if (images.length <= 1) {
     displayMode.value = 'single'
+    cameFromGrid.value = false
   }
 })
 
@@ -346,15 +346,11 @@ function switchToGrid() {
   displayMode.value = 'grid'
 }
 
-function switchToSingle() {
-  isHovered.value = false
-  displayMode.value = 'single'
-}
-
 function selectFromGrid(index: number) {
   activeIndex.value = index
   imageDimensions.value = null
   isHovered.value = false
+  cameFromGrid.value = true
   displayMode.value = 'single'
   scrollToActive()
 }