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