Improve selection panel and hub card compass

app/components/catalog/SelectionPanel.vue

@@ -8,12 +8,21 @@
           <Icon name="lucide:x" size="16" />
         </button>
       </div>
-      <input
-        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"
-      />
+      <div
+        v-if="pinnedItems.length"
+        class="input input-sm w-full bg-white/10 border-white/20 text-white/80 flex flex-wrap items-center gap-1 py-1"
+      >
+        <span
+          v-for="item in pinnedItems"
+          :key="item.uuid"
+          class="badge badge-neutral badge-sm flex items-center gap-1"
+        >
+          {{ item.name }}
+          <button class="text-white/70 hover:text-white" @click.stop="togglePin(item)">
+            <Icon name="lucide:x" size="12" />
+          </button>
+        </span>
+      </div>
     </div>
 
     <!-- Content (scrollable) -->
@@ -22,7 +31,7 @@
         <span class="loading loading-spinner loading-md text-white" />
       </div>
 
-      <div v-else-if="filteredItems.length === 0" class="text-center py-8 text-white/60">
+      <div v-else-if="displayItems.length === 0" class="text-center py-8 text-white/60">
         <Icon name="lucide:search-x" size="32" class="mb-2" />
         <p>{{ $t('catalog.empty.noResults') }}</p>
       </div>
@@ -31,11 +40,19 @@
         <!-- Products -->
         <template v-if="selectMode === 'product'">
           <div
-            v-for="(item, index) in filteredItems"
+            v-for="(item, index) in displayItems"
             :key="item.uuid ?? index"
+            class="relative group"
             @mouseenter="emit('hover', item.uuid ?? null)"
             @mouseleave="emit('hover', null)"
           >
+            <button
+              v-if="item.uuid"
+              class="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity bg-black/40 hover:bg-black/60 text-white rounded-full w-6 h-6 flex items-center justify-center"
+              @click.stop="togglePin(item)"
+            >
+              <Icon :name="isPinned(item.uuid) ? 'lucide:pin-off' : 'lucide:pin'" size="12" />
+            </button>
             <ProductCard
               :product="item"
               selectable
@@ -48,11 +65,19 @@
         <!-- Hubs -->
         <template v-else-if="selectMode === 'hub'">
           <div
-            v-for="(item, index) in filteredItems"
+            v-for="(item, index) in displayItems"
             :key="item.uuid ?? index"
+            class="relative group"
             @mouseenter="emit('hover', item.uuid ?? null)"
             @mouseleave="emit('hover', null)"
           >
+            <button
+              v-if="item.uuid"
+              class="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity bg-black/40 hover:bg-black/60 text-white rounded-full w-6 h-6 flex items-center justify-center"
+              @click.stop="togglePin(item)"
+            >
+              <Icon :name="isPinned(item.uuid) ? 'lucide:pin-off' : 'lucide:pin'" size="12" />
+            </button>
             <HubCard
               :hub="item"
               selectable
@@ -64,11 +89,19 @@
         <!-- Suppliers -->
         <template v-else-if="selectMode === 'supplier'">
           <div
-            v-for="(item, index) in filteredItems"
+            v-for="(item, index) in displayItems"
             :key="item.uuid ?? index"
+            class="relative group"
             @mouseenter="emit('hover', item.uuid ?? null)"
             @mouseleave="emit('hover', null)"
           >
+            <button
+              v-if="item.uuid"
+              class="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity bg-black/40 hover:bg-black/60 text-white rounded-full w-6 h-6 flex items-center justify-center"
+              @click.stop="togglePin(item)"
+            >
+              <Icon :name="isPinned(item.uuid) ? 'lucide:pin-off' : 'lucide:pin'" size="12" />
+            </button>
             <SupplierCard
               :supplier="item"
               selectable
@@ -79,7 +112,7 @@
 
         <!-- Infinite scroll sentinel -->
         <div
-          v-if="hasMore && !searchQuery"
+          v-if="hasMore"
           ref="loadMoreSentinel"
           class="flex items-center justify-center py-4"
         >
@@ -118,8 +151,8 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 
-const searchQuery = ref('')
 const loadMoreSentinel = ref<HTMLElement | null>(null)
+const pinnedIds = ref<string[]>([])
 
 // Infinite scroll using IntersectionObserver
 let observer: IntersectionObserver | null = null
@@ -128,7 +161,7 @@ onMounted(() => {
   observer = new IntersectionObserver(
     (entries) => {
       const entry = entries[0]
-      if (entry?.isIntersecting && props.hasMore && !props.loadingMore && !searchQuery.value) {
+      if (entry?.isIntersecting && props.hasMore && !props.loadingMore) {
         emit('load-more')
       }
     },
@@ -158,15 +191,6 @@ const title = computed(() => {
   }
 })
 
-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 || []
@@ -176,14 +200,27 @@ const items = computed(() => {
   }
 })
 
-const filteredItems = computed(() => {
-  if (!searchQuery.value.trim()) return items.value
+const isPinned = (uuid: string) => pinnedIds.value.includes(uuid)
 
-  const query = searchQuery.value.toLowerCase()
-  return items.value.filter(item =>
-    item.name?.toLowerCase().includes(query) ||
-    item.country?.toLowerCase().includes(query)
-  )
+const togglePin = (item: Item) => {
+  if (!item.uuid) return
+  if (isPinned(item.uuid)) {
+    pinnedIds.value = pinnedIds.value.filter(id => id !== item.uuid)
+  } else {
+    pinnedIds.value = [...pinnedIds.value, item.uuid]
+  }
+}
+
+const pinnedItems = computed(() =>
+  items.value.filter(item => item.uuid && isPinned(item.uuid))
+)
+
+const displayItems = computed(() => {
+  if (pinnedIds.value.length === 0) return items.value
+  const pinned = pinnedItems.value
+  const pinnedSet = new Set(pinned.map(p => p.uuid).filter(Boolean) as string[])
+  const rest = items.value.filter(item => !item.uuid || !pinnedSet.has(item.uuid))
+  return [...pinned, ...rest]
 })
 
 // Select item and emit