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/suppliers/index.vue

@@ -1,41 +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="[]"
-          :displayed-count="displayItems.length"
-          :total-count="total"
-          @search="onSearch"
-        />
-      </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="suppliers-map"
-            :items="itemsWithCoords"
-            point-color="#3b82f6"
-            :hovered-item-id="hoveredSupplierId"
-            :hovered-item="hoveredItem"
-            @select-item="onMapSelect"
-            @bounds-change="onBoundsChange"
-          />
-        </ClientOnly>
-      </div>
-    </Teleport>
-
     <!-- List content -->
     <div v-if="isLoading" class="flex items-center justify-center py-8">
       <Card padding="lg">
@@ -80,6 +44,7 @@
 
 <script setup lang="ts">
 import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
+import { provideCatalogLayout } from '~/composables/useCatalogLayout'
 
 definePageMeta({
   layout: 'catalog'
@@ -104,9 +69,6 @@ const hoveredSupplierId = 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)
@@ -155,12 +117,13 @@ const onSearch = () => {
   // TODO: Implement search
 }
 
+// No filters for suppliers
+const onRemoveFilter = (_id: string) => {
+  // No filters to remove
+}
+
 const onSelectSupplier = (supplier: any) => {
   selectedSupplierId.value = supplier.uuid || supplier.teamUuid
-  // Fly to supplier on map
-  if (supplier.latitude && supplier.longitude) {
-    mapRef.value?.flyTo(Number(supplier.latitude), Number(supplier.longitude), 8)
-  }
 }
 
 // Handle selection from map
@@ -171,6 +134,24 @@ const onMapSelect = (uuid: string) => {
   }
 }
 
+// Provide data to layout (no filter component for suppliers)
+provideCatalogLayout({
+  searchQuery,
+  activeFilters: ref([]),
+  displayedCount: computed(() => displayItems.value.length),
+  totalCount: computed(() => total.value),
+  onSearch,
+  onRemoveFilter,
+  mapItems: itemsWithCoords,
+  mapId: 'suppliers-map',
+  pointColor: '#3b82f6',
+  hoveredItemId: hoveredSupplierId,
+  hoveredItem,
+  onMapSelect,
+  onBoundsChange,
+  searchWithMap
+})
+
 await init()
 
 useHead(() => ({