From b75459c8bec9719c5b981088cf6369c1656a8373 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Wed, 14 Jan 2026 10:46:04 +0700
Subject: [PATCH] fix: remove separate /map pages, add hover highlight to
 CatalogPage

- Delete hubs/map.vue, offers/map.vue, suppliers/map.vue
- Pass hoveredId to CatalogMap for marker highlighting
- Split view on main pages (like Airbnb) is the correct approach
---
 app/components/page/CatalogPage.vue |   2 +
 app/pages/catalog/hubs/map.vue      |  86 -----------------
 app/pages/catalog/offers/map.vue    | 142 ----------------------------
 app/pages/catalog/suppliers/map.vue |  70 --------------
 4 files changed, 2 insertions(+), 298 deletions(-)
 delete mode 100644 app/pages/catalog/hubs/map.vue
 delete mode 100644 app/pages/catalog/offers/map.vue
 delete mode 100644 app/pages/catalog/suppliers/map.vue

diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 2a7f2bd..df3da0a 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -54,6 +54,7 @@
                   :map-id="mapId"
                   :items="itemsWithCoords"
                   :point-color="pointColor"
+                  :hovered-item-id="hoveredId"
                   @select-item="onMapSelect"
                 />
               </ClientOnly>
@@ -98,6 +99,7 @@
                 :map-id="`${mapId}-mobile`"
                 :items="itemsWithCoords"
                 :point-color="pointColor"
+                :hovered-item-id="hoveredId"
                 @select-item="onMapSelect"
               />
             </ClientOnly>
