From d837b9b90bb2e49e25e53551d07235cb111ce6e2 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 22 Jan 2026 11:06:58 +0700
Subject: [PATCH] Fix unified catalog: add map, tokens inside input, redirect
 from main

- Main page (/) now redirects to /catalog
- Catalog page uses CatalogPage component with map on the right
- Search bar tokens are now inside the input field (like Gmail)
- Removed separate grid components, using cards directly
- Added missing translations (refine, noResults)
---
 app/components/catalog/CatalogGridHubs.vue    |  58 ---
 .../catalog/CatalogGridHubsForProduct.vue     |  99 -----
 app/components/catalog/CatalogGridOffers.vue  | 124 ------
 .../catalog/CatalogGridProducts.vue           |  46 ---
 .../CatalogGridProductsFromSupplier.vue       |  95 -----
 .../catalog/CatalogGridProductsInHub.vue      |  93 -----
 .../catalog/CatalogGridSuppliers.vue          |  57 ---
 app/components/search/UnifiedSearchBar.vue    |  89 ++--
 app/pages/catalog/index.vue                   | 386 ++++++++++++++----
 app/pages/index.vue                           |  90 +---
 i18n/locales/en/catalog.json                  |   4 +-
 i18n/locales/ru/catalog.json                  |   4 +-
 12 files changed, 377 insertions(+), 768 deletions(-)
 delete mode 100644 app/components/catalog/CatalogGridHubs.vue
 delete mode 100644 app/components/catalog/CatalogGridHubsForProduct.vue
 delete mode 100644 app/components/catalog/CatalogGridOffers.vue
 delete mode 100644 app/components/catalog/CatalogGridProducts.vue
 delete mode 100644 app/components/catalog/CatalogGridProductsFromSupplier.vue
 delete mode 100644 app/components/catalog/CatalogGridProductsInHub.vue
 delete mode 100644 app/components/catalog/CatalogGridSuppliers.vue

diff --git a/app/components/catalog/CatalogGridHubs.vue b/app/components/catalog/CatalogGridHubs.vue
deleted file mode 100644
index a8d214f..0000000
--- a/app/components/catalog/CatalogGridHubs.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<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>
diff --git a/app/components/catalog/CatalogGridHubsForProduct.vue b/app/components/catalog/CatalogGridHubsForProduct.vue
deleted file mode 100644
index 948c024..0000000
--- a/app/components/catalog/CatalogGridHubsForProduct.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<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>
diff --git a/app/components/catalog/CatalogGridOffers.vue b/app/components/catalog/CatalogGridOffers.vue
deleted file mode 100644
index fff654c..0000000
--- a/app/components/catalog/CatalogGridOffers.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<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>
diff --git a/app/components/catalog/CatalogGridProducts.vue b/app/components/catalog/CatalogGridProducts.vue
deleted file mode 100644
index 2e4f29f..0000000
--- a/app/components/catalog/CatalogGridProducts.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<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>
diff --git a/app/components/catalog/CatalogGridProductsFromSupplier.vue b/app/components/catalog/CatalogGridProductsFromSupplier.vue
deleted file mode 100644
index 0b89d1e..0000000
--- a/app/components/catalog/CatalogGridProductsFromSupplier.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<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>
diff --git a/app/components/catalog/CatalogGridProductsInHub.vue b/app/components/catalog/CatalogGridProductsInHub.vue
deleted file mode 100644
index e55924e..0000000
--- a/app/components/catalog/CatalogGridProductsInHub.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<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>
diff --git a/app/components/catalog/CatalogGridSuppliers.vue b/app/components/catalog/CatalogGridSuppliers.vue
deleted file mode 100644
index 0402949..0000000
--- a/app/components/catalog/CatalogGridSuppliers.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<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>
diff --git a/app/components/search/UnifiedSearchBar.vue b/app/components/search/UnifiedSearchBar.vue
index 097b408..1829e57 100644
--- a/app/components/search/UnifiedSearchBar.vue
+++ b/app/components/search/UnifiedSearchBar.vue
@@ -1,46 +1,53 @@
 <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>
