Add CatalogSearchBar component with filter badges

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