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>