@fy-/fws-vue 2.2.48 → 2.2.49

package/components/ui/DefaultGallery.vue

@@ -4,7 +4,6 @@ import type { APIPaging } from '../../composables/rest'
 import {
   ArrowLeftCircleIcon,
   ArrowRightCircleIcon,
-  ArrowsPointingOutIcon, // For fullscreen button
   ChevronDoubleLeftIcon,
   ChevronDoubleRightIcon,
   XCircleIcon,
@@ -16,20 +15,6 @@ 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<{
@@ -79,47 +64,6 @@ 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) {
@@ -128,39 +72,14 @@ 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
@@ -177,13 +96,7 @@ 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++
   }
@@ -193,13 +106,7 @@ 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--
   }
@@ -217,159 +124,41 @@ 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 now = Date.now()
-  const container = event.currentTarget as HTMLElement
+  const touch = event.touches[0]
+  const targetElement = touch.target 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
+  // 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
   }
 
-  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
-  }
+  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) {
-  // Reset pinch zoom state
-  if (isPinching.value) {
-    isPinching.value = false
-    return
-  }
+  const touch = event.changedTouches[0]
+  const targetElement = touch.target as HTMLElement
 
-  // Reset panning state
-  if (isPanning.value) {
-    isPanning.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
   }
 
-  // If we're zoomed in, don't handle swiping between images
-  if (scale.value > 1) {
-    return
-  }
+  const end = { x: touch.screenX, y: touch.screenY }
 
-  // Normal swipe behavior if not zoomed
-  if (event.changedTouches.length === 1) {
-    const touch = event.changedTouches[0]
-    const targetElement = touch.target as HTMLElement
+  const diffX = start.x - end.x
+  const diffY = start.y - end.y
 
-    // 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
+  // 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()
     }
-
-    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()
-      }
+    else {
+      direction.value = 'prev'
+      goPrevImage()
     }
   }
 }
@@ -389,25 +178,8 @@ function handleKeyboardInput(event: KeyboardEvent) {
 
   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)
-      }
+      event.preventDefault()
+      setModal(false)
       break
     case 'ArrowRight':
       isKeyPressed.value = true
@@ -419,9 +191,6 @@ function handleKeyboardInput(event: KeyboardEvent) {
       direction.value = 'prev'
       goPrevImage()
       break
-    case 'f':
-      toggleFullscreen()
-      break
     default:
       break
   }
@@ -433,10 +202,6 @@ function handleKeyboardRelease(event: KeyboardEvent) {
   }
 }
 
-function onImageLoad() {
-  isImageLoading.value = false
-}
-
 function closeGallery() {
   setModal(false)
 }
@@ -448,21 +213,6 @@ 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)
@@ -476,7 +226,6 @@ 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
   }
 })
