From 134b8a5eb47a7fe834d09712ca8febf0fdeb6173 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Wed, 14 Jan 2026 12:31:38 +0700
Subject: [PATCH] Add CatalogSearchBar component with filter badges
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Create CatalogSearchBar.vue with search input, filter badges (× to remove), filter dropdown, counter, sort dropdown
- Integrate searchBar slot into CatalogPage with displayedCount and totalCount
- Update hubs page to use CatalogSearchBar with transport type and country filters
- Add translations for search bar in common.json
- Add transport/country filter labels in catalogHubsSection.json
---
 app/components/catalog/CatalogSearchBar.vue | 159 ++++++++++++++++++++
 app/components/page/CatalogPage.vue         |   9 +-
 app/pages/catalog/hubs/index.vue            |  78 +++++++++-
 i18n/locales/en/catalogHubsSection.json     |   4 +-
 i18n/locales/en/common.json                 |   5 +
 i18n/locales/ru/catalogHubsSection.json     |   4 +-
 i18n/locales/ru/common.json                 |   5 +
 7 files changed, 256 insertions(+), 8 deletions(-)
 create mode 100644 app/components/catalog/CatalogSearchBar.vue

diff --git a/app/components/catalog/CatalogSearchBar.vue b/app/components/catalog/CatalogSearchBar.vue
new file mode 100644
index 0000000..9ebcc40
--- /dev/null
+++ b/app/components/catalog/CatalogSearchBar.vue
@@ -0,0 +1,159 @@
+<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)"
+        >
+          {{ filter.label }}
+          <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
+}
+
+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>
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 31c2383..f72358d 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -12,6 +12,11 @@
 
     <!-- Content -->
     <template v-else>
+      <!-- Search bar slot (full width, above split) -->
+      <div v-if="$slots.searchBar" class="py-3">
+        <slot name="searchBar" :displayed-count="displayItems.length" :total-count="totalCount" />
+      </div>
+
       <!-- With Map: Split Layout -->
       <template v-if="withMap">
         <!-- Desktop: side-by-side -->
@@ -197,13 +202,15 @@ const props = withDefaults(defineProps<{
   selectedId?: string
   hoveredId?: string
   hasSubNav?: boolean
+  totalCount?: number  // Total count for search bar counter (can differ from items.length with pagination)
 }>(), {
   loading: false,
   withMap: true,
   useServerClustering: false,
   mapId: 'catalog-map',
   pointColor: '#3b82f6',
-  hasSubNav: true
+  hasSubNav: true,
+  totalCount: 0
 })
 
 // Map positioning - unified height for all pages with map
diff --git a/app/pages/catalog/hubs/index.vue b/app/pages/catalog/hubs/index.vue
index 2f7ad3d..d41e8cc 100644
--- a/app/pages/catalog/hubs/index.vue
+++ b/app/pages/catalog/hubs/index.vue
@@ -2,6 +2,7 @@
   <CatalogPage
     :items="items"
     :loading="isLoading"
+    :total-count="total"
     map-id="hubs-map"
     point-color="#10b981"
     use-server-clustering
@@ -9,11 +10,47 @@
     v-model:hovered-id="hoveredHubId"
     @select="onSelectHub"
   >
-    <template #filters>
-      <div class="flex gap-2">
-        <CatalogFilterSelect :filters="filters" v-model="selectedFilter" />
-        <CatalogFilterSelect :filters="countryFilters" v-model="selectedCountry" />
-      </div>
+    <template #searchBar="{ displayedCount, totalCount }">
+      <CatalogSearchBar
+        v-model:search-query="searchQuery"
+        :active-filters="activeFilterBadges"
+        :displayed-count="displayedCount"
+        :total-count="totalCount"
+        @remove-filter="onRemoveFilter"
+        @search="onSearch"
+      >
+        <template #filters>
+          <div class="p-2 space-y-3">
+            <div>
+              <div class="text-xs font-semibold mb-1 text-base-content/70">{{ t('catalogHubsSection.filters.transport') }}</div>
+              <ul class="menu menu-compact">
+                <li v-for="filter in filters" :key="filter.id">
+                  <a
+                    :class="{ active: selectedFilter === filter.id }"
+                    @click="selectedFilter = filter.id"
+                  >
+                    {{ filter.label }}
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div class="divider my-0"></div>
+            <div>
+              <div class="text-xs font-semibold mb-1 text-base-content/70">{{ t('catalogHubsSection.filters.country') }}</div>
+              <ul class="menu menu-compact max-h-48 overflow-y-auto">
+                <li v-for="filter in countryFilters" :key="filter.id">
+                  <a
+                    :class="{ active: selectedCountry === filter.id }"
+                    @click="selectedCountry = filter.id"
+                  >
+                    {{ filter.label }}
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </template>
+      </CatalogSearchBar>
     </template>
 
     <template #card="{ item }">
