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/components/catalog/CatalogFilterSelect.vue

@@ -0,0 +1,31 @@
+<template>
+  <select
+    :value="modelValue"
+    class="select select-bordered select-sm w-full max-w-xs"
+    @change="$emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
+  >
+    <option
+      v-for="filter in filters"
+      :key="filter.id"
+      :value="filter.id"
+    >
+      {{ filter.label }}
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+interface Filter {
+  id: string
+  label: string
+}
+
+defineProps<{
+  filters: Filter[]
+  modelValue: string
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+</script>

app/composables/useCatalogOffers.ts

@@ -5,21 +5,14 @@ const PAGE_SIZE = 24
 // Shared state across list and map views
 const items = ref<any[]>([])
 const total = ref(0)
-const selectedFilter = ref('all')
+const selectedProductUuid = ref<string | null>(null)
-const productUuid = ref<string | null>(null)
 const isLoading = ref(false)
 const isLoadingMore = ref(false)
 const isInitialized = ref(false)
 
 export function useCatalogOffers() {
-  const { t } = useI18n()
   const { execute } = useGraphQL()
 
-  const filters = computed(() => [
-    { id: 'all', label: t('catalogOffersSection.filters.all') },
-    { id: 'active', label: t('catalogOffersSection.filters.active') }
-  ])
-
   const itemsWithCoords = computed(() =>
     items.value
       .filter(offer => offer.locationLatitude && offer.locationLongitude)
@@ -37,14 +30,13 @@ export function useCatalogOffers() {
   const fetchPage = async (offset: number, replace = false) => {
     if (replace) isLoading.value = true
     try {
-      const status = selectedFilter.value === 'active' ? 'active' : null
       const data = await execute(
         GetOffersDocument,
         {
           limit: PAGE_SIZE,
           offset,
-          status,
+          status: 'active',
-          productUuid: productUuid.value
+          productUuid: selectedProductUuid.value
         },
         'public',
         'exchange'
@@ -59,10 +51,11 @@ export function useCatalogOffers() {
   }
 
   const setProductUuid = (uuid: string | null) => {
-    if (productUuid.value !== uuid) {
+    if (selectedProductUuid.value !== uuid) {
-      productUuid.value = uuid
+      selectedProductUuid.value = uuid
-      isInitialized.value = false
+      if (isInitialized.value) {
-      items.value = []
+        fetchPage(0, true)
+      }
     }
   }
 
@@ -76,13 +69,6 @@ export function useCatalogOffers() {
     }
   }
 
-  // При смене фильтра - перезагрузка
-  watch(selectedFilter, () => {
-    if (isInitialized.value) {
-      fetchPage(0, true)
-    }
-  })
-
   // Initialize data if not already loaded
   const init = async () => {
     if (!isInitialized.value && items.value.length === 0) {
@@ -93,9 +79,7 @@ export function useCatalogOffers() {
   return {
     items,
     total,
-    selectedFilter,
+    selectedProductUuid,
-    productUuid,
-    filters,
     isLoading,
     isLoadingMore,
     itemsWithCoords,

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">
+  <CatalogPage
-    <!-- Loading state -->
+    :items="items"
-    <div v-if="isLoading || productsLoading" class="flex-1 flex items-center justify-center">
+    :loading="isLoading || productsLoading"
-      <Card padding="lg">
+    map-id="offers-map"
-        <Stack align="center" justify="center" gap="3">
+    point-color="#f59e0b"
-          <Spinner />
+    :selected-id="selectedOfferId"
-          <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
+    @select="onSelectOffer"
-        </Stack>
+  >
-      </Card>
+    <template #filters>
-    </div>
+      <CatalogFilterSelect
-
+        v-if="productFilters.length > 1"
-    <!-- Products catalog (when no product selected) -->
+        :filters="productFilters"
-    <div v-else-if="!selectedProductUuid" class="flex-1 overflow-y-auto py-4">
+        :model-value="selectedProductUuid || 'all'"
-      <Stack gap="4">
+        @update:model-value="onProductFilterChange"
-        <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>
     </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,
+  selectedProductUuid,
-  filters,
   isLoading,
   isLoadingMore,
   canLoadMore,
@@ -101,27 +63,19 @@ const {
   setProductUuid
 } = useCatalogOffers()
 
-// Get product from query
+// Product filter options
-const selectedProductUuid = computed(() => route.query.product as string | undefined)
+const productFilters = computed(() => {
-
+  const all = [{ id: 'all', label: t('catalogOffersSection.filters.all_products') }]
-// Selected product info
+  const productOptions = products.value.map(p => ({
-const selectedProduct = computed(() => {
+    id: p.uuid,
-  if (!selectedProductUuid.value) return null
+    label: p.name
-  return products.value.find(p => p.uuid === selectedProductUuid.value)
+  }))
+  return [...all, ...productOptions]
 })
 
-const pageTitle = computed(() => {
+// Handle product filter change
-  if (selectedProduct.value) {
+const onProductFilterChange = (value: string) => {
-    return `${t('catalogOffersSection.header.title')}: ${selectedProduct.value.name}`
+  setProductUuid(value === 'all' ? null : value)
-  }
-  return t('catalogOffersSection.header.select_product')
-})
-
-const selectProduct = (product: any) => {
-  router.push({
-    path: route.path,
-    query: { product: product.uuid }
-  })
 }
 
 // Selected offer for map highlighting
@@ -132,17 +86,9 @@ const onSelectOffer = (offer: any) => {
 }
 
 // Initialize
-await initProducts()
+await Promise.all([initProducts(), initOffers()])
-
-// Watch for product changes
-watch(selectedProductUuid, async (uuid) => {
-  setProductUuid(uuid || null)
-  if (uuid) {
-    await initOffers()
-  }
-}, { immediate: true })
 
 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,

i18n/locales/en/catalogOffersSection.json

@@ -9,7 +9,8 @@
     },
     "filters": {
       "all": "All",
-      "active": "Active"
+      "active": "Active",
+      "all_products": "All products"
     },
     "empty": {
       "no_offers": "No active offers",

i18n/locales/ru/catalogOffersSection.json

@@ -9,7 +9,8 @@
     },
     "filters": {
       "all": "Все",
-      "active": "Активные"
+      "active": "Активные",
+      "all_products": "Все товары"
     },
     "empty": {
       "no_offers": "Нет активных предложений",