@fy-/fws-vue 2.2.46 → 2.2.47

package/components/ui/DefaultGallery.vue

@@ -4,6 +4,7 @@ import type { APIPaging } from '../../composables/rest'
 import {
   ArrowLeftCircleIcon,
   ArrowRightCircleIcon,
+  ArrowsPointingOutIcon, // For fullscreen button
   ChevronDoubleLeftIcon,
   ChevronDoubleRightIcon,
   XCircleIcon,
@@ -15,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<{
@@ -64,6 +79,47 @@ 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) {
@@ -72,14 +128,39 @@ function setModal(value: boolean) {
     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
@@ -96,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++
   }
@@ -106,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--
   }
@@ -124,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
+  }
 
-  // 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
+  // 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
   }
 
-  start.x = touch.screenX
-  start.y = touch.screenY
+  // 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
+
+    // Limit zoom range
+    scale.value = Math.min(Math.max(0.5, newScale), 5)
+    event.preventDefault()
+    return
+  }
+
+  // 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()
+      }
     }
   }
 }
@@ -178,8 +389,25 @@ function handleKeyboardInput(event: KeyboardEvent) {
 
   switch (event.key) {
     case 'Escape':
-      event.preventDefault()
-      setModal(false)
+      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
@@ -191,6 +419,9 @@ function handleKeyboardInput(event: KeyboardEvent) {
       direction.value = 'prev'
       goPrevImage()
       break
+    case 'f':
+      toggleFullscreen()
+      break
     default:
       break
   }
@@ -202,6 +433,10 @@ function handleKeyboardRelease(event: KeyboardEvent) {
   }
 }
 
+function onImageLoad() {
+  isImageLoading.value = false
+}
+
 function closeGallery() {
   setModal(false)
 }
@@ -213,6 +448,21 @@ function handleBackdropClick(event: MouseEvent) {
   }
 }
 
+// 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)
@@ -226,6 +476,7 @@ onUnmounted(() => {
   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
   }
 })
