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/pages/catalog/hubs/[id]/[productId].vue

@@ -1,309 +0,0 @@
-<template>
-  <Stack gap="0">
-    <!-- Loading -->
-    <Section v-if="isLoading" variant="plain" paddingY="lg">
-      <Stack align="center" justify="center" gap="4">
-        <Spinner />
-        <Text tone="muted">{{ t('catalogHub.states.loading') }}</Text>
-      </Stack>
-    </Section>
-
-    <!-- Error / Not Found -->
-    <Section v-else-if="!hub || !product" variant="plain" paddingY="lg">
-      <Card padding="lg">
-        <Stack align="center" gap="4">
-          <IconCircle tone="primary">
-            <Icon name="lucide:package-x" size="24" />
-          </IconCircle>
-          <Heading :level="2">{{ t('catalogHub.product_not_found.title') }}</Heading>
-          <Text tone="muted">{{ t('catalogHub.product_not_found.subtitle') }}</Text>
-          <Button @click="navigateTo(localePath(`/catalog/hubs/${hubId}`))">
-            {{ t('catalogHub.actions.back_to_hub') }}
-          </Button>
-        </Stack>
-      </Card>
-    </Section>
-
-    <!-- Content -->
-    <template v-else>
-      <CatalogPage
-        :items="sources"
-        :loading="isLoadingRoutes"
-        :with-map="true"
-        map-id="hub-product-sources-map"
-        point-color="#10b981"
-        v-model:selected-id="selectedSourceUuid"
-        :hovered-id="hoveredSourceUuid"
-        @update:hovered-id="hoveredSourceUuid = $event"
-      >
-        <template #searchBar>
-          <CatalogSearchBar
-            :active-filters="navigationFilters"
-            :show-counter="false"
-            @remove-filter="handleRemoveFilter"
-          />
-        </template>
-
-        <template #header>
-          <Text v-if="sources.length === 0 && !isLoadingRoutes" tone="muted">Нет доступных источников</Text>
-          <Stack v-else gap="4">
-            <Text v-if="sources.length > 0" tone="muted">Выберите источник</Text>
-            <Card padding="md">
-              <div class="h-48">
-                <ClientOnly>
-                  <apexchart
-                    type="area"
-                    height="180"
-                    :options="chartOptions"
-                    :series="chartSeries"
-                  />
-                </ClientOnly>
-              </div>
-            </Card>
-          </Stack>
-        </template>
-
-        <template #card="{ item }">
-          <OfferResultCard
-            :location-name="getOfferData(item.uuid)?.locationName"
-            :product-name="product.name"
-            :price-per-unit="getOfferData(item.uuid)?.pricePerUnit"
-            :currency="getOfferData(item.uuid)?.currency"
-            :unit="getOfferData(item.uuid)?.unit"
-            :stages="item.stages"
-            :start-name="item.name"
-            :end-name="hub?.name"
-          />
-        </template>
-
-        <template #empty>
-          <Stack align="center" gap="2">
-            <Icon name="lucide:truck" size="32" class="text-base-content/40" />
-            <Text tone="muted">{{ t('catalogHub.sources.empty') }}</Text>
-          </Stack>
-        </template>
-      </CatalogPage>
-    </template>
-  </Stack>
-</template>
-
-<script setup lang="ts">
-import { GetNodeConnectionsDocument, GetOffersByHubDocument } from '~/composables/graphql/public/geo-generated'
-import { GetAvailableProductsDocument, GetOfferDocument } from '~/composables/graphql/public/exchange-generated'
-
-definePageMeta({
-  layout: 'topnav'
-})
-
-const route = useRoute()
-const localePath = useLocalePath()
-const { t } = useI18n()
-const { execute } = useGraphQL()
-
-const isLoading = ref(true)
-const isLoadingRoutes = ref(false)
-const hub = ref<any>(null)
-const product = ref<{ uuid: string; name: string } | null>(null)
-const selectedSourceUuid = ref('')
-const hoveredSourceUuid = ref<string>()
-const rawSources = ref<any[]>([])
-const offersData = ref<Map<string, any>>(new Map())
-
-const hubId = computed(() => route.params.id as string)
-const productId = computed(() => route.params.productId as string)
-
-// Navigation filters for search bar badges
-const navigationFilters = computed(() => {
-  const filters: Array<{ id: string; label: string; key: string }> = []
-
-  if (hub.value?.name) {
-    filters.push({
-      id: 'hub',
-      key: 'Хаб',
-      label: hub.value.name
-    })
-  }
-
-  if (product.value?.name) {
-    filters.push({
-      id: 'product',
-      key: 'Товар',
-      label: product.value.name
-    })
-  }
-
-  return filters
-})
-
-// Handle removing navigation filter (navigate back)
-const handleRemoveFilter = (filterId: string) => {
-  if (filterId === 'product') {
-    navigateTo(localePath(`/catalog/hubs/${hubId.value}`))
-  } else if (filterId === 'hub') {
-    navigateTo(localePath('/catalog/hubs'))
-  }
-}
-
-// Mock price history generator (seeded by uuid for consistent results)
-const getMockPriceHistory = (uuid: string): number[] => {
-  const seed = uuid.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
-  const basePrice = 100 + (seed % 200)
-  return Array.from({ length: 30 }, (_, i) => {
-    const variation = Math.sin(seed + i * 0.3) * 30 + Math.cos(seed * 0.2 + i) * 15
-    return Math.round(basePrice + variation)
-  })
-}
-
-// Chart configuration
-const priceHistory = computed(() => getMockPriceHistory(productId.value))
-
-const trend = computed(() => {
-  if (priceHistory.value.length < 2) return 0
-  const first = priceHistory.value[0]
-  const last = priceHistory.value[priceHistory.value.length - 1]
-  if (!first || first === 0) return 0
-  return Math.round(((last - first) / first) * 100)
-})
-
-const chartOptions = computed(() => ({
-  chart: {
-    type: 'area',
-    toolbar: { show: false },
-    animations: { enabled: true }
-  },
-  stroke: { curve: 'smooth', width: 2 },
-  fill: {
-    type: 'gradient',
-    gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.1 }
-  },
-  colors: [trend.value >= 0 ? '#22c55e' : '#ef4444'],
-  dataLabels: { enabled: false },
-  xaxis: {
-    categories: priceHistory.value.map((_, i) => `${i + 1}`),
-    labels: { show: false }
-  },
-  yaxis: { labels: { formatter: (val: number) => `$${val}` } },
-  tooltip: { y: { formatter: (val: number) => `$${val}` } },
-  grid: { borderColor: '#e5e7eb', strokeDashArray: 4 }
-}))
-
-const chartSeries = computed(() => [{
-  name: t('catalogHub.product.price'),
-  data: priceHistory.value
-}])
-
-// Transform sources for CatalogPage
-const sources = computed(() => {
-  return rawSources.value.map(source => ({
-    uuid: source.sourceUuid || '',
-    name: source.sourceName || '',
-    latitude: source.sourceLat,
-    longitude: source.sourceLon,
-    distanceKm: source.distanceKm,
-    durationSeconds: source.routes?.[0]?.totalTimeSeconds,
-    stages: (source.routes?.[0]?.stages || []).map((stage: any) => ({
-      transportType: stage?.transportType,
-      distanceKm: stage?.distanceKm
-    }))
-  }))
-})
-
-// Get offer data for card
-const getOfferData = (uuid: string) => {
-  return offersData.value.get(uuid)
-}
-
-// Load offer details for prices
-const loadOfferDetails = async () => {
-  if (rawSources.value.length === 0) {
-    offersData.value.clear()
-    return
-  }
-
-  const newOffersData = new Map<string, any>()
-  await Promise.all(rawSources.value.map(async (source) => {
-    try {
-      const data = await execute(GetOfferDocument, { uuid: source.sourceUuid }, 'public', 'exchange')
-      if (data?.getOffer) {
-        newOffersData.set(source.sourceUuid, data.getOffer)
-      }
-    } catch (error) {
-      console.error('Error loading offer:', source.sourceUuid, error)
-    }
-  }))
-  offersData.value = newOffersData
-}
-
-// Load offers with routes to this hub
-const loadRoutes = async () => {
-  if (!productId.value || !hubId.value) {
-    rawSources.value = []
-    offersData.value.clear()
-    return
-  }
-
-  isLoadingRoutes.value = true
-  selectedSourceUuid.value = ''
-
-  try {
-    const data = await execute(
-      GetOffersByHubDocument,
-      {
-        hubUuid: hubId.value,
-        productUuid: productId.value,
-        limit: 12
-      },
-      'public',
-      'geo'
-    )
-    rawSources.value = (data?.offersByHub || []).filter(Boolean)
-    await loadOfferDetails()
-  } catch (error) {
-    console.error('Error loading offers:', error)
-    rawSources.value = []
-  } finally {
-    isLoadingRoutes.value = false
-  }
-}
-
-// Initial load
-try {
-  const [{ data: connectionsData }, { data: productsData }] = await Promise.all([
-    useServerQuery('hub-connections', GetNodeConnectionsDocument, { uuid: hubId.value }, 'public', 'geo'),
-    useServerQuery('available-products', GetAvailableProductsDocument, {}, 'public', 'exchange')
-  ])
-
-  hub.value = connectionsData.value?.nodeConnections?.hub || null
-
-  const products = (productsData.value?.getAvailableProducts || [])
-    .filter((p): p is { uuid: string; name: string } => p !== null && !!p.uuid && !!p.name)
-
-  product.value = products.find(p => p.uuid === productId.value) || null
-
-  // Load routes after initial data
-  if (product.value) {
-    await loadRoutes()
-  }
-} catch (error) {
-  console.error('Error loading data:', error)
-} finally {
-  isLoading.value = false
-}
-
-// SEO
-useHead(() => ({
-  title: product.value?.name && hub.value?.name
-    ? `${product.value.name} - ${hub.value.name}`
-    : t('catalogHub.meta.title'),
-  meta: [
-    {
-      name: 'description',
-      content: t('catalogHub.product.meta.description', {
-        product: product.value?.name || '',
-        hub: hub.value?.name || '',
-        offers: sources.value.length
-      })
-    }
-  ]
-}))
-</script>

app/pages/catalog/hubs/[id]/index.vue

@@ -78,7 +78,7 @@ const navigationFilters = computed(() => {
 // Handle removing navigation filter (navigate back)
 const handleRemoveFilter = (filterId: string) => {
   if (filterId === 'hub') {
-    navigateTo(localePath('/catalog/hubs'))
+    navigateTo(localePath('/catalog?select=hub'))
   }
 }
 
@@ -105,9 +105,9 @@ const mapItems = computed(() => {
   }]
 })
 
-// Navigate to product page
+// Navigate to unified catalog with hub + product = offers
 const goToProduct = (productId: string) => {
-  navigateTo(localePath(`/catalog/hubs/${hubId.value}/${productId}`))
+  navigateTo(localePath(`/catalog?hub=${hubId.value}&product=${productId}`))
 }
 
 // Mock price history generator (seeded by uuid for consistent results)