Implement unified catalog search with token-based filtering

- Add useCatalogSearch composable for managing unified search state
- Add UnifiedSearchBar component with token chips for filters
- Add CatalogHero component for empty/landing state
- Create grid components for each display mode:
  - CatalogGridProducts, CatalogGridSuppliers, CatalogGridHubs
  - CatalogGridHubsForProduct, CatalogGridProductsFromSupplier
  - CatalogGridProductsInHub, CatalogGridOffers
- Add unified catalog page at /catalog with query params
- Remove SubNavigation from catalog section (kept for other sections)
- Update all links to use new unified catalog paths
- Delete old nested catalog pages (offers/suppliers/hubs flows)
- Add i18n translations for catalog section

app/components/GoodsContent.vue

@@ -54,8 +54,8 @@ const selectProduct = (product: any) => {
   if (locationUuid) {
     // Both product and hub selected -> show offers
     navigateTo({
-      path: `/catalog/offers/${product.uuid}/${locationUuid}`,
-      query
+      path: `/catalog`,
+      query: { product: product.uuid, hub: locationUuid, ...query }
     })
     return
   }

app/components/Sidebar.vue

@@ -38,8 +38,8 @@
           </li>
           <li>
             <NuxtLink
-              :to="localePath('/catalog/offers')"
-              :class="{ active: isActive('/catalog/offers') }"
+              :to="localePath('/catalog?select=product')"
+              :class="{ active: isCatalogActive('product') }"
               class="tooltip tooltip-right"
               :data-tip="t('nav.offers')"
             >
@@ -48,8 +48,8 @@
           </li>
           <li>
             <NuxtLink
-              :to="localePath('/catalog/suppliers')"
-              :class="{ active: isActive('/catalog/suppliers') }"
+              :to="localePath('/catalog?select=supplier')"
+              :class="{ active: isCatalogActive('supplier') }"
               class="tooltip tooltip-right"
               :data-tip="t('nav.suppliers')"
             >
@@ -58,8 +58,8 @@
           </li>
           <li>
             <NuxtLink
-              :to="localePath('/catalog/hubs')"
-              :class="{ active: isActive('/catalog/hubs') }"
+              :to="localePath('/catalog?select=hub')"
+              :class="{ active: isCatalogActive('hub') }"
               class="tooltip tooltip-right"
               :data-tip="t('nav.hubs')"
             >
@@ -169,19 +169,19 @@
                   </NuxtLink>
                 </li>
                 <li>
-                  <NuxtLink :to="localePath('/catalog/offers')" :class="{ active: isActive('/catalog/offers') }">
+                  <NuxtLink :to="localePath('/catalog?select=product')" :class="{ active: isCatalogActive('product') }">
                     <Icon name="lucide:tag" size="18" />
                     {{ t('nav.offers') }}
                   </NuxtLink>
                 </li>
                 <li>
-                  <NuxtLink :to="localePath('/catalog/suppliers')" :class="{ active: isActive('/catalog/suppliers') }">
+                  <NuxtLink :to="localePath('/catalog?select=supplier')" :class="{ active: isCatalogActive('supplier') }">
                     <Icon name="lucide:building-2" size="18" />
                     {{ t('nav.suppliers') }}
                   </NuxtLink>
                 </li>
                 <li>
-                  <NuxtLink :to="localePath('/catalog/hubs')" :class="{ active: isActive('/catalog/hubs') }">
+                  <NuxtLink :to="localePath('/catalog?select=hub')" :class="{ active: isCatalogActive('hub') }">
                     <Icon name="lucide:warehouse" size="18" />
                     {{ t('nav.hubs') }}
                   </NuxtLink>
@@ -379,6 +379,24 @@ const isActive = (path: string) => {
   return current.startsWith(localePath(path) + '/')
 }
 
+// Check if catalog section is active based on query params
+const isCatalogActive = (type: 'product' | 'supplier' | 'hub') => {
+  const catalogPath = localePath('/catalog')
+  if (!route.path.startsWith(catalogPath)) return false
+
+  const { select, product, supplier, hub } = route.query
+
+  // If we're in selection mode for this type
+  if (select === type) return true
+
+  // If this type has been selected (in the flow)
+  if (type === 'product' && (product || select === 'product')) return true
+  if (type === 'supplier' && supplier) return true
+  if (type === 'hub' && hub) return true
+
+  return false
+}
+
 const isExactActive = (path: string) => {
   return route.path === localePath(path)
 }

app/components/catalog/CatalogBreadcrumbs.vue

@@ -28,7 +28,7 @@ const breadcrumbs = computed(() => {
   // Hubs list
   crumbs.push({
     label: t('breadcrumbs.hubs', 'Hubs'),
-    to: localePath('/catalog/hubs')
+    to: localePath('/catalog?select=hub')
   })
 
   // Hub

app/components/catalog/CatalogGridHubs.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <Text size="lg" weight="semibold" class="mb-4">{{ t('catalog.headers.selectHub') }}</Text>
+
+    <div v-if="isLoading" class="flex justify-center py-12">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+
+    <div v-else-if="filteredItems.length === 0" class="text-center py-12">
+      <Text tone="muted">{{ t('catalog.empty.noHubs') }}</Text>
+    </div>
+
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <HubCard
+        v-for="hub in filteredItems"
+        :key="hub.uuid"
+        :hub="hub"
+        selectable
+        @select="$emit('select', { uuid: hub.uuid, name: hub.name })"
+      />
+    </div>
+
+    <PaginationLoadMore
+      v-if="filteredItems.length > 0 && canLoadMore"
+      :shown="filteredItems.length"
+      :total="total"
+      :can-load-more="canLoadMore"
+      :loading="isLoadingMore"
+      hide-counter
+      @load-more="loadMore"
+      class="mt-4"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  searchQuery: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', hub: { uuid: string; name: string }): void
+}>()
+
+const { t } = useI18n()
+const { items, total, isLoading, isLoadingMore, canLoadMore, loadMore, init } = useCatalogHubs()
+
+await init()
+
+const filteredItems = computed(() => {
+  if (!props.searchQuery.trim()) return items.value
+  const q = props.searchQuery.toLowerCase()
+  return items.value.filter((item: any) =>
+    item.name?.toLowerCase().includes(q) ||
+    item.country?.toLowerCase().includes(q)
+  )
+})
+</script>

app/components/catalog/CatalogGridHubsForProduct.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <Text size="lg" weight="semibold" class="mb-4">
+      {{ t('catalog.headers.hubsForProduct') }}
+      <span v-if="!isLoading" class="text-base-content/50 font-normal">
+        ({{ filteredItems.length }})
+      </span>
+    </Text>
+
+    <div v-if="isLoading" class="flex justify-center py-12">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+
+    <div v-else-if="filteredItems.length === 0" class="text-center py-12">
+      <Text tone="muted">{{ t('catalog.empty.noHubs') }}</Text>
+    </div>
+
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <HubCard
+        v-for="hub in filteredItems"
+        :key="hub.uuid"
+        :hub="hub"
+        selectable
+        @select="$emit('select', { uuid: hub.uuid, name: hub.name })"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { GetOffersDocument } from '~/composables/graphql/public/exchange-generated'
+
+const props = defineProps<{
+  productId: string
+  searchQuery: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', hub: { uuid: string; name: string }): void
+  (e: 'product-loaded', name: string): void
+}>()
+
+const { t } = useI18n()
+const { execute } = useGraphQL()
+
+const items = ref<any[]>([])
+const isLoading = ref(true)
+
+// Fetch hubs for product by getting offers and extracting unique hubs
+const fetchData = async () => {
+  isLoading.value = true
+  try {
+    const data = await execute(
+      GetOffersDocument,
+      { productUuid: props.productId },
+      'public',
+      'exchange'
+    )
+    const offers = data?.getOffers || []
+
+    // Get product name from first offer
+    if (offers.length > 0 && offers[0].productName) {
+      emit('product-loaded', offers[0].productName)
+    }
+
+    // Extract unique hubs from offers
+    const hubsMap = new Map<string, any>()
+    offers.forEach((offer: any) => {
+      if (offer.locationUuid && !hubsMap.has(offer.locationUuid)) {
+        hubsMap.set(offer.locationUuid, {
+          uuid: offer.locationUuid,
+          name: offer.locationName,
+          country: offer.locationCountry,
+          countryCode: offer.locationCountryCode,
+          latitude: offer.locationLatitude,
+          longitude: offer.locationLongitude
+        })
+      }
+    })
+
+    items.value = Array.from(hubsMap.values())
+  } finally {
+    isLoading.value = false
+  }
+}
+
+await fetchData()
+
+watch(() => props.productId, fetchData)
+
+const filteredItems = computed(() => {
+  if (!props.searchQuery.trim()) return items.value
+  const q = props.searchQuery.toLowerCase()
+  return items.value.filter((item: any) =>
+    item.name?.toLowerCase().includes(q) ||
+    item.country?.toLowerCase().includes(q)
+  )
+})
+</script>

app/components/catalog/CatalogGridOffers.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <Text size="lg" weight="semibold" class="mb-4">
+      {{ t('catalog.headers.offers') }}
+      <span v-if="!isLoading" class="text-base-content/50 font-normal">
+        ({{ filteredItems.length }})
+      </span>
+    </Text>
+
+    <div v-if="isLoading" class="flex justify-center py-12">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+
+    <div v-else-if="filteredItems.length === 0" class="text-center py-12">
+      <Text tone="muted">{{ t('catalog.empty.noOffers') }}</Text>
+    </div>
+
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <OfferCard
+        v-for="offer in filteredItems"
+        :key="offer.uuid"
+        :offer="offer"
+        linkable
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  GetOffersDocument,
+  GetSupplierOffersDocument
+} from '~/composables/graphql/public/exchange-generated'
+
+const props = defineProps<{
+  productId?: string | null
+  supplierId?: string | null
+  hubId?: string | null
+  searchQuery: string
+}>()
+
+const { t } = useI18n()
+const { execute } = useGraphQL()
+
+const items = ref<any[]>([])
+const isLoading = ref(true)
+
+const fetchData = async () => {
+  isLoading.value = true
+  try {
+    let offers: any[] = []
+
+    if (props.productId && props.hubId) {
+      // Product + Hub = specific offers
+      const data = await execute(
+        GetOffersDocument,
+        {
+          productUuid: props.productId,
+          locationUuid: props.hubId
+        },
+        'public',
+        'exchange'
+      )
+      offers = data?.getOffers || []
+    } else if (props.supplierId && props.productId) {
+      // Supplier + Product = offers from supplier for product
+      const data = await execute(
+        GetSupplierOffersDocument,
+        { teamUuid: props.supplierId },
+        'public',
+        'exchange'
+      )
+      offers = (data?.getOffers || []).filter(
+        (o: any) => o.productUuid === props.productId
+      )
+    } else if (props.supplierId) {
+      // Just supplier = all offers from supplier
+      const data = await execute(
+        GetSupplierOffersDocument,
+        { teamUuid: props.supplierId },
+        'public',
+        'exchange'
+      )
+      offers = data?.getOffers || []
+    } else if (props.hubId) {
+      // Just hub = all offers in hub
+      const data = await execute(
+        GetOffersDocument,
+        { locationUuid: props.hubId },
+        'public',
+        'exchange'
+      )
+      offers = data?.getOffers || []
+    } else if (props.productId) {
+      // Just product = all offers for product
+      const data = await execute(
+        GetOffersDocument,
+        { productUuid: props.productId },
+        'public',
+        'exchange'
+      )
+      offers = data?.getOffers || []
+    }
+
+    items.value = offers
+  } finally {
+    isLoading.value = false
+  }
+}
+
+await fetchData()
+
+watch([() => props.productId, () => props.supplierId, () => props.hubId], fetchData)
+
+const filteredItems = computed(() => {
+  if (!props.searchQuery.trim()) return items.value
+  const q = props.searchQuery.toLowerCase()
+  return items.value.filter((item: any) =>
+    item.productName?.toLowerCase().includes(q) ||
+    item.teamName?.toLowerCase().includes(q) ||
+    item.locationName?.toLowerCase().includes(q)
+  )
+})
+</script>

app/components/catalog/CatalogGridProducts.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <Text size="lg" weight="semibold" class="mb-4">{{ t('catalog.headers.selectProduct') }}</Text>
+
+    <div v-if="isLoading" class="flex justify-center py-12">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+
+    <div v-else-if="filteredItems.length === 0" class="text-center py-12">
+      <Text tone="muted">{{ t('catalog.empty.noProducts') }}</Text>
+    </div>
+
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <HubProductCard
+        v-for="product in filteredItems"
+        :key="product.uuid"
+        :name="product.name"
+        selectable
+        @select="$emit('select', product)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  searchQuery: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', product: { uuid: string; name: string }): void
+}>()
+
+const { t } = useI18n()
+const { items, isLoading, init } = useCatalogProducts()
+
+await init()
+
+const filteredItems = computed(() => {
+  if (!props.searchQuery.trim()) return items.value
+  const q = props.searchQuery.toLowerCase()
+  return items.value.filter((item: any) =>
+    item.name?.toLowerCase().includes(q)
+  )
+})
+</script>

