refactor: update ProductCard, ProductGrid, and MarketPage components for improved product handling and internal state management

- Removed direct store dependency from ProductCard.vue, replacing it with event emission for adding products to the cart.
- Enhanced ProductGrid.vue to manage product detail dialog internally, improving user interaction and state handling.
- Streamlined MarketPage.vue by removing redundant product detail dialog logic, focusing on cleaner component structure.
- Updated event handling for adding products to the cart with quantity support, enhancing flexibility in product management.

These changes improve the modularity and maintainability of the market components, providing a better user experience when interacting with products.

src/modules/market/components/ProductGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="product-grid-container">
     <!-- Loading State -->
     <div v-if="isLoading" class="flex justify-center items-center min-h-64">
       <div class="flex flex-col items-center space-y-4">
@@ -23,18 +23,28 @@
         v-for="product in products"
         :key="product.id"
         :product="product as Product"
-        @add-to-cart="$emit('add-to-cart', $event)"
-        @view-details="$emit('view-details', $event)"
+        @add-to-cart="handleAddToCart"
+        @view-details="handleViewDetails"
         @view-stall="$emit('view-stall', $event)"
       />
     </div>
+
+    <!-- Product Detail Dialog - Now managed internally -->
+    <ProductDetailDialog
+      v-if="selectedProduct"
+      :product="selectedProduct"
+      :isOpen="showProductDetail"
+      @close="closeProductDetail"
+      @add-to-cart="handleDialogAddToCart"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { Package as EmptyIcon } from 'lucide-vue-next'
 import ProductCard from './ProductCard.vue'
+import ProductDetailDialog from './ProductDetailDialog.vue'
 import type { Product } from '../types/market'
 
 interface Props {
@@ -66,9 +76,8 @@ const props = withDefaults(defineProps<Props>(), {
   })
 })
 
-defineEmits<{
-  'add-to-cart': [product: Product]
-  'view-details': [product: Product]
+const emit = defineEmits<{
+  'add-to-cart': [product: Product, quantity?: number]
   'view-stall': [stallId: string]
 }>()
 
@@ -89,4 +98,30 @@ const gridClasses = computed(() => {
 
   return classes.join(' ')
 })
+
+// Internal state for product detail dialog
+const showProductDetail = ref(false)
+const selectedProduct = ref<Product | null>(null)
+
+// Handle view details internally
+const handleViewDetails = (product: Product) => {
+  selectedProduct.value = product
+  showProductDetail.value = true
+}
+
+const closeProductDetail = () => {
+  showProductDetail.value = false
+  selectedProduct.value = null
+}
+
+// Handle add to cart from product card (quick add, quantity 1)
+const handleAddToCart = (product: Product) => {
+  emit('add-to-cart', product, 1)
+}
+
+// Handle add to cart from dialog (with custom quantity)
+const handleDialogAddToCart = (product: Product, quantity: number) => {
+  emit('add-to-cart', product, quantity)
+  closeProductDetail()
+}
 </script>