From 98934ed61db584cca5cc60a66a18f212240917cc Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 28 Sep 2025 12:58:11 +0200
Subject: [PATCH] refactor: streamline ImageLightbox and update
 ProductDetailPage for better image handling

- Removed unused `closeOnBackdropClick` option from `useImageLightbox` for cleaner code.
- Simplified the product assignment in `ProductDetailPage` by creating a mutable copy of product data, ensuring proper handling of images and categories.

These changes enhance the maintainability and clarity of the image handling components in the application.
---
 src/components/ui/image/ImageLightbox.vue               | 2 +-
 src/components/ui/image/composables/useImageLightbox.ts | 1 -
 src/modules/market/views/ProductDetailPage.vue          | 7 ++++++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/image/ImageLightbox.vue b/src/components/ui/image/ImageLightbox.vue
index cf96a87..e3049fe 100644
--- a/src/components/ui/image/ImageLightbox.vue
+++ b/src/components/ui/image/ImageLightbox.vue
@@ -89,7 +89,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import { X, ChevronLeft, ChevronRight } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
 import ProgressiveImage from './ProgressiveImage.vue'
diff --git a/src/components/ui/image/composables/useImageLightbox.ts b/src/components/ui/image/composables/useImageLightbox.ts
index 95fc5cf..4af8013 100644
--- a/src/components/ui/image/composables/useImageLightbox.ts
+++ b/src/components/ui/image/composables/useImageLightbox.ts
@@ -28,7 +28,6 @@ export function useImageLightbox(
 ) {
   const {
     enableKeyboardNavigation = true,
-    closeOnBackdropClick = true,
     enableSwipeGestures = true
   } = options
 
diff --git a/src/modules/market/views/ProductDetailPage.vue b/src/modules/market/views/ProductDetailPage.vue
index 36c0840..b731b73 100644
--- a/src/modules/market/views/ProductDetailPage.vue
+++ b/src/modules/market/views/ProductDetailPage.vue
@@ -256,7 +256,12 @@ const loadProduct = async () => {
       throw new Error('Product not found')
     }
 
-    product.value = productData
+    // Create a mutable copy to satisfy type requirements
+    product.value = {
+      ...productData,
+      images: productData.images ? [...productData.images] : undefined,
+      categories: productData.categories ? [...productData.categories] : undefined
+    }
 
     // Update page title
     document.title = `${productData.name} - Product Details`