From d8befc8b9fa99436afc5fbdd3af65e558268bc64 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Mon, 19 Jan 2026 13:01:57 +0700
Subject: [PATCH] Add hoveredId to all catalog pages for map point highlighting

When hovering over a card on the left, the corresponding point
on the map now shows a blue highlight.
---
 app/pages/catalog/hubs/[id]/index.vue                        | 3 +++
 app/pages/catalog/hubs/index.vue                             | 5 +++++
 app/pages/catalog/offers/[productId]/index.vue               | 3 +++
 app/pages/catalog/offers/index.vue                           | 5 +++++
 .../catalog/suppliers/[supplierId]/[productId]/index.vue     | 3 +++
 app/pages/catalog/suppliers/[supplierId]/index.vue           | 3 +++
 app/pages/catalog/suppliers/index.vue                        | 5 +++++
 7 files changed, 27 insertions(+)

diff --git a/app/pages/catalog/hubs/[id]/index.vue b/app/pages/catalog/hubs/[id]/index.vue
index 841b8d3..27e58ca 100644
--- a/app/pages/catalog/hubs/[id]/index.vue
+++ b/app/pages/catalog/hubs/[id]/index.vue
@@ -7,6 +7,8 @@
     with-map
     map-id="hub-products-map"
     point-color="#10b981"
+    :hovered-id="hoveredId"
+    @update:hovered-id="hoveredId = $event"
   >
     <template #searchBar="{ displayedCount, totalCount }">
       <CatalogSearchBar
@@ -52,6 +54,7 @@ const localePath = useLocalePath()
 const { t } = useI18n()
 
 const isLoading = ref(true)
+const hoveredId = ref<string>()
 const hub = ref<any>(null)
 const products = ref<Array<{ uuid: string; name: string }>>([])
 
diff --git a/app/pages/catalog/hubs/index.vue b/app/pages/catalog/hubs/index.vue
index 5a6b93d..58ef641 100644
--- a/app/pages/catalog/hubs/index.vue
+++ b/app/pages/catalog/hubs/index.vue
@@ -8,7 +8,9 @@
     map-id="hubs-map"
     point-color="#10b981"
     :total-count="total"
+    :hovered-id="hoveredId"
     @select="onSelectHub"
+    @update:hovered-id="hoveredId = $event"
   >
     <template #searchBar="{ displayedCount, totalCount }">
       <CatalogSearchBar
@@ -102,6 +104,9 @@ const {
   init
 } = useCatalogHubs()
 
+// Hover state
+const hoveredId = ref<string>()
+
 // Search bar
 const searchQuery = ref('')
 
diff --git a/app/pages/catalog/offers/[productId]/index.vue b/app/pages/catalog/offers/[productId]/index.vue
index 8e13daf..905c16d 100644
--- a/app/pages/catalog/offers/[productId]/index.vue
+++ b/app/pages/catalog/offers/[productId]/index.vue
@@ -8,7 +8,9 @@
     cluster-node-type="logistics"
     map-id="offers-product-hubs-map"
     point-color="#10b981"
+    :hovered-id="hoveredId"
     @select="onSelectHub"
+    @update:hovered-id="hoveredId = $event"
   >
     <template #searchBar="{ displayedCount, totalCount }">
       <CatalogSearchBar
@@ -53,6 +55,7 @@ const localePath = useLocalePath()
 const { t } = useI18n()
 
 const isLoading = ref(true)
+const hoveredId = ref<string>()
 const product = ref<{ uuid: string; name: string } | null>(null)
 const hubs = ref<Array<{ uuid: string; name: string; latitude?: number; longitude?: number; country?: string; countryCode?: string }>>([])
 
diff --git a/app/pages/catalog/offers/index.vue b/app/pages/catalog/offers/index.vue
index 3fd40cb..95c465c 100644
--- a/app/pages/catalog/offers/index.vue
+++ b/app/pages/catalog/offers/index.vue
@@ -8,6 +8,8 @@
     cluster-node-type="offer"
     map-id="offers-products-map"
     point-color="#22c55e"
+    :hovered-id="hoveredId"
+    @update:hovered-id="hoveredId = $event"
   >
     <template #searchBar>
       <CatalogSearchBar
@@ -44,6 +46,9 @@ const { t } = useI18n()
 
 const { items: products, isLoading, init } = useCatalogProducts()
 
+// Hover state
+const hoveredId = ref<string>()
+
 // Search
 const searchQuery = ref('')
 
diff --git a/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue b/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue
index c923a96..fa15654 100644
--- a/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue
+++ b/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue
@@ -6,7 +6,9 @@
     with-map
     map-id="supplier-product-hubs-map"
     point-color="#10b981"
+    :hovered-id="hoveredId"
     @select="onSelectHub"
+    @update:hovered-id="hoveredId = $event"
   >
     <template #searchBar="{ displayedCount, totalCount }">
       <CatalogSearchBar
@@ -68,6 +70,7 @@ const localePath = useLocalePath()
 const { t } = useI18n()
 
 const isLoading = ref(true)
+const hoveredId = ref<string>()
 const supplier = ref<any>(null)
 const product = ref<{ uuid: string; name: string } | null>(null)
 const sourceLocation = ref<{ uuid: string; name: string } | null>(null)
diff --git a/app/pages/catalog/suppliers/[supplierId]/index.vue b/app/pages/catalog/suppliers/[supplierId]/index.vue
index a7a53da..d9d2a26 100644
--- a/app/pages/catalog/suppliers/[supplierId]/index.vue
+++ b/app/pages/catalog/suppliers/[supplierId]/index.vue
@@ -7,6 +7,8 @@
     with-map
     map-id="supplier-products-map"
     point-color="#3b82f6"
+    :hovered-id="hoveredId"
+    @update:hovered-id="hoveredId = $event"
   >
     <template #searchBar="{ displayedCount, totalCount }">
       <CatalogSearchBar
@@ -57,6 +59,7 @@ const localePath = useLocalePath()
 const { t } = useI18n()
 
 const isLoading = ref(true)
+const hoveredId = ref<string>()
 const supplier = ref<any>(null)
 const offers = ref<any[]>([])
 
diff --git a/app/pages/catalog/suppliers/index.vue b/app/pages/catalog/suppliers/index.vue
index 8034296..d2c9cd8 100644
--- a/app/pages/catalog/suppliers/index.vue
+++ b/app/pages/catalog/suppliers/index.vue
@@ -7,7 +7,9 @@
     map-id="suppliers-map"
     point-color="#3b82f6"
     :total-count="total"
+    :hovered-id="hoveredId"
     @select="onSelectSupplier"
+    @update:hovered-id="hoveredId = $event"
   >
     <template #searchBar="{ displayedCount, totalCount }">
       <CatalogSearchBar
@@ -66,6 +68,9 @@ const {
   init
 } = useCatalogSuppliers()
 
+// Hover state
+const hoveredId = ref<string>()
+
 // Search bar
 const searchQuery = ref('')