Add MarketProduct component and integrate into NostrFeed

- Introduced MarketProduct.vue to display market product details, including images, pricing, and availability status.
- Enhanced NostrFeed.vue to render MarketProduct components for market events, allowing users to view and share products.
- Implemented market data parsing in marketParser.ts to handle Nostr market events, ensuring structured data representation.

These changes improve the marketplace functionality within the feed, enhancing user engagement with market products.

src/modules/nostr-feed/components/NostrFeed.vue

@@ -9,6 +9,8 @@ import { Megaphone, RefreshCw, AlertCircle } from 'lucide-vue-next'
 import { useFeed } from '../composables/useFeed'
 import appConfig from '@/app.config'
 import type { ContentFilter } from '../services/FeedService'
+import MarketProduct from './MarketProduct.vue'
+import { parseMarketProduct, isMarketEvent, getMarketEventType } from '../utils/marketParser'
 
 const props = defineProps<{
   relays?: string[]
@@ -62,6 +64,34 @@ const feedDescription = computed(() => {
 function isAdminPost(pubkey: string): boolean {
   return adminPubkeys.includes(pubkey)
 }
+
+// Get market product data for market events
+function getMarketProductData(note: any) {
+  if (note.kind === 30018) {
+    // Create a mock NostrEvent from our FeedPost
+    const mockEvent = {
+      id: note.id,
+      pubkey: note.pubkey,
+      content: note.content,
+      created_at: note.created_at,
+      kind: note.kind,
+      tags: note.tags
+    }
+    return parseMarketProduct(mockEvent)
+  }
+  return null
+}
+
+// Handle market product actions
+function onViewProduct(productId: string) {
+  console.log('View product:', productId)
+  // TODO: Navigate to product detail page or open modal
+}
+
+function onShareProduct(productId: string) {
+  console.log('Share product:', productId)
+  // TODO: Implement sharing functionality
+}
 </script>
 
 <template>
@@ -129,17 +159,13 @@ function isAdminPost(pubkey: string): boolean {
         </p>
       </div>
 
-      <!-- Notes List -->
+      <!-- Posts List -->
       <ScrollArea v-else class="h-[400px] pr-4">
         <div class="space-y-4">
-          <div
-            v-for="note in notes"
-            :key="note.id"
-            class="p-4 border rounded-lg hover:bg-accent/50 transition-colors"
-          >
-            <!-- Note Header -->
-            <div class="flex items-start justify-between mb-2">
-              <div class="flex items-center gap-2">
+          <div v-for="note in notes" :key="note.id">
+            <!-- Market Product Component (kind 30018) -->
+            <template v-if="note.kind === 30018">
+              <div class="mb-2 flex items-center gap-2 text-xs text-muted-foreground">
                 <Badge
                   v-if="isAdminPost(note.pubkey)"
                   variant="default"
@@ -147,34 +173,84 @@ function isAdminPost(pubkey: string): boolean {
                 >
                   Admin
                 </Badge>
-                <Badge
-                  v-if="note.isReply"
-                  variant="secondary"
-                  class="text-xs"
-                >
-                  Reply
-                </Badge>
-                <span class="text-xs text-muted-foreground">
-                  {{ formatDistanceToNow(note.created_at * 1000, { addSuffix: true }) }}
-                </span>
+                <span>{{ formatDistanceToNow(note.created_at * 1000, { addSuffix: true }) }}</span>
               </div>
-            </div>
+              <MarketProduct
+                v-if="getMarketProductData(note)"
+                :product="getMarketProductData(note)!"
+                @view-product="onViewProduct"
+                @share-product="onShareProduct"
+              />
+              <!-- Fallback for invalid market data -->
+              <div
+                v-else
+                class="p-4 border rounded-lg hover:bg-accent/50 transition-colors border-destructive/20"
+              >
+                <div class="flex items-center gap-2 mb-2">
+                  <Badge variant="destructive" class="text-xs">
+                    Invalid Market Product
+                  </Badge>
+                  <span class="text-xs text-muted-foreground">
+                    {{ formatDistanceToNow(note.created_at * 1000, { addSuffix: true }) }}
+                  </span>
+                </div>
+                <div class="text-sm text-muted-foreground">
+                  Unable to parse market product data
+                </div>
+              </div>
+            </template>
 
-            <!-- Note Content -->
-            <div class="text-sm leading-relaxed whitespace-pre-wrap">
-              {{ note.content }}
-            </div>
+            <!-- Regular Text Posts and Other Event Types -->
+            <div
+              v-else
+              class="p-4 border rounded-lg hover:bg-accent/50 transition-colors"
+            >
+              <!-- Note Header -->
+              <div class="flex items-start justify-between mb-2">
+                <div class="flex items-center gap-2">
+                  <Badge
+                    v-if="isAdminPost(note.pubkey)"
+                    variant="default"
+                    class="text-xs"
+                  >
+                    Admin
+                  </Badge>
+                  <Badge
+                    v-if="note.isReply"
+                    variant="secondary"
+                    class="text-xs"
+                  >
+                    Reply
+                  </Badge>
+                  <Badge
+                    v-if="isMarketEvent({ kind: note.kind })"
+                    variant="outline"
+                    class="text-xs"
+                  >
+                    {{ getMarketEventType({ kind: note.kind }) }}
+                  </Badge>
+                  <span class="text-xs text-muted-foreground">
+                    {{ formatDistanceToNow(note.created_at * 1000, { addSuffix: true }) }}
+                  </span>
+                </div>
+              </div>
 
-            <!-- Note Footer -->
-            <div v-if="note.mentions.length > 0" class="mt-2 pt-2 border-t">
-              <div class="flex items-center gap-1 text-xs text-muted-foreground">
-                <span>Mentions:</span>
-                <span v-for="mention in note.mentions.slice(0, 3)" :key="mention" class="font-mono">
-                  {{ mention.slice(0, 8) }}...
-                </span>
-                <span v-if="note.mentions.length > 3" class="text-muted-foreground">
-                  +{{ note.mentions.length - 3 }} more
-                </span>
+              <!-- Note Content -->
+              <div class="text-sm leading-relaxed whitespace-pre-wrap">
+                {{ note.content }}
+              </div>
+
+              <!-- Note Footer -->
+              <div v-if="note.mentions.length > 0" class="mt-2 pt-2 border-t">
+                <div class="flex items-center gap-1 text-xs text-muted-foreground">
+                  <span>Mentions:</span>
+                  <span v-for="mention in note.mentions.slice(0, 3)" :key="mention" class="font-mono">
+                    {{ mention.slice(0, 8) }}...
+                  </span>
+                  <span v-if="note.mentions.length > 3" class="text-muted-foreground">
+                    +{{ note.mentions.length - 3 }} more
+                  </span>
+                </div>
               </div>
             </div>
           </div>