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

@@ -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 }>>([])
 

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('')
 

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 }>>([])
 

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('')
 

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)

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[]>([])
 

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('')