Add Airbnb-style "search as I move" checkbox + hover highlight

- 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

@@ -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"
+            @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"
+            @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"
+            @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()

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 -->
+    <!-- View toggle + filter checkbox (top RIGHT overlay, below header) -->
-    <div class="absolute top-[116px] right-4 z-20 hidden lg:block">
+    <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

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

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",

i18n/locales/ru/catalog.json

@@ -12,7 +12,7 @@
       "searchProducts": "Поиск товаров...",
       "searchSuppliers": "Поиск поставщиков...",
       "searchHubs": "Поиск хабов...",
-      "filterByMap": "В области карты"
+      "filterByMap": "Искать при перемещении"
     },
     "hero": {
       "title": "Найдите лучшее предложение",