@@ -494,100 +243,58 @@ onUnmounted(() => {
     >
       <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 }"
+        class="fixed bg-fv-neutral-900 text-white inset-0 max-w-[100vw] overflow-y-auto overflow-x-hidden"
         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 h-full"
+          class="relative w-full max-w-full flex flex-col justify-center items-center"
           style="z-index: 38"
           @click.stop
         >
-          <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 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 h-full relative flex-grow items-center justify-center gap-2 z-[1]"
+                class="flex h-[100vh] relative flex-grow items-center justify-center gap-2 z-[1]"
               >
-                <!-- Left nav button (larger touch area on mobile) -->
                 <div
-                  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()"
+                  class="hidden lg:relative z-[2] lg:flex w-10 flex-shrink-0 items-center justify-center flex-0"
                 >
                   <button
                     v-if="images.length > 1"
+                    class="btn p-1 rounded-full"
                     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
+                    @click="goPrevImage()"
                   >
-                    <ArrowLeftCircleIcon class="w-6 h-6" />
+                    <ArrowLeftCircleIcon class="w-8 h-8" />
                   </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 overflow-hidden"
+                        class="flex-1 w-full max-w-full flex items-center justify-center"
                         @touchstart="touchStart"
-                        @touchmove="touchMove"
                         @touchend="touchEnd"
                       >
                         <template
@@ -597,89 +304,63 @@ onUnmounted(() => {
                             <component
                               :is="videoComponent"
                               :src="isVideo(images[modelValue])"
-                              class="shadow-2xl max-w-full h-auto object-contain max-h-[85vh]"
+                              class="shadow max-w-full h-auto object-contain max-h-[85vh]"
                             />
                           </ClientOnly>
                         </template>
                         <template v-else>
-                          <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>
+                          <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]"
+                          />
                         </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-4 flex items-center justify-center max-w-full w-full relative !z-[3]"
+                        class="flex-0 py-2 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="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()"
+                  class="hidden lg:flex w-10 flex-shrink-0 items-center justify-center"
                 >
+                  <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"
-                    class="rounded-full p-2 bg-black/40 backdrop-blur-sm hover:bg-black/60 transition-colors hidden sm:block"
-                    @click.stop
+                    @click="goNextImage()"
                   >
-                    <ArrowRightCircleIcon class="w-6 h-6" />
+                    <ArrowRightCircleIcon class="w-8 h-8" />
                   </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"
@@ -690,162 +371,59 @@ onUnmounted(() => {
             >
               <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"
+                class="hidden lg:block flex-shrink-0 w-64 bg-fv-neutral-800 h-[100vh] max-h-[100vh] overflow-y-auto"
               >
-                <!-- 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">
+                <!-- Side panel content -->
+                <div v-if="paging" class="flex items-center justify-center">
                   <DefaultPaging :id="id" :items="paging" />
                 </div>
-
-                <!-- Thumbnails grid -->
-                <div class="grid grid-cols-2 gap-2 p-4">
+                <div class="grid grid-cols-2 gap-2 p-2">
                   <div
                     v-for="i in images.length"
                     :key="`bg_${id}_${i}`"
-                    class="relative group"
+                    class="hover:!brightness-100"
+                    :style="{
+                      filter:
+                        i - 1 === modelValue ? 'brightness(1)' : 'brightness(0.5)',
+                    }"
                   >
-                    <!-- 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"
-              @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"
-              @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"
-              @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
-                      class="h-full w-full object-cover rounded-lg"
+                      v-if="imageComponent === 'img'"
+                      :class="`h-auto max-w-full rounded-lg cursor-pointer shadow  ${getBorderColor(
+                        images[i - 1],
+                      )}`"
                       :src="getThumbnailUrl(images[i - 1])"
                       :alt="`Thumbnail ${i}`"
-                      @click="$eventBus.emit(`${id}GalleryImage`, i - 1); showMobileThumbnails = false"
+                      @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 ${getBorderColor(
+                        images[i - 1],
+                      )}`"
+                      @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+                    />
                   </div>
                 </div>
               </div>
-            </div>
-          </transition>
+            </transition>
+          </div>
         </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" />
@@ -860,19 +438,10 @@ onUnmounted(() => {
               </div>
 
               <template v-for="j in gridHeight" :key="`gi_${id}_${i + j}`">
-                <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 transition-opacity duration-300 flex items-center justify-center z-[1] group-hover-opacity-100 group-active-opacity-100">
-                    <div class="bg-black/60 rounded-full p-2 transform scale-0 transition-transform duration-300 group-hover-scale-100 group-active-scale-100">
-                      <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>
-
+                <div>
                   <img
                     v-if="i + j - 2 < images.length && imageComponent === 'img'"
-                    class="h-auto max-w-full rounded-lg cursor-pointer transform transition-transform duration-300 group-hover-scale-105 group-active-scale-102"
+                    class="h-auto max-w-full rounded-lg cursor-pointer"
                     :src="getThumbnailUrl(images[i + j - 2])"
                     :alt="`Gallery image ${i + j - 1}`"
                     @click="$eventBus.emit(`${id}GalleryImage`, i + j - 2)"
@@ -883,7 +452,9 @@ 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 transform transition-transform duration-300 group-hover-scale-105 group-active-scale-102 ${getBorderColor(images[i + j - 2])}`"
+                    :class="`h-auto max-w-full rounded-lg cursor-pointer ${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"
@@ -894,23 +465,13 @@ onUnmounted(() => {
               </template>
             </div>
           </template>
-          <div v-else class="relative group overflow-hidden rounded-lg">
-            <div v-if="ranking" class="img-gallery-ranking z-10">
+          <div v-else class="relative">
+            <div v-if="ranking" class="img-gallery-ranking">
               {{ i }}
             </div>
-
-            <!-- Visual overlay on hover with touch feedback -->
-            <div class="absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-300 flex items-center justify-center z-[1] group-hover-opacity-100 group-active-opacity-100">
-              <div class="bg-black/60 rounded-full p-2 transform scale-0 transition-transform duration-300 group-hover-scale-100 group-active-scale-100">
-                <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 transform transition-transform duration-300 group-hover-scale-105 group-active-scale-102"
+              class="h-auto max-w-full rounded-lg cursor-pointer"
               :src="getThumbnailUrl(images[i - 1])"
               :alt="`Gallery image ${i}`"
               @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
@@ -921,7 +482,9 @@ 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 transform transition-transform duration-300 group-hover-scale-105 group-active-scale-102 ${getBorderColor(images[i - 1])}`"
+              :class="`h-auto max-w-full rounded-lg cursor-pointer ${getBorderColor(
+                images[i - 1],
+              )}`"
               :likes="getThumbnailUrl(images[i - 1]).likes"
               :show-likes="getThumbnailUrl(images[i - 1]).showLikes"
               :is-author="getThumbnailUrl(images[i - 1]).isAuthor"
@@ -932,16 +495,11 @@ onUnmounted(() => {
         </template>
       </div>
     </div>
-
-    <!-- Button mode -->
     <button
       v-if="mode === 'button'"
-      :class="`btn ${buttonType ? buttonType : 'primary'} defaults flex items-center gap-2`"
+      :class="`btn ${buttonType ? buttonType : 'primary'} defaults`"
       @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>
@@ -952,9 +510,9 @@ onUnmounted(() => {
 .slide-next-enter-active,
 .slide-next-leave-active {
   transition:
-    opacity 0.3s,
-    transform 0.3s,
-    filter 0.3s;
+    opacity 0.15s,
+    transform 0.15s,
+    filter 0.15s;
 }
 
 .slide-next-enter-from {
@@ -985,9 +543,9 @@ onUnmounted(() => {
 .slide-prev-enter-active,
 .slide-prev-leave-active {
   transition:
-    opacity 0.3s,
-    transform 0.3s,
-    filter 0.3s;
+    opacity 0.15s,
+    transform 0.15s,
+    filter 0.15s;
 }
 
 .slide-prev-enter-from {
@@ -1014,86 +572,18 @@ onUnmounted(() => {
   filter: blur(10px);
 }
 
-/* Custom animation for loading spinner */
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.animate-spin {
-  animation: spin 1s linear infinite;
+/* Ensure the images are positioned correctly to prevent overlap */
+.relative-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
 }
 
-/* Improved gallery ranking */
-.img-gallery-ranking {
+.relative-container > div {
   position: absolute;
-  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;
+  top: 0;
+  left: 0;
   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 */
-}
-
-/* Use direct CSS for hover/active states - avoid @apply for these */
-.group:hover .group-hover-opacity-100 {
-  opacity: 1;
-}
-
-.group:hover .group-hover-scale-100 {
-  transform: scale(1);
-}
-
-.group:hover .group-hover-scale-105 {
-  transform: scale(1.05);
-}
-
-.group:active .group-active-opacity-100 {
-  opacity: 1;
-}
-
-.group:active .group-active-scale-100 {
-  transform: scale(1);
-}
-
-.group:active .group-active-scale-102 {
-  transform: scale(1.02);
-}
-
-/* Fullscreen mode */
-.fullscreen-mode {
-  position: fixed;
-  inset: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 99;
 }
 </style>

package/package.json

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