diff --git a/app/pages/catalog/hubs/map.vue b/app/pages/catalog/hubs/map.vue
deleted file mode 100644
index 174e2c9..0000000
--- a/app/pages/catalog/hubs/map.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-  <NuxtLayout name="map">
-    <template #sidebar>
-      <CatalogMapSidebar
-        :title="t('catalogHubsSection.header.title')"
-        :back-link="localePath('/catalog/hubs')"
-        :back-label="t('catalogMap.actions.list_view')"
-        :items-count="items.length"
-        :filters="filters"
-        :selected-filter="selectedFilter"
-        :loading="isLoading"
-        :empty-text="t('catalogMap.empty.hubs')"
-        @update:selected-filter="selectedFilter = $event"
-      >
-        <template #cards>
-          <HubCard
-            v-for="hub in items"
-            :key="hub.uuid"
-            :hub="hub"
-            selectable
-            :is-selected="selectedItemId === hub.uuid"
-            @select="selectItem(hub)"
-            @hover="(hovered) => onHubHover(hub.uuid, hovered)"
-          />
-        </template>
-      </CatalogMapSidebar>
-    </template>
-
-    <CatalogMap
-      ref="mapRef"
-      map-id="hubs-fullscreen-map"
-      :clustered-points="clusteredNodes"
-      use-server-clustering
-      :hovered-item-id="hoveredItemId"
-      point-color="#10b981"
-      @select-item="onMapSelectItem"
-      @bounds-change="onBoundsChange"
-    />
-  </NuxtLayout>
-</template>
-
-<script setup lang="ts">
-import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
-
-definePageMeta({
-  layout: false
-})
-
-const { t } = useI18n()
-const localePath = useLocalePath()
-
-const {
-  items,
-  selectedFilter,
-  filters,
-  isLoading,
-  init
-} = useCatalogHubs()
-
-await init()
-
-const { clusteredNodes, fetchClusters } = useClusteredNodes()
-
-const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
-const selectedItemId = ref<string | null>(null)
-const hoveredItemId = ref<string | null>(null)
-
-const selectItem = (item: any) => {
-  selectedItemId.value = item.uuid
-  if (item.latitude && item.longitude) {
-    mapRef.value?.flyTo(item.latitude, item.longitude, 8)
-  }
-}
-
-const onMapSelectItem = (uuid: string) => {
-  selectedItemId.value = uuid
-}
-
-const onHubHover = (uuid: string | undefined | null, hovered: boolean) => {
-  hoveredItemId.value = hovered && uuid ? uuid : null
-}
-
-const onBoundsChange = (bounds: MapBounds) => {
-  fetchClusters(bounds)
-}
-</script>
diff --git a/app/pages/catalog/offers/map.vue b/app/pages/catalog/offers/map.vue
deleted file mode 100644
index dc0c3a7..0000000
--- a/app/pages/catalog/offers/map.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-  <NuxtLayout name="map">
-    <template #sidebar>
-      <!-- Product selection mode -->
-      <CatalogMapSidebar
-        v-if="!selectedProductUuid"
-        :title="t('catalogOffersSection.header.select_product')"
-        :back-link="localePath('/catalog/offers')"
-        :back-label="t('catalogMap.actions.list_view')"
-        :items-count="products.length"
-        :loading="productsLoading"
-        :empty-text="t('catalogOffersSection.empty.no_products')"
-      >
-        <template #cards>
-          <Card
-            v-for="product in products"
-            :key="product.uuid"
-            padding="sm"
-            interactive
-            @click="selectProduct(product)"
-          >
-            <Stack gap="2">
-              <Text size="base" weight="semibold">{{ product.name }}</Text>
-              <Text tone="muted">{{ product.categoryName || t('catalogProduct.labels.category_unknown') }}</Text>
-            </Stack>
-          </Card>
-        </template>
-      </CatalogMapSidebar>
-
-      <!-- Offers for selected product -->
-      <CatalogMapSidebar
-        v-else
-        :title="sidebarTitle"
-        :back-link="localePath('/catalog/offers/map')"
-        :back-label="t('common.back')"
-        :items-count="items.length"
-        :filters="filters"
-        :selected-filter="selectedFilter"
-        :loading="isLoading"
-        :empty-text="t('catalogMap.empty.offers')"
-        @update:selected-filter="selectedFilter = $event"
-      >
-        <template #cards>
-          <OfferCard
-            v-for="offer in items"
-            :key="offer.uuid"
-            :offer="offer"
-            selectable
-            :is-selected="selectedItemId === offer.uuid"
-            @select="selectItem(offer)"
-          />
-        </template>
-      </CatalogMapSidebar>
-    </template>
-
-    <CatalogMap
-      ref="mapRef"
-      map-id="offers-fullscreen-map"
-      :items="itemsWithCoords"
-      point-color="#f59e0b"
-      @select-item="onMapSelectItem"
-    />
-  </NuxtLayout>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false
-})
-
-const { t } = useI18n()
-const localePath = useLocalePath()
-const route = useRoute()
-const router = useRouter()
-
-// Products
-const {
-  items: products,
-  isLoading: productsLoading,
-  init: initProducts
-} = useCatalogProducts()
-
-// Offers
-const {
-  items,
-  selectedFilter,
-  filters,
-  isLoading,
-  itemsWithCoords,
-  init: initOffers,
-  setProductUuid
-} = useCatalogOffers()
-
-// Product from query
-const selectedProductUuid = computed(() => route.query.product as string | undefined)
-
-const selectedProduct = computed(() => {
-  if (!selectedProductUuid.value) return null
-  return products.value.find(p => p.uuid === selectedProductUuid.value)
-})
-
-const sidebarTitle = computed(() => {
-  if (selectedProduct.value) {
-    return `${t('catalogOffersSection.header.title')}: ${selectedProduct.value.name}`
-  }
-  return t('catalogOffersSection.header.title')
-})
-
-// Initialize products
-await initProducts()
-
-// Watch for product changes
-watch(selectedProductUuid, async (uuid) => {
-  setProductUuid(uuid || null)
-  if (uuid) {
-    await initOffers()
-  }
-}, { immediate: true })
-
-const selectProduct = (product: any) => {
-  router.push({
-    path: route.path,
-    query: { product: product.uuid }
-  })
-}
-
-const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
-const selectedItemId = ref<string | null>(null)
-
-const selectItem = (item: any) => {
-  selectedItemId.value = item.uuid
-  const lat = item.locationLatitude
-  const lng = item.locationLongitude
-  if (lat && lng) {
-    mapRef.value?.flyTo(lat, lng, 8)
-  }
-}
-
-const onMapSelectItem = (uuid: string) => {
-  selectedItemId.value = uuid
-}
-</script>
diff --git a/app/pages/catalog/suppliers/map.vue b/app/pages/catalog/suppliers/map.vue
deleted file mode 100644
index 0e1f95c..0000000
--- a/app/pages/catalog/suppliers/map.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <NuxtLayout name="map">
-    <template #sidebar>
-      <CatalogMapSidebar
-        :title="t('catalogSuppliersSection.header.title')"
-        :back-link="localePath('/catalog/suppliers')"
-        :back-label="t('catalogMap.actions.list_view')"
-        :items-count="items.length"
-        :filters="filters"
-        :selected-filter="selectedFilter"
-        :loading="isLoading"
-        :empty-text="t('catalogMap.empty.suppliers')"
-        @update:selected-filter="selectedFilter = $event"
-      >
-        <template #cards>
-          <SupplierCard
-            v-for="supplier in items"
-            :key="supplier.uuid"
-            :supplier="supplier"
-            selectable
-            :is-selected="selectedItemId === supplier.uuid"
-            @select="selectItem(supplier)"
-          />
-        </template>
-      </CatalogMapSidebar>
-    </template>
-
-    <CatalogMap
-      ref="mapRef"
-      map-id="suppliers-fullscreen-map"
-      :items="itemsWithCoords"
-      point-color="#3b82f6"
-      @select-item="onMapSelectItem"
-    />
-  </NuxtLayout>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false
-})
-
-const { t } = useI18n()
-const localePath = useLocalePath()
-
-const {
-  items,
-  selectedFilter,
-  filters,
-  isLoading,
-  itemsWithCoords,
-  init
-} = useCatalogSuppliers()
-
-await init()
-
-const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
-const selectedItemId = ref<string | null>(null)
-
-const selectItem = (item: any) => {
-  selectedItemId.value = item.uuid
-  if (item.latitude && item.longitude) {
-    mapRef.value?.flyTo(item.latitude, item.longitude, 8)
-  }
-}
-
-const onMapSelectItem = (uuid: string) => {
-  selectedItemId.value = uuid
-}
-</script>