app/components/catalog/CatalogGridProductsFromSupplier.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <Text size="lg" weight="semibold" class="mb-4">{{ t('catalog.headers.productsFromSupplier') }}</Text>
+
+    <div v-if="isLoading" class="flex justify-center py-12">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+
+    <div v-else-if="filteredItems.length === 0" class="text-center py-12">
+      <Text tone="muted">{{ t('catalog.empty.noProducts') }}</Text>
+    </div>
+
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <HubProductCard
+        v-for="product in filteredItems"
+        :key="product.uuid"
+        :name="product.name"
+        selectable
+        @select="$emit('select', product)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  GetSupplierProfileDocument,
+  GetSupplierOffersDocument
+} from '~/composables/graphql/public/exchange-generated'
+
+const props = defineProps<{
+  supplierId: string
+  searchQuery: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', product: { uuid: string; name: string }): void
+  (e: 'supplier-loaded', name: string): void
+}>()
+
+const { t } = useI18n()
+const { execute } = useGraphQL()
+
+const items = ref<any[]>([])
+const isLoading = ref(true)
+
+const fetchData = async () => {
+  isLoading.value = true
+  try {
+    // Get supplier info
+    const supplierData = await execute(
+      GetSupplierProfileDocument,
+      { uuid: props.supplierId },
+      'public',
+      'exchange'
+    )
+    if (supplierData?.getSupplierProfile?.name) {
+      emit('supplier-loaded', supplierData.getSupplierProfile.name)
+    }
+
+    // Get supplier's offers and extract unique products
+    const offersData = await execute(
+      GetSupplierOffersDocument,
+      { teamUuid: props.supplierId },
+      'public',
+      'exchange'
+    )
+
+    const productsMap = new Map<string, { uuid: string; name: string }>()
+    ;(offersData?.getOffers || []).forEach((offer: any) => {
+      if (offer.productUuid && offer.productName && !productsMap.has(offer.productUuid)) {
+        productsMap.set(offer.productUuid, {
+          uuid: offer.productUuid,
+          name: offer.productName
+        })
+      }
+    })
+    items.value = Array.from(productsMap.values())
+  } finally {
+    isLoading.value = false
+  }
+}
+
+await fetchData()
+
+watch(() => props.supplierId, fetchData)
+
+const filteredItems = computed(() => {
+  if (!props.searchQuery.trim()) return items.value
+  const q = props.searchQuery.toLowerCase()
+  return items.value.filter((item: any) =>
+    item.name?.toLowerCase().includes(q)
+  )
+})
+</script>

