Refactor catalog filters: remove badges, use select dropdowns

- Remove filter from suppliers page (not needed)
- Offers: show all active offers directly, add product type filter as select
- Hubs: change filter from pills to select dropdown
- Create CatalogFilterSelect component for dropdown filters
- Update useCatalogOffers to always filter active, use product filter

app/pages/catalog/hubs/index.vue

@@ -8,7 +8,7 @@
     @select="onSelectHub"
   >
     <template #filters>
-      <CatalogFilters :filters="filters" v-model="selectedFilter" />
+      <CatalogFilterSelect :filters="filters" v-model="selectedFilter" />
     </template>
 
     <template #card="{ item }">

app/pages/catalog/offers/index.vue

@@ -1,73 +1,39 @@
 <template>
-  <div class="flex flex-col flex-1 min-h-0">
-    <!-- Loading state -->
-    <div v-if="isLoading || productsLoading" class="flex-1 flex items-center justify-center">
-      <Card padding="lg">
-        <Stack align="center" justify="center" gap="3">
-          <Spinner />
-          <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
-        </Stack>
-      </Card>
-    </div>
-
-    <!-- Products catalog (when no product selected) -->
-    <div v-else-if="!selectedProductUuid" class="flex-1 overflow-y-auto py-4">
-      <Stack gap="4">
-        <Grid :cols="1" :md="2" :lg="3" :gap="4">
-          <Card
-            v-for="product in products"
-            :key="product.uuid"
-            padding="sm"
-            interactive
-            @click="selectProduct(product)"
-          >
-            <Stack gap="2">
-              <Text size="base" weight="semibold">{{ product.name }}</Text>
-              <Text tone="muted">{{ product.categoryName || t('catalogProduct.labels.category_unknown') }}</Text>
-            </Stack>
-          </Card>
-        </Grid>
-
-        <Stack v-if="products.length === 0" align="center" gap="2">
-          <Text tone="muted">{{ t('catalogOffersSection.empty.no_products') }}</Text>
-        </Stack>
-      </Stack>
-    </div>
-
-    <!-- Offers for selected product -->
-    <template v-else>
-      <CatalogPage
-        :items="items"
-        :loading="isLoading"
-        map-id="offers-map"
-        point-color="#f59e0b"
-        :selected-id="selectedOfferId"
-        @select="onSelectOffer"
-      >
-        <template #filters>
-          <CatalogFilters :filters="filters" v-model="selectedFilter" />
-        </template>
-
-        <template #card="{ item }">
-          <OfferCard :offer="item" />
-        </template>
-
-        <template #pagination>
-          <PaginationLoadMore
-            :shown="items.length"
-            :total="total"
-            :can-load-more="canLoadMore"
-            :loading="isLoadingMore"
-            @load-more="loadMore"
-          />
-        </template>
-
-        <template #empty>
-          <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
-        </template>
-      </CatalogPage>
+  <CatalogPage
+    :items="items"
+    :loading="isLoading || productsLoading"
+    map-id="offers-map"
+    point-color="#f59e0b"
+    :selected-id="selectedOfferId"
+    @select="onSelectOffer"
+  >
+    <template #filters>
+      <CatalogFilterSelect
+        v-if="productFilters.length > 1"
+        :filters="productFilters"
+        :model-value="selectedProductUuid || 'all'"
+        @update:model-value="onProductFilterChange"
+      />
     </template>
-  </div>
+
+    <template #card="{ item }">
+      <OfferCard :offer="item" />
+    </template>
+
+    <template #pagination>
+      <PaginationLoadMore
+        :shown="items.length"
+        :total="total"
+        :can-load-more="canLoadMore"
+        :loading="isLoadingMore"
+        @load-more="loadMore"
+      />
+    </template>
+
+    <template #empty>
+      <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
+    </template>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">
@@ -76,11 +42,8 @@ definePageMeta({
 })
 
 const { t } = useI18n()
-const localePath = useLocalePath()
-const route = useRoute()
-const router = useRouter()
 
-// Products catalog
+// Products for filter
 const {
   items: products,
   isLoading: productsLoading,
@@ -91,8 +54,7 @@ const {
 const {
   items,
   total,
-  selectedFilter,
-  filters,
+  selectedProductUuid,
   isLoading,
   isLoadingMore,
   canLoadMore,
@@ -101,27 +63,19 @@ const {
   setProductUuid
 } = useCatalogOffers()
 
-// Get product from query
-const selectedProductUuid = computed(() => route.query.product as string | undefined)
-
-// Selected product info
-const selectedProduct = computed(() => {
-  if (!selectedProductUuid.value) return null
-  return products.value.find(p => p.uuid === selectedProductUuid.value)
+// Product filter options
+const productFilters = computed(() => {
+  const all = [{ id: 'all', label: t('catalogOffersSection.filters.all_products') }]
+  const productOptions = products.value.map(p => ({
+    id: p.uuid,
+    label: p.name
+  }))
+  return [...all, ...productOptions]
 })
 
-const pageTitle = computed(() => {
-  if (selectedProduct.value) {
-    return `${t('catalogOffersSection.header.title')}: ${selectedProduct.value.name}`
-  }
-  return t('catalogOffersSection.header.select_product')
-})
-
-const selectProduct = (product: any) => {
-  router.push({
-    path: route.path,
-    query: { product: product.uuid }
-  })
+// Handle product filter change
+const onProductFilterChange = (value: string) => {
+  setProductUuid(value === 'all' ? null : value)
 }
 
 // Selected offer for map highlighting
@@ -132,17 +86,9 @@ const onSelectOffer = (offer: any) => {
 }
 
 // Initialize
-await initProducts()
-
-// Watch for product changes
-watch(selectedProductUuid, async (uuid) => {
-  setProductUuid(uuid || null)
-  if (uuid) {
-    await initOffers()
-  }
-}, { immediate: true })
+await Promise.all([initProducts(), initOffers()])
 
 useHead(() => ({
-  title: pageTitle.value
+  title: t('catalogOffersSection.header.title')
 }))
 </script>

app/pages/catalog/suppliers/index.vue

@@ -7,10 +7,6 @@
     :selected-id="selectedSupplierId"
     @select="onSelectSupplier"
   >
-    <template #filters>
-      <CatalogFilters :filters="filters" v-model="selectedFilter" />
-    </template>
-
     <template #card="{ item }">
       <SupplierCard :supplier="item" />
     </template>
@@ -41,8 +37,6 @@ const { t } = useI18n()
 const {
   items,
   total,
-  selectedFilter,
-  filters,
   isLoading,
   isLoadingMore,
   canLoadMore,