@@ -65,6 +102,37 @@ const {
 const selectedHubId = ref<string>()
 const hoveredHubId = ref<string>()
 
+// Search bar
+const searchQuery = ref('')
+
+// Active filter badges (non-default filters shown as badges)
+const activeFilterBadges = computed(() => {
+  const badges: { id: string; label: string }[] = []
+  if (selectedFilter.value !== 'all') {
+    const filter = filters.value.find(f => f.id === selectedFilter.value)
+    if (filter) badges.push({ id: `transport:${filter.id}`, label: filter.label })
+  }
+  if (selectedCountry.value !== 'all') {
+    const filter = countryFilters.value.find(f => f.id === selectedCountry.value)
+    if (filter) badges.push({ id: `country:${filter.id}`, label: filter.label })
+  }
+  return badges
+})
+
+// Remove filter badge
+const onRemoveFilter = (id: string) => {
+  if (id.startsWith('transport:')) {
+    selectedFilter.value = 'all'
+  } else if (id.startsWith('country:')) {
+    selectedCountry.value = 'all'
+  }
+}
+
+// Search handler (for future use)
+const onSearch = () => {
+  // TODO: Implement search by hub name
+}
+
 const onSelectHub = (hub: any) => {
   selectedHubId.value = hub.uuid
 }
diff --git a/i18n/locales/en/catalogHubsSection.json b/i18n/locales/en/catalogHubsSection.json
index 2ba686d..953a2d7 100644
--- a/i18n/locales/en/catalogHubsSection.json
+++ b/i18n/locales/en/catalogHubsSection.json
@@ -15,7 +15,9 @@
       "auto": "Auto",
       "rail": "Rail",
       "sea": "Sea",
-      "air": "Air"
+      "air": "Air",
+      "transport": "Transport type",
+      "country": "Country"
     }
   }
 }
diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json
index ba71cee..1ac30e6 100644
--- a/i18n/locales/en/common.json
+++ b/i18n/locales/en/common.json
@@ -25,6 +25,11 @@
     "theme_light": "Light mode",
     "values": {
       "not_available": "Not available"
+    },
+    "searchBar": {
+      "placeholder": "Search...",
+      "filters": "Filters",
+      "sort": "Sort"
     }
   },
   "units": {
diff --git a/i18n/locales/ru/catalogHubsSection.json b/i18n/locales/ru/catalogHubsSection.json
index 0078eff..ced1cae 100644
--- a/i18n/locales/ru/catalogHubsSection.json
+++ b/i18n/locales/ru/catalogHubsSection.json
@@ -15,7 +15,9 @@
       "auto": "Авто",
       "rail": "Ж/д",
       "sea": "Море",
-      "air": "Авиа"
+      "air": "Авиа",
+      "transport": "Тип транспорта",
+      "country": "Страна"
     }
   }
 }
diff --git a/i18n/locales/ru/common.json b/i18n/locales/ru/common.json
index 7423976..1cf0cb1 100644
--- a/i18n/locales/ru/common.json
+++ b/i18n/locales/ru/common.json
@@ -25,6 +25,11 @@
     "theme_light": "Светлая тема",
     "values": {
       "not_available": "Нет данных"
+    },
+    "searchBar": {
+      "placeholder": "Поиск...",
+      "filters": "Фильтры",
+      "sort": "Сортировка"
     }
   },
   "units": {