Fix catalog: selection panels instead of modals, remove duplicate QuoteForm

- Add SelectionPanel.vue for product/hub/supplier selection lists
- Remove QuoteForm from QuotePanel (header already has controls)
- Show SelectionPanel when selectMode is active
- Connect search button in header to page via shared state

app/components/catalog/QuotePanel.vue

@@ -1,27 +1,13 @@
 <template>
   <div class="flex flex-col gap-4 h-full">
-    <!-- Quote form -->
-    <QuoteForm
-      :product-id="productId"
-      :product-label="productLabel"
-      :hub-id="hubId"
-      :hub-label="hubLabel"
-      :supplier-id="supplierId"
-      :supplier-label="supplierLabel"
-      :quantity="quantity"
-      :can-search="canSearch"
-      @edit-filter="emit('edit-filter', $event)"
-      @remove-filter="emit('remove-filter', $event)"
-      @update-quantity="emit('update-quantity', $event)"
-      @search="emit('search')"
-      @clear-all="emit('clear-all')"
-    />
-
-    <!-- Divider -->
-    <div v-if="showResults" class="divider my-0" />
+    <!-- Header -->
+    <div class="flex items-center justify-between flex-shrink-0">
+      <h3 class="font-semibold text-lg">{{ $t('catalog.headers.offers') }}</h3>
+      <span class="badge badge-neutral">{{ offers.length }}</span>
+    </div>
 
     <!-- Results section -->
-    <div v-if="showResults" class="flex-1 overflow-y-auto">
+    <div class="flex-1 overflow-y-auto -mx-1 px-1">
       <div v-if="loading" class="flex items-center justify-center py-8">
         <span class="loading loading-spinner loading-md" />
       </div>
@@ -32,9 +18,6 @@
       </div>
 
       <div v-else class="flex flex-col gap-3">
-        <Text tone="muted" class="text-sm">
-          {{ $t('catalog.headers.offers') }}: {{ offers.length }}
-        </Text>
         <div
           v-for="offer in offers"
           :key="offer.uuid"
@@ -57,25 +40,11 @@ interface Offer {
 }
 
 defineProps<{
-  productId?: string
-  productLabel?: string
-  hubId?: string
-  hubLabel?: string
-  supplierId?: string
-  supplierLabel?: string
-  quantity?: string
-  canSearch: boolean
-  showResults: boolean
   loading: boolean
   offers: Offer[]
 }>()
 
 const emit = defineEmits<{
-  'edit-filter': [type: string]
-  'remove-filter': [type: string]
-  'update-quantity': [value: string]
-  'search': []
-  'clear-all': []
   'select-offer': [offer: Offer]
 }>()
 </script>

app/components/catalog/SelectionPanel.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="flex flex-col h-full gap-3">
+    <!-- Header -->
+    <div class="flex items-center justify-between flex-shrink-0">
+      <h3 class="font-semibold text-lg">{{ title }}</h3>
+      <button class="btn btn-ghost btn-sm btn-circle" @click="emit('close')">
+        <Icon name="lucide:x" size="18" />
+      </button>
+    </div>
+
+    <!-- Search input -->
+    <div class="flex-shrink-0">
+      <input
+        v-model="searchQuery"
+        type="text"
+        :placeholder="searchPlaceholder"
+        class="input input-bordered input-sm w-full"
+      />
+    </div>
+
+    <!-- List -->
+    <div class="flex-1 overflow-y-auto -mx-1 px-1">
+      <div v-if="loading" class="flex items-center justify-center py-8">
+        <span class="loading loading-spinner loading-md" />
+      </div>
+
+      <div v-else-if="filteredItems.length === 0" class="text-center py-8 text-base-content/60">
+        <Icon name="lucide:search-x" size="32" class="mb-2" />
+        <p>{{ $t('catalog.empty.noResults') }}</p>
+      </div>
+
+      <div v-else class="flex flex-col gap-2">
+        <!-- Products -->
+        <template v-if="selectMode === 'product'">
+          <ProductCard
+            v-for="item in filteredItems"
+            :key="item.uuid"
+            :product="item"
+            selectable
+            compact
+            :is-selected="selectedId === item.uuid"
+            @select="onSelect(item)"
+          />
+        </template>
+
+        <!-- Hubs -->
+        <template v-else-if="selectMode === 'hub'">
+          <HubCard
+            v-for="item in filteredItems"
+            :key="item.uuid"
+            :hub="item"
+            selectable
+            :is-selected="selectedId === item.uuid"
+            @select="onSelect(item)"
+          />
+        </template>
+
+        <!-- Suppliers -->
+        <template v-else-if="selectMode === 'supplier'">
+          <SupplierCard
+            v-for="item in filteredItems"
+            :key="item.uuid"
+            :supplier="item"
+            selectable
+            :is-selected="selectedId === item.uuid"
+            @select="onSelect(item)"
+          />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SelectMode } from '~/composables/useCatalogSearch'
+
+interface Item {
+  uuid?: string | null
+  name?: string | null
+  [key: string]: any
+}
+
+const props = defineProps<{
+  selectMode: SelectMode
+  products?: Item[]
+  hubs?: Item[]
+  suppliers?: Item[]
+  selectedId?: string
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  'select': [type: string, item: Item]
+  'close': []
+}>()
+
+const { t } = useI18n()
+
+const searchQuery = ref('')
+
+const title = computed(() => {
+  switch (props.selectMode) {
+    case 'product': return t('catalog.headers.selectProduct')
+    case 'hub': return t('catalog.headers.selectHub')
+    case 'supplier': return t('catalog.headers.selectSupplier')
+    default: return ''
+  }
+})
+
+const searchPlaceholder = computed(() => {
+  switch (props.selectMode) {
+    case 'product': return t('catalog.search.searchProducts')
+    case 'hub': return t('catalog.search.searchHubs')
+    case 'supplier': return t('catalog.search.searchSuppliers')
+    default: return t('catalog.search.placeholder')
+  }
+})
+
+const items = computed(() => {
+  switch (props.selectMode) {
+    case 'product': return props.products || []
+    case 'hub': return props.hubs || []
+    case 'supplier': return props.suppliers || []
+    default: return []
+  }
+})
+
+const filteredItems = computed(() => {
+  if (!searchQuery.value.trim()) return items.value
+
+  const query = searchQuery.value.toLowerCase()
+  return items.value.filter(item =>
+    item.name?.toLowerCase().includes(query) ||
+    item.country?.toLowerCase().includes(query)
+  )
+})
+
+const onSelect = (item: Item) => {
+  if (props.selectMode && item.uuid) {
+    emit('select', props.selectMode, item)
+  }
+}
+</script>