feat(catalog): two-level offers navigation + map auto-centering

- Add fitBounds to CatalogMap for auto-centering on all points
- Add productUuid filter to useCatalogOffers composable
- Create useCatalogProducts composable for products list
- Update offers/index.vue: show products first, then offers by product
- Update offers/map.vue: same two-level navigation
- Add translations for new UI elements

Navigation flow:
/catalog/offers → product selection → offers for that product

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/components/catalog/CatalogMap.vue

@@ -16,6 +16,7 @@
 
 <script setup lang="ts">
 import type { Map as MapboxMapType } from 'mapbox-gl'
+import { LngLatBounds } from 'mapbox-gl'
 
 interface MapItem {
   uuid: string
@@ -43,6 +44,7 @@ const emit = defineEmits<{
 
 const mapRef = useMapboxRef(props.mapId)
 const { flyThroughSpace } = useMapboxFlyAnimation()
+const didFitBounds = ref(false)
 
 const mapOptions = computed(() => ({
   style: 'mapbox://styles/mapbox/satellite-streets-v12',
@@ -160,6 +162,16 @@ const onMapCreated = (map: MapboxMapType) => {
     map.on('mouseleave', 'clusters', () => { map.getCanvas().style.cursor = '' })
     map.on('mouseenter', 'unclustered-point', () => { map.getCanvas().style.cursor = 'pointer' })
     map.on('mouseleave', 'unclustered-point', () => { map.getCanvas().style.cursor = '' })
+
+    // Auto-fit bounds to all items
+    if (!didFitBounds.value && props.items.length > 0) {
+      const bounds = new LngLatBounds()
+      props.items.forEach(item => {
+        bounds.extend([item.longitude, item.latitude])
+      })
+      map.fitBounds(bounds, { padding: 50, maxZoom: 10 })
+      didFitBounds.value = true
+    }
   }
 
   if (map.loaded()) {

app/composables/useCatalogOffers.ts

@@ -6,6 +6,7 @@ const PAGE_SIZE = 24
 const items = ref<any[]>([])
 const total = ref(0)
 const selectedFilter = ref('all')
+const productUuid = ref<string | null>(null)
 const isLoading = ref(false)
 const isLoadingMore = ref(false)
 const isInitialized = ref(false)
@@ -39,7 +40,12 @@ export function useCatalogOffers() {
       const status = selectedFilter.value === 'active' ? 'active' : null
       const data = await execute(
         GetOffersDocument,
-        { limit: PAGE_SIZE, offset, status },
+        {
+          limit: PAGE_SIZE,
+          offset,
+          status,
+          productUuid: productUuid.value
+        },
         'public',
         'exchange'
       )
@@ -52,6 +58,14 @@ export function useCatalogOffers() {
     }
   }
 
+  const setProductUuid = (uuid: string | null) => {
+    if (productUuid.value !== uuid) {
+      productUuid.value = uuid
+      isInitialized.value = false
+      items.value = []
+    }
+  }
+
   const loadMore = async () => {
     if (isLoadingMore.value) return
     isLoadingMore.value = true
@@ -80,6 +94,7 @@ export function useCatalogOffers() {
     items,
     total,
     selectedFilter,
+    productUuid,
     filters,
     isLoading,
     isLoadingMore,
@@ -87,6 +102,7 @@ export function useCatalogOffers() {
     canLoadMore,
     fetchPage,
     loadMore,
-    init
+    init,
+    setProductUuid
   }
 }

app/composables/useCatalogProducts.ts

@@ -0,0 +1,41 @@
+import { GetProductsDocument } from '~/composables/graphql/public/exchange-generated'
+
+// Shared state
+const items = ref<any[]>([])
+const isLoading = ref(false)
+const isInitialized = ref(false)
+
+export function useCatalogProducts() {
+  const { execute } = useGraphQL()
+
+  const fetchProducts = async () => {
+    if (isLoading.value) return
+    isLoading.value = true
+    try {
+      const data = await execute(
+        GetProductsDocument,
+        {},
+        'public',
+        'exchange'
+      )
+      items.value = data?.getProducts || []
+      isInitialized.value = true
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  const init = async () => {
+    if (!isInitialized.value && items.value.length === 0) {
+      await fetchProducts()
+    }
+  }
+
+  return {
+    items,
+    isLoading,
+    isInitialized,
+    fetchProducts,
+    init
+  }
+}

app/pages/catalog/offers/index.vue

@@ -1,10 +1,18 @@
 <template>
   <Stack gap="6">
     <Section variant="plain" paddingY="md">
-      <PageHeader :title="t('catalogOffersSection.header.title')" />
+      <PageHeader :title="pageTitle">
+        <template v-if="selectedProduct" #actions>
+          <NuxtLink :to="localePath('/catalog/offers')" class="btn btn-ghost btn-sm">
+            <Icon name="lucide:arrow-left" size="16" />
+            {{ t('common.back') }}
+          </NuxtLink>
+        </template>
+      </PageHeader>
     </Section>
 
-    <Section v-if="isLoading" variant="plain" paddingY="md">
+    <!-- Loading state -->
+    <Section v-if="isLoading || productsLoading" variant="plain" paddingY="md">
       <Card padding="lg">
         <Stack align="center" justify="center" gap="3">
           <Spinner />
@@ -13,9 +21,34 @@
       </Card>
     </Section>
 
+    <!-- Products catalog (when no product selected) -->
+    <Section v-else-if="!selectedProductUuid" variant="plain" paddingY="md">
+      <Stack gap="4">
+        <Grid :cols="1" :md="2" :lg="3" :gap="4">
+          <Card
+            v-for="product in products"
+            :key="product.uuid"
+            padding="sm"
+            interactive
+            @click="selectProduct(product)"
+          >
+            <Stack gap="2">
+              <Text size="base" weight="semibold">{{ product.name }}</Text>
+              <Text tone="muted">{{ product.categoryName || t('catalogProduct.labels.category_unknown') }}</Text>
+            </Stack>
+          </Card>
+        </Grid>
+
+        <Stack v-if="products.length === 0" align="center" gap="2">
+          <Text tone="muted">{{ t('catalogOffersSection.empty.no_products') }}</Text>
+        </Stack>
+      </Stack>
+    </Section>
+
+    <!-- Offers for selected product -->
     <Section v-else variant="plain" paddingY="md">
       <Stack gap="4">
-        <NuxtLink :to="localePath('/catalog/offers/map')" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
+        <NuxtLink :to="offersMapLink" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
           <ClientOnly>
             <MapboxGlobe
               map-id="offers-map"
@@ -54,7 +87,17 @@
 <script setup lang="ts">
 const { t } = useI18n()
 const localePath = useLocalePath()
+const route = useRoute()
+const router = useRouter()
 
+// Products catalog
+const {
+  items: products,
+  isLoading: productsLoading,
+  init: initProducts
+} = useCatalogProducts()
+
+// Offers
 const {
   items,
   total,
@@ -65,12 +108,52 @@ const {
   itemsWithCoords,
   canLoadMore,
   loadMore,
-  init
+  init: initOffers,
+  setProductUuid
 } = useCatalogOffers()
 
-await init()
+// Get product from query
+const selectedProductUuid = computed(() => route.query.product as string | undefined)
+
+// Selected product info
+const selectedProduct = computed(() => {
+  if (!selectedProductUuid.value) return null
+  return products.value.find(p => p.uuid === selectedProductUuid.value)
+})
+
+const pageTitle = computed(() => {
+  if (selectedProduct.value) {
+    return `${t('catalogOffersSection.header.title')}: ${selectedProduct.value.name}`
+  }
+  return t('catalogOffersSection.header.select_product')
+})
+
+const offersMapLink = computed(() => {
+  if (selectedProductUuid.value) {
+    return localePath(`/catalog/offers/map?product=${selectedProductUuid.value}`)
+  }
+  return localePath('/catalog/offers/map')
+})
+
+const selectProduct = (product: any) => {
+  router.push({
+    path: route.path,
+    query: { product: product.uuid }
+  })
+}
+
+// Initialize
+await initProducts()
+
+// Watch for product changes
+watch(selectedProductUuid, async (uuid) => {
+  setProductUuid(uuid || null)
+  if (uuid) {
+    await initOffers()
+  }
+}, { immediate: true })
 
 useHead(() => ({
-  title: t('catalogOffersSection.header.title')
+  title: pageTitle.value
 }))
 </script>

app/pages/catalog/offers/map.vue

@@ -1,10 +1,38 @@
 <template>
   <NuxtLayout name="map">
     <template #sidebar>
+      <!-- Product selection mode -->
       <CatalogMapSidebar
-        :title="t('catalogOffersSection.header.title')"
+        v-if="!selectedProductUuid"
+        :title="t('catalogOffersSection.header.select_product')"
         :back-link="localePath('/catalog/offers')"
         :back-label="t('catalogMap.actions.list_view')"
+        :items-count="products.length"
+        :loading="productsLoading"
+        :empty-text="t('catalogOffersSection.empty.no_products')"
+      >
+        <template #cards>
+          <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>
+        </template>
+      </CatalogMapSidebar>
+
+      <!-- Offers for selected product -->
+      <CatalogMapSidebar
+        v-else
+        :title="sidebarTitle"
+        :back-link="localePath('/catalog/offers/map')"
+        :back-label="t('common.back')"
         :items-count="items.length"
         :filters="filters"
         :selected-filter="selectedFilter"
@@ -42,17 +70,59 @@ definePageMeta({
 
 const { t } = useI18n()
 const localePath = useLocalePath()
+const route = useRoute()
+const router = useRouter()
 
+// Products
+const {
+  items: products,
+  isLoading: productsLoading,
+  init: initProducts
+} = useCatalogProducts()
+
+// Offers
 const {
   items,
   selectedFilter,
   filters,
   isLoading,
   itemsWithCoords,
-  init
+  init: initOffers,
+  setProductUuid
 } = useCatalogOffers()
 
-await init()
+// Product from query
+const selectedProductUuid = computed(() => route.query.product as string | undefined)
+
+const selectedProduct = computed(() => {
+  if (!selectedProductUuid.value) return null
+  return products.value.find(p => p.uuid === selectedProductUuid.value)
+})
+
+const sidebarTitle = computed(() => {
+  if (selectedProduct.value) {
+    return `${t('catalogOffersSection.header.title')}: ${selectedProduct.value.name}`
+  }
+  return t('catalogOffersSection.header.title')
+})
+
+// Initialize products
+await initProducts()
+
+// Watch for product changes
+watch(selectedProductUuid, async (uuid) => {
+  setProductUuid(uuid || null)
+  if (uuid) {
+    await initOffers()
+  }
+}, { immediate: true })
+
+const selectProduct = (product: any) => {
+  router.push({
+    path: route.path,
+    query: { product: product.uuid }
+  })
+}
 
 const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
 const selectedItemId = ref<string | null>(null)

i18n/locales/en/catalogOffersSection.json

@@ -1,7 +1,8 @@
 {
   "catalogOffersSection": {
     "header": {
-      "title": "Offers"
+      "title": "Offers",
+      "select_product": "Select product"
     },
     "actions": {
       "view_all": "View all"
@@ -11,7 +12,8 @@
       "active": "Active"
     },
     "empty": {
-      "no_offers": "No active offers"
+      "no_offers": "No active offers",
+      "no_products": "No products available"
     }
   }
 }

i18n/locales/ru/catalogOffersSection.json

@@ -1,7 +1,8 @@
 {
   "catalogOffersSection": {
     "header": {
-      "title": "Предложения"
+      "title": "Предложения",
+      "select_product": "Выберите товар"
     },
     "actions": {
       "view_all": "Смотреть все"
@@ -11,7 +12,8 @@
       "active": "Активные"
     },
     "empty": {
-      "no_offers": "Нет активных предложений"
+      "no_offers": "Нет активных предложений",
+      "no_products": "Нет доступных товаров"
     }
   }
 }