webapp/app/components/catalog/SelectionPanel.vue

<template>
  <div class="flex flex-col h-full">
    <!-- Header -->
    <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="emit('close')">
          <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>

    <!-- Content (scrollable) -->
    <div class="flex-1 overflow-y-auto p-4">
      <div v-if="loading" class="flex items-center justify-center py-8">
        <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">
        <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'">
          <div
            v-for="(item, index) in filteredItems"
            :key="item.uuid ?? index"
            @mouseenter="emit('hover', item.uuid ?? null)"
            @mouseleave="emit('hover', null)"
          >
            <ProductCard
              :product="item"
              selectable
              compact
              @select="onSelect(item)"
            />
          </div>
        </template>

        <!-- Hubs -->
        <template v-else-if="selectMode === 'hub'">
          <div
            v-for="(item, index) in filteredItems"
            :key="item.uuid ?? index"
            @mouseenter="emit('hover', item.uuid ?? null)"
            @mouseleave="emit('hover', null)"
          >
            <HubCard
              :hub="item"
              selectable
              @select="onSelect(item)"
            />
          </div>
        </template>

        <!-- Suppliers -->
        <template v-else-if="selectMode === 'supplier'">
          <div
            v-for="(item, index) in filteredItems"
            :key="item.uuid ?? index"
            @mouseenter="emit('hover', item.uuid ?? null)"
            @mouseleave="emit('hover', null)"
          >
            <SupplierCard
              :supplier="item"
              selectable
              @select="onSelect(item)"
            />
          </div>
        </template>

        <!-- Infinite scroll sentinel -->
        <div
          v-if="hasMore && !searchQuery"
          ref="loadMoreSentinel"
          class="flex items-center justify-center py-4"
        >
          <span v-if="loadingMore" class="loading loading-spinner loading-sm text-white/60" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { SelectMode } from '~/composables/useCatalogSearch'

interface Item {
  uuid?: string | null
  name?: string | null
  country?: string | null
}

const props = defineProps<{
  selectMode: SelectMode
  products?: Item[]
  hubs?: Item[]
  suppliers?: Item[]
  loading?: boolean
  loadingMore?: boolean
  hasMore?: boolean
}>()

const emit = defineEmits<{
  'select': [type: string, item: Item]
  'close': []
  'load-more': []
  'hover': [uuid: string | null]
}>()

const { t } = useI18n()

const searchQuery = ref('')
const loadMoreSentinel = ref<HTMLElement | null>(null)

// Infinite scroll using IntersectionObserver
let observer: IntersectionObserver | null = null

onMounted(() => {
  observer = new IntersectionObserver(
    (entries) => {
      const entry = entries[0]
      if (entry?.isIntersecting && props.hasMore && !props.loadingMore && !searchQuery.value) {
        emit('load-more')
      }
    },
    { threshold: 0.1 }
  )
})

watch(loadMoreSentinel, (el) => {
  if (el && observer) {
    observer.observe(el)
  }
})

onUnmounted(() => {
  if (observer) {
    observer.disconnect()
    observer = null
  }
})

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)
  )
})

// Select item and emit
const onSelect = (item: Item) => {
  if (props.selectMode && item.uuid) {
    emit('select', props.selectMode, item)
  }
}
</script>