feat: introduce CategoryFilterBar and ProductGrid components for enhanced product filtering and display

- Added CategoryFilterBar.vue to manage category filtering with AND/OR toggle options and clear all functionality.
- Implemented ProductGrid.vue to display products with loading and empty states, improving user experience.
- Refactored MarketPage.vue to utilize the new components, streamlining the layout and enhancing responsiveness.
- Updated StallView.vue to incorporate ProductGrid for consistent product display across views.

These changes enhance the overall usability and visual appeal of the market components, providing users with a more intuitive filtering and browsing experience.

src/modules/market/views/StallView.vue

@@ -117,32 +117,18 @@
       </div>
     </div>
 
-    <!-- Loading State -->
-    <div v-if="isLoading" class="flex justify-center items-center h-64">
-      <Loader2 class="w-12 h-12 animate-spin text-primary" />
-    </div>
-
-    <!-- Empty State -->
-    <div v-else-if="!filteredProducts.length" class="text-center py-12">
-      <Package class="w-24 h-24 text-muted-foreground/50 mx-auto mb-4" />
-      <h2 class="text-xl font-semibold mb-2 text-foreground">No Products Found</h2>
-      <p class="text-muted-foreground">
-        {{ searchQuery || selectedCategories.length > 0
-          ? 'Try adjusting your filters or search terms'
-          : 'This stall doesn\'t have any products yet' }}
-      </p>
-    </div>
-
-    <!-- Products Grid -->
-    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-      <ProductCard
-        v-for="product in filteredProducts"
-        :key="product.id"
-        :product="product as Product"
-        @view-details="viewProductDetails"
-        @view-stall="viewStall"
-      />
-    </div>
+    <!-- Products Grid with Loading and Empty States -->
+    <ProductGrid
+      :products="filteredProducts as Product[]"
+      :is-loading="isLoading"
+      loading-message="Loading stall products..."
+      empty-title="No Products Found"
+      :empty-message="searchQuery || selectedCategories.length > 0
+        ? 'Try adjusting your filters or search terms'
+        : 'This stall doesn\'t have any products yet'"
+      @view-details="viewProductDetails"
+      @view-stall="viewStall"
+    />
 
     <!-- Product Detail Dialog -->
     <ProductDetailDialog
@@ -169,9 +155,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { ArrowLeft, Store, Package, Loader2, X } from 'lucide-vue-next'
+import { ArrowLeft, Store, X } from 'lucide-vue-next'
 import FuzzySearch from '@/components/ui/fuzzy-search/FuzzySearch.vue'
-import ProductCard from '../components/ProductCard.vue'
+import ProductGrid from '../components/ProductGrid.vue'
 import ProductDetailDialog from '../components/ProductDetailDialog.vue'
 import type { Product, Stall } from '../types/market'
 import type { FuzzySearchOptions } from '@/composables/useFuzzySearch'