Move filterByBounds to map, show only when panel is open

app/components/catalog/SelectionPanel.vue

@@ -12,17 +12,8 @@
         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 mb-2"
+        class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/50"
       />
-      <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) -->
@@ -116,13 +107,11 @@ 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]
 }>()

app/components/page/CatalogPage.vue

@@ -48,6 +48,20 @@
       <span>{{ $t('catalog.list') }}</span>
     </button>
 
+    <!-- Filter by bounds checkbox (LEFT, next to list button, only when panel is open) -->
+    <label
+      v-if="isPanelOpen"
+      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">
@@ -235,6 +249,7 @@ const props = withDefaults(defineProps<{
   hoveredId?: string
   items?: MapItem[]
   showPanel?: boolean
+  filterByBounds?: boolean
   relatedPoints?: Array<{
     uuid: string
     name: string
@@ -250,6 +265,7 @@ const props = withDefaults(defineProps<{
   pointColor: '#f97316',
   items: () => [],
   showPanel: false,
+  filterByBounds: false,
   relatedPoints: () => []
 })
 
@@ -257,6 +273,7 @@ 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