+    <!-- Search bar with tokens inside -->
+    <div
+      class="flex items-center gap-2 px-3 py-2 border border-base-300 rounded-lg bg-base-100 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary cursor-text"
+      @click="focusInput"
+    >
+      <Icon name="lucide:search" size="18" class="text-base-content/50 flex-shrink-0" />
 
-      <!-- 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"
+      <!-- Tokens + input inline -->
+      <div class="flex items-center gap-1.5 flex-wrap flex-1 min-w-0">
+        <!-- Active filter tokens -->
+        <div
+          v-for="token in activeTokens"
+          :key="token.type"
+          class="badge badge-sm gap-1 cursor-pointer hover:badge-primary transition-colors flex-shrink-0"
+          @click.stop="onEditToken(token.type)"
         >
-          <Icon name="lucide:x" size="12" />
-        </button>
-      </div>
+          <Icon :name="token.icon" size="12" />
+          <span class="max-w-24 truncate">{{ token.label }}</span>
+          <button
+            class="hover:text-error"
+            @click.stop="onRemoveToken(token.type)"
+          >
+            <Icon name="lucide:x" size="10" />
+          </button>
+        </div>
 
-      <!-- Search input -->
-      <div class="flex-1 min-w-48">
+        <!-- Active selection mode indicator -->
+        <div
+          v-if="selectMode"
+          class="badge badge-sm badge-outline badge-primary gap-1 flex-shrink-0"
+        >
+          <Icon :name="selectModeIcon" size="12" />
+          {{ selectModeLabel }}:
+          <button
+            class="hover:text-error"
+            @click.stop="onCancelSelect"
+          >
+            <Icon name="lucide:x" size="10" />
+          </button>
+        </div>
+
+        <!-- Search input (no border, grows to fill) -->
         <input
+          ref="inputRef"
           v-model="localSearchQuery"
           type="text"
           :placeholder="placeholder"
-          class="input input-bordered w-full"
+          class="flex-1 min-w-32 bg-transparent outline-none text-sm"
           @input="onSearchInput"
         />
       </div>
@@ -49,15 +56,15 @@
     <!-- Quick filter chips -->
     <div
       v-if="availableChips.length > 0"
-      class="flex items-center gap-2 px-3 pb-3 flex-wrap"
+      class="flex items-center gap-2 px-3 py-2 border-t border-base-200"
     >
       <button
         v-for="chip in availableChips"
         :key="chip.type"
-        class="btn btn-sm btn-ghost gap-1"
+        class="btn btn-xs btn-ghost gap-1"
         @click="onStartSelect(chip.type)"
       >
-        <Icon name="lucide:plus" size="14" />
+        <Icon name="lucide:plus" size="12" />
         {{ chip.label }}
       </button>
     </div>
@@ -84,17 +91,23 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 
+const inputRef = ref<HTMLInputElement>()
 const localSearchQuery = ref(props.searchQuery)
 
 watch(() => props.searchQuery, (val) => {
   localSearchQuery.value = val
 })
 
+const focusInput = () => {
+  inputRef.value?.focus()
+}
+
 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')
