Add Airbnb-style "search as I move" checkbox + hover highlight
All checks were successful
Build Docker Image / build (push) Successful in 3m33s

- 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"
This commit is contained in:
Ruslan Bakiev
2026-01-24 11:07:31 +07:00
parent d03564a2d9
commit 2fc4dfb834
5 changed files with 77 additions and 40 deletions

View File

@@ -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