feat(catalog): filter map clusters by chips

app/pages/catalog/index.vue

@@ -17,6 +17,12 @@
       :info-loading="mapInfoLoading"
       :force-info-mode="forceInfoMode"
       :hide-view-toggle="hideViewToggle"
+      :show-offers-toggle="showOffersToggle"
+      :show-hubs-toggle="showHubsToggle"
+      :show-suppliers-toggle="showSuppliersToggle"
+      :cluster-product-uuid="clusterProductUuid"
+      :cluster-hub-uuid="clusterHubUuid"
+      :cluster-supplier-uuid="clusterSupplierUuid"
       @select="onMapSelect"
       @bounds-change="onBoundsChange"
       @update:filter-by-bounds="$event ? setBoundsInUrl(currentMapBounds) : clearBoundsFromUrl()"
@@ -34,7 +40,6 @@
           :loading-more="selectionLoadingMore"
           :has-more="selectionHasMore && !filterByBounds"
           @select="onSelectItem"
-          @pin="onPinItem"
           @close="onClosePanel"
           @load-more="onLoadMore"
           @hover="onHoverItem"
@@ -57,8 +62,6 @@
           :loading-suppliers="isLoadingSuppliers"
           :loading-offers="isLoadingOffers"
           @close="onInfoClose"
-          @add-to-filter="onInfoAddToFilter"
-          @pin="onPinItem"
           @open-info="onInfoOpenRelated"
           @select-product="onInfoSelectProduct"
           @select-offer="onSelectOffer"
@@ -312,6 +315,16 @@ watch(productId, (newProductId) => {
   setSupplierProductFilter(newProductId || null)
 }, { immediate: true })
 
+// If a filter locks a view type, switch away from that view
+watch([hubId, supplierId], ([newHubId, newSupplierId]) => {
+  if (newHubId && mapViewMode.value === 'hubs') {
+    setMapViewMode('offers')
+  }
+  if (newSupplierId && mapViewMode.value === 'suppliers') {
+    setMapViewMode('offers')
+  }
+}, { immediate: true })
+
 // Apply bounds filter when "filter by map bounds" is enabled
 // Only watch URL bounds - currentMapBounds changes too often (every map move)
 watch([filterByBounds, urlBounds], ([enabled, urlB]) => {
@@ -474,6 +487,14 @@ const mapInfoLoading = computed(() =>
 const forceInfoMode = computed(() => showQuoteResults.value)
 const hideViewToggle = computed(() => showQuoteResults.value)
 
+const showOffersToggle = computed(() => true)
+const showHubsToggle = computed(() => !hubId.value)
+const showSuppliersToggle = computed(() => !supplierId.value)
+
+const clusterProductUuid = computed(() => productId.value || undefined)
+const clusterHubUuid = computed(() => hubId.value || undefined)
+const clusterSupplierUuid = computed(() => supplierId.value || undefined)
+
 // Show panel when selecting OR when showing info OR when showing quote results
 const showPanel = computed(() => {
   return selectMode.value !== null || infoId.value !== null || showQuoteResults.value
@@ -564,12 +585,6 @@ const onSelectItem = (type: string, item: { uuid?: string | null; name?: string
   }
 }
 
-const onPinItem = (type: string, item: { uuid?: string | null; name?: string | null }) => {
-  if (item.uuid && item.name) {
-    selectItem(type, item.uuid, item.name)
-  }
-}
-
 // Close panel (cancel select mode)
 const onClosePanel = () => {
   cancelSelect()
@@ -581,30 +596,6 @@ const onInfoClose = () => {
   clearInfo()
 }
 
-const onInfoAddToFilter = () => {
-  if (!infoId.value || !entity.value) return
-  const { type, uuid } = infoId.value
-
-  // For offers, add the product AND hub to filter
-  if (type === 'offer') {
-    if (entity.value.productUuid) {
-      const productName = entity.value.productName || entity.value.name || uuid.slice(0, 8) + '...'
-      selectItem('product', entity.value.productUuid, productName)
-    }
-    // Also add hub (location) to filter if available
-    if (entity.value.locationUuid) {
-      const hubName = entity.value.locationName || entity.value.locationUuid.slice(0, 8) + '...'
-      selectItem('hub', entity.value.locationUuid, hubName)
-    }
-  } else {
-    // For hubs and suppliers, add directly
-    const name = entity.value.name || uuid.slice(0, 8) + '...'
-    selectItem(type, uuid, name)
-  }
-
-  closeInfo()
-  clearInfo()
-}
 
 const onInfoOpenRelated = (type: 'hub' | 'supplier' | 'offer', uuid: string) => {
   openInfo(type, uuid)