Refactor catalog layout: replace Teleport with provide/inject

- Create useCatalogLayout composable for data transfer from pages to layout
- Layout now owns SearchBar and CatalogMap components directly
- Pages provide data via provideCatalogLayout()
- Fixes navigation glitches (multiple SearchBars) when switching tabs
- Support custom subNavItems for clientarea pages
- Unify 6 pages to use catalog layout:
  - catalog/offers, suppliers, hubs
  - clientarea/orders, addresses, offers

app/pages/catalog/offers/index.vue

@@ -1,60 +1,5 @@
 <template>
   <div>
-    <!-- SearchBar teleported to layout -->
-    <Teleport to="#catalog-searchbar">
-      <div class="px-4 lg:px-6 py-2">
-        <CatalogSearchBar
-          v-model:search-query="searchQuery"
-          :active-filters="activeFilterBadges"
-          :displayed-count="displayItems.length"
-          :total-count="total"
-          @remove-filter="onRemoveFilter"
-          @search="onSearch"
-        >
-          <template #filters>
-            <div class="p-2 space-y-3">
-              <div>
-                <div class="text-xs font-semibold mb-1 text-base-content/70">{{ t('catalogOffersSection.filters.product') }}</div>
-                <ul class="menu menu-compact max-h-48 overflow-y-auto">
-                  <li v-for="filter in productFilters" :key="filter.id">
-                    <a
-                      :class="{ active: selectedProductUuid === filter.id || (!selectedProductUuid && filter.id === 'all') }"
-                      @click="onProductFilterChange(filter.id)"
-                    >
-                      {{ filter.label }}
-                    </a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </template>
-        </CatalogSearchBar>
-      </div>
-    </Teleport>
-
-    <!-- Map teleported to layout -->
-    <Teleport to="#catalog-map">
-      <div class="h-full w-full relative">
-        <!-- Search with map checkbox -->
-        <label class="absolute top-4 left-4 z-10 bg-white/90 backdrop-blur px-3 py-2 rounded-lg shadow flex items-center gap-2 cursor-pointer">
-          <input type="checkbox" v-model="searchWithMap" class="checkbox checkbox-sm" />
-          <span class="text-sm">{{ t('catalogMap.searchWithMap') }}</span>
-        </label>
-        <ClientOnly>
-          <CatalogMap
-            ref="mapRef"
-            map-id="offers-map"
-            :items="itemsWithCoords"
-            point-color="#f59e0b"
-            :hovered-item-id="hoveredOfferId"
-            :hovered-item="hoveredItem"
-            @select-item="onMapSelect"
-            @bounds-change="onBoundsChange"
-          />
-        </ClientOnly>
-      </div>
-    </Teleport>
-
     <!-- List content -->
     <div v-if="isLoading || productsLoading" class="flex items-center justify-center py-8">
       <Card padding="lg">
@@ -98,7 +43,9 @@
 </template>
 
 <script setup lang="ts">
+import { h, defineComponent } from 'vue'
 import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
+import { provideCatalogLayout } from '~/composables/useCatalogLayout'
 
 definePageMeta({
   layout: 'catalog'
@@ -133,9 +80,6 @@ const hoveredOfferId = ref<string>()
 // Search bar
 const searchQuery = ref('')
 
-// Map ref
-const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
-
 // Search with map checkbox
 const searchWithMap = ref(false)
 const currentBounds = ref<MapBounds | null>(null)
@@ -218,10 +162,6 @@ const onSearch = () => {
 
 const onSelectOffer = (offer: any) => {
   selectedOfferId.value = offer.uuid
-  // Fly to offer on map
-  if (offer.locationLatitude && offer.locationLongitude) {
-    mapRef.value?.flyTo(Number(offer.locationLatitude), Number(offer.locationLongitude), 8)
-  }
 }
 
 // Handle selection from map
@@ -232,6 +172,46 @@ const onMapSelect = (uuid: string) => {
   }
 }
 
+// Filter component for the layout
+const OffersFilterComponent = defineComponent({
+  setup() {
+    return () => h('div', { class: 'p-2 space-y-3' }, [
+      h('div', {}, [
+        h('div', { class: 'text-xs font-semibold mb-1 text-base-content/70' }, t('catalogOffersSection.filters.product')),
+        h('ul', { class: 'menu menu-compact max-h-48 overflow-y-auto' },
+          productFilters.value.map(filter =>
+            h('li', { key: filter.id },
+              h('a', {
+                class: (selectedProductUuid.value === filter.id || (!selectedProductUuid.value && filter.id === 'all')) ? 'active' : '',
+                onClick: () => onProductFilterChange(filter.id)
+              }, filter.label)
+            )
+          )
+        )
+      ])
+    ])
+  }
+})
+
+// Provide data to layout
+provideCatalogLayout({
+  searchQuery,
+  activeFilters: activeFilterBadges,
+  displayedCount: computed(() => displayItems.value.length),
+  totalCount: computed(() => total.value),
+  onSearch,
+  onRemoveFilter,
+  filterComponent: OffersFilterComponent,
+  mapItems: itemsWithCoords,
+  mapId: 'offers-map',
+  pointColor: '#f59e0b',
+  hoveredItemId: hoveredOfferId,
+  hoveredItem,
+  onMapSelect,
+  onBoundsChange,
+  searchWithMap
+})
+
 // Initialize
 await Promise.all([initProducts(), initOffers()])