Pin selection items to global filters

app/components/catalog/SelectionPanel.vue

@@ -8,21 +8,6 @@
           <Icon name="lucide:x" size="16" />
         </button>
       </div>
-      <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) -->
@@ -31,7 +16,7 @@
         <span class="loading loading-spinner loading-md text-white" />
       </div>
 
-      <div v-else-if="displayItems.length === 0" class="text-center py-8 text-white/60">
+      <div v-else-if="items.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>
@@ -40,7 +25,7 @@
         <!-- Products -->
         <template v-if="selectMode === 'product'">
           <div
-            v-for="(item, index) in displayItems"
+            v-for="(item, index) in items"
             :key="item.uuid ?? index"
             class="relative group"
             @mouseenter="emit('hover', item.uuid ?? null)"
@@ -49,9 +34,9 @@
             <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)"
+              @click.stop="onPin(item)"
             >
-              <Icon :name="isPinned(item.uuid) ? 'lucide:pin-off' : 'lucide:pin'" size="12" />
+              <Icon name="lucide:pin" size="12" />
             </button>
             <ProductCard
               :product="item"
@@ -65,7 +50,7 @@
         <!-- Hubs -->
         <template v-else-if="selectMode === 'hub'">
           <div
-            v-for="(item, index) in displayItems"
+            v-for="(item, index) in items"
             :key="item.uuid ?? index"
             class="relative group"
             @mouseenter="emit('hover', item.uuid ?? null)"
@@ -74,9 +59,9 @@
             <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)"
+              @click.stop="onPin(item)"
             >
-              <Icon :name="isPinned(item.uuid) ? 'lucide:pin-off' : 'lucide:pin'" size="12" />
+              <Icon name="lucide:pin" size="12" />
             </button>
             <HubCard
               :hub="item"
@@ -89,7 +74,7 @@
         <!-- Suppliers -->
         <template v-else-if="selectMode === 'supplier'">
           <div
-            v-for="(item, index) in displayItems"
+            v-for="(item, index) in items"
             :key="item.uuid ?? index"
             class="relative group"
             @mouseenter="emit('hover', item.uuid ?? null)"
@@ -98,9 +83,9 @@
             <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)"
+              @click.stop="onPin(item)"
             >
-              <Icon :name="isPinned(item.uuid) ? 'lucide:pin-off' : 'lucide:pin'" size="12" />
+              <Icon name="lucide:pin" size="12" />
             </button>
             <SupplierCard
               :supplier="item"
@@ -144,6 +129,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   'select': [type: string, item: Item]
+  'pin': [type: string, item: Item]
   'close': []
   'load-more': []
   'hover': [uuid: string | null]
@@ -152,7 +138,6 @@ const emit = defineEmits<{
 const { t } = useI18n()
 
 const loadMoreSentinel = ref<HTMLElement | null>(null)
-const pinnedIds = ref<string[]>([])
 
 // Infinite scroll using IntersectionObserver
 let observer: IntersectionObserver | null = null
@@ -200,33 +185,16 @@ const items = computed(() => {
   }
 })
 
-const isPinned = (uuid: string) => pinnedIds.value.includes(uuid)
-
-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
 const onSelect = (item: Item) => {
   if (props.selectMode && item.uuid) {
     emit('select', props.selectMode, item)
   }
 }
+
+const onPin = (item: Item) => {
+  if (props.selectMode && item.uuid) {
+    emit('pin', props.selectMode, item)
+  }
+}
 </script>

app/pages/catalog/index.vue

@@ -32,6 +32,7 @@
           :loading-more="selectionLoadingMore"
           :has-more="selectionHasMore && !filterByBounds"
           @select="onSelectItem"
+          @pin="onPinItem"
           @close="onClosePanel"
           @load-more="onLoadMore"
           @hover="onHoverItem"
@@ -499,6 +500,12 @@ const onSelectItem = (type: string, item: { uuid?: string | null; name?: string
   }
 }
 
+const onPinItem = (type: string, item: { uuid?: string | null; name?: string | null }) => {
+  if (item.uuid && item.name) {
+    selectItem(type, item.uuid, item.name)
+  }
+}
+
 // Close panel (cancel select mode)
 const onClosePanel = () => {
   cancelSelect()