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

@@ -1,81 +1,92 @@
 <template>
-  <CatalogPage
-    :items="listItems"
-    :map-items="mapPoints"
-    :loading="isLoading"
-    map-id="orders-map"
-    point-color="#6366f1"
-    :selected-id="selectedOrderId"
-    v-model:hovered-id="hoveredOrderId"
-    :has-sub-nav="false"
-    @select="onSelectOrder"
-  >
-    <template #filters>
-      <CatalogFilterSelect :filters="filters" v-model="selectedFilter" />
-    </template>
-
-    <template #card="{ item }">
-      <Card padding="lg" class="cursor-pointer">
-        <Stack gap="4">
-          <Stack direction="row" justify="between" align="center">
-            <Stack gap="1">
-              <Text size="sm" tone="muted">{{ t('ordersList.card.order_label') }}</Text>
-              <Heading :level="3">#{{ item.name }}</Heading>
-            </Stack>
-            <div class="badge badge-outline">
-              {{ getOrderStartDate(item) }} → {{ getOrderEndDate(item) }}
-            </div>
-          </Stack>
-
-          <div class="divider my-0"></div>
-
-          <Grid :cols="1" :md="3" :gap="3">
-            <Stack gap="1">
-              <Text size="sm" tone="muted">{{ t('ordersList.card.route') }}</Text>
-              <Text weight="semibold">{{ item.sourceLocationName }} → {{ item.destinationLocationName }}</Text>
-            </Stack>
-
-            <Stack gap="1">
-              <Text size="sm" tone="muted">{{ t('ordersList.card.product') }}</Text>
-              <Text>
-                {{ item.orderLines?.[0]?.productName || t('ordersList.card.product_loading') }}
-                <template v-if="item.orderLines?.length > 1">
-                  <span class="badge badge-ghost ml-2">+{{ item.orderLines.length - 1 }}</span>
-                </template>
-              </Text>
-              <Text tone="muted" size="sm">
-                {{ item.orderLines?.[0]?.quantity || 0 }} {{ item.orderLines?.[0]?.unit || t('ordersList.card.unit_tons') }}
-              </Text>
-            </Stack>
-
-            <Stack gap="1">
-              <Text size="sm" tone="muted">{{ t('ordersList.card.status') }}</Text>
-              <Badge :variant="getStatusVariant(item.status)">
-                {{ getStatusText(item.status) }}
-              </Badge>
-              <Text tone="muted" size="sm">{{ t('ordersList.card.stages_completed', { done: getCompletedStages(item), total: item.stages?.length || 0 }) }}</Text>
-            </Stack>
-          </Grid>
+  <div>
+    <!-- List content -->
+    <div v-if="isLoading" class="flex items-center justify-center py-8">
+      <Card padding="lg">
+        <Stack align="center" justify="center" gap="3">
+          <Spinner />
+          <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
         </Stack>
       </Card>
-    </template>
+    </div>
 
-    <template #empty>
-      <EmptyState
-        icon="📦"
-        :title="$t('orders.no_orders')"
-        :description="$t('orders.no_orders_desc')"
-        :action-label="$t('orders.create_new')"
-        :action-to="localePath('/clientarea')"
-        action-icon="lucide:plus"
-      />
+    <template v-else>
+      <Stack gap="3">
+        <div
+          v-for="item in displayItems"
+          :key="item.uuid"
+          :class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedOrderId }"
+          @click="onSelectOrder(item)"
+          @mouseenter="hoveredOrderId = item.uuid"
+          @mouseleave="hoveredOrderId = undefined"
+        >
+          <Card padding="lg" class="cursor-pointer">
+            <Stack gap="4">
+              <Stack direction="row" justify="between" align="center">
+                <Stack gap="1">
+                  <Text size="sm" tone="muted">{{ t('ordersList.card.order_label') }}</Text>
+                  <Heading :level="3">#{{ item.name }}</Heading>
+                </Stack>
+                <div class="badge badge-outline">
+                  {{ getOrderStartDate(item) }} → {{ getOrderEndDate(item) }}
+                </div>
+              </Stack>
+
+              <div class="divider my-0"></div>
+
+              <Grid :cols="1" :md="3" :gap="3">
+                <Stack gap="1">
+                  <Text size="sm" tone="muted">{{ t('ordersList.card.route') }}</Text>
+                  <Text weight="semibold">{{ item.sourceLocationName }} → {{ item.destinationLocationName }}</Text>
+                </Stack>
+
+                <Stack gap="1">
+                  <Text size="sm" tone="muted">{{ t('ordersList.card.product') }}</Text>
+                  <Text>
+                    {{ item.orderLines?.[0]?.productName || t('ordersList.card.product_loading') }}
+                    <template v-if="item.orderLines?.length > 1">
+                      <span class="badge badge-ghost ml-2">+{{ item.orderLines.length - 1 }}</span>
+                    </template>
+                  </Text>
+                  <Text tone="muted" size="sm">
+                    {{ item.orderLines?.[0]?.quantity || 0 }} {{ item.orderLines?.[0]?.unit || t('ordersList.card.unit_tons') }}
+                  </Text>
+                </Stack>
+
+                <Stack gap="1">
+                  <Text size="sm" tone="muted">{{ t('ordersList.card.status') }}</Text>
+                  <Badge :variant="getStatusVariant(item.status)">
+                    {{ getStatusText(item.status) }}
+                  </Badge>
+                  <Text tone="muted" size="sm">{{ t('ordersList.card.stages_completed', { done: getCompletedStages(item), total: item.stages?.length || 0 }) }}</Text>
+                </Stack>
+              </Grid>
+            </Stack>
+          </Card>
+        </div>
+      </Stack>
+
+      <Stack v-if="displayItems.length === 0" align="center" gap="2" class="py-8">
+        <EmptyState
+          icon="📦"
+          :title="t('orders.no_orders')"
+          :description="t('orders.no_orders_desc')"
+          :action-label="t('orders.create_new')"
+          :action-to="localePath('/clientarea')"
+          action-icon="lucide:plus"
+        />
+      </Stack>
     </template>
