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