+  if (props.activeTokens.length === 0) return t('catalog.search.placeholder')
+  return t('catalog.search.refine')
 })
 
 const selectModeLabel = computed(() => {
diff --git a/app/pages/catalog/index.vue b/app/pages/catalog/index.vue
index f7f63e9..7d8927d 100644
--- a/app/pages/catalog/index.vue
+++ b/app/pages/catalog/index.vue
@@ -1,7 +1,19 @@
 <template>
-  <div class="flex flex-col h-full">
-    <!-- Unified Search Bar -->
-    <div class="sticky top-0 z-20 px-3 lg:px-6 py-3 bg-base-300">
+  <CatalogPage
+    :items="currentItems"
+    :loading="isLoading"
+    :total-count="currentItems.length"
+    :grid-columns="3"
+    :with-map="showMap"
+    :use-server-clustering="useServerClustering"
+    :cluster-node-type="clusterNodeType"
+    map-id="unified-catalog-map"
+    :point-color="mapPointColor"
+    :hovered-id="hoveredId"
+    @select="onMapSelect"
+    @update:hovered-id="hoveredId = $event"
+  >
+    <template #searchBar>
       <UnifiedSearchBar
         :active-tokens="activeTokens"
         :available-chips="availableChips"
@@ -13,88 +25,68 @@
         @remove-token="removeFilter"
         @update:search-query="searchQuery = $event"
       />
-    </div>
+    </template>
 
-    <!-- Dynamic Content -->
-    <div class="flex-1 px-3 lg:px-6 py-4">
-      <!-- Hero (empty state) -->
-      <template v-if="displayMode === 'hero'">
-        <CatalogHero @start-select="startSelect" />
-      </template>
+    <template #header>
+      <Text v-if="!isLoading" tone="muted">{{ headerText }}</Text>
+    </template>
 
-      <!-- Products Grid -->
-      <template v-else-if="displayMode === 'grid-products'">
-        <CatalogGridProducts
-          :search-query="searchQuery"
-          @select="onSelectProduct"
-        />
-      </template>
+    <template #card="{ item }">
+      <!-- Product card -->
+      <ProductCard
+        v-if="cardType === 'product'"
+        :product="item"
+        selectable
+        :is-selected="item.uuid === hoveredId"
+        @select="onSelectProduct({ uuid: item.uuid, name: item.name })"
+        @hover="(h: boolean) => hoveredId = h ? item.uuid : undefined"
+      />
 
-      <!-- Suppliers Grid -->
-      <template v-else-if="displayMode === 'grid-suppliers'">
-        <CatalogGridSuppliers
-          :search-query="searchQuery"
-          @select="onSelectSupplier"
-        />
-      </template>
+      <!-- Supplier card -->
+      <SupplierCard
+        v-else-if="cardType === 'supplier'"
+        :supplier="item"
+        selectable
+        :is-selected="item.uuid === hoveredId"
+        @select="onSelectSupplier({ uuid: item.uuid || item.teamUuid, name: item.name })"
+      />
 
-      <!-- Hubs Grid -->
-      <template v-else-if="displayMode === 'grid-hubs'">
-        <CatalogGridHubs
-          :search-query="searchQuery"
-          @select="onSelectHub"
-        />
-      </template>
+      <!-- Hub card -->
+      <HubCard
+        v-else-if="cardType === 'hub'"
+        :hub="item"
+        selectable
+        :is-selected="item.uuid === hoveredId"
+        @select="onSelectHub({ uuid: item.uuid, name: item.name })"
+        @hover="(h: boolean) => hoveredId = h ? item.uuid : undefined"
+      />
 
-      <!-- Hubs for selected product -->
-      <template v-else-if="displayMode === 'grid-hubs-for-product'">
-        <CatalogGridHubsForProduct
-          :product-id="productId!"
-          :search-query="searchQuery"
-          @select="onSelectHub"
-          @product-loaded="setLabel('product', productId!, $event)"
-        />
-      </template>
+      <!-- Offer card -->
+      <OfferCard
+        v-else-if="cardType === 'offer'"
+        :offer="item"
+        linkable
+      />
+    </template>
 
-      <!-- Products from supplier -->
-      <template v-else-if="displayMode === 'grid-products-from-supplier'">
-        <CatalogGridProductsFromSupplier
-          :supplier-id="supplierId!"
-          :search-query="searchQuery"
-          @select="onSelectProduct"
-          @supplier-loaded="setLabel('supplier', supplierId!, $event)"
-        />
-      </template>
-
-      <!-- Products in hub -->
-      <template v-else-if="displayMode === 'grid-products-in-hub'">
-        <CatalogGridProductsInHub
-          :hub-id="hubId!"
-          :search-query="searchQuery"
-          @select="onSelectProduct"
-          @hub-loaded="setLabel('hub', hubId!, $event)"
-        />
-      </template>
-
-      <!-- Offers -->
-      <template v-else-if="displayMode === 'grid-offers'">
-        <CatalogGridOffers
-          :product-id="productId"
-          :supplier-id="supplierId"
-          :hub-id="hubId"
-          :search-query="searchQuery"
-        />
-      </template>
-    </div>
-  </div>
+    <template #empty>
+      <!-- Hero for empty state -->
+      <CatalogHero v-if="displayMode === 'hero'" @start-select="startSelect" />
+      <Text v-else tone="muted">{{ t('catalog.empty.noResults') }}</Text>
+    </template>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">
+import { GetProductsDocument } from '~/composables/graphql/public/geo-generated'
+import { GetOffersDocument } from '~/composables/graphql/public/exchange-generated'
+
 definePageMeta({
   layout: 'topnav'
 })
 
 const { t } = useI18n()
+const { execute } = useGraphQL()
 
 const {
   selectMode,
@@ -113,6 +105,248 @@ const {
   setLabel
 } = useCatalogSearch()
 
+// Composables for data
+const { items: products, isLoading: productsLoading, init: initProducts } = useCatalogProducts()
+const { items: suppliers, isLoading: suppliersLoading, init: initSuppliers } = useCatalogSuppliers()
+const { items: hubs, isLoading: hubsLoading, init: initHubs } = useCatalogHubs()
+
+// Local state for specific queries
+const hubsForProduct = ref<any[]>([])
+const productsFromSupplier = ref<any[]>([])
+const productsInHub = ref<any[]>([])
+const offers = ref<any[]>([])
+const specificLoading = ref(false)
+
+const hoveredId = ref<string>()
+
+// Determine what to show
+const cardType = computed(() => {
+  switch (displayMode.value) {
+    case 'grid-products':
+    case 'grid-products-from-supplier':
+    case 'grid-products-in-hub':
+      return 'product'
+    case 'grid-suppliers':
+      return 'supplier'
+    case 'grid-hubs':
+    case 'grid-hubs-for-product':
+      return 'hub'
+    case 'grid-offers':
+      return 'offer'
+    default:
+      return 'product'
+  }
+})
+
+const showMap = computed(() => displayMode.value !== 'hero')
+
+const useServerClustering = computed(() => {
+  return displayMode.value === 'grid-hubs' || displayMode.value === 'grid-offers'
+})
+
+const clusterNodeType = computed(() => {
+  if (displayMode.value === 'grid-offers') return 'offer'
+  return 'logistics'
+})
+
+const mapPointColor = computed(() => {
+  if (cardType.value === 'supplier') return '#3b82f6'
+  if (cardType.value === 'hub') return '#10b981'
+  if (cardType.value === 'offer') return '#22c55e'
+  return '#f59e0b'
+})
+
+const headerText = computed(() => {
+  switch (displayMode.value) {
+    case 'grid-products': return t('catalog.headers.selectProduct')
+    case 'grid-suppliers': return t('catalog.headers.selectSupplier')
+    case 'grid-hubs': return t('catalog.headers.selectHub')
+    case 'grid-hubs-for-product': return t('catalog.headers.hubsForProduct')
+    case 'grid-products-from-supplier': return t('catalog.headers.productsFromSupplier')
+    case 'grid-products-in-hub': return t('catalog.headers.productsInHub')
+    case 'grid-offers': return t('catalog.headers.offers')
+    default: return ''
+  }
+})
+
+const isLoading = computed(() => {
+  if (specificLoading.value) return true
+  switch (displayMode.value) {
+    case 'grid-products': return productsLoading.value
+    case 'grid-suppliers': return suppliersLoading.value
+    case 'grid-hubs': return hubsLoading.value
+    default: return false
+  }
+})
+
+// Filter items by search query
+const filterBySearch = (items: any[]) => {
+  if (!searchQuery.value.trim()) return items
+  const q = searchQuery.value.toLowerCase()
+  return items.filter(item =>
+    item.name?.toLowerCase().includes(q) ||
+    item.productName?.toLowerCase().includes(q) ||
+    item.teamName?.toLowerCase().includes(q) ||
+    item.locationName?.toLowerCase().includes(q) ||
+    item.country?.toLowerCase().includes(q)
+  )
+}
+
+const currentItems = computed(() => {
+  let items: any[] = []
+
+  switch (displayMode.value) {
+    case 'grid-products':
+      items = products.value
+      break
+    case 'grid-suppliers':
+      items = suppliers.value
+      break
+    case 'grid-hubs':
+      items = hubs.value
+      break
+    case 'grid-hubs-for-product':
+      items = hubsForProduct.value
+      break
+    case 'grid-products-from-supplier':
+      items = productsFromSupplier.value
+      break
+    case 'grid-products-in-hub':
+      items = productsInHub.value
+      break
+    case 'grid-offers':
+      items = offers.value
+      break
+    case 'hero':
+    default:
+      items = []
+  }
+
+  return filterBySearch(items)
+})
+
+// Fetch data based on displayMode
+const fetchSpecificData = async () => {
+  specificLoading.value = true
+  try {
+    if (displayMode.value === 'grid-hubs-for-product' && productId.value) {
+      // Get hubs for product via offers
+      const data = await execute(
+        GetOffersDocument,
+        { productUuid: productId.value },
+        'public',
+        'exchange'
+      )
+      const offersData = data?.getOffers || []
+
+      // Set product name from first offer
+      if (offersData.length > 0 && offersData[0].productName) {
+        setLabel('product', productId.value, offersData[0].productName)
+      }
+
+      // Extract unique hubs
+      const hubsMap = new Map<string, any>()
+      offersData.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
+          })
+        }
+      })
+      hubsForProduct.value = Array.from(hubsMap.values())
+    }
+
+    if (displayMode.value === 'grid-products-from-supplier' && supplierId.value) {
+      const data = await execute(
+        GetOffersDocument,
+        { teamUuid: supplierId.value },
+        'public',
+        'exchange'
+      )
+      const offersData = data?.getOffers || []
+
+      // Set supplier name
+      if (offersData.length > 0 && offersData[0].teamName) {
+        setLabel('supplier', supplierId.value, offersData[0].teamName)
+      }
+
+      // Extract unique products
+      const productsMap = new Map<string, any>()
+      offersData.forEach((offer: any) => {
+        if (offer.productUuid && !productsMap.has(offer.productUuid)) {
+          productsMap.set(offer.productUuid, {
+            uuid: offer.productUuid,
+            name: offer.productName,
+            categoryName: offer.categoryName
+          })
+        }
+      })
+      productsFromSupplier.value = Array.from(productsMap.values())
+    }
+
+    if (displayMode.value === 'grid-products-in-hub' && hubId.value) {
+      const data = await execute(
+        GetOffersDocument,
+        { locationUuid: hubId.value },
+        'public',
+        'exchange'
+      )
+      const offersData = data?.getOffers || []
+
+      // Set hub name
+      if (offersData.length > 0 && offersData[0].locationName) {
+        setLabel('hub', hubId.value, offersData[0].locationName)
+      }
+
+      // Extract unique products
+      const productsMap = new Map<string, any>()
+      offersData.forEach((offer: any) => {
+        if (offer.productUuid && !productsMap.has(offer.productUuid)) {
+          productsMap.set(offer.productUuid, {
+            uuid: offer.productUuid,
+            name: offer.productName,
+            categoryName: offer.categoryName
+          })
+        }
+      })
+      productsInHub.value = Array.from(productsMap.values())
+    }
+
+    if (displayMode.value === 'grid-offers') {
+      const vars: any = {}
+      if (productId.value) vars.productUuid = productId.value
+      if (supplierId.value) vars.teamUuid = supplierId.value
+      if (hubId.value) vars.locationUuid = hubId.value
+
+      const data = await execute(GetOffersDocument, vars, 'public', 'exchange')
+      offers.value = data?.getOffers || []
+    }
+  } finally {
+    specificLoading.value = false
+  }
+}
+
+// Initialize base data
+const initBaseData = async () => {
+  if (displayMode.value === 'grid-products') await initProducts()
+  if (displayMode.value === 'grid-suppliers') await initSuppliers()
+  if (displayMode.value === 'grid-hubs') await initHubs()
+}
+
+// Watch displayMode and fetch appropriate data
+watch(displayMode, async (mode) => {
+  if (['grid-products', 'grid-suppliers', 'grid-hubs'].includes(mode)) {
+    await initBaseData()
+  } else if (['grid-hubs-for-product', 'grid-products-from-supplier', 'grid-products-in-hub', 'grid-offers'].includes(mode)) {
+    await fetchSpecificData()
+  }
+}, { immediate: true })
+
 // Selection handlers
 const onSelectProduct = (product: { uuid: string; name: string }) => {
   selectItem('product', product.uuid, product.name)
@@ -126,6 +360,16 @@ const onSelectHub = (hub: { uuid: string; name: string }) => {
   selectItem('hub', hub.uuid, hub.name)
 }
 
+const onMapSelect = (item: any) => {
+  if (cardType.value === 'product') {
+    onSelectProduct({ uuid: item.uuid, name: item.name })
+  } else if (cardType.value === 'supplier') {
+    onSelectSupplier({ uuid: item.uuid || item.teamUuid, name: item.name })
+  } else if (cardType.value === 'hub') {
+    onSelectHub({ uuid: item.uuid, name: item.name })
+  }
+}
+
 // SEO
 useHead(() => {
   let title = t('catalog.hero.title')
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 785324a..fc07b32 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,93 +1,13 @@
 <template>
-  <Stack gap="12">
-    <!-- How it works -->
-    <Section variant="plain">
-      <Stack gap="6" align="center">
-          <Heading :level="2">{{ $t('howto.title') }}</Heading>
-          <Grid :cols="1" :md="3" :gap="6">
-            <Card padding="lg">
-              <Stack gap="3" align="center">
-                <IconCircle tone="primary">🔍</IconCircle>
-                <Heading :level="3" weight="semibold">{{ $t('howto.step1.title') }}</Heading>
-                <Text tone="muted" align="center">{{ $t('howto.step1.description') }}</Text>
-              </Stack>
-            </Card>
-            <Card padding="lg">
-              <Stack gap="3" align="center">
-                <IconCircle tone="primary">🤝</IconCircle>
-                <Heading :level="3" weight="semibold">{{ $t('howto.step2.title') }}</Heading>
-                <Text tone="muted" align="center">{{ $t('howto.step2.description') }}</Text>
-              </Stack>
-            </Card>
-            <Card padding="lg">
-              <Stack gap="3" align="center">
-                <IconCircle tone="primary">⚡</IconCircle>
-                <Heading :level="3" weight="semibold">{{ $t('howto.step3.title') }}</Heading>
-                <Text tone="muted" align="center">{{ $t('howto.step3.description') }}</Text>
-              </Stack>
-            </Card>
-          </Grid>
-        </Stack>
-    </Section>
-
-    <!-- Who it's for -->
-    <Section variant="plain">
-      <Stack gap="8" align="center">
-          <Heading :level="2">{{ $t('roles.title') }}</Heading>
-
-          <Grid :cols="1" :md="3" :gap="6">
-            <Card padding="lg">
-              <Stack gap="4" align="center">
-                <IconCircle tone="primary">🏭</IconCircle>
-                <Heading :level="3">{{ $t('roles.producers.title') }}</Heading>
-                <Text tone="muted" align="center">{{ $t('roles.producers.description') }}</Text>
-                <Stack tag="ul" gap="1">
-                  <li>✓ {{ $t('roles.producers.benefit1') }}</li>
-                  <li>✓ {{ $t('roles.producers.benefit2') }}</li>
-                  <li>✓ {{ $t('roles.producers.benefit3') }}</li>
-                  <li>✓ {{ $t('roles.producers.benefit4') }}</li>
-                </Stack>
-                <Button :full-width="true" variant="outline">{{ $t('roles.producers.cta') }}</Button>
-              </Stack>
-            </Card>
-
-            <Card padding="lg">
-              <Stack gap="4" align="center">
-                <IconCircle tone="primary">🏢</IconCircle>
-                <Heading :level="3">{{ $t('roles.buyers.title') }}</Heading>
-                <Text tone="muted" align="center">{{ $t('roles.buyers.description') }}</Text>
-                <Stack tag="ul" gap="1">
-                  <li>✓ {{ $t('roles.buyers.benefit1') }}</li>
-                  <li>✓ {{ $t('roles.buyers.benefit2') }}</li>
-                  <li>✓ {{ $t('roles.buyers.benefit3') }}</li>
-                  <li>✓ {{ $t('roles.buyers.benefit4') }}</li>
-                </Stack>
-                <Button :full-width="true" variant="outline">{{ $t('roles.buyers.cta') }}</Button>
-              </Stack>
-            </Card>
-
-            <Card padding="lg">
-              <Stack gap="4" align="center">
-                <IconCircle tone="primary">⚙️</IconCircle>
-                <Heading :level="3">{{ $t('roles.services.title') }}</Heading>
-                <Text tone="muted" align="center">{{ $t('roles.services.description') }}</Text>
-                <Stack tag="ul" gap="1">
-                  <li>✓ {{ $t('roles.services.benefit1') }}</li>
-                  <li>✓ {{ $t('roles.services.benefit2') }}</li>
-                  <li>✓ {{ $t('roles.services.benefit3') }}</li>
-                  <li>✓ {{ $t('roles.services.benefit4') }}</li>
-                </Stack>
-                <Button :full-width="true" variant="outline">{{ $t('roles.services.cta') }}</Button>
-              </Stack>
-            </Card>
-          </Grid>
-        </Stack>
-    </Section>
-  </Stack>
+  <div></div>
 </template>
 
 <script setup>
+// Redirect to unified catalog
 definePageMeta({
   layout: 'topnav'
 })
+
+const localePath = useLocalePath()
+await navigateTo(localePath('/catalog'), { replace: true })
 </script>
diff --git a/i18n/locales/en/catalog.json b/i18n/locales/en/catalog.json
index e53696e..1645b19 100644
--- a/i18n/locales/en/catalog.json
+++ b/i18n/locales/en/catalog.json
@@ -9,6 +9,7 @@
     },
     "search": {
       "placeholder": "Find an offer...",
+      "refine": "Refine...",
       "searchProducts": "Search products...",
       "searchSuppliers": "Search suppliers...",
       "searchHubs": "Search hubs..."
@@ -30,7 +31,8 @@
       "noProducts": "No products found",
       "noSuppliers": "No suppliers found",
       "noHubs": "No hubs found",
-      "noOffers": "No offers found"
+      "noOffers": "No offers found",
+      "noResults": "No results found"
     }
   }
 }
diff --git a/i18n/locales/ru/catalog.json b/i18n/locales/ru/catalog.json
index cb62dac..7280e7f 100644
--- a/i18n/locales/ru/catalog.json
+++ b/i18n/locales/ru/catalog.json
@@ -9,6 +9,7 @@
     },
     "search": {
       "placeholder": "Найти предложение...",
+      "refine": "Уточнить...",
       "searchProducts": "Поиск товаров...",
       "searchSuppliers": "Поиск поставщиков...",
       "searchHubs": "Поиск хабов..."
@@ -30,7 +31,8 @@
       "noProducts": "Товары не найдены",
       "noSuppliers": "Поставщики не найдены",
       "noHubs": "Хабы не найдены",
-      "noOffers": "Предложения не найдены"
+      "noOffers": "Предложения не найдены",
+      "noResults": "Ничего не найдено"
     }
   }
 }