Fix SelectionPanel - click applies immediately, opens Info

app/components/catalog/SelectionPanel.vue

@@ -4,7 +4,7 @@
     <div class="flex-shrink-0 p-4 border-b border-white/10">
       <div class="flex items-center justify-between mb-3">
         <h3 class="font-semibold text-base text-white">{{ title }}</h3>
-        <button class="btn btn-ghost btn-xs btn-circle text-white/60 hover:text-white" @click="closeDrawer">
+        <button class="btn btn-ghost btn-xs btn-circle text-white/60 hover:text-white" @click="emit('close')">
           <Icon name="lucide:x" size="16" />
         </button>
       </div>
@@ -40,8 +40,7 @@
               :product="item"
               selectable
               compact
-              :is-selected="drawerSelectedItem?.uuid === item.uuid"
-              @select="onDrawerSelect(item)"
+              @select="onSelect(item)"
             />
           </div>
         </template>
@@ -57,8 +56,7 @@
             <HubCard
               :hub="item"
               selectable
-              :is-selected="drawerSelectedItem?.uuid === item.uuid"
-              @select="onDrawerSelect(item)"
+              @select="onSelect(item)"
             />
           </div>
         </template>
@@ -74,8 +72,7 @@
             <SupplierCard
               :supplier="item"
               selectable
-              :is-selected="drawerSelectedItem?.uuid === item.uuid"
-              @select="onDrawerSelect(item)"
+              @select="onSelect(item)"
             />
           </div>
         </template>
@@ -90,17 +87,6 @@
         </div>
       </div>
     </div>
-
-    <!-- Footer with Apply button -->
-    <div class="flex-shrink-0 p-4 border-t border-white/10">
-      <button
-        class="btn btn-primary w-full"
-        :disabled="!drawerSelectedItem"
-        @click="onApplyFilter"
-      >
-        {{ $t('catalog.applyFilter') }}
-      </button>
-    </div>
   </div>
 </template>
 
@@ -124,20 +110,14 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
+  'select': [type: string, item: Item]
+  'close': []
   'load-more': []
   'hover': [uuid: string | null]
 }>()
 
 const { t } = useI18n()
 
-// Get drawer functions from useCatalogSearch
-const {
-  drawerSelectedItem,
-  selectDrawerItem,
-  applyDrawerFilter,
-  closeDrawer
-} = useCatalogSearch()
-
 const searchQuery = ref('')
 const loadMoreSentinel = ref<HTMLElement | null>(null)
 
@@ -206,15 +186,10 @@ const filteredItems = computed(() => {
   )
 })
 
-// Select item in drawer (doesn't apply filter yet)
-const onDrawerSelect = (item: Item) => {
-  if (item.uuid && item.name) {
-    selectDrawerItem(item.uuid, item.name)
+// Select item and emit
+const onSelect = (item: Item) => {
+  if (props.selectMode && item.uuid) {
+    emit('select', props.selectMode, item)
   }
 }
-
-// Apply filter and close drawer
-const onApplyFilter = () => {
-  applyDrawerFilter()
-}
 </script>

app/pages/catalog/index.vue

@@ -27,6 +27,8 @@
         :loading="selectionLoading"
         :loading-more="selectionLoadingMore"
         :has-more="selectionHasMore && !filterByBounds"
+        @select="onSelectItem"
+        @close="onCloseDrawer"
         @load-more="onLoadMore"
         @hover="onHoverItem"
       />
@@ -114,7 +116,8 @@ const {
   cancelSelect,
   openInfo,
   closeInfo,
-  setLabel
+  setLabel,
+  closeDrawer
 } = useCatalogSearch()
 
 // Info panel composable
@@ -375,15 +378,20 @@ const onMapSelect = async (item: any) => {
   setLabel(infoType, itemId, itemName)
 }
 
-// Handle selection from SelectionPanel
+// Handle selection from SelectionPanel - open Info and close drawer
 const onSelectItem = (type: string, item: any) => {
   if (item.uuid && item.name) {
-    // NEW: Open Info instead of selecting directly
     openInfo(type as 'hub' | 'supplier' | 'offer', item.uuid)
     setLabel(type, item.uuid, item.name)
+    closeDrawer()
   }
 }
 
+// Close drawer
+const onCloseDrawer = () => {
+  closeDrawer()
+}
+
 // Handle Info panel events
 const onInfoClose = () => {
   closeInfo()