@fy-/fws-vue 2.2.45 → 2.2.47

package/components/ui/DefaultGallery.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { Component } from 'vue'
 import type { APIPaging } from '../../composables/rest'
-import { Dialog, DialogPanel, TransitionRoot } from '@headlessui/vue'
 import {
   ArrowLeftCircleIcon,
   ArrowRightCircleIcon,
+  ArrowsPointingOutIcon, // For fullscreen button
   ChevronDoubleLeftIcon,
   ChevronDoubleRightIcon,
   XCircleIcon,
@@ -16,6 +16,20 @@ import DefaultPaging from './DefaultPaging.vue'
 const isGalleryOpen = ref<boolean>(false)
 const eventBus = useEventBus()
 const sidePanel = ref<boolean>(true)
+const isImageLoading = ref<boolean>(false)
+const galleryRef = ref<HTMLElement | null>(null)
+const isFullscreen = ref<boolean>(false)
+
+// For mobile image manipulation
+const scale = ref<number>(1)
+const startDistance = ref<number>(0)
+const isPinching = ref<boolean>(false)
+const panPosition = reactive({ x: 0, y: 0 })
+const startPanPosition = reactive({ x: 0, y: 0 })
+const isPanning = ref<boolean>(false)
+const lastTapTime = ref<number>(0)
+const touchCenter = reactive({ x: 0.5, y: 0.5 }) // Default to center
+const showMobileThumbnails = ref<boolean>(false)
 
 const props = withDefaults(
   defineProps<{
@@ -65,13 +79,89 @@ const modelValue = computed({
 })
 
 const direction = ref<'next' | 'prev'>('next')
+const imageCounter = computed(() => `${modelValue.value + 1} / ${props.images.length}`)
+let focusableElements: HTMLElement[] = []
+
+// Trap focus within gallery for accessibility
+function getFocusableElements(element: HTMLElement): HTMLElement[] {
+  return Array.from(
+    element.querySelectorAll(
+      'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])',
+    ),
+  ).filter(
+    el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'),
+  ) as HTMLElement[]
+}
+
+function handleTabKey(event: KeyboardEvent) {
+  if (!isGalleryOpen.value || event.key !== 'Tab' || focusableElements.length <= 1) return
+
+  const firstElement = focusableElements[0]
+  const lastElement = focusableElements[focusableElements.length - 1]
+
+  // Shift + Tab on first element should focus the last element
+  if (event.shiftKey && document.activeElement === firstElement) {
+    event.preventDefault()
+    lastElement.focus()
+  }
+  // Tab on last element should focus the first element
+  else if (!event.shiftKey && document.activeElement === lastElement) {
+    event.preventDefault()
+    firstElement.focus()
+  }
+}
+
+// Toggle fullscreen mode
+function toggleFullscreen() {
+  isFullscreen.value = !isFullscreen.value
+
+  // Reset zoom and pan when toggling fullscreen
+  scale.value = 1
+  panPosition.x = 0
+  panPosition.y = 0
+}
 
 function setModal(value: boolean) {
   if (value === true) {
     if (props.onOpen) props.onOpen()
+    document.body.style.overflow = 'hidden' // Prevent scrolling when gallery is open
+    if (!import.meta.env.SSR) {
+      document.addEventListener('keydown', handleKeyboardInput)
+      document.addEventListener('keyup', handleKeyboardRelease)
+      document.addEventListener('keydown', handleTabKey)
+    }
+
+    // Initialize focus trap after gallery opens
+    setTimeout(() => {
+      if (galleryRef.value) {
+        focusableElements = getFocusableElements(galleryRef.value)
+        // Focus the close button if present
+        const closeButton = galleryRef.value.querySelector('button[aria-label="Close gallery"]') as HTMLElement
+        if (closeButton) {
+          closeButton.focus()
+        }
+        else if (focusableElements.length > 0) {
+          focusableElements[0].focus()
+        }
+      }
+    }, 100)
   }
   else {
     if (props.onClose) props.onClose()
+    document.body.style.overflow = '' // Restore scrolling
+
+    // Reset zoom, pan, fullscreen and thumbnail states when closing
+    scale.value = 1
+    panPosition.x = 0
+    panPosition.y = 0
+    isFullscreen.value = false
+    showMobileThumbnails.value = false
+
+    if (!import.meta.env.SSR) {
+      document.removeEventListener('keydown', handleKeyboardInput)
+      document.removeEventListener('keyup', handleKeyboardRelease)
+      document.removeEventListener('keydown', handleTabKey)
+    }
   }
   isGalleryOpen.value = value
 }
@@ -87,7 +177,13 @@ function openGalleryImage(index: number | undefined) {
 }
 
 function goNextImage() {
+  // Reset zoom and pan when navigating
+  scale.value = 1
+  panPosition.x = 0
+  panPosition.y = 0
+
   direction.value = 'next'
+  isImageLoading.value = true
   if (modelValue.value < props.images.length - 1) {
     modelValue.value++
   }
@@ -97,7 +193,13 @@ function goNextImage() {
 }
 
 function goPrevImage() {
+  // Reset zoom and pan when navigating
+  scale.value = 1
+  panPosition.x = 0
+  panPosition.y = 0
+
   direction.value = 'prev'
+  isImageLoading.value = true
   if (modelValue.value > 0) {
     modelValue.value--
   }
@@ -115,41 +217,159 @@ const modelValueSrc = computed(() => {
 
 const start = reactive({ x: 0, y: 0 })
 
+// Calculate the distance between two touch points
+function getDistance(touch1: Touch, touch2: Touch): number {
+  const dx = touch1.clientX - touch2.clientX
+  const dy = touch1.clientY - touch2.clientY
+  return Math.sqrt(dx * dx + dy * dy)
+}
+
+// Calculate the center point between two touches
+function getTouchCenter(touch1: Touch, touch2: Touch, element: HTMLElement) {
+  const rect = element.getBoundingClientRect()
+  const centerX = (touch1.clientX + touch2.clientX) / 2
+  const centerY = (touch1.clientY + touch2.clientY) / 2
+
+  return {
+    x: (centerX - rect.left) / rect.width,
+    y: (centerY - rect.top) / rect.height,
+  }
+}
+
 function touchStart(event: TouchEvent) {
-  const touch = event.touches[0]
-  const targetElement = touch.target as HTMLElement
+  const now = Date.now()
+  const container = event.currentTarget as HTMLElement
+
+  // Handle double tap detection for zoom
+  if (now - lastTapTime.value < 300 && event.touches.length === 1) {
+    if (scale.value !== 1) {
+      // Reset zoom and pan on double tap if already zoomed
+      scale.value = 1
+      panPosition.x = 0
+      panPosition.y = 0
+    }
+    else {
+      // Zoom to a moderate level on double tap
+      scale.value = 2.5
+      // Center zoom on tap location
+      const touch = event.touches[0]
+      const rect = container.getBoundingClientRect()
+      touchCenter.x = (touch.clientX - rect.left) / rect.width
+      touchCenter.y = (touch.clientY - rect.top) / rect.height
+    }
+    event.preventDefault()
+    return
+  }
+
+  lastTapTime.value = now
+
+  // Detect if we're starting to pinch zoom
+  if (event.touches.length === 2) {
+    isPinching.value = true
+    startDistance.value = getDistance(event.touches[0], event.touches[1])
+    const center = getTouchCenter(event.touches[0], event.touches[1], container)
+    touchCenter.x = center.x
+    touchCenter.y = center.y
+    event.preventDefault()
+    return
+  }
+
+  // If we're already zoomed in, enable panning with one finger
+  if (scale.value > 1 && event.touches.length === 1) {
+    isPanning.value = true
+    startPanPosition.x = panPosition.x
+    startPanPosition.y = panPosition.y
+    start.x = event.touches[0].clientX
+    start.y = event.touches[0].clientY
+    event.preventDefault()
+    return
+  }
+
+  // Normal swipe behavior if not zoomed
+  if (scale.value <= 1 && event.touches.length === 1) {
+    const touch = event.touches[0]
+    const targetElement = touch.target as HTMLElement
+
+    // Check if the touch started on an interactive element
+    if (targetElement.closest('button, a, input, textarea, select')) {
+      return // Don't handle swipe if interacting with an interactive element
+    }
+
+    start.x = touch.screenX
+    start.y = touch.screenY
+  }
+}
+
+function touchMove(event: TouchEvent) {
+  // Handle pinch zoom
+  if (isPinching.value && event.touches.length === 2) {
+    const currentDistance = getDistance(event.touches[0], event.touches[1])
+    const newScale = (currentDistance / startDistance.value) * scale.value
 
-  // Check if the touch started on an interactive element
-  if (targetElement.closest('button, a, input, textarea, select')) {
-    return // Don't handle swipe if interacting with an interactive element
+    // Limit zoom range
+    scale.value = Math.min(Math.max(0.5, newScale), 5)
+    event.preventDefault()
+    return
   }
 
-  start.x = touch.screenX
-  start.y = touch.screenY
+  // Handle panning when zoomed in
+  if (isPanning.value && event.touches.length === 1) {
+    const deltaX = event.touches[0].clientX - start.x
+    const deltaY = event.touches[0].clientY - start.y
+
+    // Calculate how much the pan should be constrained based on zoom level
+    const constraint = Math.max(0, scale.value - 1) * 150
+
+    panPosition.x = Math.min(Math.max(startPanPosition.x + deltaX, -constraint), constraint)
+    panPosition.y = Math.min(Math.max(startPanPosition.y + deltaY, -constraint), constraint)
+
+    event.preventDefault()
+  }
 }
+
 function touchEnd(event: TouchEvent) {
-  const touch = event.changedTouches[0]
-  const targetElement = touch.target as HTMLElement
+  // Reset pinch zoom state
+  if (isPinching.value) {
+    isPinching.value = false
+    return
+  }
 
-  // Check if the touch ended on an interactive element
-  if (targetElement.closest('button, a, input, textarea, select')) {
-    return // Don't handle swipe if interacting with an interactive element
+  // Reset panning state
+  if (isPanning.value) {
+    isPanning.value = false
+    return
   }
 
-  const end = { x: touch.screenX, y: touch.screenY }
+  // If we're zoomed in, don't handle swiping between images
+  if (scale.value > 1) {
+    return
+  }
 
-  const diffX = start.x - end.x
-  const diffY = start.y - end.y
+  // Normal swipe behavior if not zoomed
+  if (event.changedTouches.length === 1) {
+    const touch = event.changedTouches[0]
+    const targetElement = touch.target as HTMLElement
 
-  // Add a threshold to prevent accidental swipes
-  if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
-    if (diffX > 0) {
-      direction.value = 'next'
-      goNextImage()
+    // Check if the touch ended on an interactive element
+    if (targetElement.closest('button, a, input, textarea, select')) {
+      return // Don't handle swipe if interacting with an interactive element
     }
-    else {
-      direction.value = 'prev'
-      goPrevImage()
+
+    const end = { x: touch.screenX, y: touch.screenY }
+
+    const diffX = start.x - end.x
+    const diffY = start.y - end.y
+
+    // Add a threshold to prevent accidental swipes
+    if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
+      if (diffX > 0) {
+        direction.value = 'next'
+        goNextImage()
+      }
+      else {
+        direction.value = 'prev'
+        goPrevImage()
+      }
     }
   }
 }
@@ -164,8 +384,31 @@ function getBorderColor(i: any) {
 const isKeyPressed = ref<boolean>(false)
 
 function handleKeyboardInput(event: KeyboardEvent) {
+  if (!isGalleryOpen.value) return
   if (isKeyPressed.value) return
+
   switch (event.key) {
+    case 'Escape':
+      if (scale.value > 1) {
+        // If zoomed in, reset zoom first
+        scale.value = 1
+        panPosition.x = 0
+        panPosition.y = 0
+      }
+      else if (showMobileThumbnails.value) {
+        // If mobile thumbnails are shown, hide them first
+        showMobileThumbnails.value = false
+      }
+      else if (isFullscreen.value) {
+        // If in fullscreen, exit fullscreen first
+        isFullscreen.value = false
+      }
+      else {
+        // Otherwise close the gallery
+        event.preventDefault()
+        setModal(false)
+      }
+      break
     case 'ArrowRight':
       isKeyPressed.value = true
       direction.value = 'next'
@@ -176,6 +419,9 @@ function handleKeyboardInput(event: KeyboardEvent) {
       direction.value = 'prev'
       goPrevImage()
       break
+    case 'f':
+      toggleFullscreen()
+      break
     default:
       break
   }
@@ -187,92 +433,161 @@ function handleKeyboardRelease(event: KeyboardEvent) {
   }
 }
 
+function onImageLoad() {
+  isImageLoading.value = false
+}
+
 function closeGallery() {
   setModal(false)
 }
 
+// Click outside gallery content to close
+function handleBackdropClick(event: MouseEvent) {
+  if (event.target === event.currentTarget) {
+    setModal(false)
+  }
+}
+
+// Toggle mobile thumbnails panel
+function toggleMobileThumbnails() {
+  showMobileThumbnails.value = !showMobileThumbnails.value
+}
+
+// Computed transform style for zoom and pan
+const imageTransform = computed(() => {
+  return `scale(${scale.value}) translate(${panPosition.x / scale.value}px, ${panPosition.y / scale.value}px)`
+})
+
+// Transform origin for zoom based on touch position
+const imageTransformOrigin = computed(() => {
+  return `${touchCenter.x * 100}% ${touchCenter.y * 100}%`
+})
+
 onMounted(() => {
   eventBus.on(`${props.id}GalleryImage`, openGalleryImage)
   eventBus.on(`${props.id}Gallery`, openGalleryImage)
   eventBus.on(`${props.id}GalleryClose`, closeGallery)
-  if (window !== undefined && !import.meta.env.SSR) {
-    window.addEventListener('keydown', handleKeyboardInput)
-    window.addEventListener('keyup', handleKeyboardRelease)
-  }
 })
 
 onUnmounted(() => {
   eventBus.off(`${props.id}Gallery`, openGalleryImage)
   eventBus.off(`${props.id}GalleryImage`, openGalleryImage)
   eventBus.off(`${props.id}GalleryClose`, closeGallery)
-  if (window !== undefined && !import.meta.env.SSR) {
-    window.removeEventListener('keydown', handleKeyboardInput)
-    window.removeEventListener('keyup', handleKeyboardRelease)
+  if (!import.meta.env.SSR) {
+    document.removeEventListener('keydown', handleKeyboardInput)
+    document.removeEventListener('keyup', handleKeyboardRelease)
+    document.removeEventListener('keydown', handleTabKey)
+    document.body.style.overflow = '' // Ensure body scrolling is restored
   }
 })
 </script>
 
 <template>
   <div>
-    <TransitionRoot
-      :show="isGalleryOpen"
-      as="template"
-      enter="duration-300 ease-out"
-      enter-from="opacity-0"
-      enter-to="opacity-100"
-      leave="duration-200 ease-in"
-      leave-from="opacity-100"
-      leave-to="opacity-0"
+    <transition
+      enter-active-class="duration-300 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="duration-200 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
     >
-      <Dialog
-        :open="isGalleryOpen"
-        class="fixed bg-fv-neutral-900 text-white inset-0 max-w-[100vw] overflow-y-auto overflow-x-hidden"
+      <div
+        v-if="isGalleryOpen"
+        ref="galleryRef"
+        class="fixed bg-gradient-to-b from-fv-neutral-950 to-fv-neutral-900 text-white inset-0 max-w-[100vw] overflow-hidden"
+        :class="{ 'fullscreen-mode': isFullscreen }"
         style="z-index: 37"
-        @close="setModal"
+        role="dialog"
+        aria-modal="true"
+        @click="handleBackdropClick"
       >
-        <DialogPanel
-          class="relative w-full max-w-full flex flex-col justify-center items-center"
+        <div
+          class="relative w-full max-w-full flex flex-col justify-center items-center h-full"
           style="z-index: 38"
+          @click.stop
         >
-          <div class="flex flex-grow gap-4 w-full max-w-full">
-            <div class="flex-grow h-[100vh] flex items-center relative">
-              <button
-                class="btn w-9 h-9 rounded-full absolute top-4 left-2"
-                style="z-index: 39"
-                @click="setModal(false)"
-              >
-                <component :is="closeIcon" class="w-8 h-8" />
-              </button>
+          <div class="flex flex-grow gap-4 w-full max-w-full h-full">
+            <div class="flex-grow h-full flex items-center relative">
+              <!-- Top control bar -->
+              <div class="absolute top-0 left-0 right-0 flex justify-between items-center p-4 bg-gradient-to-b from-black/50 to-transparent z-[40]">
+                <div class="flex items-center gap-2">
+                  <button
+                    aria-label="Close gallery"
+                    class="rounded-full p-2 bg-black/40 backdrop-blur-sm hover:bg-black/60 transition-colors"
+                    @click="setModal(false)"
+                  >
+                    <component :is="closeIcon" class="w-6 h-6" />
+                  </button>
+
+                  <!-- Mobile thumbnails toggle button -->
+                  <button
+                    v-if="images.length > 1"
+                    aria-label="Toggle thumbnails"
+                    class="sm:hidden rounded-full p-2 bg-black/40 backdrop-blur-sm hover:bg-black/60 transition-colors"
+                    @click="toggleMobileThumbnails"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                      <path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
+                    </svg>
+                  </button>
+
+                  <!-- Fullscreen toggle button -->
+                  <button
+                    aria-label="Toggle fullscreen"
+                    class="rounded-full p-2 bg-black/40 backdrop-blur-sm hover:bg-black/60 transition-colors"
+                    @click="toggleFullscreen"
+                  >
+                    <ArrowsPointingOutIcon class="w-5 h-5" />
+                  </button>
+                </div>
+
+                <div class="px-3 py-1 rounded-full bg-black/40 backdrop-blur-sm text-white text-sm">
+                  {{ imageCounter }}
+                </div>
+              </div>
 
               <div
-                class="flex h-[100vh] relative flex-grow items-center justify-center gap-2 z-[1]"
+                class="flex h-full relative flex-grow items-center justify-center gap-2 z-[1]"
               >
+                <!-- Left nav button (larger touch area on mobile) -->
                 <div
-                  class="hidden lg:relative z-[2] lg:flex w-10 flex-shrink-0 items-center justify-center flex-0"
+                  class="absolute left-0 top-0 bottom-0 w-1/3 flex items-center justify-start pl-4 lg:pl-10 z-[2]"
+                  @click="scale <= 1 && goPrevImage()"
                 >
                   <button
                     v-if="images.length > 1"
-                    class="btn p-1 rounded-full"
-                    @click="goPrevImage()"
+                    aria-label="Previous image"
+                    class="rounded-full p-2 bg-black/40 backdrop-blur-sm hover:bg-black/60 transition-colors hidden sm:block"
+                    @click.stop
                   >
-                    <ArrowLeftCircleIcon class="w-8 h-8" />
+                    <ArrowLeftCircleIcon class="w-6 h-6" />
                   </button>
                 </div>
+
                 <div
                   class="flex-1 flex flex-col z-[2] items-center justify-center max-w-full lg:max-w-[calc(100vw - 256px)] relative"
                 >
+                  <!-- Loading indicator -->
+                  <div
+                    v-if="isImageLoading"
+                    class="absolute inset-0 flex items-center justify-center z-10 bg-fv-neutral-900/30 backdrop-blur-sm"
+                  >
+                    <div class="w-10 h-10 border-t-2 border-white rounded-full animate-spin" />
+                  </div>
+
                   <transition
                     :name="direction === 'next' ? 'slide-next' : 'slide-prev'"
                     mode="out-in"
                   >
                     <div
-                      v-if="true"
                       :key="`image-display-${modelValue}`"
                       class="flex-1 w-full max-w-full flex flex-col items-center justify-center absolute inset-0 z-[2]"
                     >
                       <div
-                        class="flex-1 w-full max-w-full flex items-center justify-center"
+                        class="flex-1 w-full max-w-full flex items-center justify-center overflow-hidden"
                         @touchstart="touchStart"
+                        @touchmove="touchMove"
                         @touchend="touchEnd"
                       >
                         <template
@@ -282,120 +597,255 @@ onUnmounted(() => {
                             <component
                               :is="videoComponent"
                               :src="isVideo(images[modelValue])"
-                              class="shadow max-w-full h-auto object-contain max-h-[85vh]"
+                              class="shadow-2xl max-w-full h-auto object-contain max-h-[85vh]"
                             />
                           </ClientOnly>
                         </template>
                         <template v-else>
-                          <img
-                            v-if="modelValueSrc && imageComponent === 'img'"
-                            class="shadow max-w-full h-auto object-contain max-h-[85vh]"
-                            :src="modelValueSrc"
-                          >
-                          <component
-                            :is="imageComponent"
-                            v-else-if="modelValueSrc && imageComponent"
-                            :image="modelValueSrc.image"
-                            :variant="modelValueSrc.variant"
-                            :alt="modelValueSrc.alt"
-                            class="shadow max-w-full h-auto object-contain max-h-[85vh]"
-                          />
+                          <div class="image-container">
+                            <img
+                              v-if="modelValueSrc && imageComponent === 'img'"
+                              class="shadow-2xl max-w-full h-auto object-contain max-h-[80vh] transition-transform duration-100 rounded-md"
+                              :class="{ 'cursor-grab': scale > 1, 'cursor-zoom-in': scale === 1 }"
+                              :style="{
+                                transform: imageTransform,
+                                transformOrigin: imageTransformOrigin,
+                                touchAction: scale > 1 ? 'none' : 'auto',
+                              }"
+                              :src="modelValueSrc"
+                              :alt="`Gallery image ${modelValue + 1}`"
+                              @load="onImageLoad"
+                            >
+                            <component
+                              :is="imageComponent"
+                              v-else-if="modelValueSrc && imageComponent"
+                              :image="modelValueSrc.image"
+                              :variant="modelValueSrc.variant"
+                              :alt="modelValueSrc.alt"
+                              class="shadow-2xl max-w-full h-auto object-contain max-h-[80vh] transition-transform duration-100 rounded-md"
+                              :style="{
+                                transform: imageTransform,
+                                transformOrigin: imageTransformOrigin,
+                                touchAction: scale > 1 ? 'none' : 'auto',
+                              }"
+                              @load="onImageLoad"
+                            />
+                          </div>
                         </template>
                       </div>
+
+                      <!-- Mobile zoom hint -->
+                      <div
+                        v-if="scale === 1 && !isImageLoading"
+                        class="text-xs text-white/60 p-2 sm:hidden"
+                      >
+                        Double-tap to zoom
+                      </div>
+
                       <div
-                        class="flex-0 py-2 flex items-center justify-center max-w-full w-full relative !z-[3]"
+                        class="flex-0 py-4 flex items-center justify-center max-w-full w-full relative !z-[3]"
                       >
                         <slot :value="images[modelValue]" />
                       </div>
                     </div>
                   </transition>
                 </div>
+
+                <!-- Right nav button (larger touch area on mobile) -->
                 <div
-                  class="hidden lg:flex w-10 flex-shrink-0 items-center justify-center"
+                  class="absolute right-0 top-0 bottom-0 w-1/3 flex items-center justify-end pr-4 lg:pr-10 z-[2]"
+                  @click="scale <= 1 && goNextImage()"
                 >
-                  <button
-                    class="btn w-9 h-9 rounded-full hidden lg:block absolute top-4"
-                    :class="{
-                      '-right-4': sidePanel,
-                      'right-2': !sidePanel,
-                    }"
-                    style="z-index: 39"
-                    @click="() => (sidePanel = !sidePanel)"
-                  >
-                    <ChevronDoubleRightIcon v-if="sidePanel" class="w-7 h-7" />
-                    <ChevronDoubleLeftIcon v-else class="w-7 h-7" />
-                  </button>
                   <button
                     v-if="images.length > 1"
-                    class="btn p-1 rounded-full"
-                    @click="goNextImage()"
+                    aria-label="Next image"
+                    class="rounded-full p-2 bg-black/40 backdrop-blur-sm hover:bg-black/60 transition-colors hidden sm:block"
+                    @click.stop
                   >
-                    <ArrowRightCircleIcon class="w-8 h-8" />
+                    <ArrowRightCircleIcon class="w-6 h-6" />
                   </button>
                 </div>
+
+                <!-- Sidebar toggle button (desktop) -->
+                <button
+                  class="absolute top-4 right-4 rounded-full p-2 bg-black/40 backdrop-blur-sm hover:bg-black/60 transition-colors hidden lg:block"
+                  style="z-index: 39"
+                  :aria-label="sidePanel ? 'Hide thumbnails' : 'Show thumbnails'"
+                  @click="() => (sidePanel = !sidePanel)"
+                >
+                  <ChevronDoubleRightIcon v-if="sidePanel" class="w-5 h-5" />
+                  <ChevronDoubleLeftIcon v-else class="w-5 h-5" />
+                </button>
               </div>
             </div>
 
-            <TransitionRoot
-              :show="sidePanel"
-              as="div"
-              enter="transform transition ease-in-out duration-300"
-              enter-from="translate-x-full"
-              enter-to="translate-x-0"
-              leave="transform transition ease-in-out duration-300"
-              leave-from="translate-x-0"
-              leave-to="translate-x-full"
-              class="hidden lg:block flex-shrink-0 w-64 bg-fv-neutral-800 h-[100vh] max-h-[100vh] overflow-y-auto"
+            <!-- Sidebar with thumbnails (desktop) -->
+            <transition
+              enter-active-class="transform transition ease-in-out duration-300"
+              enter-from-class="translate-x-full"
+              enter-to-class="translate-x-0"
+              leave-active-class="transform transition ease-in-out duration-300"
+              leave-from-class="translate-x-0"
+              leave-to-class="translate-x-full"
             >
-              <!-- Side panel content -->
-              <div v-if="paging" class="flex items-center justify-center">
-                <DefaultPaging :id="id" :items="paging" />
+              <div
+                v-if="sidePanel"
+                class="hidden lg:block flex-shrink-0 w-64 bg-fv-neutral-800/80 backdrop-blur-sm h-full max-h-full overflow-y-auto border-l border-fv-neutral-700/50"
+              >
+                <!-- Sidebar header -->
+                <div class="p-4 border-b border-fv-neutral-700/50">
+                  <h3 class="text-lg font-medium">
+                    Gallery
+                  </h3>
+                </div>
+
+                <!-- Paging controls if provided -->
+                <div v-if="paging" class="flex items-center justify-center p-2 border-b border-fv-neutral-700/50">
+                  <DefaultPaging :id="id" :items="paging" />
+                </div>
+
+                <!-- Thumbnails grid -->
+                <div class="grid grid-cols-2 gap-2 p-4">
+                  <div
+                    v-for="i in images.length"
+                    :key="`bg_${id}_${i}`"
+                    class="relative group"
+                  >
+                    <!-- Active image indicator -->
+                    <div
+                      v-if="i - 1 === modelValue"
+                      class="absolute inset-0 border-2 border-white rounded-lg z-10"
+                    />
+
+                    <!-- Thumbnail -->
+                    <div
+                      class="overflow-hidden rounded-lg transition-all duration-200"
+                      :class="{ 'ring-2 ring-white': i - 1 === modelValue, 'opacity-60 group-hover:opacity-100': i - 1 !== modelValue }"
+                    >
+                      <img
+                        v-if="imageComponent === 'img'"
+                        class="h-auto max-w-full rounded-lg cursor-pointer shadow transform transition duration-300 group-hover:scale-105 group-hover:brightness-110"
+                        :src="getThumbnailUrl(images[i - 1])"
+                        :alt="`Thumbnail ${i}`"
+                        @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+                      >
+                      <component
+                        :is="imageComponent"
+                        v-else
+                        :image="getThumbnailUrl(images[i - 1]).image"
+                        :variant="getThumbnailUrl(images[i - 1]).variant"
+                        :alt="getThumbnailUrl(images[i - 1]).alt"
+                        :class="`h-auto max-w-full rounded-lg cursor-pointer shadow transform transition duration-300 group-hover:scale-105 group-hover:brightness-110 ${getBorderColor(images[i - 1])}`"
+                        @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+                      />
+                    </div>
+                  </div>
+                </div>
               </div>
-              <div class="grid grid-cols-2 gap-2 p-2">
-                <div
-                  v-for="i in images.length"
-                  :key="`bg_${id}_${i}`"
-                  class="hover:!brightness-100"
-                  :style="{
-                    filter:
-                      i - 1 === modelValue ? 'brightness(1)' : 'brightness(0.5)',
-                  }"
+            </transition>
+          </div>
+
+          <!-- Mobile navigation controls (bottom bar) -->
+          <div
+            v-if="!showMobileThumbnails"
+            class="fixed bottom-0 left-0 right-0 sm:hidden flex justify-between items-center p-4 bg-gradient-to-t from-black/80 to-transparent"
+            style="z-index: 40"
+          >
+            <button
+              v-if="images.length > 1 && scale <= 1"
+              aria-label="Previous image"
+              class="rounded-full p-3 bg-black/50 backdrop-blur-sm active:bg-black/70"
+              @click="goPrevImage"
+            >
+              <ArrowLeftCircleIcon class="w-6 h-6" />
+            </button>
+
+            <!-- Reset zoom button when zoomed -->
+            <button
+              v-if="scale > 1"
+              aria-label="Reset zoom"
+              class="rounded-full p-2 bg-black/50 backdrop-blur-sm active:bg-black/70"
+              @click="scale = 1; panPosition.x = 0; panPosition.y = 0"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
+              </svg>
+            </button>
+
+            <button
+              v-if="images.length > 1 && scale <= 1"
+              aria-label="Next image"
+              class="rounded-full p-3 bg-black/50 backdrop-blur-sm active:bg-black/70"
+              @click="goNextImage"
+            >
+              <ArrowRightCircleIcon class="w-6 h-6" />
+            </button>
+          </div>
+
+          <!-- Mobile thumbnails panel -->
+          <transition
+            enter-active-class="transform transition ease-in-out duration-300"
+            enter-from-class="translate-y-full"
+            enter-to-class="translate-y-0"
+            leave-active-class="transform transition ease-in-out duration-300"
+            leave-from-class="translate-y-0"
+            leave-to-class="translate-y-full"
+          >
+            <div
+              v-if="showMobileThumbnails"
+              class="fixed bottom-0 left-0 right-0 sm:hidden bg-black/80 backdrop-blur-md pt-4 pb-6 border-t border-fv-neutral-700/50"
+              style="z-index: 50"
+            >
+              <div class="relative">
+                <!-- Close thumbnails button -->
+                <button
+                  aria-label="Close thumbnails"
+                  class="absolute top-0 right-4 rounded-full p-1 bg-black/40 hover:bg-black/60"
+                  @click="showMobileThumbnails = false"
                 >
-                  <img
-                    v-if="imageComponent === 'img'"
-                    :class="`h-auto max-w-full rounded-lg cursor-pointer shadow  ${getBorderColor(
-                      images[i - 1],
-                    )}`"
-                    :src="getThumbnailUrl(images[i - 1])"
-                    @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+                  <XCircleIcon class="w-5 h-5" />
+                </button>
+
+                <p class="text-center text-sm mb-2 font-medium">
+                  Thumbnails
+                </p>
+
+                <!-- Horizontal scrollable thumbnails -->
+                <div class="flex overflow-x-auto px-4 pb-2 space-x-2 hide-scrollbar">
+                  <div
+                    v-for="i in images.length"
+                    :key="`mt_${id}_${i}`"
+                    class="flex-shrink-0 w-16 h-16 relative"
+                    :class="{ 'opacity-100': i - 1 === modelValue, 'opacity-50': i - 1 !== modelValue }"
                   >
-                  <component
-                    :is="imageComponent"
-                    v-else
-                    :image="getThumbnailUrl(images[i - 1]).image"
-                    :variant="getThumbnailUrl(images[i - 1]).variant"
-                    :alt="getThumbnailUrl(images[i - 1]).alt"
-                    :class="`h-auto max-w-full rounded-lg cursor-pointer shadow ${getBorderColor(
-                      images[i - 1],
-                    )}`"
-                    @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
-                  />
+                    <div
+                      v-if="i - 1 === modelValue"
+                      class="absolute inset-0 border-2 border-white rounded-lg z-10"
+                    />
+                    <img
+                      class="h-full w-full object-cover rounded-lg"
+                      :src="getThumbnailUrl(images[i - 1])"
+                      :alt="`Thumbnail ${i}`"
+                      @click="$eventBus.emit(`${id}GalleryImage`, i - 1); showMobileThumbnails = false"
+                    >
+                  </div>
                 </div>
               </div>
-            </TransitionRoot>
-          </div>
-        </DialogPanel>
-      </Dialog>
-    </TransitionRoot>
+            </div>
+          </transition>
+        </div>
+      </div>
+    </transition>
 
+    <!-- Grid view mode -->
     <div v-if="mode === 'grid' || mode === 'mason' || mode === 'custom'" class="min-h-[600px]">
       <div
         :class="{
-          ' grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-4 items-start':
+          'grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-4 items-start':
             mode === 'mason',
-          '  grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-4 items-center':
+          'grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-4 items-center':
             mode === 'grid',
-          ' custom-grid': mode === 'custom',
+          'custom-grid': mode === 'custom',
         }"
       >
         <slot name="thumbnail" />
@@ -410,11 +860,21 @@ onUnmounted(() => {
               </div>
 
               <template v-for="j in gridHeight" :key="`gi_${id}_${i + j}`">
-                <div>
+                <div class="group overflow-hidden rounded-lg relative">
+                  <!-- Visual feedback for the tap action on mobile -->
+                  <div class="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 group-active:opacity-100 transition-opacity duration-300 flex items-center justify-center z-[1]">
+                    <div class="bg-black/60 rounded-full p-2 transform scale-0 group-hover:scale-100 group-active:scale-100 transition-transform duration-300">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
+                      </svg>
+                    </div>
+                  </div>
+
                   <img
                     v-if="i + j - 2 < images.length && imageComponent === 'img'"
-                    class="h-auto max-w-full rounded-lg cursor-pointer"
+                    class="h-auto max-w-full rounded-lg cursor-pointer transform transition-transform duration-300 group-hover:scale-105 group-active:scale-102"
                     :src="getThumbnailUrl(images[i + j - 2])"
+                    :alt="`Gallery image ${i + j - 1}`"
                     @click="$eventBus.emit(`${id}GalleryImage`, i + j - 2)"
                   >
                   <component
@@ -423,9 +883,7 @@ onUnmounted(() => {
                     :image="getThumbnailUrl(images[i + j - 2]).image"
                     :variant="getThumbnailUrl(images[i + j - 2]).variant"
                     :alt="getThumbnailUrl(images[i + j - 2]).alt"
-                    :class="`h-auto max-w-full rounded-lg cursor-pointer ${getBorderColor(
-                      images[i + j - 2],
-                    )}`"
+                    :class="`h-auto max-w-full rounded-lg cursor-pointer transform transition-transform duration-300 group-hover:scale-105 group-active:scale-102 ${getBorderColor(images[i + j - 2])}`"
                     :likes="getThumbnailUrl(images[i + j - 2]).likes"
                     :show-likes="getThumbnailUrl(images[i + j - 2]).showLikes"
                     :is-author="getThumbnailUrl(images[i + j - 2]).isAuthor"
@@ -436,14 +894,25 @@ onUnmounted(() => {
               </template>
             </div>
           </template>
-          <div v-else class="relative">
-            <div v-if="ranking" class="img-gallery-ranking">
+          <div v-else class="relative group overflow-hidden rounded-lg">
+            <div v-if="ranking" class="img-gallery-ranking z-10">
               {{ i }}
             </div>
+
+            <!-- Visual overlay on hover with touch feedback -->
+            <div class="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 group-active:opacity-100 transition-opacity duration-300 flex items-center justify-center z-[1]">
+              <div class="bg-black/60 rounded-full p-2 transform scale-0 group-hover:scale-100 group-active:scale-100 transition-transform duration-300">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
+                </svg>
+              </div>
+            </div>
+
             <img
               v-if="imageComponent === 'img'"
-              class="h-auto max-w-full rounded-lg cursor-pointer"
+              class="h-auto max-w-full rounded-lg cursor-pointer transform transition-transform duration-300 group-hover:scale-105 group-active:scale-102"
               :src="getThumbnailUrl(images[i - 1])"
+              :alt="`Gallery image ${i}`"
               @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
             >
             <component
@@ -452,9 +921,7 @@ onUnmounted(() => {
               :image="getThumbnailUrl(images[i - 1]).image"
               :variant="getThumbnailUrl(images[i - 1]).variant"
               :alt="getThumbnailUrl(images[i - 1]).alt"
-              :class="`h-auto max-w-full rounded-lg cursor-pointer ${getBorderColor(
-                images[i - 1],
-              )}`"
+              :class="`h-auto max-w-full rounded-lg cursor-pointer transform transition-transform duration-300 group-hover:scale-105 group-active:scale-102 ${getBorderColor(images[i - 1])}`"
               :likes="getThumbnailUrl(images[i - 1]).likes"
               :show-likes="getThumbnailUrl(images[i - 1]).showLikes"
               :is-author="getThumbnailUrl(images[i - 1]).isAuthor"
@@ -465,11 +932,16 @@ onUnmounted(() => {
         </template>
       </div>
     </div>
+
+    <!-- Button mode -->
     <button
       v-if="mode === 'button'"
-      :class="`btn ${buttonType ? buttonType : 'primary'} defaults`"
+      :class="`btn ${buttonType ? buttonType : 'primary'} defaults flex items-center gap-2`"
       @click="openGalleryImage(0)"
     >
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd" />
+      </svg>
       {{ buttonText ? buttonText : $t("open_gallery_cta") }}
     </button>
   </div>
@@ -480,9 +952,9 @@ onUnmounted(() => {
 .slide-next-enter-active,
 .slide-next-leave-active {
   transition:
-    opacity 0.15s,
-    transform 0.15s,
-    filter 0.15s;
+    opacity 0.3s,
+    transform 0.3s,
+    filter 0.3s;
 }
 
 .slide-next-enter-from {
@@ -513,9 +985,9 @@ onUnmounted(() => {
 .slide-prev-enter-active,
 .slide-prev-leave-active {
   transition:
-    opacity 0.15s,
-    transform 0.15s,
-    filter 0.15s;
+    opacity 0.3s,
+    transform 0.3s,
+    filter 0.3s;
 }
 
 .slide-prev-enter-from {
@@ -542,18 +1014,74 @@ onUnmounted(() => {
   filter: blur(10px);
 }
 
-/* Ensure the images are positioned correctly to prevent overlap */
-.relative-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
+/* Custom animation for loading spinner */
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
-.relative-container > div {
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+/* Improved gallery ranking */
+.img-gallery-ranking {
   position: absolute;
-  top: 0;
-  left: 0;
+  top: 0.5rem;
+  left: 0.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  z-index: 5;
+}
+
+/* Image container */
+.image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
+  user-select: none;
+  touch-action: none;
+}
+
+/* Hide scrollbar for mobile thumbnails */
+.hide-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+/* Active touch feedback */
+.group-active\:opacity-100 {
+  @apply group-active:opacity-100;
+}
+
+.group-active\:scale-100 {
+  @apply group-active:scale-100;
+}
+
+.group-active\:scale-102 {
+  @apply group-active:scale-[1.02];
+}
+
+/* Fullscreen mode */
+.fullscreen-mode {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 99;
 }
 </style>