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