From f3504b7df5450e1d4cca59b03a3693f2a0d12526 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 26 Sep 2025 10:38:12 +0200
Subject: [PATCH] Refactor active filters summary in MarketPage for clarity and
 simplicity

- Updated the active filters summary section to focus on product count when filters are active, enhancing clarity for users.
- Simplified the layout by removing unnecessary elements, improving the overall user experience and accessibility.

These changes streamline the display of active filters, making it easier for users to understand the number of products available based on their selected categories.
---
 src/modules/market/views/MarketPage.vue | 35 ++++---------------------
 1 file changed, 5 insertions(+), 30 deletions(-)

diff --git a/src/modules/market/views/MarketPage.vue b/src/modules/market/views/MarketPage.vue
index 76540e6..577f618 100644
--- a/src/modules/market/views/MarketPage.vue
+++ b/src/modules/market/views/MarketPage.vue
@@ -170,40 +170,15 @@
           </div>
         </div>
 
-        <!-- Active Filters Summary -->
+        <!-- Product Count (when filters active) -->
         <div
           v-if="selectedCategoriesCount > 0"
-          class="mt-2 sm:mt-4 p-2 sm:p-3 bg-accent/50 rounded-lg border border-border"
-          role="region"
-          aria-label="Active category filters"
+          class="mt-2 text-center"
           aria-live="polite"
         >
-          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
-            <div class="flex items-center gap-1.5 sm:gap-2">
-              <Filter class="w-3 h-3 sm:w-4 sm:h-4 text-accent-foreground/80" aria-hidden="true" />
-              <span class="text-xs sm:text-sm font-medium text-accent-foreground">
-                <span class="hidden sm:inline">Active Filters</span><span class="sm:hidden">Filters</span>
-                <span v-if="selectedCategoriesCount > 1" class="text-xs opacity-75">
-                  ({{ filterMode === 'any' ? 'Any' : 'All' }} match):
-                </span>
-                <span v-else>:</span>
-              </span>
-              <div class="flex gap-0.5 sm:gap-1 flex-wrap" role="list" aria-label="Selected category filters">
-                <Badge
-                  v-for="category in selectedCategories"
-                  :key="category"
-                  variant="secondary"
-                  class="text-xs px-1.5 py-0.5"
-                  role="listitem"
-                >
-                  {{ category }}
-                </Badge>
-              </div>
-            </div>
-            <div class="text-xs sm:text-sm text-muted-foreground" aria-live="polite">
-              {{ productsToDisplay.length }} products found
-            </div>
-          </div>
+          <span class="text-xs sm:text-sm text-muted-foreground">
+            {{ productsToDisplay.length }} products found
+          </span>
         </div>
       </section>