feat: Implement pending product processing in useMarket composable

- Introduce a queue for products that arrive before their corresponding stalls are loaded.
- Add a new function to process pending products and match them with available stalls.
- Enhance event handling to ensure pending products are processed when stalls are added, improving data integrity and user experience.

src/composables/useMarket.ts

@@ -22,6 +22,9 @@ export function useMarket() {
   // Track processed event IDs to prevent duplicates (like nostr-market-app)
   const processedEventIds = new Set<string>()
   
+  // Queue for products that arrive before their stalls
+  const pendingProducts = ref<Array<{event: any, productData: any}>>([])
+  
   // Market loading state
   const loadMarket = async (naddr: string) => {
     try {
@@ -221,6 +224,9 @@ export function useMarket() {
         marketStore.addStall(stall)
       })
       
+      // Process any pending products that might match the loaded stalls
+      processPendingProducts()
+      
     } catch (err) {
       console.error('Error loading stalls:', err)
       // Don't throw error, continue without stalls
@@ -432,6 +438,44 @@ export function useMarket() {
     }
   }
   
+  const processPendingProducts = () => {
+    console.log('Processing pending products:', pendingProducts.value.length)
+    const remaining = pendingProducts.value.filter(({ productData }) => {
+      const stall = marketStore.stalls.find(s => s.id === productData.stall_id)
+      if (stall) {
+        console.log('Found matching stall for pending product:', { 
+          productId: productData.id, 
+          stallId: stall.id, 
+          stallName: stall.name 
+        })
+        
+        const product: Product = {
+          id: productData.id,
+          stall_id: stall.id,
+          stallName: stall.name,
+          name: productData.name,
+          description: productData.description,
+          price: productData.price,
+          currency: productData.currency,
+          quantity: productData.quantity,
+          images: productData.images,
+          categories: productData.categories,
+          createdAt: productData.event?.created_at || Date.now() / 1000,
+          updatedAt: productData.event?.created_at || Date.now() / 1000
+        }
+        
+        marketStore.addProduct(product)
+        return false // Remove from pending
+      }
+      return true // Keep in pending
+    })
+    
+    pendingProducts.value = remaining
+    if (remaining.length > 0) {
+      console.log('Still pending products:', remaining.length)
+    }
+  }
+  
   const handleStallEvent = (event: any) => {
     try {
       const stallData = JSON.parse(event.content)
@@ -452,6 +496,9 @@ export function useMarket() {
       }
       
       marketStore.addStall(stall)
+      
+      // Process any pending products that might match this stall
+      processPendingProducts()
     } catch (err) {
       console.warn('Failed to parse stall event:', err)
     }
@@ -489,11 +536,8 @@ export function useMarket() {
         
         marketStore.addProduct(product)
       } else {
-        console.warn('No matching stall found for product:', { 
-          productId: productData.id, 
-          stallId: productData.stall_id,
-          availableStalls: marketStore.stalls.map(s => ({ id: s.id, name: s.name }))
-        })
+        console.log('Stall not found yet, queuing product for later processing')
+        pendingProducts.value.push({ event, productData })
       }
     } catch (err) {
       console.warn('Failed to parse product event:', err)