@@ -243,58 +494,100 @@ onUnmounted(() => {
     >
       <div
         v-if="isGalleryOpen"
-        class="fixed bg-fv-neutral-900 text-white inset-0 max-w-[100vw] overflow-y-auto overflow-x-hidden"
+        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"
         role="dialog"
         aria-modal="true"
         @click="handleBackdropClick"
       >
         <div
-          class="relative w-full max-w-full flex flex-col justify-center items-center"
+          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"
-                aria-label="Close gallery"
-                @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"
                     aria-label="Previous image"
-                    @click="goPrevImage()"
+                    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
@@ -304,63 +597,89 @@ 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"
-                            :alt="`Gallery image ${modelValue + 1}`"
-                          >
-                          <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
-                        class="flex-0 py-2 flex items-center justify-center max-w-full w-full relative !z-[3]"
+                        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-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"
-                    :aria-label="sidePanel ? 'Hide thumbnails' : 'Show thumbnails'"
-                    @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"
                     aria-label="Next image"
-                    @click="goNextImage()"
+                    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>
 
+            <!-- Sidebar with thumbnails (desktop) -->
             <transition
               enter-active-class="transform transition ease-in-out duration-300"
               enter-from-class="translate-x-full"
@@ -371,59 +690,162 @@ onUnmounted(() => {
             >
               <div
                 v-if="sidePanel"
-                class="hidden lg:block flex-shrink-0 w-64 bg-fv-neutral-800 h-[100vh] max-h-[100vh] overflow-y-auto"
+                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"
               >
-                <!-- Side panel content -->
-                <div v-if="paging" class="flex items-center justify-center">
+                <!-- 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>
-                <div class="grid grid-cols-2 gap-2 p-2">
+
+                <!-- Thumbnails grid -->
+                <div class="grid grid-cols-2 gap-2 p-4">
                   <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)',
-                    }"
+                    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>
+            </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"
+                >
+                  <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 }"
+                  >
+                    <div
+                      v-if="i - 1 === modelValue"
+                      class="absolute inset-0 border-2 border-white rounded-lg z-10"
+                    />
                     <img
-                      v-if="imageComponent === 'img'"
-                      :class="`h-auto max-w-full rounded-lg cursor-pointer shadow  ${getBorderColor(
-                        images[i - 1],
-                      )}`"
+                      class="h-full w-full object-cover rounded-lg"
                       :src="getThumbnailUrl(images[i - 1])"
                       :alt="`Thumbnail ${i}`"
-                      @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+                      @click="$eventBus.emit(`${id}GalleryImage`, i - 1); showMobileThumbnails = false"
                     >
-                    <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>
                 </div>
               </div>
-            </transition>
-          </div>
+            </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" />
@@ -438,10 +860,19 @@ 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)"
@@ -452,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"
@@ -465,13 +894,23 @@ 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)"
@@ -482,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"
@@ -495,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>
@@ -510,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 {
@@ -543,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 {
@@ -572,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); }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
 }
 
-.relative-container > div {
+/* 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>

package/components/ui/DefaultModal.vue

@@ -3,6 +3,9 @@ import { XCircleIcon } from '@heroicons/vue/24/solid'
 import { h, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useEventBus } from '../../composables/event-bus'
 
+// Static counter for managing z-index across all modals
+let modalCounter = 0
+
 const props = withDefaults(
   defineProps<{
     id: string
@@ -27,6 +30,10 @@ const modalRef = ref<HTMLElement | null>(null)
 let previouslyFocusedElement: HTMLElement | null = null
 let focusableElements: HTMLElement[] = []
 
+// Dynamic z-index to ensure the most recently opened modal is on top
+const baseZIndex = 100 // Use a higher base z-index to avoid conflicts
+const zIndex = ref<number>(baseZIndex)
+
 // Trap focus within modal for accessibility
 function getFocusableElements(element: HTMLElement): HTMLElement[] {
   return Array.from(
@@ -39,8 +46,16 @@ function getFocusableElements(element: HTMLElement): HTMLElement[] {
 }
 
 function handleKeyDown(event: KeyboardEvent) {
+  // Only handle events for the top-most modal
   if (!isOpen.value) return
 
+  // Get all active modals
+  const activeModals = document.querySelectorAll('[data-modal-active="true"]')
+  // If this is not the top-most modal, don't handle keyboard events
+  if (activeModals.length > 0 && modalRef.value !== activeModals[activeModals.length - 1]) {
+    return
+  }
+
   // Close on escape
   if (event.key === 'Escape') {
     event.preventDefault()
@@ -67,12 +82,28 @@ function setModal(value: boolean) {
   if (value === true) {
     if (props.onOpen) props.onOpen()
     previouslyFocusedElement = document.activeElement as HTMLElement
-    document.body.style.overflow = 'hidden' // Prevent scrolling when modal is open
+
+    // Set this modal's z-index higher than any existing modal
+    modalCounter += 3 // Increase by 3 to handle backdrop, container and content
+    zIndex.value = baseZIndex + modalCounter
+
+    // Only manage body overflow for the first opened modal
+    const activeModals = document.querySelectorAll('[data-modal-active="true"]')
+    if (activeModals.length === 0) {
+      document.body.style.overflow = 'hidden' // Prevent scrolling when modal is open
+    }
+
     document.addEventListener('keydown', handleKeyDown)
   }
   if (value === false) {
     if (props.onClose) props.onClose()
-    document.body.style.overflow = '' // Restore scrolling
+
+    // Only restore body overflow if this is the last open modal
+    const activeModals = document.querySelectorAll('[data-modal-active="true"]')
+    if (activeModals.length <= 1) {
+      document.body.style.overflow = '' // Restore scrolling
+    }
+
     document.removeEventListener('keydown', handleKeyDown)
     if (previouslyFocusedElement) {
       previouslyFocusedElement.focus()
@@ -111,7 +142,14 @@ onMounted(() => {
 onUnmounted(() => {
   eventBus.off(`${props.id}Modal`, setModal)
   document.removeEventListener('keydown', handleKeyDown)
-  document.body.style.overflow = '' // Ensure body scrolling is restored
+
+  // Only restore body overflow if this modal was open when unmounted
+  if (isOpen.value) {
+    const activeModals = document.querySelectorAll('[data-modal-active="true"]')
+    if (activeModals.length <= 1) {
+      document.body.style.overflow = '' // Restore scrolling
+    }
+  }
 })
 
 // Click outside to close
@@ -135,22 +173,23 @@ function handleBackdropClick(event: MouseEvent) {
     <div
       v-if="isOpen"
       class="fixed inset-0 overflow-y-auto"
-      style="z-index: 40"
+      :style="{ zIndex }"
       role="dialog"
       :aria-labelledby="title ? `${props.id}-title` : undefined"
       aria-modal="true"
+      data-modal-active="true"
     >
       <!-- Backdrop with click to close functionality -->
       <div
         class="flex absolute backdrop-blur-[8px] inset-0 flex-col items-center justify-center min-h-screen text-fv-neutral-800 dark:text-fv-neutral-300 bg-fv-neutral-900/[.20] dark:bg-fv-neutral-50/[.20]"
-        style="z-index: 41"
+        :style="{ zIndex: zIndex + 1 }"
         @click="handleBackdropClick"
       >
         <!-- Modal panel -->
         <div
           ref="modalRef"
           :class="`relative ${mSize} max-w-6xl max-h-full ${ofy} bg-white rounded-lg shadow dark:bg-fv-neutral-900`"
-          style="z-index: 42"
+          :style="{ zIndex: zIndex + 2 }"
           tabindex="-1"
           @click.stop
         >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.2.46",
+  "version": "2.2.47",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",