From 2fc4dfb8346e29507f1efd1b231eb034e02d776d Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Sat, 24 Jan 2026 11:07:31 +0700
Subject: [PATCH] Add Airbnb-style "search as I move" checkbox + hover
 highlight
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move filter checkbox to right side, same line as view toggle
- Add hover events on selection cards to highlight map points
- Update translations: "Искать при перемещении" / "Search as I move the map"
---
 app/components/catalog/SelectionPanel.vue | 67 ++++++++++++-----------
 app/components/page/CatalogPage.vue       | 24 +++++++-
 app/pages/catalog/index.vue               | 22 +++++++-
 i18n/locales/en/catalog.json              |  2 +-
 i18n/locales/ru/catalog.json              |  2 +-
 5 files changed, 77 insertions(+), 40 deletions(-)

diff --git a/app/components/catalog/SelectionPanel.vue b/app/components/catalog/SelectionPanel.vue
index 919c396..756683f 100644
--- a/app/components/catalog/SelectionPanel.vue
+++ b/app/components/catalog/SelectionPanel.vue
@@ -14,17 +14,6 @@
         :placeholder="searchPlaceholder"
         class="input input-sm w-full bg-white/50 border-base-300/50 text-base-content placeholder:text-base-content/50"
       />
-      <!-- Filter by map bounds checkbox -->
-      <label class="flex items-center gap-2 mt-2 text-sm cursor-pointer text-base-content/80 hover:text-base-content">
-        <input
-          type="checkbox"
-          :checked="filterByBounds"
-          class="checkbox checkbox-sm checkbox-primary"
-          @change="emit('update:filter-by-bounds', ($event.target as HTMLInputElement).checked)"
-        />
-        <Icon name="lucide:map" size="14" />
-        <span>{{ $t('catalog.search.filterByMap') }}</span>
-      </label>
     </div>
 
     <!-- List -->
@@ -41,39 +30,54 @@
       <div v-else class="flex flex-col gap-2">
         <!-- Products -->
         <template v-if="selectMode === 'product'">
-          <ProductCard
+          <div
             v-for="item in filteredItems"
             :key="item.uuid"
-            :product="item"
-            selectable
-            compact
-            :is-selected="selectedId === item.uuid"
-            @select="onSelect(item)"
-          />
+            @mouseenter="emit('hover', item.uuid)"
+            @mouseleave="emit('hover', null)"
+          >
+            <ProductCard
+              :product="item"
+              selectable
+              compact
+              :is-selected="selectedId === item.uuid"
+              @select="onSelect(item)"
+            />
+          </div>
         </template>
 
         <!-- Hubs -->
         <template v-else-if="selectMode === 'hub'">
-          <HubCard
+          <div
             v-for="item in filteredItems"
             :key="item.uuid"
-            :hub="item"
-            selectable
-            :is-selected="selectedId === item.uuid"
-            @select="onSelect(item)"
-          />
+            @mouseenter="emit('hover', item.uuid)"
+            @mouseleave="emit('hover', null)"
+          >
+            <HubCard
+              :hub="item"
+              selectable
+              :is-selected="selectedId === item.uuid"
+              @select="onSelect(item)"
+            />
+          </div>
         </template>
 
         <!-- Suppliers -->
         <template v-else-if="selectMode === 'supplier'">
-          <SupplierCard
+          <div
             v-for="item in filteredItems"
             :key="item.uuid"
-            :supplier="item"
-            selectable
-            :is-selected="selectedId === item.uuid"
-            @select="onSelect(item)"
-          />
+            @mouseenter="emit('hover', item.uuid)"
+            @mouseleave="emit('hover', null)"
+          >
+            <SupplierCard
+              :supplier="item"
+              selectable
+              :is-selected="selectedId === item.uuid"
+              @select="onSelect(item)"
+            />
+          </div>
         </template>
 
         <!-- Infinite scroll sentinel -->
@@ -107,14 +111,13 @@ const props = defineProps<{
   loading?: boolean
   loadingMore?: boolean
   hasMore?: boolean
-  filterByBounds?: boolean
 }>()
 
 const emit = defineEmits<{
   'select': [type: string, item: Item]
   'close': []
   'load-more': []
-  'update:filter-by-bounds': [value: boolean]
+  'hover': [uuid: string | null]
 }>()
 
 const { t } = useI18n()
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 3c05515..f161ded 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -38,8 +38,23 @@
       <span class="text-white text-sm">{{ $t('common.loading') }}</span>
     </div>
 
