From 7334437b775cc2d8451ce4fa1587cdcb3621697c Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Thu, 25 Sep 2025 23:35:37 +0200
Subject: [PATCH] Enhance category extraction in useMarket and update
 MarketPage layout

- Added functionality to extract categories from Nostr event tags in the useMarket composable, improving product categorization.
- Updated MarketPage layout to ensure proper rendering of category filters, enhancing the user interface for browsing by category.

These changes improve the clarity and usability of product categorization within the market module.
---
 src/modules/market/composables/useMarket.ts | 17 +++++++++++++++--
 src/modules/market/views/MarketPage.vue     |  5 +++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/modules/market/composables/useMarket.ts b/src/modules/market/composables/useMarket.ts
index e4c8828..a25d827 100644
--- a/src/modules/market/composables/useMarket.ts
+++ b/src/modules/market/composables/useMarket.ts
@@ -291,6 +291,13 @@ export function useMarket() {
           const productData = JSON.parse(latestEvent.content)
           const stallId = productData.stall_id || 'unknown'
 
+          // Extract categories from Nostr event tags (standard approach)
+          const categories = latestEvent.tags
+            .filter((tag: any) => tag[0] === 't')
+            .map((tag: any) => tag[1])
+            .filter((cat: string) => cat && cat.trim())
+
+
           // Look up the stall name from the stalls array
           const stall = marketStore.stalls.find(s => s.id === stallId)
           const stallName = stall?.name || 'Unknown Stall'
@@ -305,7 +312,7 @@ export function useMarket() {
             currency: productData.currency || 'sats',
             quantity: productData.quantity || 1,
             images: productData.images || [],
-            categories: productData.categories || [],
+            categories: categories,
             createdAt: latestEvent.created_at,
             updatedAt: latestEvent.created_at
           }
@@ -476,6 +483,12 @@ export function useMarket() {
         const productData = JSON.parse(event.content)
         const stallId = productData.stall_id || 'unknown'
 
+        // Extract categories from Nostr event tags (standard approach)
+        const categories = event.tags
+          .filter((tag: any) => tag[0] === 't')
+          .map((tag: any) => tag[1])
+          .filter((cat: string) => cat && cat.trim())
+
         // Look up the stall name from the stalls array
         const stall = marketStore.stalls.find(s => s.id === stallId)
         const stallName = stall?.name || 'Unknown Stall'
@@ -491,7 +504,7 @@ export function useMarket() {
           currency: productData.currency || 'sats',
           quantity: productData.quantity || 1,
           images: productData.images || [],
-          categories: productData.categories || [],
+          categories: categories,
           createdAt: event.created_at,
           updatedAt: event.created_at
         }
diff --git a/src/modules/market/views/MarketPage.vue b/src/modules/market/views/MarketPage.vue
index ffe9dd7..85acaaf 100644
--- a/src/modules/market/views/MarketPage.vue
+++ b/src/modules/market/views/MarketPage.vue
@@ -52,10 +52,11 @@
         </div>
       </div>
 
+
       <!-- Enhanced Category Filters -->
       <div v-if="marketStore.allCategories.length > 0" class="mb-6">
-        <div class="flex items-center justify-between mb-3">
-          <h3 class="text-lg font-semibold text-gray-700">Browse by Category</h3>
+          <div class="flex items-center justify-between mb-3">
+            <h3 class="text-lg font-semibold text-gray-700">Browse by Category</h3>
           <Button
             v-if="selectedCategoriesCount > 0"
             @click="clearAllCategoryFilters"