feat(gallery): scroll to carousel current index

app/components/GalleryModal.vue

@@ -17,13 +17,18 @@ const props = defineProps<{
   initialIndex: number;
 }>();
 
-const emit = defineEmits<{ close: [] }>();
+const emit = defineEmits<{ close: [number] }>();
 
 const currentIndex = ref(props.initialIndex);
 </script>
 
 <template>
-  <UModal fullscreen :ui="{ body: 'bg-black', header: 'hidden' }">
+  <UModal
+    fullscreen
+    :dismissible="false"
+    :ui="{ body: 'bg-black', header: 'hidden' }"
+    @close:prevent="emit('close', currentIndex)"
+  >
     <template #body>
       <div
         class="relative w-full h-full flex flex-col items-center justify-center"
@@ -35,11 +40,12 @@ const currentIndex = ref(props.initialIndex);
           size="xl"
           class="absolute top-4 right-4 z-10"
           aria-label="Close modal"
-          @click="emit('close')"
+          @click="emit('close', currentIndex)"
         />
 
         <UCarousel
           v-slot="{ item }"
+          :start-index="props.initialIndex"
           :items="images"
           :ui="{
             item: 'flex-shrink-0 flex flex-col items-center justify-center select-none',
@@ -57,6 +63,7 @@ const currentIndex = ref(props.initialIndex);
             class: 'right-4!',
             ui: { leadingIcon: 'size-8' },
           }"
+          :duration="15"
           class="w-full h-full mt-10"
           @select="(index) => (currentIndex = index)"
         >

app/pages/gallery.vue

@@ -170,10 +170,20 @@ const galleryModal = overlay.create(LazyGalleryModal);
 const openModal = async (image: ImageMetadata) => {
   const index = images.indexOf(image);
   if (index !== -1) {
-    galleryModal.open({
+    const instance = galleryModal.open({
       images,
       initialIndex: index,
     });
+
+    const newIndex: number = await instance.result;
+    if (newIndex !== index) {
+      const targetElement = document.querySelector(
+        `[data-image-index="${newIndex}"]`,
+      );
+      if (targetElement) {
+        targetElement.scrollIntoView({ behavior: "instant", block: "center" });
+      }
+    }
   }
 };
 
@@ -219,6 +229,7 @@ onUnmounted(() => {
         <div
           v-for="(image, idx) in getColumnImages(col)"
           :key="idx"
+          :data-image-index="images.indexOf(image)"
           class="relative overflow-hidden rounded-sm bg-black cursor-pointer transition-transform"
           @click="openModal(image)"
         >