app/components/catalog/CatalogGridProductsInHub.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <Text size="lg" weight="semibold" class="mb-4">{{ t('catalog.headers.productsInHub') }}</Text>
+
+    <div v-if="isLoading" class="flex justify-center py-12">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+
+    <div v-else-if="filteredItems.length === 0" class="text-center py-12">
+      <Text tone="muted">{{ t('catalog.empty.noProducts') }}</Text>
+    </div>
+
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <HubProductCard
+        v-for="product in filteredItems"
+        :key="product.uuid"
+        :name="product.name"
+        selectable
+        @select="$emit('select', product)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { GetNodeDocument } from '~/composables/graphql/public/geo-generated'
+import { GetOffersDocument } from '~/composables/graphql/public/exchange-generated'
+
+const props = defineProps<{
+  hubId: string
+  searchQuery: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', product: { uuid: string; name: string }): void
+  (e: 'hub-loaded', name: string): void
+}>()
+
+const { t } = useI18n()
+const { execute } = useGraphQL()
+
+const items = ref<any[]>([])
+const isLoading = ref(true)
+
+const fetchData = async () => {
+  isLoading.value = true
+  try {
+    // Get hub info
+    const hubData = await execute(
+      GetNodeDocument,
+      { uuid: props.hubId },
+      'public',
+      'geo'
+    )
+    if (hubData?.node?.name) {
+      emit('hub-loaded', hubData.node.name)
+    }
+
+    // Get offers in this hub and extract unique products
+    const offersData = await execute(
+      GetOffersDocument,
+      { locationUuid: props.hubId },
+      'public',
+      'exchange'
+    )
+
+    const productsMap = new Map<string, { uuid: string; name: string }>()
+    ;(offersData?.getOffers || []).forEach((offer: any) => {
+      if (offer.productUuid && offer.productName && !productsMap.has(offer.productUuid)) {
+        productsMap.set(offer.productUuid, {
+          uuid: offer.productUuid,
+          name: offer.productName
+        })
+      }
+    })
+    items.value = Array.from(productsMap.values())
+  } finally {
+    isLoading.value = false
+  }
+}
+
+await fetchData()
+
+watch(() => props.hubId, fetchData)
+
+const filteredItems = computed(() => {
+  if (!props.searchQuery.trim()) return items.value
+  const q = props.searchQuery.toLowerCase()
+  return items.value.filter((item: any) =>
+    item.name?.toLowerCase().includes(q)
+  )
+})
+</script>

