Fix navigation layout and search behavior

- Reorder topnav components: search bar before submenu
- GlobalSearchBar: use page navigation instead of dropdowns
- Remove icons from MainNavigation and SubNavigation
- Create ListMapLayout universal component for list+map pages
- Migrate catalog pages (offers, suppliers, hubs) to ListMapLayout

app/components/layout/ListMapLayout.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="flex flex-col flex-1 min-h-0">
+    <!-- Desktop: side-by-side layout -->
+    <div class="hidden lg:flex flex-1 gap-4 min-h-0">
+      <!-- Left side: List (scrollable) -->
+      <div class="w-2/5 overflow-y-auto pr-2">
+        <slot name="list" />
+      </div>
+
+      <!-- Right side: Map (sticky) -->
+      <div class="w-3/5 rounded-lg overflow-hidden">
+        <ClientOnly>
+          <CatalogMap
+            ref="mapRef"
+            :map-id="mapId"
+            :items="itemsWithCoords"
+            :point-color="pointColor"
+            @select-item="onMapSelectItem"
+          />
+        </ClientOnly>
+      </div>
+    </div>
+
+    <!-- Mobile: toggle between list and map -->
+    <div class="lg:hidden flex-1 flex flex-col min-h-0">
+      <!-- Content area -->
+      <div class="flex-1 overflow-y-auto" v-show="mobileView === 'list'">
+        <slot name="list" />
+      </div>
+      <div class="flex-1" v-show="mobileView === 'map'">
+        <ClientOnly>
+          <CatalogMap
+            ref="mobileMapRef"
+            :map-id="`${mapId}-mobile`"
+            :items="itemsWithCoords"
+            :point-color="pointColor"
+            @select-item="onMapSelectItem"
+          />
+        </ClientOnly>
+      </div>
+
+      <!-- Mobile toggle buttons -->
+      <div class="fixed bottom-4 left-1/2 -translate-x-1/2 z-30">
+        <div class="btn-group shadow-lg">
+          <button
+            class="btn btn-sm"
+            :class="{ 'btn-active': mobileView === 'list' }"
+            @click="mobileView = 'list'"
+          >
+            {{ $t('common.list') }}
+          </button>
+          <button
+            class="btn btn-sm"
+            :class="{ 'btn-active': mobileView === 'map' }"
+            @click="mobileView = 'map'"
+          >
+            {{ $t('common.map') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface MapItem {
+  uuid: string
+  latitude?: number | null
+  longitude?: number | null
+  name?: string
+  country?: string
+  [key: string]: any
+}
+
+const props = withDefaults(defineProps<{
+  items: MapItem[]
+  selectedItemId?: string
+  mapId: string
+  pointColor?: string
+}>(), {
+  pointColor: '#3b82f6'
+})
+
+const emit = defineEmits<{
+  'select-item': [uuid: string]
+  'update:selectedItemId': [uuid: string]
+}>()
+
+// Filter items with valid coordinates
+const itemsWithCoords = computed(() =>
+  props.items.filter(item =>
+    item.latitude != null &&
+    item.longitude != null &&
+    !isNaN(Number(item.latitude)) &&
+    !isNaN(Number(item.longitude))
+  ).map(item => ({
+    uuid: item.uuid,
+    name: item.name || '',
+    latitude: Number(item.latitude),
+    longitude: Number(item.longitude),
+    country: item.country
+  }))
+)
+
+// Mobile view toggle
+const mobileView = ref<'list' | 'map'>('list')
+
+// Map refs
+const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
+const mobileMapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
+
+// Handle map item selection
+const onMapSelectItem = (uuid: string) => {
+  emit('select-item', uuid)
+  emit('update:selectedItemId', uuid)
+}
+
+// Fly to a specific item
+const flyTo = (lat: number, lng: number, zoom = 8) => {
+  mapRef.value?.flyTo(lat, lng, zoom)
+  mobileMapRef.value?.flyTo(lat, lng, zoom)
+}
+
+// Fly to item by uuid
+const flyToItem = (uuid: string) => {
+  const item = itemsWithCoords.value.find(i => i.uuid === uuid)
+  if (item) {
+    flyTo(item.latitude, item.longitude, 8)
+  }
+}
+
+// Watch selectedItemId and fly to it
+watch(() => props.selectedItemId, (uuid) => {
+  if (uuid) {
+    flyToItem(uuid)
+  }
+})
+
+// Expose methods for parent components
+defineExpose({ flyTo, flyToItem })
+</script>

app/components/navigation/MainNavigation.vue

@@ -17,7 +17,6 @@
           class="px-4 py-2 rounded-full font-medium text-sm transition-colors hover:bg-base-200"
           :class="{ 'bg-base-200 text-primary': isActiveTab(tab.key) }"
         >
-          <Icon v-if="tab.icon" :name="tab.icon" size="18" class="mr-1" />
           {{ tab.label }}
         </NuxtLink>
       </nav>
@@ -137,11 +136,10 @@
         v-for="tab in visibleTabs"
         :key="tab.key"
         :to="localePath(tab.path)"
-        class="flex flex-col items-center gap-1 px-4 py-2 rounded-lg hover:bg-base-200"
+        class="px-4 py-2 rounded-full text-sm font-medium hover:bg-base-200"
         :class="{ 'bg-base-200 text-primary': isActiveTab(tab.key) }"
       >
-        <Icon v-if="tab.icon" :name="tab.icon" size="16" />
-        <span class="text-xs">{{ tab.label }}</span>
+        {{ tab.label }}
       </NuxtLink>
     </nav>
   </header>
@@ -173,9 +171,9 @@ const route = useRoute()
 const { t } = useI18n()
 
 const tabs = computed(() => [
-  { key: 'catalog', label: t('cabinetNav.catalog'), path: '/catalog/offers', icon: 'lucide:search', auth: false },
-  { key: 'orders', label: t('cabinetNav.orders'), path: '/clientarea/orders', icon: 'lucide:package', auth: true },
-  { key: 'seller', label: t('cabinetNav.seller'), path: '/clientarea/offers', icon: 'lucide:store', auth: true, seller: true },
+  { key: 'catalog', label: t('cabinetNav.catalog'), path: '/catalog/offers', auth: false },
+  { key: 'orders', label: t('cabinetNav.orders'), path: '/clientarea/orders', auth: true },
+  { key: 'seller', label: t('cabinetNav.seller'), path: '/clientarea/offers', auth: true, seller: true },
 ])
 
 const visibleTabs = computed(() => {

app/components/navigation/SubNavigation.vue

@@ -8,7 +8,6 @@
         class="px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap text-base-content/70 hover:text-base-content hover:bg-base-200"
         :class="{ 'text-primary bg-primary/10': isActive(item.path) }"
       >
-        <Icon v-if="item.icon" :name="item.icon" size="16" class="mr-1.5" />
         {{ item.label }}
       </NuxtLink>
     </div>
@@ -26,21 +25,21 @@ const { t } = useI18n()
 
 const sectionItems = computed(() => ({
   catalog: [
-    { label: t('cabinetNav.offers'), path: '/catalog/offers', icon: 'lucide:tag' },
-    { label: t('cabinetNav.suppliers'), path: '/catalog/suppliers', icon: 'lucide:users' },
-    { label: t('cabinetNav.hubs'), path: '/catalog/hubs', icon: 'lucide:warehouse' },
+    { label: t('cabinetNav.offers'), path: '/catalog/offers' },
+    { label: t('cabinetNav.suppliers'), path: '/catalog/suppliers' },
+    { label: t('cabinetNav.hubs'), path: '/catalog/hubs' },
   ],
   orders: [
-    { label: t('cabinetNav.orders'), path: '/clientarea/orders', icon: 'lucide:package' },
-    { label: t('cabinetNav.addresses'), path: '/clientarea/addresses', icon: 'lucide:map-pin' },
-    { label: t('cabinetNav.billing'), path: '/clientarea/billing', icon: 'lucide:credit-card' },
+    { label: t('cabinetNav.orders'), path: '/clientarea/orders' },
+    { label: t('cabinetNav.addresses'), path: '/clientarea/addresses' },
+    { label: t('cabinetNav.billing'), path: '/clientarea/billing' },
   ],
   seller: [
-    { label: t('cabinetNav.myOffers'), path: '/clientarea/offers', icon: 'lucide:tag' },
+    { label: t('cabinetNav.myOffers'), path: '/clientarea/offers' },
   ],
   settings: [
-    { label: t('cabinetNav.profile'), path: '/clientarea/profile', icon: 'lucide:user' },
-    { label: t('cabinetNav.team'), path: '/clientarea/team', icon: 'lucide:users' },
+    { label: t('cabinetNav.profile'), path: '/clientarea/profile' },
+    { label: t('cabinetNav.team'), path: '/clientarea/team' },
   ],
 }))
 

app/components/search/GlobalSearchBar.vue

@@ -5,35 +5,20 @@
         @submit.prevent="handleSearch"
         class="flex items-center bg-base-100 rounded-full border border-base-300 shadow-sm hover:shadow-md transition-shadow"
       >
-        <!-- Product field -->
-        <div class="flex flex-col px-4 py-2 min-w-32 pl-6 rounded-l-full hover:bg-base-200/50 border-r border-base-300">
+        <!-- Product field (clickable, navigates to /goods) -->
+        <div
+          class="flex flex-col px-4 py-2 min-w-32 pl-6 rounded-l-full hover:bg-base-200/50 border-r border-base-300 cursor-pointer"
+          @click="goToProductSelection"
+        >
           <label class="text-xs font-semibold text-base-content/60 mb-0.5">
             {{ $t('search.product') }}
           </label>
-          <div class="dropdown w-full">
-            <input
-              v-model="productQuery"
-              type="text"
-              :placeholder="$t('search.product_placeholder')"
-              class="w-full bg-transparent outline-none text-sm"
-              @focus="showProductDropdown = true"
-              @input="filterProducts"
-            />
-            <ul
-              v-if="showProductDropdown && filteredProducts.length > 0"
-              class="dropdown-content menu bg-base-100 rounded-box z-50 w-64 max-h-60 overflow-auto p-2 shadow-lg border border-base-300 mt-2"
-            >
-              <li v-for="product in filteredProducts" :key="product.uuid">
-                <a @click="selectProduct(product)">
-                  {{ product.name }}
-                  <span class="text-xs text-base-content/50">{{ product.categoryName }}</span>
-                </a>
-              </li>
-            </ul>
+          <div class="text-sm" :class="productDisplay ? 'text-base-content' : 'text-base-content/50'">
+            {{ productDisplay || $t('search.product_placeholder') }}
           </div>
         </div>
 
-        <!-- Quantity field -->
+        <!-- Quantity field (editable) -->
         <div class="flex flex-col px-4 py-2 min-w-32 hover:bg-base-200/50 border-r border-base-300">
           <label class="text-xs font-semibold text-base-content/60 mb-0.5">
             {{ $t('search.quantity') }}
@@ -45,39 +30,25 @@
               min="1"
               :placeholder="$t('search.quantity_placeholder')"
               class="w-16 bg-transparent outline-none text-sm"
+              @change="syncQuantityToStore"
             />
-            <select v-model="unit" class="bg-transparent outline-none text-sm text-base-content/70">
+            <select v-model="unit" class="bg-transparent outline-none text-sm text-base-content/70" @change="syncQuantityToStore">
               <option value="t">{{ $t('units.t') }}</option>
               <option value="kg">{{ $t('units.kg') }}</option>
             </select>
           </div>
         </div>
 
-        <!-- Destination field -->
-        <div class="flex flex-col px-4 py-2 min-w-32 hover:bg-base-200/50">
+        <!-- Destination field (clickable, navigates to /select-location) -->
+        <div
+          class="flex flex-col px-4 py-2 min-w-32 hover:bg-base-200/50 cursor-pointer"
+          @click="goToLocationSelection"
+        >
           <label class="text-xs font-semibold text-base-content/60 mb-0.5">
             {{ $t('search.destination') }}
           </label>
-          <div class="dropdown w-full">
-            <input
-              v-model="destinationQuery"
-              type="text"
-              :placeholder="$t('search.destination_placeholder')"
-              class="w-full bg-transparent outline-none text-sm"
-              @focus="showDestinationDropdown = true"
-              @input="searchDestinations"
-            />
-            <ul
-              v-if="showDestinationDropdown && filteredDestinations.length > 0"
-              class="dropdown-content menu bg-base-100 rounded-box z-50 w-64 max-h-60 overflow-auto p-2 shadow-lg border border-base-300 mt-2"
-            >
-              <li v-for="dest in filteredDestinations" :key="dest.uuid">
-                <a @click="selectDestination(dest)">
-                  {{ dest.name }}
-                  <span class="text-xs text-base-content/50">{{ dest.country }}</span>
-                </a>
-              </li>
-            </ul>
+          <div class="text-sm" :class="locationDisplay ? 'text-base-content' : 'text-base-content/50'">
+            {{ locationDisplay || $t('search.destination_placeholder') }}
           </div>
         </div>
 
@@ -96,100 +67,64 @@
 
 <script setup lang="ts">
 const emit = defineEmits<{
-  search: [params: { productUuid?: string; quantity?: number; unit?: string; destinationUuid?: string }]
+  search: [params: { productUuid?: string; quantity?: number; unit?: string; locationUuid?: string }]
 }>()
 
 const router = useRouter()
 const localePath = useLocalePath()
 const searchStore = useSearchStore()
-const { execute } = useGraphQL()
 
-// Product search
-const productQuery = ref('')
-const selectedProduct = ref<{ uuid: string; name: string; categoryName?: string } | null>(null)
-const showProductDropdown = ref(false)
-const allProducts = ref<Array<{ uuid: string; name: string; categoryName?: string }>>([])
+// Read from searchStore
+const productDisplay = computed(() => searchStore.searchForm.product || '')
+const productUuid = computed(() => searchStore.searchForm.productUuid || '')
+const locationDisplay = computed(() => searchStore.searchForm.location || '')
+const locationUuid = computed(() => searchStore.searchForm.locationUuid || '')
 
-const filteredProducts = computed(() => {
-  if (!productQuery.value) return allProducts.value.slice(0, 10)
-  const q = productQuery.value.toLowerCase()
-  return allProducts.value.filter(p =>
-    p.name.toLowerCase().includes(q) ||
-    p.categoryName?.toLowerCase().includes(q)
-  ).slice(0, 10)
-})
+// Quantity - local state synced with store
+const quantity = ref<number | undefined>(
+  searchStore.searchForm.quantity ? Number(searchStore.searchForm.quantity) : undefined
+)
+const unit = ref(searchStore.searchForm.unit || 't')
 
-const filterProducts = () => {
-  showProductDropdown.value = true
+const syncQuantityToStore = () => {
+  if (quantity.value) {
+    searchStore.setQuantity(String(quantity.value))
+  }
+  searchStore.setUnit(unit.value)
 }
 
-const selectProduct = (product: typeof selectedProduct.value) => {
-  selectedProduct.value = product
-  productQuery.value = product?.name || ''
-  showProductDropdown.value = false
-  // Sync to searchStore
-  searchStore.setProduct(product?.name || '')
-  searchStore.setProductUuid(product?.uuid || '')
+// Navigation to selection pages
+const goToProductSelection = () => {
+  navigateTo(localePath('/goods'))
 }
 
-// Quantity
-const quantity = ref<number | undefined>()
-const unit = ref('t')
-
-// Destination search (using hubs/nodes)
-const destinationQuery = ref('')
-const selectedDestination = ref<{ uuid: string; name: string; country?: string } | null>(null)
-const showDestinationDropdown = ref(false)
-const allDestinations = ref<Array<{ uuid: string; name: string; country?: string }>>([])
-
-const filteredDestinations = computed(() => {
-  if (!destinationQuery.value) return allDestinations.value.slice(0, 10)
-  const q = destinationQuery.value.toLowerCase()
-  return allDestinations.value.filter(d =>
-    d.name?.toLowerCase().includes(q) ||
-    d.country?.toLowerCase().includes(q)
-  ).slice(0, 10)
-})
-
-const searchDestinations = () => {
-  showDestinationDropdown.value = true
-}
-
-const selectDestination = (dest: typeof selectedDestination.value) => {
-  selectedDestination.value = dest
-  destinationQuery.value = dest?.name || ''
-  showDestinationDropdown.value = false
-  // Sync to searchStore
-  searchStore.setLocation(dest?.name || '')
-  searchStore.setLocationUuid(dest?.uuid || '')
+const goToLocationSelection = () => {
+  navigateTo(localePath('/select-location'))
 }
 
 // Can search - need at least product selected
 const canSearch = computed(() => {
-  return !!selectedProduct.value
+  return !!productUuid.value
 })
 
-// Search handler - navigate to /request like the old search form
+// Search handler - navigate to /request
 const handleSearch = () => {
   if (!canSearch.value) return
 
   // Sync quantity to store
-  if (quantity.value) {
-    searchStore.setQuantity(String(quantity.value))
-    searchStore.setUnit(unit.value)
-  }
+  syncQuantityToStore()
 
   const query: Record<string, string | undefined> = {
-    productUuid: selectedProduct.value?.uuid,
-    product: selectedProduct.value?.name,
+    productUuid: productUuid.value || undefined,
+    product: productDisplay.value || undefined,
     quantity: quantity.value ? String(quantity.value) : undefined,
-    locationUuid: selectedDestination.value?.uuid,
-    location: selectedDestination.value?.name
+    locationUuid: locationUuid.value || undefined,
+    location: locationDisplay.value || undefined
   }
 
-  // Remove undefined values
+  // Remove undefined/empty values
   Object.keys(query).forEach(key => {
-    if (query[key] === undefined) delete query[key]
+    if (!query[key]) delete query[key]
   })
 
   router.push({
@@ -198,50 +133,23 @@ const handleSearch = () => {
   })
 
   emit('search', {
-    productUuid: selectedProduct.value?.uuid,
+    productUuid: productUuid.value,
     quantity: quantity.value,
     unit: unit.value,
-    destinationUuid: selectedDestination.value?.uuid
+    locationUuid: locationUuid.value
   })
 }
 
-// Load products on mount
-onMounted(async () => {
-  try {
-    const { GetProductsDocument } = await import('~/composables/graphql/public/exchange-generated')
-    const result = await execute(GetProductsDocument, {}, 'public', 'exchange')
-    allProducts.value = result?.getProducts || []
-  } catch (error) {
-    console.error('Failed to load products:', error)
+// Watch store changes to sync quantity
+watch(() => searchStore.searchForm.quantity, (val) => {
+  if (val) {
+    quantity.value = Number(val)
   }
-})
+}, { immediate: true })
 
-// Load destinations (hubs/nodes) on mount
-onMounted(async () => {
-  try {
-    const { GetNodesDocument } = await import('~/composables/graphql/public/geo-generated')
-    const result = await execute(GetNodesDocument, { limit: 100, offset: 0 }, 'public', 'geo')
-    allDestinations.value = (result?.nodes || []).filter((n: any) => n?.uuid && n?.name).map((n: any) => ({
-      uuid: n.uuid,
-      name: n.name,
-      country: n.country
-    }))
-  } catch (error) {
-    console.error('Failed to load destinations:', error)
+watch(() => searchStore.searchForm.unit, (val) => {
+  if (val) {
+    unit.value = val
   }
-})
-
-// Close dropdowns on click outside
-onMounted(() => {
-  const handler = (e: MouseEvent) => {
-    const target = e.target as HTMLElement
-    if (!target.closest('.dropdown')) {
-      showProductDropdown.value = false
-      showDestinationDropdown.value = false
-    }
-  }
-  document.addEventListener('click', handler)
-  onUnmounted(() => document.removeEventListener('click', handler))
-})
+}, { immediate: true })
 </script>
-

app/layouts/topnav.vue

@@ -16,12 +16,12 @@
       @switch-team="switchToTeam"
     />
 
-    <!-- Sub Navigation (section-specific tabs) -->
-    <SubNavigation :section="currentSection" />
-
     <!-- Global Search Bar -->
     <GlobalSearchBar v-if="showSearch" class="border-b border-base-300" />
 
+    <!-- Sub Navigation (section-specific tabs) -->
+    <SubNavigation :section="currentSection" />
+
     <!-- Page content -->
     <main class="flex-1 flex flex-col min-h-0 px-3 lg:px-6">
       <slot />

app/pages/catalog/hubs/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col h-[calc(100vh-200px)]">
+  <div class="flex flex-col flex-1 min-h-0">
     <!-- Header -->
     <div class="py-4">
       <PageHeader :title="t('catalogHubsSection.header.title')" />
@@ -15,10 +15,17 @@
       </Card>
     </div>
 
-    <!-- Split Layout -->
-    <div v-else class="flex-1 flex gap-4 min-h-0">
-      <!-- Left side: Filters + Cards (scrollable) -->
-      <div class="w-full lg:w-2/5 overflow-y-auto pr-2">
+    <!-- ListMapLayout -->
+    <ListMapLayout
+      v-else
+      ref="listMapRef"
+      :items="items"
+      :selected-item-id="selectedHubId"
+      map-id="hubs-map"
+      point-color="#10b981"
+      @select-item="onSelectHub"
+    >
+      <template #list>
         <Stack gap="4">
           <CatalogFilters :filters="filters" v-model="selectedFilter" />
 
@@ -29,6 +36,8 @@
                 v-for="hub in country.hubs"
                 :key="hub.uuid"
                 :hub="hub"
+                :class="{ 'ring-2 ring-primary': hub.uuid === selectedHubId }"
+                @click="onSelectHub(hub.uuid)"
               />
             </Stack>
           </div>
@@ -45,19 +54,8 @@
             <Text tone="muted">{{ t('catalogHubsSection.empty.no_hubs') }}</Text>
           </Stack>
         </Stack>
-      </div>
-
-      <!-- Right side: Map (sticky, hidden on mobile) -->
-      <div class="hidden lg:block lg:w-3/5 rounded-lg overflow-hidden">
-        <ClientOnly>
-          <MapboxGlobe
-            map-id="hubs-map"
-            :locations="itemsWithCoords"
-            class="h-full w-full"
-          />
-        </ClientOnly>
-      </div>
-    </div>
+      </template>
+    </ListMapLayout>
   </div>
 </template>
 
@@ -75,13 +73,20 @@ const {
   filters,
   isLoading,
   isLoadingMore,
-  itemsWithCoords,
   itemsByCountry,
   canLoadMore,
   loadMore,
   init
 } = useCatalogHubs()
 
+// Selected hub for map highlighting
+const selectedHubId = ref<string>()
+const listMapRef = ref<{ flyToItem: (uuid: string) => void } | null>(null)
+
+const onSelectHub = (uuid: string) => {
+  selectedHubId.value = uuid
+}
+
 await init()
 
 useHead(() => ({

app/pages/catalog/offers/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col h-[calc(100vh-200px)]">
+  <div class="flex flex-col flex-1 min-h-0">
     <!-- Header -->
     <div class="py-4">
       <PageHeader :title="pageTitle">
@@ -46,10 +46,17 @@
       </Stack>
     </div>
 
-    <!-- Offers for selected product - Split Layout -->
-    <div v-else class="flex-1 flex gap-4 min-h-0">
-      <!-- Left side: Filters + Cards (scrollable) -->
-      <div class="w-full lg:w-2/5 overflow-y-auto pr-2">
+    <!-- Offers for selected product - ListMapLayout -->
+    <ListMapLayout
+      v-else
+      ref="listMapRef"
+      :items="items"
+      :selected-item-id="selectedOfferId"
+      map-id="offers-map"
+      point-color="#f59e0b"
+      @select-item="onSelectOffer"
+    >
+      <template #list>
         <Stack gap="4">
           <CatalogFilters :filters="filters" v-model="selectedFilter" />
 
@@ -58,6 +65,8 @@
               v-for="offer in items"
               :key="offer.uuid"
               :offer="offer"
+              :class="{ 'ring-2 ring-primary': offer.uuid === selectedOfferId }"
+              @click="onSelectOffer(offer.uuid)"
             />
           </Stack>
 
@@ -73,19 +82,8 @@
             <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
           </Stack>
         </Stack>
-      </div>
-
-      <!-- Right side: Map (sticky, hidden on mobile) -->
-      <div class="hidden lg:block lg:w-3/5 rounded-lg overflow-hidden">
-        <ClientOnly>
-          <MapboxGlobe
-            map-id="offers-map"
-            :locations="itemsWithCoords"
-            class="h-full w-full"
-          />
-        </ClientOnly>
-      </div>
-    </div>
+      </template>
+    </ListMapLayout>
   </div>
 </template>
 
@@ -114,7 +112,6 @@ const {
   filters,
   isLoading,
   isLoadingMore,
-  itemsWithCoords,
   canLoadMore,
   loadMore,
   init: initOffers,
@@ -144,6 +141,15 @@ const selectProduct = (product: any) => {
   })
 }
 
+// Selected offer for map highlighting
+const selectedOfferId = ref<string>()
+const listMapRef = ref<{ flyToItem: (uuid: string) => void } | null>(null)
+
+const onSelectOffer = (uuid: string) => {
+  selectedOfferId.value = uuid
+  // flyToItem will be triggered by ListMapLayout watch
+}
+
 // Initialize
 await initProducts()
 

app/pages/catalog/suppliers/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col h-[calc(100vh-200px)]">
+  <div class="flex flex-col flex-1 min-h-0">
     <!-- Header -->
     <div class="py-4">
       <PageHeader :title="t('catalogSuppliersSection.header.title')" />
@@ -15,10 +15,17 @@
       </Card>
     </div>
 
-    <!-- Split Layout -->
-    <div v-else class="flex-1 flex gap-4 min-h-0">
-      <!-- Left side: Filters + Cards (scrollable) -->
-      <div class="w-full lg:w-2/5 overflow-y-auto pr-2">
+    <!-- ListMapLayout -->
+    <ListMapLayout
+      v-else
+      ref="listMapRef"
+      :items="items"
+      :selected-item-id="selectedSupplierId"
+      map-id="suppliers-map"
+      point-color="#3b82f6"
+      @select-item="onSelectSupplier"
+    >
+      <template #list>
         <Stack gap="4">
           <CatalogFilters :filters="filters" v-model="selectedFilter" />
 
@@ -27,6 +34,8 @@
               v-for="supplier in items"
               :key="supplier.uuid || supplier.teamUuid"
               :supplier="supplier"
+              :class="{ 'ring-2 ring-primary': (supplier.uuid || supplier.teamUuid) === selectedSupplierId }"
+              @click="onSelectSupplier(supplier.uuid || supplier.teamUuid)"
             />
           </Stack>
 
@@ -42,19 +51,8 @@
             <Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
           </Stack>
         </Stack>
-      </div>
-
-      <!-- Right side: Map (sticky, hidden on mobile) -->
-      <div class="hidden lg:block lg:w-3/5 rounded-lg overflow-hidden">
-        <ClientOnly>
-          <MapboxGlobe
-            map-id="suppliers-map"
-            :locations="itemsWithCoords"
-            class="h-full w-full"
-          />
-        </ClientOnly>
-      </div>
-    </div>
+      </template>
+    </ListMapLayout>
   </div>
 </template>
 
@@ -72,12 +70,19 @@ const {
   filters,
   isLoading,
   isLoadingMore,
-  itemsWithCoords,
   canLoadMore,
   loadMore,
   init
 } = useCatalogSuppliers()
 
+// Selected supplier for map highlighting
+const selectedSupplierId = ref<string>()
+const listMapRef = ref<{ flyToItem: (uuid: string) => void } | null>(null)
+
+const onSelectSupplier = (uuid: string) => {
+  selectedSupplierId.value = uuid
+}
+
 await init()
 
 useHead(() => ({