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/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)