webapp/app/components/catalog/CatalogSearchBar.vue

<template>
  <div class="flex items-center gap-3 w-full bg-base-100 border border-base-300 rounded-lg px-3 py-2">
    <!-- Search input with badges -->
    <div class="flex-1 flex items-center gap-2 min-w-0">
      <!-- Search icon -->
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-base-content/50 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
      </svg>

      <!-- Active filter badges -->
      <div class="flex items-center gap-1.5 flex-wrap">
        <span
          v-for="filter in activeFilters"
          :key="filter.id"
          class="badge badge-sm badge-primary gap-1 cursor-pointer hover:badge-error transition-colors"
          @click="$emit('remove-filter', filter.id)"
        >
          <template v-if="filter.key">
            <span class="opacity-70">{{ filter.key }}:</span>
            <span>{{ filter.label }}</span>
          </template>
          <template v-else>
            {{ filter.label }}
          </template>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </span>

        <!-- Search input -->
        <input
          type="text"
          :value="searchQuery"
          :placeholder="computedPlaceholder"
          class="flex-1 min-w-[120px] bg-transparent border-none outline-none text-sm placeholder-base-content/50"
          @input="$emit('update:searchQuery', ($event.target as HTMLInputElement).value)"
          @keydown.enter="$emit('search')"
        />
      </div>
    </div>

    <!-- Divider -->
    <div class="h-6 w-px bg-base-300"></div>

    <!-- Filter dropdown -->
    <div class="dropdown dropdown-end">
      <button tabindex="0" class="btn btn-ghost btn-sm gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
        </svg>
        {{ computedFilterButtonLabel }}
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
      </button>
      <div tabindex="0" class="dropdown-content z-20 menu p-2 shadow bg-base-100 rounded-box w-56 mt-2">
        <slot name="filters">
          <li v-for="filter in availableFilters" :key="filter.id">
            <a
              :class="{ active: isFilterActive(filter.id) }"
              @click="toggleFilter(filter)"
            >
              {{ filter.label }}
            </a>
          </li>
        </slot>
      </div>
    </div>

    <!-- Counter -->
    <div v-if="showCounter" class="text-sm text-base-content/70 whitespace-nowrap">
      <span class="font-semibold">{{ displayedCount }}</span>
      <span class="text-base-content/50"> / {{ totalCount }}</span>
    </div>

    <!-- Sort dropdown -->
    <div v-if="sortOptions.length > 0" class="dropdown dropdown-end">
      <button tabindex="0" class="btn btn-ghost btn-sm gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
        </svg>
        {{ currentSortLabel }}
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
      </button>
      <ul tabindex="0" class="dropdown-content z-20 menu p-2 shadow bg-base-100 rounded-box w-48 mt-2">
        <li v-for="option in sortOptions" :key="option.id">
          <a
            :class="{ active: sortValue === option.id }"
            @click="$emit('update:sortValue', option.id)"
          >
            {{ option.label }}
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
interface FilterOption {
  id: string
  label: string
  key?: string // Optional key for "Key: Value" format badges
}

interface SortOption {
  id: string
  label: string
}

const props = withDefaults(defineProps<{
  searchQuery?: string
  placeholder?: string
  activeFilters?: FilterOption[]
  availableFilters?: FilterOption[]
  filterButtonLabel?: string
  displayedCount?: number
  totalCount?: number
  showCounter?: boolean
  sortOptions?: SortOption[]
  sortValue?: string
}>(), {
  searchQuery: '',
  placeholder: '',
  activeFilters: () => [],
  availableFilters: () => [],
  filterButtonLabel: '',
  displayedCount: 0,
  totalCount: 0,
  showCounter: true,
  sortOptions: () => [],
  sortValue: ''
})

const { t } = useI18n()

const computedPlaceholder = computed(() => props.placeholder || t('common.searchBar.placeholder'))
const computedFilterButtonLabel = computed(() => props.filterButtonLabel || t('common.searchBar.filters'))

const emit = defineEmits<{
  'update:searchQuery': [value: string]
  'update:sortValue': [value: string]
  'remove-filter': [id: string]
  'add-filter': [filter: FilterOption]
  'search': []
}>()

const isFilterActive = (id: string) => {
  return props.activeFilters.some(f => f.id === id)
}

const toggleFilter = (filter: FilterOption) => {
  if (isFilterActive(filter.id)) {
    emit('remove-filter', filter.id)
  } else {
    emit('add-filter', filter)
  }
}

const currentSortLabel = computed(() => {
  const option = props.sortOptions.find(o => o.id === props.sortValue)
  return option?.label || props.sortOptions[0]?.label || ''
})
</script>