refactor: simplify LoadingErrorState and enhance MarketSearchBar functionality

- Removed unnecessary imports and streamlined the LoadingErrorState component by eliminating redundant props.
- Improved keyboard handling in MarketSearchBar to support basic Escape key functionality and enhanced keyboard shortcuts.
- Updated MerchantStore and MarketPage components to utilize the revised LoadingErrorState and MarketSearchBar, ensuring consistent loading/error handling and search capabilities.
- Enhanced StallView to provide better category filtering and product search experience.

These changes improve code clarity and maintainability while enhancing user interaction across the market module.

src/modules/market/components/LoadingErrorState.vue

@@ -65,7 +65,6 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import { Button } from '@/components/ui/button'
 import { AlertCircle } from 'lucide-vue-next'
 
@@ -116,7 +115,7 @@ interface Emits {
   (e: 'retry'): void
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   isLoading: false,
   hasError: false,
   showRetry: true,
@@ -124,7 +123,7 @@ const props = withDefaults(defineProps<Props>(), {
   fullHeight: true
 })
 
-const emit = defineEmits<Emits>()
+defineEmits<Emits>()
 </script>
 
 <style scoped>

src/modules/market/components/MarketSearchBar.vue

@@ -292,8 +292,19 @@ const handleClear = () => {
 }
 
 const handleKeydown = (event: KeyboardEvent) => {
-  if (!props.showEnhancements || !useSearchKeyboardShortcuts.value) return
+  if (!props.showEnhancements) return
 
+  // Handle basic Escape key for simple mode
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    if (searchQuery.value) {
+      handleClear()
+    }
+    return
+  }
+
+  // Use enhanced keyboard shortcuts if available
+  if (useSearchKeyboardShortcuts.value && handleSearchKeydown) {
     const shouldClear = handleSearchKeydown(event)
     if (shouldClear) {
       if (searchQuery.value) {
@@ -302,6 +313,7 @@ const handleKeydown = (event: KeyboardEvent) => {
         blurSearchInput()
       }
     }
+  }
 }
 
 const filterByCategory = (category: string) => {
@@ -347,7 +359,7 @@ const handleBlur = () => {
 // Enhanced mode methods (initialized conditionally)
 let focusSearchInput = () => {}
 let blurSearchInput = () => {}
-let handleSearchKeydown = () => false
+let handleSearchKeydown = (_event: KeyboardEvent) => false
 
 // Initialize keyboard shortcuts for enhanced mode
 watch(() => props.showEnhancements, async (showEnhancements) => {

src/modules/market/components/MerchantStore.vue

@@ -1,14 +1,26 @@
 <template>
   <div class="space-y-6">
-    <LoadingErrorState
+    <!-- Loading State -->
-      :is-loading="isLoadingMerchant"
+    <div v-if="isLoadingMerchant" class="flex justify-center items-center py-12">
-      loading-message="Loading your merchant profile..."
+      <div class="flex flex-col items-center space-y-4">
-      :has-error="!!merchantCheckError"
+        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
-      error-title="Error Loading Merchant Status"
+        <p class="text-gray-600">Loading your merchant profile...</p>
-      :error-message="merchantCheckError || ''"
+      </div>
-      @retry="checkMerchantProfile"
+    </div>
-      :full-height="false"
+
-    >
+    <!-- Error State -->
+    <div v-else-if="merchantCheckError" class="flex justify-center items-center py-12">
+      <div class="text-center">
+        <h2 class="text-2xl font-bold text-red-600 mb-4">Error Loading Merchant Status</h2>
+        <p class="text-gray-600 mb-4">{{ merchantCheckError }}</p>
+        <Button @click="checkMerchantProfile" variant="outline">
+          Try Again
+        </Button>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div v-else>
       <!-- No Merchant Profile Empty State -->
       <div v-if="!userHasMerchantProfile" class="flex flex-col items-center justify-center py-12">
         <div class="w-24 h-24 bg-muted rounded-full flex items-center justify-center mb-6">
@@ -313,8 +325,6 @@
         @created="onProductCreated"
         @updated="onProductUpdated"
       />
-
-    </LoadingErrorState>
     </div>
 </template>
 
@@ -324,14 +334,12 @@ import { useRouter } from 'vue-router'
 import { useMarketStore } from '@/modules/market/stores/market'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
-import LoadingErrorState from './LoadingErrorState.vue'
 import {
   Package,
   Store,
   DollarSign,
   Star,
   Plus,
-  AlertCircle,
   User
 } from 'lucide-vue-next'
 import type { NostrmarketAPI, Merchant, Stall } from '../services/nostrmarketAPI'

src/modules/market/views/MarketPage.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="container mx-auto px-4 py-8">
     <LoadingErrorState
-      :is-loading="!isMarketReady && ((marketStore.isLoading ?? false) || marketPreloader.isPreloading)"
+      :is-loading="!isMarketReady && ((marketStore.isLoading ?? false) || marketPreloader.isPreloading.value)"
-      :loading-message="marketPreloader.isPreloading ? 'Preloading market...' : 'Loading market...'"
+      :loading-message="marketPreloader.isPreloading.value ? 'Preloading market...' : 'Loading market...'"
-      :has-error="!!(marketStore.error || marketPreloader.preloadError) && marketStore.products.length === 0"
+      :has-error="!!(marketStore.error || marketPreloader.preloadError.value) && marketStore.products.length === 0"
       error-title="Failed to load market"
-      :error-message="marketStore.error || marketPreloader.preloadError || ''"
+      :error-message="marketStore.error || marketPreloader.preloadError.value || ''"
       @retry="retryLoadMarket"
     >
       <!-- Market Header - Optimized for Mobile -->
@@ -82,7 +82,6 @@ import { useMarket } from '../composables/useMarket'
 import { useMarketPreloader } from '../composables/useMarketPreloader'
 import { useCategoryFilter } from '../composables/useCategoryFilter'
 import { config } from '@/lib/config'
-import { Button } from '@/components/ui/button'
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
 import MarketSearchBar from '../components/MarketSearchBar.vue'
 import ProductGrid from '../components/ProductGrid.vue'

src/modules/market/views/StallView.vue

@@ -68,8 +68,9 @@
     <CategoryFilterBar
       v-if="stallCategories.length > 0"
       :categories="stallCategories"
-      :selected-categories="selectedCategories"
+      :selected-count="selectedCategories.length"
       :filter-mode="filterMode"
+      :product-count="productCount"
       title="Categories"
       @toggle-category="toggleCategoryFilter"
       @set-filter-mode="setFilterMode"
@@ -81,7 +82,7 @@
     <div class="mb-4 sm:mb-6 flex flex-col sm:flex-row gap-2 sm:gap-4">
       <div class="flex-1">
         <MarketSearchBar
-          :data="stallProducts"
+          :data="stallProducts as Product[]"
           :options="searchOptions"
           placeholder="Search products in this stall..."
           :show-enhancements="false"
@@ -203,11 +204,20 @@ const stallProducts = computed(() => {
 
 // Get unique categories for this stall
 const stallCategories = computed(() => {
-  const categories = new Set<string>()
+  const categoryCount = new Map<string, number>()
   stallProducts.value.forEach(product => {
-    product.categories?.forEach(cat => categories.add(cat))
+    product.categories?.forEach(cat => {
+      categoryCount.set(cat, (categoryCount.get(cat) || 0) + 1)
     })
-  return Array.from(categories).sort()
+  })
+
+  return Array.from(categoryCount.entries())
+    .sort((a, b) => a[0].localeCompare(b[0]))
+    .map(([category, count]) => ({
+      category,
+      count,
+      selected: selectedCategories.value.includes(category)
+    }))
 })
 
 // Product count