feat(catalog): add map to all catalog pages

All catalog pages now use CatalogPage component with map on the right side:
- /catalog/hubs/[id] - shows hub on map
- /catalog/offers - shows empty map (products have no coords)
- /catalog/offers/[productId] - shows hubs where product can be delivered
- /catalog/suppliers/[supplierId] - shows supplier location
- /catalog/suppliers/[supplierId]/[productId] - shows hubs for supplier's product
- /catalog/suppliers/[supplierId]/[productId]/[hubId] - shows source and destination

app/pages/catalog/offers/index.vue

@@ -1,16 +1,14 @@
 <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('catalogProducts.states.loading') }}</Text>
-      </Stack>
-    </Section>
-
-    <!-- Empty -->
-    <Section v-else-if="products.length === 0" variant="plain" paddingY="lg">
-      <Card padding="lg">
+  <CatalogPage
+    :items="products"
+    :loading="isLoading"
+    with-map
+    map-id="offers-products-map"
+    point-color="#3b82f6"
+  >
+    <template #header>
+      <!-- Empty -->
+      <Card v-if="!isLoading && products.length === 0" padding="lg">
         <Stack align="center" gap="4">
           <IconCircle tone="primary">
             <Icon name="lucide:package" size="24" />
@@ -19,30 +17,26 @@
           <Text tone="muted">{{ t('catalogProducts.empty.subtitle') }}</Text>
         </Stack>
       </Card>
-    </Section>
 
-    <!-- Content -->
-    <Section v-else variant="plain" paddingY="lg">
-      <Stack gap="4">
-        <!-- Header -->
-        <div>
-          <Heading :level="1">{{ t('catalogProducts.header.title') }}</Heading>
-          <Text tone="muted" size="sm">{{ t('catalogProducts.header.subtitle', { count: products.length }) }}</Text>
-        </div>
+      <!-- Header -->
+      <div v-else>
+        <Heading :level="1">{{ t('catalogProducts.header.title') }}</Heading>
+        <Text tone="muted" size="sm">{{ t('catalogProducts.header.subtitle', { count: products.length }) }}</Text>
+      </div>
+    </template>
 
-        <!-- Products grid -->
-        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
-          <HubProductCard
-            v-for="product in products"
-            :key="product.uuid"
-            :name="product.name || ''"
-            :price-history="getMockPriceHistory(product.uuid)"
-            @select="goToProduct(product.uuid)"
-          />
-        </div>
-      </Stack>
-    </Section>
-  </Stack>
+    <template #card="{ item }">
+      <HubProductCard
+        :name="item.name || ''"
+        :price-history="getMockPriceHistory(item.uuid)"
+        @select="goToProduct(item.uuid)"
+      />
+    </template>
+
+    <template #empty>
+      <Text tone="muted">{{ t('catalogProducts.empty.subtitle') }}</Text>
+    </template>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">