From 77ed913e1b319422fa3be158a6f1b90b498fb457 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Tue, 16 Sep 2025 22:58:44 +0200
Subject: [PATCH] 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.
---
 .../nostr-feed/components/MarketProduct.vue   | 171 ++++++++++++++++++
 .../nostr-feed/components/NostrFeed.vue       | 144 +++++++++++----
 src/modules/nostr-feed/utils/marketParser.ts  | 101 +++++++++++
 3 files changed, 382 insertions(+), 34 deletions(-)
 create mode 100644 src/modules/nostr-feed/components/MarketProduct.vue
 create mode 100644 src/modules/nostr-feed/utils/marketParser.ts

diff --git a/src/modules/nostr-feed/components/MarketProduct.vue b/src/modules/nostr-feed/components/MarketProduct.vue
new file mode 100644
index 0000000..e80b842
--- /dev/null
+++ b/src/modules/nostr-feed/components/MarketProduct.vue
@@ -0,0 +1,171 @@
+<template>
+  <Card class="overflow-hidden">
+    <!-- Product Image -->
+    <div v-if="product.images && product.images.length > 0" class="relative">
+      <img
+        :src="product.images[0]"
+        :alt="product.name"
+        class="w-full h-48 object-cover"
+        @error="onImageError"
+      />
+      <!-- Price Badge -->
+      <div class="absolute top-2 right-2 bg-black/80 text-white px-3 py-1 rounded-full text-sm font-semibold">
+        {{ formatPrice(product.price, product.currency) }}
+      </div>
+      <!-- Availability Badge -->
+      <div v-if="!product.active" class="absolute top-2 left-2 bg-red-500 text-white px-2 py-1 rounded text-xs font-medium">
+        Unavailable
+      </div>
+      <div v-else-if="product.quantity <= 0" class="absolute top-2 left-2 bg-orange-500 text-white px-2 py-1 rounded text-xs font-medium">
+        Out of Stock
+      </div>
+      <div v-else-if="product.quantity <= 5" class="absolute top-2 left-2 bg-yellow-500 text-white px-2 py-1 rounded text-xs font-medium">
+        Limited Stock
+      </div>
+    </div>
+
+    <CardContent class="p-4">
+      <!-- Product Header -->
+      <div class="space-y-2">
+        <div class="flex items-start justify-between gap-2">
+          <h3 class="font-semibold text-lg line-clamp-1">{{ product.name }}</h3>
+          <Badge variant="secondary" class="text-xs">
+            <ShoppingBag class="w-3 h-3 mr-1" />
+            Market
+          </Badge>
+        </div>
+
+        <!-- Description -->
+        <p class="text-muted-foreground text-sm line-clamp-2">
+          {{ product.description }}
+        </p>
+      </div>
+
+      <!-- Product Details -->
+      <div class="mt-4 space-y-3">
+        <!-- Price and Quantity -->
+        <div class="flex items-center justify-between">
+          <div class="text-2xl font-bold">
+            {{ formatPrice(product.price, product.currency) }}
+          </div>
+          <div class="text-sm text-muted-foreground">
+            {{ product.quantity > 0 ? `${product.quantity} available` : 'Out of stock' }}
+          </div>
+        </div>
+
+        <!-- Shipping Info -->
+        <div v-if="product.shipping && product.shipping.length > 0" class="flex items-center gap-2 text-sm text-muted-foreground">
+          <Truck class="w-4 h-4" />
+          <span v-if="hasFreelShipping">Free shipping available</span>
+          <span v-else>Shipping from {{ formatPrice(minShippingCost, product.currency) }}</span>
+        </div>
+
+        <!-- Stall ID (for debugging/reference) -->
+        <div class="text-xs text-muted-foreground">
+          Stall: {{ product.stall_id }}
+        </div>
+      </div>
+
+      <!-- Action Buttons -->
+      <div class="mt-4 flex gap-2">
+        <Button
+          class="flex-1"
+          :disabled="!product.active || product.quantity <= 0"
+          @click="onViewProduct"
+        >
+          <ShoppingCart class="w-4 h-4 mr-2" />
+          {{ product.active && product.quantity > 0 ? 'View Product' : 'Unavailable' }}
+        </Button>
+        <Button variant="outline" size="icon" @click="onShareProduct">
+          <Share2 class="w-4 h-4" />
+        </Button>
+      </div>
+    </CardContent>
+  </Card>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { ShoppingBag, ShoppingCart, Truck, Share2 } from 'lucide-vue-next'
+
+export interface MarketProductData {
+  id: string
+  stall_id: string
+  name: string
+  description: string
+  images?: string[]
+  currency: string
+  price: number
+  quantity: number
+  active: boolean
+  shipping?: Array<{
+    id: string
+    cost: number
+  }>
+}
+
+interface Props {
+  product: MarketProductData
+}
+
+interface Emits {
+  (e: 'view-product', productId: string): void
+  (e: 'share-product', productId: string): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+// Computed properties
+const hasFreelShipping = computed(() => {
+  return props.product.shipping?.some(shipping => shipping.cost === 0) || false
+})
+
+const minShippingCost = computed(() => {
+  if (!props.product.shipping?.length) return 0
+  return Math.min(...props.product.shipping.map(s => s.cost))
+})
+
+// Methods
+const formatPrice = (price: number, currency: string) => {
+  if (currency.toLowerCase() === 'sat' || currency.toLowerCase() === 'sats') {
+    return `${price.toLocaleString()} sats`
+  }
+  if (currency.toLowerCase() === 'btc') {
+    return `₿${(price / 100000000).toFixed(8)}`
+  }
+  return `${price} ${currency.toUpperCase()}`
+}
+
+const onImageError = (event: Event) => {
+  const img = event.target as HTMLImageElement
+  img.style.display = 'none'
+}
+
+const onViewProduct = () => {
+  emit('view-product', props.product.id)
+}
+
+const onShareProduct = () => {
+  emit('share-product', props.product.id)
+}
+</script>
+
+<style scoped>
+.line-clamp-1 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+.line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/nostr-feed/components/NostrFeed.vue b/src/modules/nostr-feed/components/NostrFeed.vue
index a4a04f9..5472ffe 100644
--- a/src/modules/nostr-feed/components/NostrFeed.vue
+++ b/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>
diff --git a/src/modules/nostr-feed/utils/marketParser.ts b/src/modules/nostr-feed/utils/marketParser.ts
new file mode 100644
index 0000000..1c2e807
--- /dev/null
+++ b/src/modules/nostr-feed/utils/marketParser.ts
@@ -0,0 +1,101 @@
+import type { Event as NostrEvent } from 'nostr-tools'
+import type { MarketProductData } from '../components/MarketProduct.vue'
+
+export interface MarketStallData {
+  id: string
+  name: string
+  description: string
+  currency: string
+  shipping: Array<{
+    id: string
+    cost: number
+  }>
+}
+
+/**
+ * Parse a Nostr market product event (kind 30018) into structured data
+ */
+export function parseMarketProduct(event: NostrEvent): MarketProductData | null {
+  try {
+    if (event.kind !== 30018) {
+      return null
+    }
+
+    // Parse the JSON content
+    const productData = JSON.parse(event.content)
+
+    // Validate required fields
+    if (!productData.id || !productData.name || typeof productData.price !== 'number') {
+      console.warn('Invalid market product data:', productData)
+      return null
+    }
+
+    return {
+      id: productData.id,
+      stall_id: productData.stall_id || '',
+      name: productData.name,
+      description: productData.description || '',
+      images: Array.isArray(productData.images) ? productData.images : [],
+      currency: productData.currency || 'sat',
+      price: productData.price,
+      quantity: productData.quantity || 0,
+      active: productData.active !== false, // Default to true if not specified
+      shipping: Array.isArray(productData.shipping) ? productData.shipping : []
+    }
+  } catch (error) {
+    console.error('Failed to parse market product event:', error, event)
+    return null
+  }
+}
+
+/**
+ * Parse a Nostr market stall event (kind 30017) into structured data
+ */
+export function parseMarketStall(event: NostrEvent): MarketStallData | null {
+  try {
+    if (event.kind !== 30017) {
+      return null
+    }
+
+    const stallData = JSON.parse(event.content)
+
+    if (!stallData.id || !stallData.name) {
+      console.warn('Invalid market stall data:', stallData)
+      return null
+    }
+
+    return {
+      id: stallData.id,
+      name: stallData.name,
+      description: stallData.description || '',
+      currency: stallData.currency || 'sat',
+      shipping: Array.isArray(stallData.shipping) ? stallData.shipping : []
+    }
+  } catch (error) {
+    console.error('Failed to parse market stall event:', error, event)
+    return null
+  }
+}
+
+/**
+ * Check if an event is a market-related event
+ */
+export function isMarketEvent(event: NostrEvent): boolean {
+  return event.kind === 30017 || event.kind === 30018 || event.kind === 30019
+}
+
+/**
+ * Get a human-readable type for a market event
+ */
+export function getMarketEventType(event: NostrEvent): string {
+  switch (event.kind) {
+    case 30017:
+      return 'Market Stall'
+    case 30018:
+      return 'Product'
+    case 30019:
+      return 'Market Activity'
+    default:
+      return 'Unknown Market Event'
+  }
+}
\ No newline at end of file