app/components/catalog/CatalogGridSuppliers.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <Text size="lg" weight="semibold" class="mb-4">{{ t('catalog.headers.selectSupplier') }}</Text>
+
+    <div v-if="isLoading" class="flex justify-center py-12">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+
+    <div v-else-if="filteredItems.length === 0" class="text-center py-12">
+      <Text tone="muted">{{ t('catalog.empty.noSuppliers') }}</Text>
+    </div>
+
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <SupplierCard
+        v-for="supplier in filteredItems"
+        :key="supplier.uuid || supplier.teamUuid"
+        :supplier="supplier"
+        selectable
+        @select="$emit('select', { uuid: supplier.uuid || supplier.teamUuid, name: supplier.name })"
+      />
+    </div>
+
+    <PaginationLoadMore
+      v-if="filteredItems.length > 0 && canLoadMore"
+      :shown="filteredItems.length"
+      :total="total"
+      :can-load-more="canLoadMore"
+      :loading="isLoadingMore"
+      hide-counter
+      @load-more="loadMore"
+      class="mt-4"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  searchQuery: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', supplier: { uuid: string; name: string }): void
+}>()
+
+const { t } = useI18n()
+const { items, total, isLoading, isLoadingMore, canLoadMore, loadMore, init } = useCatalogSuppliers()
+
+await init()
+
+const filteredItems = computed(() => {
+  if (!props.searchQuery.trim()) return items.value
+  const q = props.searchQuery.toLowerCase()
+  return items.value.filter((item: any) =>
+    item.name?.toLowerCase().includes(q)
+  )
+})
+</script>

