@fy-/fws-vue 2.2.50 → 2.2.52

package/components/ui/DefaultConfirm.vue

@@ -39,14 +39,23 @@ function showConfirm(data: ConfirmModalData) {
   title.value = data.title
   desc.value = data.desc
   onConfirm.value = data.onConfirm
-  isOpen.value = true
+
+  // Emit event first to ensure it's registered before opening the modal
   eventBus.emit('confirmModal', true)
-  nextTick(() => {
-    previouslyFocusedElement = document.activeElement as HTMLElement
-    if (modalRef.value) {
-      modalRef.value.focus()
-    }
-  })
+
+  // Force this to happen at the end of the event loop
+  // to ensure it happens after any other modal operations
+  setTimeout(() => {
+    isOpen.value = true
+    eventBus.emit('confirmModal', true)
+
+    nextTick(() => {
+      previouslyFocusedElement = document.activeElement as HTMLElement
+      if (modalRef.value) {
+        modalRef.value.focus()
+      }
+    })
+  }, 0)
 }
 
 onMounted(() => {

package/components/ui/DefaultGallery.vue

@@ -2,19 +2,24 @@
 import type { Component } from 'vue'
 import type { APIPaging } from '../../composables/rest'
 import {
-  ArrowLeftCircleIcon,
-  ArrowRightCircleIcon,
   ChevronDoubleLeftIcon,
   ChevronDoubleRightIcon,
-  XCircleIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  InformationCircleIcon,
+  XMarkIcon,
 } from '@heroicons/vue/24/solid'
-import { computed, h, onMounted, onUnmounted, reactive, ref } from 'vue'
+import { computed, h, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import { useEventBus } from '../../composables/event-bus'
 import DefaultPaging from './DefaultPaging.vue'
 
 const isGalleryOpen = ref<boolean>(false)
 const eventBus = useEventBus()
 const sidePanel = ref<boolean>(true)
+const showControls = ref<boolean>(true)
+const isFullscreen = ref<boolean>(false)
+const infoPanel = ref<boolean>(false)
+const touchStartTime = ref<number>(0)
 
 const props = withDefaults(
   defineProps<{
@@ -44,7 +49,7 @@ const props = withDefaults(
     imageComponent: 'img',
     mode: 'grid',
     gridHeight: 4,
-    closeIcon: () => h(XCircleIcon),
+    closeIcon: () => h(XMarkIcon),
     images: () => [],
     isVideo: () => false,
     getImageUrl: (image: any) => image.image_url,
@@ -65,6 +70,8 @@ const modelValue = computed({
 
 const direction = ref<'next' | 'prev'>('next')
 
+let controlsTimeout: number | null = null
+
 function setModal(value: boolean) {
   if (value === true) {
     if (props.onOpen) props.onOpen()
@@ -73,6 +80,12 @@ function setModal(value: boolean) {
       document.addEventListener('keydown', handleKeyboardInput)
       document.addEventListener('keyup', handleKeyboardRelease)
     }
+    // Auto-hide controls after 3 seconds on mobile
+    if (window.innerWidth < 1024) {
+      controlsTimeout = window.setTimeout(() => {
+        showControls.value = false
+      }, 3000)
+    }
   }
   else {
     if (props.onClose) props.onClose()
@@ -81,8 +94,20 @@ function setModal(value: boolean) {
       document.removeEventListener('keydown', handleKeyboardInput)
       document.removeEventListener('keyup', handleKeyboardRelease)
     }
+    // Clear timeout if modal is closed
+    if (controlsTimeout) {
+      clearTimeout(controlsTimeout)
+      controlsTimeout = null
+    }
+    // Exit fullscreen if active
+    if (isFullscreen.value && document.exitFullscreen) {
+      document.exitFullscreen().catch(() => {})
+      isFullscreen.value = false
+    }
   }
   isGalleryOpen.value = value
+  showControls.value = true
+  infoPanel.value = false
 }
 
 function openGalleryImage(index: number | undefined) {
@@ -103,6 +128,7 @@ function goNextImage() {
   else {
     modelValue.value = 0
   }
+  resetControlsTimer()
 }
 
 function goPrevImage() {
@@ -114,6 +140,7 @@ function goPrevImage() {
     modelValue.value
       = props.images.length - 1 > 0 ? props.images.length - 1 : 0
   }
+  resetControlsTimer()
 }
 
 const modelValueSrc = computed(() => {
@@ -122,12 +149,69 @@ const modelValueSrc = computed(() => {
   return props.getImageUrl(props.images[modelValue.value])
 })
 
+const currentImage = computed(() => {
+  if (props.images.length === 0) return null
+  return props.images[modelValue.value]
+})
+
+const imageCount = computed(() => props.images.length)
+const currentIndex = computed(() => modelValue.value + 1)
+
 const start = reactive({ x: 0, y: 0 })
 
+function resetControlsTimer() {
+  // Show controls when user interacts
+  showControls.value = true
+
+  // Only set timer on mobile
+  if (window.innerWidth < 1024) {
+    if (controlsTimeout) {
+      clearTimeout(controlsTimeout)
+    }
+    controlsTimeout = window.setTimeout(() => {
+      showControls.value = false
+    }, 3000)
+  }
+}
+
+function toggleControls() {
+  showControls.value = !showControls.value
+  if (showControls.value && window.innerWidth < 1024) {
+    resetControlsTimer()
+  }
+}
+
+function toggleInfoPanel() {
+  infoPanel.value = !infoPanel.value
+  resetControlsTimer()
+}
+
+function toggleFullscreen() {
+  if (!isFullscreen.value) {
+    const element = document.querySelector('.gallery-container') as HTMLElement
+    if (element && element.requestFullscreen) {
+      element.requestFullscreen().then(() => {
+        isFullscreen.value = true
+      }).catch(() => {})
+    }
+  }
+  else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen().then(() => {
+        isFullscreen.value = false
+      }).catch(() => {})
+    }
+  }
+  resetControlsTimer()
+}
+
 function touchStart(event: TouchEvent) {
   const touch = event.touches[0]
   const targetElement = touch.target as HTMLElement
 
+  // Store start time for tap detection
+  touchStartTime.value = Date.now()
+
   // 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
@@ -136,9 +220,11 @@ function touchStart(event: TouchEvent) {
   start.x = touch.screenX
   start.y = touch.screenY
 }
+
 function touchEnd(event: TouchEvent) {
   const touch = event.changedTouches[0]
   const targetElement = touch.target as HTMLElement
+  const touchDuration = Date.now() - touchStartTime.value
 
   // Check if the touch ended on an interactive element
   if (targetElement.closest('button, a, input, textarea, select')) {
@@ -150,6 +236,12 @@ function touchEnd(event: TouchEvent) {
   const diffX = start.x - end.x
   const diffY = start.y - end.y
 
+  // Detect tap (quick touch with minimal movement)
+  if (Math.abs(diffX) < 10 && Math.abs(diffY) < 10 && touchDuration < 300) {
+    toggleControls()
+    return
+  }
+
   // Add a threshold to prevent accidental swipes
   if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
     if (diffX > 0) {
@@ -191,6 +283,12 @@ function handleKeyboardInput(event: KeyboardEvent) {
       direction.value = 'prev'
       goPrevImage()
       break
+    case 'f':
+      toggleFullscreen()
+      break
+    case 'i':
+      toggleInfoPanel()
+      break
     default:
       break
   }
@@ -213,6 +311,11 @@ function handleBackdropClick(event: MouseEvent) {
   }
 }
 
+watch(currentImage, () => {
+  // Reset info panel when image changes
+  infoPanel.value = false
+})
+
 onMounted(() => {
   eventBus.on(`${props.id}GalleryImage`, openGalleryImage)
   eventBus.on(`${props.id}Gallery`, openGalleryImage)
@@ -228,6 +331,10 @@ onUnmounted(() => {
     document.removeEventListener('keyup', handleKeyboardRelease)
     document.body.style.overflow = '' // Ensure body scrolling is restored
   }
+  // Clear any remaining timeouts
+  if (controlsTimeout) {
+    clearTimeout(controlsTimeout)
+  }
 })
 </script>
 
@@ -243,43 +350,50 @@ onUnmounted(() => {
     >
       <div
         v-if="isGalleryOpen"
-        class="fixed bg-fv-neutral-900 text-white inset-0 max-w-[100vw] overflow-y-auto overflow-x-hidden"
+        class="fixed bg-fv-neutral-900 text-white inset-0 max-w-[100vw] overflow-hidden gallery-container"
         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 h-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">
-            <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>
-
+          <!-- Main Content Area -->
+          <div class="flex flex-grow gap-4 w-full h-full max-w-full">
+            <div class="flex-grow h-full flex items-center relative">
+              <!-- Image Display Area -->
               <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]"
+                @touchstart="touchStart"
+                @touchend="touchEnd"
               >
-                <div
-                  class="hidden lg:relative z-[2] lg:flex w-10 flex-shrink-0 items-center justify-center flex-0"
+                <!-- Image Navigation - Left -->
+                <transition
+                  enter-active-class="transition-opacity duration-300"
+                  enter-from-class="opacity-0"
+                  enter-to-class="opacity-100"
+                  leave-active-class="transition-opacity duration-300"
+                  leave-from-class="opacity-100"
+                  leave-to-class="opacity-0"
                 >
-                  <button
-                    v-if="images.length > 1"
-                    class="btn p-1 rounded-full"
-                    aria-label="Previous image"
-                    @click="goPrevImage()"
+                  <div
+                    v-if="showControls && images.length > 1"
+                    class="absolute left-0 z-[40] h-full flex items-center px-2 md:px-4"
                   >
-                    <ArrowLeftCircleIcon class="w-8 h-8" />
-                  </button>
-                </div>
+                    <button
+                      class="btn bg-fv-neutral-800/70 hover:bg-fv-neutral-700/90 backdrop-blur-sm p-2 rounded-full transition-transform transform hover:scale-110"
+                      aria-label="Previous image"
+                      @click="goPrevImage()"
+                    >
+                      <ChevronLeftIcon class="w-6 h-6 md:w-8 md:h-8" />
+                    </button>
+                  </div>
+                </transition>
+
+                <!-- Main Image Container -->
                 <div
                   class="flex-1 flex flex-col z-[2] items-center justify-center max-w-full lg:max-w-[calc(100vw - 256px)] relative"
                 >
@@ -288,14 +402,11 @@ onUnmounted(() => {
                     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"
-                        @touchstart="touchStart"
-                        @touchend="touchEnd"
                       >
                         <template
                           v-if="videoComponent && isVideo(images[modelValue])"
@@ -325,42 +436,44 @@ onUnmounted(() => {
                           />
                         </template>
                       </div>
+
+                      <!-- Image Slot Content -->
                       <div
-                        class="flex-0 py-2 flex items-center justify-center max-w-full w-full relative !z-[3]"
+                        v-if="infoPanel"
+                        class="flex-0 px-4 py-3 backdrop-blur-md bg-fv-neutral-900/70 rounded-t-lg flex items-center justify-center max-w-full w-full !z-[45] transition-all"
                       >
                         <slot :value="images[modelValue]" />
                       </div>
                     </div>
                   </transition>
                 </div>
-                <div
-                  class="hidden lg:flex w-10 flex-shrink-0 items-center justify-center"
+
+                <!-- Image Navigation - Right -->
+                <transition
+                  enter-active-class="transition-opacity duration-300"
+                  enter-from-class="opacity-0"
+                  enter-to-class="opacity-100"
+                  leave-active-class="transition-opacity duration-300"
+                  leave-from-class="opacity-100"
+                  leave-to-class="opacity-0"
                 >
-                  <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()"
+                  <div
+                    v-if="showControls && images.length > 1"
+                    class="absolute right-0 z-[40] h-full flex items-center px-2 md:px-4"
                   >
-                    <ArrowRightCircleIcon class="w-8 h-8" />
-                  </button>
-                </div>
+                    <button
+                      class="btn bg-fv-neutral-800/70 hover:bg-fv-neutral-700/90 backdrop-blur-sm p-2 rounded-full transition-transform transform hover:scale-110"
+                      aria-label="Next image"
+                      @click="goNextImage()"
+                    >
+                      <ChevronRightIcon class="w-6 h-6 md:w-8 md:h-8" />
+                    </button>
+                  </div>
+                </transition>
               </div>
             </div>
 
+            <!-- Side Panel for Thumbnails -->
             <transition
               enter-active-class="transform transition ease-in-out duration-300"
               enter-from-class="translate-x-full"
@@ -371,27 +484,33 @@ 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/90 backdrop-blur-md h-full max-h-full overflow-y-auto"
               >
-                <!-- Side panel content -->
-                <div v-if="paging" class="flex items-center justify-center">
+                <!-- Paging Controls -->
+                <div v-if="paging" class="flex items-center justify-center pt-2">
                   <DefaultPaging :id="id" :items="paging" />
                 </div>
+
+                <!-- Thumbnail Grid -->
                 <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)',
-                    }"
+                    class="group relative"
                   >
+                    <div
+                      class="absolute inset-0 rounded-lg transition-colors duration-300 group-hover:bg-fv-neutral-700/40"
+                      :class="{ 'bg-fv-primary-500/40': i - 1 === modelValue }"
+                    />
                     <img
                       v-if="imageComponent === 'img'"
-                      :class="`h-auto max-w-full rounded-lg cursor-pointer shadow  ${getBorderColor(
+                      :class="`h-auto max-w-full rounded-lg cursor-pointer shadow transition-all duration-300 group-hover:brightness-110 ${getBorderColor(
                         images[i - 1],
                       )}`"
+                      :style="{
+                        filter:
+                          i - 1 === modelValue ? 'brightness(1)' : 'brightness(0.7)',
+                      }"
                       :src="getThumbnailUrl(images[i - 1])"
                       :alt="`Thumbnail ${i}`"
                       @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
@@ -402,9 +521,17 @@ 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 shadow ${getBorderColor(
+                      :class="`h-auto max-w-full rounded-lg cursor-pointer shadow transition-all duration-300 group-hover:brightness-110 ${getBorderColor(
                         images[i - 1],
                       )}`"
+                      :style="{
+                        filter:
+                          i - 1 === modelValue ? 'brightness(1)' : 'brightness(0.7)',
+                      }"
+                      :likes="getThumbnailUrl(images[i - 1]).likes"
+                      :show-likes="getThumbnailUrl(images[i - 1]).showLikes"
+                      :is-author="getThumbnailUrl(images[i - 1]).isAuthor"
+                      :user-uuid="getThumbnailUrl(images[i - 1]).userUUID"
                       @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
                     />
                   </div>
@@ -412,18 +539,121 @@ onUnmounted(() => {
               </div>
             </transition>
           </div>
+
+          <!-- Top Controls -->
+          <transition
+            enter-active-class="transition-opacity duration-300"
+            enter-from-class="opacity-0"
+            enter-to-class="opacity-100"
+            leave-active-class="transition-opacity duration-300"
+            leave-from-class="opacity-100"
+            leave-to-class="opacity-0"
+          >
+            <div
+              v-if="showControls"
+              class="absolute top-0 left-0 right-0 px-4 py-3 flex justify-between items-center bg-gradient-to-b from-fv-neutral-900/90 to-transparent backdrop-blur-sm z-[50] transition-opacity"
+            >
+              <!-- Title and Counter -->
+              <div class="flex items-center space-x-2">
+                <span v-if="title" class="font-medium text-lg">{{ title }}</span>
+                <span class="text-sm opacity-80">{{ currentIndex }} / {{ imageCount }}</span>
+              </div>
+
+              <!-- Control Buttons -->
+              <div class="flex items-center space-x-2">
+                <button
+                  class="btn p-1.5 rounded-full bg-fv-neutral-800/70 hover:bg-fv-neutral-700/90 transition-transform transform hover:scale-110"
+                  title="Toggle info"
+                  @click="toggleInfoPanel"
+                >
+                  <InformationCircleIcon class="w-5 h-5" />
+                </button>
+
+                <button
+                  class="btn p-1.5 rounded-full lg:hidden bg-fv-neutral-800/70 hover:bg-fv-neutral-700/90 transition-transform transform hover:scale-110"
+                  :title="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>
+
+                <button
+                  class="btn p-1.5 rounded-full hidden lg:block bg-fv-neutral-800/70 hover:bg-fv-neutral-700/90 transition-transform transform hover:scale-110"
+                  :title="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>
+
+                <button
+                  class="btn p-1.5 rounded-full bg-fv-neutral-800/70 hover:bg-fv-neutral-700/90 transition-transform transform hover:scale-110"
+                  aria-label="Close gallery"
+                  @click="setModal(false)"
+                >
+                  <component :is="closeIcon" class="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+          </transition>
+
+          <!-- Mobile Thumbnail Preview -->
+          <transition
+            enter-active-class="transition-transform duration-300 ease-out"
+            enter-from-class="translate-y-full"
+            enter-to-class="translate-y-0"
+            leave-active-class="transition-transform duration-300 ease-in"
+            leave-from-class="translate-y-0"
+            leave-to-class="translate-y-full"
+          >
+            <div
+              v-if="showControls && images.length > 1 && !sidePanel"
+              class="absolute bottom-0 left-0 right-0 p-2 lg:hidden bg-gradient-to-t from-fv-neutral-900/90 to-transparent backdrop-blur-sm z-[50]"
+            >
+              <div class="overflow-x-auto flex space-x-2 pb-1 px-1">
+                <div
+                  v-for="(image, idx) in images"
+                  :key="`mobile_thumb_${id}_${idx}`"
+                  class="flex-shrink-0 w-16 h-16 rounded-lg relative cursor-pointer"
+                  :class="{ 'ring-2 ring-fv-primary-500 ring-offset-1 ring-offset-fv-neutral-900': idx === modelValue }"
+                  @click="$eventBus.emit(`${id}GalleryImage`, idx)"
+                >
+                  <img
+                    v-if="imageComponent === 'img'"
+                    class="w-full h-full object-cover rounded-lg transition duration-200"
+                    :style="{
+                      filter: idx === modelValue ? 'brightness(1)' : 'brightness(0.7)',
+                    }"
+                    :src="getThumbnailUrl(image)"
+                    :alt="`Thumbnail ${idx + 1}`"
+                  >
+                  <component
+                    :is="imageComponent"
+                    v-else
+                    :image="getThumbnailUrl(image).image"
+                    :variant="getThumbnailUrl(image).variant"
+                    :alt="getThumbnailUrl(image).alt"
+                    class="w-full h-full object-cover rounded-lg transition duration-200"
+                    :style="{
+                      filter: idx === modelValue ? 'brightness(1)' : 'brightness(0.7)',
+                    }"
+                  />
+                </div>
+              </div>
+            </div>
+          </transition>
         </div>
       </div>
     </transition>
 
-    <div v-if="mode === 'grid' || mode === 'mason' || mode === 'custom'" class="min-h-[600px]">
+    <!-- Thumbnail Grid/Mason/Custom Layouts -->
+    <div v-if="mode === 'grid' || mode === 'mason' || mode === 'custom'" class="gallery-grid">
       <div
         :class="{
-          ' 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':
-            mode === 'grid',
-          ' custom-grid': mode === 'custom',
+          'masonry-grid': mode === 'mason',
+          'standard-grid': mode === 'grid',
+          'custom-grid': mode === 'custom',
         }"
       >
         <slot name="thumbnail" />
@@ -431,17 +661,17 @@ onUnmounted(() => {
           <template v-if="mode === 'mason'">
             <div
               v-if="i + (1 % gridHeight) === 0"
-              class="grid gap-4 items-start relative"
+              class="masonry-column relative"
             >
               <div v-if="ranking" class="img-gallery-ranking">
                 {{ i }}
               </div>
 
               <template v-for="j in gridHeight" :key="`gi_${id}_${i + j}`">
-                <div>
+                <div class="masonry-item">
                   <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 w-full rounded-lg cursor-pointer shadow-md hover:shadow-xl transition-all duration-300 hover:brightness-110 hover:scale-[1.02]"
                     :src="getThumbnailUrl(images[i + j - 2])"
                     :alt="`Gallery image ${i + j - 1}`"
                     @click="$eventBus.emit(`${id}GalleryImage`, i + j - 2)"
@@ -452,7 +682,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(
+                    :class="`h-auto max-w-full w-full rounded-lg cursor-pointer shadow-md hover:shadow-xl transition-all duration-300 hover:brightness-110 hover:scale-[1.02] ${getBorderColor(
                       images[i + j - 2],
                     )}`"
                     :likes="getThumbnailUrl(images[i + j - 2]).likes"
@@ -465,42 +695,47 @@ onUnmounted(() => {
               </template>
             </div>
           </template>
-          <div v-else class="relative">
+          <div v-else class="grid-item relative group">
             <div v-if="ranking" class="img-gallery-ranking">
               {{ i }}
             </div>
-            <img
-              v-if="imageComponent === 'img'"
-              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)"
-            >
-            <component
-              :is="imageComponent"
-              v-else-if="imageComponent"
-              :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],
-              )}`"
-              :likes="getThumbnailUrl(images[i - 1]).likes"
-              :show-likes="getThumbnailUrl(images[i - 1]).showLikes"
-              :is-author="getThumbnailUrl(images[i - 1]).isAuthor"
-              :user-uuid="getThumbnailUrl(images[i - 1]).userUUID"
-              @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
-            />
+            <div class="overflow-hidden rounded-lg">
+              <img
+                v-if="imageComponent === 'img'"
+                class="h-auto max-w-full w-full rounded-lg cursor-pointer shadow-md transition-all duration-300 group-hover:brightness-110 group-hover:scale-[1.03]"
+                :src="getThumbnailUrl(images[i - 1])"
+                :alt="`Gallery image ${i}`"
+                @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+              >
+              <component
+                :is="imageComponent"
+                v-else-if="imageComponent"
+                :image="getThumbnailUrl(images[i - 1]).image"
+                :variant="getThumbnailUrl(images[i - 1]).variant"
+                :alt="getThumbnailUrl(images[i - 1]).alt"
+                :class="`h-auto max-w-full w-full rounded-lg cursor-pointer shadow-md transition-all duration-300 group-hover:brightness-110 group-hover:scale-[1.03] ${getBorderColor(
+                  images[i - 1],
+                )}`"
+                :likes="getThumbnailUrl(images[i - 1]).likes"
+                :show-likes="getThumbnailUrl(images[i - 1]).showLikes"
+                :is-author="getThumbnailUrl(images[i - 1]).isAuthor"
+                :user-uuid="getThumbnailUrl(images[i - 1]).userUUID"
+                @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+              />
+            </div>
           </div>
         </template>
       </div>
     </div>
+
+    <!-- Button Mode -->
     <button
       v-if="mode === 'button'"
-      :class="`btn ${buttonType ? buttonType : 'primary'} defaults`"
+      :class="`btn ${buttonType ? buttonType : 'primary'} defaults relative overflow-hidden group`"
       @click="openGalleryImage(0)"
     >
-      {{ buttonText ? buttonText : $t("open_gallery_cta") }}
+      <span class="relative z-10">{{ buttonText ? buttonText : $t("open_gallery_cta") }}</span>
+      <span class="absolute inset-0 bg-white/10 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300" />
     </button>
   </div>
 </template>
@@ -572,18 +807,101 @@ onUnmounted(() => {
   filter: blur(10px);
 }
 
-/* Ensure the images are positioned correctly to prevent overlap */
-.relative-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
+/* Modern grids */
+.gallery-grid {
+  min-height: 200px;
+}
+
+.standard-grid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 0.75rem;
+}
+
+@media (min-width: 480px) {
+  .standard-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 768px) {
+  .standard-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .standard-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media (min-width: 1280px) {
+  .standard-grid {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+@media (min-width: 1536px) {
+  .standard-grid {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
+.masonry-grid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 0.75rem;
+}
+
+@media (min-width: 480px) {
+  .masonry-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 768px) {
+  .masonry-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .masonry-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.masonry-column {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.masonry-item {
+  break-inside: avoid;
+  margin-bottom: 0.75rem;
+}
+
+.grid-item {
+  break-inside: avoid;
+  margin-bottom: 0.75rem;
 }
 
-.relative-container > div {
+.img-gallery-ranking {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  top: 0.5rem;
+  left: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: white;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  z-index: 10;
 }
 </style>

package/components/ui/DefaultModal.vue

@@ -3,8 +3,56 @@ import { XCircleIcon } from '@heroicons/vue/24/solid'
 import { h, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useEventBus } from '../../composables/event-bus'
 
-// Global registry to track all open modals and their z-indexes
-const openModals: Map<string, number> = new Map()
+// Use a shared global registry in the window to track all modals across instances
+// This ensures proper z-index stacking even when modals are in different components
+if (typeof window !== 'undefined') {
+  // @ts-expect-error: TS doesn't know about the global registry
+  window.__FWS_MODAL_REGISTRY = window.__FWS_MODAL_REGISTRY || {
+    modals: new Map<string, number>(),
+    getNextZIndex() {
+      const baseZIndex = 40
+      const maxZIndex = 59
+
+      // If no modals, start at base
+      if (this.modals.size === 0) {
+        return baseZIndex
+      }
+
+      // Find highest z-index
+      const values = Array.from(this.modals.values())
+      // @ts-expect-error: TS doesn't know that values are numbers
+      const highestZIndex = Math.max(...values)
+
+      // Calculate next z-index
+      const nextZIndex = highestZIndex + 1
+
+      // If we're approaching the upper limit, reset all
+      if (nextZIndex >= maxZIndex) {
+        this.resetAllZIndexes()
+        return baseZIndex
+      }
+
+      return nextZIndex
+    },
+    resetAllZIndexes() {
+      // Sort by current z-index
+      const entries = Array.from(this.modals.entries())
+      // @ts-expect-error: TS doesn't know that entries are tuples
+      entries.sort((a, b) => a[1] - b[1])
+
+      // Reassign starting from base
+      let newIndex = 40
+      // @ts-expect-error: TS doesn't know that entries are tuples
+      entries.forEach(([id, _]) => {
+        this.modals.set(id, newIndex)
+        newIndex++
+      })
+    },
+  }
+}
+
+// @ts-expect-error: TS doesn't know about the global registry
+const modalRegistry = typeof window !== 'undefined' ? window.__FWS_MODAL_REGISTRY : { modals: new Map() }
 
 const props = withDefaults(
   defineProps<{
@@ -80,15 +128,16 @@ function handleKeyDown(event: KeyboardEvent) {
 
 // Check if this modal is the top-most (highest z-index)
 function isTopMostModal(id: string): boolean {
-  if (openModals.size === 0) return false
+  if (modalRegistry.modals.size === 0) return false
 
   // Find the modal with the highest z-index
-  const entries = Array.from(openModals.entries())
+  const entries = Array.from(modalRegistry.modals.entries())
   const highestEntry = entries.reduce((prev, current) =>
+    // @ts-expect-error: TS doesn't know that entries are tuples
     current[1] > prev[1] ? current : prev,
   )
 
-  // Return true if this modal has the highest z-index
+  // @ts-expect-error: TS doesn't know that entries are tuples
   return highestEntry[0] === id
 }
 
@@ -97,17 +146,26 @@ function setModal(value: boolean) {
     if (props.onOpen) props.onOpen()
     previouslyFocusedElement = document.activeElement as HTMLElement
 
-    // Calculate the new z-index for this modal
-    const highestZIndex = calculateHighestZIndex()
+    // Get the next z-index from the global registry
+    const newZIndex = modalRegistry.getNextZIndex()
+
+    // Register this modal in the global registry with a unique ID (combines component id with instance id)
+    const uniqueId = `${props.id}-${Date.now()}`
+    modalRegistry.modals.set(uniqueId, newZIndex)
 
-    // Register this modal in the global registry
-    openModals.set(props.id, highestZIndex)
+    // Store the unique ID as a data attribute for future reference
+    nextTick(() => {
+      const modalElement = document.querySelector(`[data-modal-id="${props.id}"]`) as HTMLElement
+      if (modalElement) {
+        modalElement.setAttribute('data-modal-unique-id', uniqueId)
+      }
+    })
 
     // Set this modal's z-index
-    zIndex.value = highestZIndex
+    zIndex.value = newZIndex
 
     // Only manage body overflow for the first opened modal
-    if (openModals.size === 1) {
+    if (modalRegistry.modals.size === 1) {
       document.body.style.overflow = 'hidden' // Prevent scrolling when modal is open
     }
 
@@ -116,11 +174,17 @@ function setModal(value: boolean) {
   if (value === false) {
     if (props.onClose) props.onClose()
 
-    // Remove this modal from the registry
-    openModals.delete(props.id)
+    // Find and remove this modal from the registry
+    const modalElement = document.querySelector(`[data-modal-id="${props.id}"]`) as HTMLElement
+    if (modalElement) {
+      const uniqueId = modalElement.getAttribute('data-modal-unique-id')
+      if (uniqueId) {
+        modalRegistry.modals.delete(uniqueId)
+      }
+    }
 
     // Only restore body overflow if this is the last open modal
-    if (openModals.size === 0) {
+    if (modalRegistry.modals.size === 0) {
       document.body.style.overflow = '' // Restore scrolling
     }
 
@@ -132,47 +196,7 @@ function setModal(value: boolean) {
   isOpen.value = value
 }
 
-// Calculate the highest z-index for a new modal
-function calculateHighestZIndex(): number {
-  // Start with the base z-index
-  let newZIndex = baseZIndex
-
-  // Find the highest z-index currently in use
-  if (openModals.size > 0) {
-    const values = Array.from(openModals.values())
-    newZIndex = Math.max(...values) + 1
-  }
-
-  // Ensure we stay within range (40-59)
-  if (newZIndex >= 59) {
-    // If we're approaching the upper limit, reset all z-indexes
-    resetAllModalZIndexes()
-    return baseZIndex + 1
-  }
-
-  return newZIndex
-}
-
-// Reset all modal z-indexes when we approach the upper limit
-function resetAllModalZIndexes() {
-  // Sort modals by their current z-index to maintain relative ordering
-  const entries = Array.from(openModals.entries())
-  entries.sort((a, b) => a[1] - b[1])
-
-  // Reassign z-indexes starting from baseZIndex
-  let newIndex = baseZIndex
-  entries.forEach(([id, _]) => {
-    openModals.set(id, newIndex)
-
-    // Find the modal element and update its z-index
-    const modalElement = document.querySelector(`[data-modal-id="${id}"]`) as HTMLElement
-    if (modalElement) {
-      modalElement.style.zIndex = newIndex.toString()
-    }
-
-    newIndex++
-  })
-}
+// These functions have been moved to the global registry object
 
 // After modal is opened, set focus and collect focusable elements
 watch(isOpen, async (newVal) => {
@@ -205,10 +229,18 @@ onUnmounted(() => {
   eventBus.off(`${props.id}Modal`, setModal)
   document.removeEventListener('keydown', handleKeyDown)
 
-  // Only restore body overflow if this modal was open when unmounted
+  // Clean up the modal registry if this modal was open when unmounted
   if (isOpen.value) {
-    const activeModals = document.querySelectorAll('[data-modal-active="true"]')
-    if (activeModals.length <= 1) {
+    const modalElement = document.querySelector(`[data-modal-id="${props.id}"]`) as HTMLElement
+    if (modalElement) {
+      const uniqueId = modalElement.getAttribute('data-modal-unique-id')
+      if (uniqueId) {
+        modalRegistry.modals.delete(uniqueId)
+      }
+    }
+
+    // Only restore body overflow if this is the last open modal
+    if (modalRegistry.modals.size === 0) {
       document.body.style.overflow = '' // Restore scrolling
     }
   }

package/package.json

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