From 5ca995ebcc01173312cb52a0a44ddaceee435a0b Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Mon, 26 Jan 2026 14:56:40 +0700
Subject: [PATCH] Move filterByBounds checkbox into SelectionPanel

---
 app/components/catalog/SelectionPanel.vue | 13 ++++++++++++-
 app/components/page/CatalogPage.vue       | 15 ---------------
 app/pages/catalog/index.vue               |  4 ++--
 3 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/app/components/catalog/SelectionPanel.vue b/app/components/catalog/SelectionPanel.vue
index a30de0e..08560b1 100644
--- a/app/components/catalog/SelectionPanel.vue
+++ b/app/components/catalog/SelectionPanel.vue
@@ -12,8 +12,17 @@
         v-model="searchQuery"
         type="text"
         :placeholder="searchPlaceholder"
-        class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/50"
+        class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/50 mb-2"
       />
+      <label class="flex items-center gap-2 cursor-pointer text-white/70 text-sm hover:text-white 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>
     </div>
 
     <!-- Content (scrollable) -->
@@ -107,11 +116,13 @@ const props = defineProps<{
   loading?: boolean
   loadingMore?: boolean
   hasMore?: boolean
+  filterByBounds?: boolean
 }>()
 
 const emit = defineEmits<{
   'select': [type: string, item: Item]
   'close': []
+  'update:filter-by-bounds': [value: boolean]
   'load-more': []
   'hover': [uuid: string | null]
 }>()
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 4ea2bd1..3f8017b 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -48,18 +48,6 @@
       <span>{{ $t('catalog.list') }}</span>
     </button>
 
-    <!-- Filter by bounds checkbox (LEFT, next to list button) -->
-    <label
-      class="absolute top-[116px] left-32 z-20 hidden lg: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 toggle (top RIGHT overlay, below header) -->
     <div class="absolute top-[116px] right-4 z-20 hidden lg:flex items-center gap-2">
@@ -247,7 +235,6 @@ const props = withDefaults(defineProps<{
   hoveredId?: string
   items?: MapItem[]
   showPanel?: boolean
-  filterByBounds?: boolean
   relatedPoints?: Array<{
     uuid: string
     name: string
@@ -263,7 +250,6 @@ const props = withDefaults(defineProps<{
   pointColor: '#f97316',
   items: () => [],
   showPanel: false,
-  filterByBounds: false,
   relatedPoints: () => []
 })
 
@@ -271,7 +257,6 @@ 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 a18f7d9..0ad9eb3 100644
--- a/app/pages/catalog/index.vue
+++ b/app/pages/catalog/index.vue
@@ -9,11 +9,9 @@
     :items="currentSelectionItems"
     :hovered-id="hoveredItemId ?? undefined"
     :show-panel="showPanel"
-    :filter-by-bounds="filterByBounds"
     :related-points="relatedPoints"
     @select="onMapSelect"
     @bounds-change="onBoundsChange"
-    @update:filter-by-bounds="filterByBounds = $event"
   >
     <!-- Panel slot - shows selection list OR info OR quote results -->
     <template #panel>
@@ -27,10 +25,12 @@
         :loading="selectionLoading"
         :loading-more="selectionLoadingMore"
         :has-more="selectionHasMore && !filterByBounds"
+        :filter-by-bounds="filterByBounds"
         @select="onSelectItem"
         @close="onClosePanel"
         @load-more="onLoadMore"
         @hover="onHoverItem"
+        @update:filter-by-bounds="filterByBounds = $event"
       />
 
       <!-- Info mode: show detailed info about selected entity -->