app/components/catalog/CatalogHero.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
+    <h1 class="text-4xl font-bold mb-4">{{ t('catalog.hero.title') }}</h1>
+    <p class="text-lg text-base-content/70 mb-8 max-w-lg">
+      {{ t('catalog.hero.subtitle') }}
+    </p>
+
+    <div class="flex flex-wrap justify-center gap-4">
+      <button
+        class="btn btn-lg btn-primary gap-2"
+        @click="$emit('start-select', 'product')"
+      >
+        <Icon name="lucide:package" size="24" />
+        {{ t('catalog.filters.product') }}
+      </button>
+
+      <button
+        class="btn btn-lg btn-outline gap-2"
+        @click="$emit('start-select', 'supplier')"
+      >
+        <Icon name="lucide:factory" size="24" />
+        {{ t('catalog.filters.supplier') }}
+      </button>
+
+      <button
+        class="btn btn-lg btn-outline gap-2"
+        @click="$emit('start-select', 'hub')"
+      >
+        <Icon name="lucide:map-pin" size="24" />
+        {{ t('catalog.filters.hub') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineEmits<{
+  (e: 'start-select', type: string): void
+}>()
+
+const { t } = useI18n()
+</script>

app/components/catalog/CatalogHubsSection.vue

@@ -4,7 +4,7 @@
       <Stack direction="row" align="center" justify="between">
         <Heading :level="2">{{ t('catalogHubsSection.header.title') }}</Heading>
         <NuxtLink
-          :to="localePath('/catalog/hubs')"
+          :to="localePath('/catalog?select=hub')"
           class="btn btn-sm btn-ghost"
         >
           <span>{{ t('catalogHubsSection.actions.view_all') }}</span>

app/components/catalog/CatalogOffersSection.vue

@@ -4,7 +4,7 @@
       <Stack direction="row" align="center" justify="between">
         <Heading :level="2">{{ t('catalogOffersSection.header.title') }}</Heading>
         <NuxtLink
-          :to="localePath('/catalog/offers')"
+          :to="localePath('/catalog?select=product')"
           class="btn btn-sm btn-ghost"
         >
           <span>{{ t('catalogOffersSection.actions.view_all') }}</span>

app/components/catalog/CatalogSuppliersSection.vue

@@ -4,7 +4,7 @@
       <Stack direction="row" align="center" justify="between">
         <Heading :level="2">{{ t('catalogSuppliersSection.header.title') }}</Heading>
         <NuxtLink
-          :to="localePath('/catalog/suppliers')"
+          :to="localePath('/catalog?select=supplier')"
           class="btn btn-sm btn-ghost"
         >
           <span>{{ t('catalogSuppliersSection.actions.view_all') }}</span>

app/components/catalog/OffersBreadcrumbs.vue

@@ -25,17 +25,17 @@ const { t } = useI18n()
 const breadcrumbs = computed(() => {
   const crumbs: Array<{ label: string; to?: string }> = []
 
-  // Products list
+  // Catalog root
   crumbs.push({
     label: t('breadcrumbs.products', 'Products'),
-    to: localePath('/catalog/offers')
+    to: localePath('/catalog?select=product')
   })
 
   // Product
   if (props.productId) {
     crumbs.push({
       label: props.productName || `#${props.productId.slice(0, 8)}...`,
-      to: props.hubId ? localePath(`/catalog/offers/${props.productId}`) : undefined
+      to: props.hubId ? localePath(`/catalog?product=${props.productId}`) : undefined
     })
   }
 

app/components/catalog/SupplierCard.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="linkable ? NuxtLink : 'div'"
-    :to="linkable ? localePath(`/catalog/suppliers/${supplier.uuid}`) : undefined"
+    :to="linkable ? localePath(`/catalog?supplier=${supplier.uuid}`) : undefined"
     class="block"
     :class="{ 'cursor-pointer': selectable }"
     @click="selectable && $emit('select')"

app/components/catalog/SuppliersBreadcrumbs.vue

@@ -30,7 +30,7 @@ const breadcrumbs = computed(() => {
   // Suppliers list
   crumbs.push({
     label: t('breadcrumbs.suppliers', 'Suppliers'),
-    to: localePath('/catalog/suppliers')
+    to: localePath('/catalog?select=supplier')
   })
 
   // Supplier
@@ -38,7 +38,7 @@ const breadcrumbs = computed(() => {
     const hasNext = props.productId
     crumbs.push({
       label: props.supplierName || `#${props.supplierId.slice(0, 8)}...`,
-      to: hasNext ? localePath(`/catalog/suppliers/${props.supplierId}`) : undefined
+      to: hasNext ? localePath(`/catalog?supplier=${props.supplierId}`) : undefined
     })
   }
 
@@ -47,7 +47,7 @@ const breadcrumbs = computed(() => {
     const hasNext = props.hubId
     crumbs.push({
       label: props.productName || `#${props.productId.slice(0, 8)}...`,
-      to: hasNext ? localePath(`/catalog/suppliers/${props.supplierId}/${props.productId}`) : undefined
+      to: hasNext ? localePath(`/catalog?supplier=${props.supplierId}&product=${props.productId}`) : undefined
     })
   }
 

app/components/navigation/MainNavigation.vue

@@ -177,7 +177,7 @@ const { t } = useI18n()
 
 const tabs = computed(() => [
   { key: 'search', label: t('cabinetNav.search'), path: '/', auth: false },
-  { key: 'catalog', label: t('cabinetNav.catalog'), path: '/catalog/offers', auth: false },
+  { key: 'catalog', label: t('cabinetNav.catalog'), path: '/catalog', auth: false },
   { key: 'orders', label: t('cabinetNav.orders'), path: '/clientarea/orders', auth: true },
   { key: 'seller', label: t('cabinetNav.seller'), path: '/clientarea/offers', auth: true, seller: true },
 ])

app/components/navigation/SubNavigation.vue

@@ -25,9 +25,9 @@ const { t } = useI18n()
 
 const sectionItems = computed(() => ({
   catalog: [
-    { label: 'Предложения', path: '/catalog/offers' },
-    { label: t('cabinetNav.suppliers'), path: '/catalog/suppliers' },
-    { label: t('cabinetNav.hubs'), path: '/catalog/hubs' },
+    { label: 'Предложения', path: '/catalog?select=product' },
+    { label: t('cabinetNav.suppliers'), path: '/catalog?select=supplier' },
+    { label: t('cabinetNav.hubs'), path: '/catalog?select=hub' },
   ],
   orders: [
     { label: t('cabinetNav.orders'), path: '/clientarea/orders' },

app/components/search/GlobalSearchBar.vue

@@ -112,18 +112,18 @@ const handleSearch = () => {
     query.quantity = String(quantity.value)
   }
 
-  // Navigate to offers flow
+  // Navigate to unified catalog
   if (productUuid.value && locationUuid.value) {
     // Both product and hub selected -> show offers
     router.push({
-      path: localePath(`/catalog/offers/${productUuid.value}/${locationUuid.value}`),
-      query
+      path: localePath('/catalog'),
+      query: { product: productUuid.value, hub: locationUuid.value, ...query }
     })
   } else if (productUuid.value) {
-    // Only product selected -> select hub
+    // Only product selected -> show hubs for product
     router.push({
-      path: localePath(`/catalog/offers/${productUuid.value}`),
-      query
+      path: localePath('/catalog'),
+      query: { product: productUuid.value, ...query }
     })
   }
 

app/components/search/UnifiedSearchBar.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="bg-base-100 rounded-box shadow-md">
+    <!-- Search bar row -->
+    <div class="flex items-center gap-2 p-3 flex-wrap">
+      <!-- Active filter tokens -->
+      <div
+        v-for="token in activeTokens"
+        :key="token.type"
+        class="badge badge-lg gap-1 cursor-pointer hover:badge-primary transition-colors"
+        @click="onEditToken(token.type)"
+      >
+        <Icon :name="token.icon" size="14" />
+        <span class="max-w-32 truncate">{{ token.label }}</span>
+        <button
+          class="ml-1 hover:text-error"
+          @click.stop="onRemoveToken(token.type)"
+        >
+          <Icon name="lucide:x" size="12" />
+        </button>
+      </div>
+
+      <!-- Active selection mode indicator -->
+      <div
+        v-if="selectMode"
+        class="badge badge-lg badge-outline badge-primary gap-1"
+      >
+        <Icon :name="selectModeIcon" size="14" />
+        {{ selectModeLabel }}: ?
+        <button
+          class="ml-1 hover:text-error"
+          @click="onCancelSelect"
+        >
+          <Icon name="lucide:x" size="12" />
+        </button>
+      </div>
+
+      <!-- Search input -->
+      <div class="flex-1 min-w-48">
+        <input
+          v-model="localSearchQuery"
+          type="text"
+          :placeholder="placeholder"
+          class="input input-bordered w-full"
+          @input="onSearchInput"
+        />
+      </div>
+    </div>
+
+    <!-- Quick filter chips -->
+    <div
+      v-if="availableChips.length > 0"
+      class="flex items-center gap-2 px-3 pb-3 flex-wrap"
+    >
+      <button
+        v-for="chip in availableChips"
+        :key="chip.type"
+        class="btn btn-sm btn-ghost gap-1"
+        @click="onStartSelect(chip.type)"
+      >
+        <Icon name="lucide:plus" size="14" />
+        {{ chip.label }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SelectMode } from '~/composables/useCatalogSearch'
+
+const props = defineProps<{
+  activeTokens: Array<{ type: string; id: string; label: string; icon: string }>
+  availableChips: Array<{ type: string; label: string }>
+  selectMode: SelectMode
+  searchQuery: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'start-select', type: string): void
+  (e: 'cancel-select'): void
+  (e: 'edit-token', type: string): void
+  (e: 'remove-token', type: string): void
+  (e: 'update:search-query', value: string): void
+}>()
+
+const { t } = useI18n()
+
+const localSearchQuery = ref(props.searchQuery)
+
+watch(() => props.searchQuery, (val) => {
+  localSearchQuery.value = val
+})
+
+const placeholder = computed(() => {
+  if (props.selectMode === 'product') return t('catalog.search.searchProducts')
+  if (props.selectMode === 'supplier') return t('catalog.search.searchSuppliers')
+  if (props.selectMode === 'hub') return t('catalog.search.searchHubs')
+  return t('catalog.search.placeholder')
+})
+
+const selectModeLabel = computed(() => {
+  if (props.selectMode === 'product') return t('catalog.filters.product')
+  if (props.selectMode === 'supplier') return t('catalog.filters.supplier')
+  if (props.selectMode === 'hub') return t('catalog.filters.hub')
+  return ''
+})
+
+const selectModeIcon = computed(() => {
+  if (props.selectMode === 'product') return 'lucide:package'
+  if (props.selectMode === 'supplier') return 'lucide:factory'
+  if (props.selectMode === 'hub') return 'lucide:map-pin'
+  return 'lucide:search'
+})
+
+const onStartSelect = (type: string) => {
+  emit('start-select', type)
+}
+
+const onCancelSelect = () => {
+  emit('cancel-select')
+}
+
+const onEditToken = (type: string) => {
+  emit('edit-token', type)
+}
+
+const onRemoveToken = (type: string) => {
+  emit('remove-token', type)
+}
+
+const onSearchInput = () => {
+  emit('update:search-query', localSearchQuery.value)
+}
+</script>