-    <!-- View toggle (top RIGHT overlay, below header) - works in both modes -->
-    <div class="absolute top-[116px] right-4 z-20 hidden lg:block">
+    <!-- View toggle + filter checkbox (top RIGHT overlay, below header) -->
+    <div class="absolute top-[116px] right-4 z-20 hidden lg:flex items-center gap-2">
+      <!-- Filter by bounds checkbox (when panel is open) -->
+      <label
+        v-if="showPanel"
+        class="flex items-center gap-2 bg-black/30 backdrop-blur-md rounded-lg px-3 py-1.5 border border-white/10 cursor-pointer text-white text-sm hover:bg-black/40 transition-colors"
+      >
+        <input
+          type="checkbox"
+          :checked="filterByBounds"
+          class="checkbox checkbox-xs checkbox-primary"
+          @change="$emit('update:filter-by-bounds', ($event.target as HTMLInputElement).checked)"
+        />
+        <span>{{ $t('catalog.search.filterByMap') }}</span>
+      </label>
+
+      <!-- View mode toggle -->
       <div class="flex gap-1 bg-black/30 backdrop-blur-md rounded-lg p-1 border border-white/10">
         <button
           class="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
@@ -194,6 +209,7 @@ const props = withDefaults(defineProps<{
   hoveredId?: string
   items?: MapItem[]
   showPanel?: boolean
+  filterByBounds?: boolean
 }>(), {
   loading: false,
   useServerClustering: true,
@@ -201,13 +217,15 @@ const props = withDefaults(defineProps<{
   mapId: 'catalog-map',
   pointColor: '#f97316',
   items: () => [],
-  showPanel: false
+  showPanel: false,
+  filterByBounds: false
 })
 
 const emit = defineEmits<{
   'select': [item: MapItem]
   'bounds-change': [bounds: MapBounds]
   'update:hoveredId': [uuid: string | undefined]
+  'update:filter-by-bounds': [value: boolean]
 }>()
 
 // Server-side clustering - use computed node type based on view mode
diff --git a/app/pages/catalog/index.vue b/app/pages/catalog/index.vue
index fabe1ab..e087d08 100644
--- a/app/pages/catalog/index.vue
+++ b/app/pages/catalog/index.vue
@@ -6,10 +6,13 @@
     :cluster-node-type="clusterNodeType"
     map-id="unified-catalog-map"
     :point-color="mapPointColor"
-    :items="[]"
+    :items="currentSelectionItems"
+    :hovered-id="hoveredItemId"
     :show-panel="showPanel"
+    :filter-by-bounds="filterByBounds"
     @select="onMapSelect"
     @bounds-change="onBoundsChange"
+    @update:filter-by-bounds="filterByBounds = $event"
   >
     <!-- Panel slot - shows selection list OR quote results -->
     <template #panel>
@@ -23,11 +26,10 @@
         :loading="selectionLoading"
         :loading-more="selectionLoadingMore"
         :has-more="selectionHasMore && !filterByBounds"
-        :filter-by-bounds="filterByBounds"
         @select="onSelectItem"
         @close="cancelSelect"
         @load-more="onLoadMore"
-        @update:filter-by-bounds="filterByBounds = $event"
+        @hover="onHoverItem"
       />
 
       <!-- Quote results: show offers after search -->
@@ -61,6 +63,20 @@ const catalogPageRef = ref<{ currentBounds: Ref<MapBounds | null> } | null>(null
 const filterByBounds = ref(false)
 const currentMapBounds = ref<MapBounds | null>(null)
 
+// Hovered item for map highlight
+const hoveredItemId = ref<string | null>(null)
+const onHoverItem = (uuid: string | null) => {
+  hoveredItemId.value = uuid
+}
+
+// Current selection items for hover highlighting on map
+const currentSelectionItems = computed(() => {
+  if (selectMode.value === 'product') return filteredProducts.value
+  if (selectMode.value === 'hub') return filteredHubs.value
+  if (selectMode.value === 'supplier') return filteredSuppliers.value
+  return []
+})
+
 // Handle bounds change from map
 const onBoundsChange = (bounds: MapBounds) => {
   currentMapBounds.value = bounds
diff --git a/i18n/locales/en/catalog.json b/i18n/locales/en/catalog.json
index a11dd4b..9b49d50 100644
--- a/i18n/locales/en/catalog.json
+++ b/i18n/locales/en/catalog.json
@@ -12,7 +12,7 @@
       "searchProducts": "Search products...",
       "searchSuppliers": "Search suppliers...",
       "searchHubs": "Search hubs...",
-      "filterByMap": "In map area"
+      "filterByMap": "Search as I move the map"
     },
     "hero": {
       "title": "Find the best offer",
diff --git a/i18n/locales/ru/catalog.json b/i18n/locales/ru/catalog.json
index 53271af..d3d1b0b 100644
--- a/i18n/locales/ru/catalog.json
+++ b/i18n/locales/ru/catalog.json
@@ -12,7 +12,7 @@
       "searchProducts": "Поиск товаров...",
       "searchSuppliers": "Поиск поставщиков...",
       "searchHubs": "Поиск хабов...",
-      "filterByMap": "В области карты"
+      "filterByMap": "Искать при перемещении"
     },
     "hero": {
       "title": "Найдите лучшее предложение",