From a2dbcc868cead588d72126fe15696120066196d3 Mon Sep 17 00:00:00 2001
From: William Chong <me@williamchong.cloud>
Date: Mon, 2 Feb 2026 02:23:04 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=9A=B8=20Add=20nav=20arrows=20in=20ca?=
 =?UTF-8?q?rousel=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BookCoverCarousel.vue | 76 +++++++++++++++++++++-----------
 1 file changed, 50 insertions(+), 26 deletions(-)

diff --git a/components/BookCoverCarousel.vue b/components/BookCoverCarousel.vue
index 2f94bc72..fbb0cf5e 100644
--- a/components/BookCoverCarousel.vue
+++ b/components/BookCoverCarousel.vue
@@ -64,33 +64,50 @@
       :close="{ color: 'neutral', variant: 'ghost', class: 'text-white' }"
     >
       <template #content>
-        <img
-          v-if="modalItem?.type === 'cover' || modalItem?.type === 'image'"
-          :src="modalItem?.fullSrc || modalItem?.src"
-          :alt="props.alt"
-          class="w-full h-auto max-h-[80vh] object-contain"
-        >
+        <div class="relative">
+          <img
+            v-if="modalItem?.type === 'cover' || modalItem?.type === 'image'"
+            :src="modalItem?.fullSrc || modalItem?.src"
+            :alt="props.alt"
+            class="w-full h-auto max-h-[80vh] object-contain"
+          >
+
+          <div
+            v-else-if="modalItem?.type === 'youtube' && modalItem?.videoId"
+            class="aspect-video"
+          >
+            <ScriptYouTubePlayer
+              :video-id="modalItem.videoId"
+              :player-vars="{ autoplay: 1, rel: 0, playsinline: 1 }"
+              trigger="visible"
+              class="w-full h-full"
+            />
+          </div>
+
+          <video
+            v-else-if="modalItem?.type === 'video'"
+            :src="modalItem?.src"
+            controls
+            autoplay
+            playsinline
+            class="w-full max-h-[80vh]"
+          />
 
-        <div
-          v-else-if="modalItem?.type === 'youtube' && modalItem?.videoId"
-          class="aspect-video"
-        >
-          <ScriptYouTubePlayer
-            :video-id="modalItem.videoId"
-            :player-vars="{ autoplay: 1, rel: 0, playsinline: 1 }"
-            trigger="visible"
-            class="w-full h-full"
+          <UButton
+            icon="i-material-symbols-chevron-left"
+            color="neutral"
+            variant="ghost"
+            class="absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-black/50 text-white hover:bg-black/70 cursor-pointer"
+            @click="navigateModal(-1)"
+          />
+          <UButton
+            icon="i-material-symbols-chevron-right"
+            color="neutral"
+            variant="ghost"
+            class="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-black/50 text-white hover:bg-black/70 cursor-pointer"
+            @click="navigateModal(1)"
           />
         </div>
-
-        <video
-          v-else-if="modalItem?.type === 'video'"
-          :src="modalItem?.src"
-          controls
-          autoplay
-          playsinline
-          class="w-full max-h-[80vh]"
-        />
       </template>
     </UModal>
   </div>
@@ -141,13 +158,20 @@ const props = defineProps({
 })
 
 const isModalOpen = ref(false)
-const modalItem = ref<CarouselItem | null>(null)
+const modalItemIndex = ref(0)
+const modalItem = computed(() => carouselItems.value[modalItemIndex.value] || null)
 
 function openModal(item: CarouselItem) {
-  modalItem.value = item
+  const index = carouselItems.value.indexOf(item)
+  modalItemIndex.value = index >= 0 ? index : 0
   isModalOpen.value = true
 }
 
+function navigateModal(direction: number) {
+  const len = carouselItems.value.length
+  modalItemIndex.value = (modalItemIndex.value + direction + len) % len
+}
+
 const carouselItems = computed<CarouselItem[]>(() => {
   const items: CarouselItem[] = []
 

From a2f8d019a70ac6225c64f1bc470ba32a25553857 Mon Sep 17 00:00:00 2001
From: William Chong <me@williamchong.cloud>
Date: Mon, 2 Feb 2026 15:27:37 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Move=20relative=20wrapper=20?=
 =?UTF-8?q?into=20modal=20content?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BookCoverCarousel.vue | 60 +++++++++++++++++---------------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/components/BookCoverCarousel.vue b/components/BookCoverCarousel.vue
index fbb0cf5e..899879f3 100644
--- a/components/BookCoverCarousel.vue
+++ b/components/BookCoverCarousel.vue
@@ -59,44 +59,45 @@
     <UModal
       v-model:open="isModalOpen"
       :ui="{
-        content: 'max-w-4xl bg-black',
+        content: 'relative max-w-4xl bg-black',
       }"
       :close="{ color: 'neutral', variant: 'ghost', class: 'text-white' }"
     >
       <template #content>
-        <div class="relative">
-          <img
-            v-if="modalItem?.type === 'cover' || modalItem?.type === 'image'"
-            :src="modalItem?.fullSrc || modalItem?.src"
-            :alt="props.alt"
-            class="w-full h-auto max-h-[80vh] object-contain"
-          >
-
-          <div
-            v-else-if="modalItem?.type === 'youtube' && modalItem?.videoId"
-            class="aspect-video"
-          >
-            <ScriptYouTubePlayer
-              :video-id="modalItem.videoId"
-              :player-vars="{ autoplay: 1, rel: 0, playsinline: 1 }"
-              trigger="visible"
-              class="w-full h-full"
-            />
-          </div>
-
-          <video
-            v-else-if="modalItem?.type === 'video'"
-            :src="modalItem?.src"
-            controls
-            autoplay
-            playsinline
-            class="w-full max-h-[80vh]"
+        <img
+          v-if="modalItem?.type === 'cover' || modalItem?.type === 'image'"
+          :src="modalItem?.fullSrc || modalItem?.src"
+          :alt="props.alt"
+          class="w-full h-auto max-h-[80vh] object-contain"
+        >
+
+        <div
+          v-else-if="modalItem?.type === 'youtube' && modalItem?.videoId"
+          class="aspect-video"
+        >
+          <ScriptYouTubePlayer
+            :video-id="modalItem.videoId"
+            :player-vars="{ autoplay: 1, rel: 0, playsinline: 1 }"
+            trigger="visible"
+            class="w-full h-full"
           />
+        </div>
+
+        <video
+          v-else-if="modalItem?.type === 'video'"
+          :src="modalItem?.src"
+          controls
+          autoplay
+          playsinline
+          class="w-full max-h-[80vh]"
+        />
 
+        <template v-if="carouselItems.length > 1">
           <UButton
             icon="i-material-symbols-chevron-left"
             color="neutral"
             variant="ghost"
+            aria-label="Previous"
             class="absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-black/50 text-white hover:bg-black/70 cursor-pointer"
             @click="navigateModal(-1)"
           />
@@ -104,10 +105,11 @@
             icon="i-material-symbols-chevron-right"
             color="neutral"
             variant="ghost"
+            aria-label="Next"
             class="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-black/50 text-white hover:bg-black/70 cursor-pointer"
             @click="navigateModal(1)"
           />
-        </div>
+        </template>
       </template>
     </UModal>
   </div>