webapp/app/components/search/UnifiedSearchBar.vue

<template>
  <div class="bg-base-100 rounded-box shadow-md">
    <!-- Search bar with tokens inside -->
    <div
      class="flex items-center gap-2 px-3 py-2 border border-base-300 rounded-lg bg-base-100 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary cursor-text"
      @click="focusInput"
    >
      <Icon name="lucide:search" size="18" class="text-base-content/50 flex-shrink-0" />

      <!-- Tokens + input inline -->
      <div class="flex items-center gap-1.5 flex-wrap flex-1 min-w-0">
        <!-- Active filter tokens -->
        <div
          v-for="token in activeTokens"
          :key="token.type"
          class="badge badge-sm gap-1 cursor-pointer hover:badge-primary transition-colors flex-shrink-0"
          @click.stop="onEditToken(token.type)"
        >
          <Icon :name="token.icon" size="12" />
          <span class="max-w-24 truncate">{{ token.label }}</span>
          <button
            class="hover:text-error"
            @click.stop="onRemoveToken(token.type)"
          >
            <Icon name="lucide:x" size="10" />
          </button>
        </div>

        <!-- Active selection mode indicator -->
        <div
          v-if="selectMode"
          class="badge badge-sm badge-outline badge-primary gap-1 flex-shrink-0"
        >
          <Icon :name="selectModeIcon" size="12" />
          {{ selectModeLabel }}:
          <button
            class="hover:text-error"
            @click.stop="onCancelSelect"
          >
            <Icon name="lucide:x" size="10" />
          </button>
        </div>

        <!-- Search input (no border, grows to fill) -->
        <input
          ref="inputRef"
          v-model="localSearchQuery"
          type="text"
          :placeholder="placeholder"
          class="flex-1 min-w-32 bg-transparent outline-none text-sm"
          @input="onSearchInput"
        />
      </div>
    </div>

    <!-- Quick filter chips -->
    <div
      v-if="availableChips.length > 0"
      class="flex items-center gap-2 px-3 py-2 border-t border-base-200"
    >
      <button
        v-for="chip in availableChips"
        :key="chip.type"
        class="btn btn-xs btn-ghost gap-1"
        @click="onStartSelect(chip.type)"
      >
        <Icon name="lucide:plus" size="12" />
        {{ chip.label }}
      </button>
    </div>
  </div>
</template>

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

const props = defineProps<{
  activeTokens: Array<{ type: string; id: string; label: string; icon: string }>
  availableChips: Array<{ type: string; label: string }>
  selectMode: SelectMode
  searchQuery: string
}>()

const emit = defineEmits<{
  (e: 'start-select', type: string): void
  (e: 'cancel-select'): void
  (e: 'edit-token', type: string): void
  (e: 'remove-token', type: string): void
  (e: 'update:search-query', value: string): void
}>()

const { t } = useI18n()

const inputRef = ref<HTMLInputElement>()
const localSearchQuery = ref(props.searchQuery)

watch(() => props.searchQuery, (val) => {
  localSearchQuery.value = val
})

const focusInput = () => {
  inputRef.value?.focus()
}

const placeholder = computed(() => {
  if (props.selectMode === 'product') return t('catalog.search.searchProducts')
  if (props.selectMode === 'supplier') return t('catalog.search.searchSuppliers')
  if (props.selectMode === 'hub') return t('catalog.search.searchHubs')
  if (props.activeTokens.length === 0) return t('catalog.search.placeholder')
  return t('catalog.search.refine')
})

const selectModeLabel = computed(() => {
  if (props.selectMode === 'product') return t('catalog.filters.product')
  if (props.selectMode === 'supplier') return t('catalog.filters.supplier')
  if (props.selectMode === 'hub') return t('catalog.filters.hub')
  return ''
})

const selectModeIcon = computed(() => {
  if (props.selectMode === 'product') return 'lucide:package'
  if (props.selectMode === 'supplier') return 'lucide:factory'
  if (props.selectMode === 'hub') return 'lucide:map-pin'
  return 'lucide:search'
})

const onStartSelect = (type: string) => {
  emit('start-select', type)
}

const onCancelSelect = () => {
  emit('cancel-select')
}

const onEditToken = (type: string) => {
  emit('edit-token', type)
}

const onRemoveToken = (type: string) => {
  emit('remove-token', type)
}

const onSearchInput = () => {
  emit('update:search-query', localSearchQuery.value)
}
</script>