-  </CatalogPage>
+  </div>
 </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: 'topnav',
+  layout: 'catalog',
   middleware: ['auth-oidc']
 })
 
@@ -95,7 +106,18 @@ const {
 const selectedOrderId = ref<string>()
 const hoveredOrderId = ref<string>()
 
-// List items - one per order (for card rendering)
+// Search bar
+const searchQuery = ref('')
+
+// Search with map checkbox
+const searchWithMap = ref(false)
+const currentBounds = ref<MapBounds | null>(null)
+
+const onBoundsChange = (bounds: MapBounds) => {
+  currentBounds.value = bounds
+}
+
+// List items - one per order
 const listItems = computed(() => {
   return filteredItems.value.map(order => ({
     ...order,
@@ -117,9 +139,7 @@ const mapPoints = computed(() => {
         uuid: `${order.uuid}-source`,
         name: `📦 ${order.sourceLocationName}`,
         latitude: order.sourceLatitude,
-        longitude: order.sourceLongitude,
-        country: order.sourceLocationName,
-        orderUuid: order.uuid
+        longitude: order.sourceLongitude
       })
     }
     // Destination point - get from last stage
@@ -129,20 +149,116 @@ const mapPoints = computed(() => {
         uuid: `${order.uuid}-dest`,
         name: `🏁 ${order.destinationLocationName}`,
         latitude: lastStage.destinationLatitude,
-        longitude: lastStage.destinationLongitude,
-        country: order.destinationLocationName,
-        orderUuid: order.uuid
+        longitude: lastStage.destinationLongitude
       })
     }
   })
   return result
 })
 
+// Filtered items when searchWithMap is enabled
+const displayItems = computed(() => {
+  if (!searchWithMap.value || !currentBounds.value) return listItems.value
+  return listItems.value.filter(item => {
+    if (item.latitude == null || item.longitude == null) return false
+    const { west, east, north, south } = currentBounds.value!
+    const lng = Number(item.longitude)
+    const lat = Number(item.latitude)
+    return lng >= west && lng <= east && lat >= south && lat <= north
+  })
+})
+
+// Hovered item with coordinates for map highlight
+const hoveredItem = computed(() => {
+  if (!hoveredOrderId.value) return null
+  const item = listItems.value.find(i => i.uuid === hoveredOrderId.value)
+  if (!item?.latitude || !item?.longitude) return null
+  return { latitude: Number(item.latitude), longitude: Number(item.longitude) }
+})
+
+// Active filter badges
+const activeFilterBadges = computed(() => {
+  const badges: { id: string; label: string }[] = []
+  if (selectedFilter.value && selectedFilter.value !== 'all') {
+    const filter = filters.value.find(f => f.id === selectedFilter.value)
+    if (filter) badges.push({ id: `status:${filter.id}`, label: filter.label })
+  }
+  return badges
+})
+
+// Remove filter badge
+const onRemoveFilter = (id: string) => {
+  if (id.startsWith('status:')) {
+    selectedFilter.value = 'all'
+  }
+}
+
+// Search handler
+const onSearch = () => {
+  // TODO: Implement search
+}
+
 const onSelectOrder = (item: any) => {
   selectedOrderId.value = item.uuid
   navigateTo(localePath(`/clientarea/orders/${item.uuid}`))
 }
 
+// Handle selection from map
+const onMapSelect = (uuid: string) => {
+  // Map points have -source or -dest suffix
+  const orderUuid = uuid.replace(/-source$|-dest$/, '')
+  const order = listItems.value.find(i => i.uuid === orderUuid)
+  if (order) {
+    selectedOrderId.value = orderUuid
+    navigateTo(localePath(`/clientarea/orders/${orderUuid}`))
+  }
+}
+
+// Filter component for the layout
+const OrdersFilterComponent = 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('ordersList.filters.status')),
+        h('ul', { class: 'menu menu-compact' },
+          filters.value.map(filter =>
+            h('li', { key: filter.id },
+              h('a', {
+                class: selectedFilter.value === filter.id ? 'active' : '',
+                onClick: () => { selectedFilter.value = filter.id }
+              }, filter.label)
+            )
+          )
+        )
+      ])
+    ])
+  }
+})
+
+// Provide data to layout
+provideCatalogLayout({
+  // Custom subnav for clientarea
+  subNavItems: [
+    { label: t('cabinetNav.orders'), path: '/clientarea/orders' },
+    { label: t('cabinetNav.addresses'), path: '/clientarea/addresses' },
+  ],
+  searchQuery,
+  activeFilters: activeFilterBadges,
+  displayedCount: computed(() => displayItems.value.length),
+  totalCount: computed(() => filteredItems.value.length),
+  onSearch,
+  onRemoveFilter,
+  filterComponent: OrdersFilterComponent,
+  mapItems: mapPoints,
+  mapId: 'orders-map',
+  pointColor: '#6366f1',
+  hoveredItemId: hoveredOrderId,
+  hoveredItem,
+  onMapSelect,
+  onBoundsChange,
+  searchWithMap
+})
+
 await init()
 
 const getOrderStartDate = (order: any) => {