[feat] Add enhanced filter UI components with search and clear functionality (#5119)

* [feat] Add enhanced filter UI components with search and clear functionality

- Add SearchBox, clear all button, and item count to MultiSelect header
- Add 'fit-content' size option to button types for flexible sizing
- Update SingleSelect and ModelSelector components for consistency
- Add localization strings for item selection and clear all functionality

Co-Authored-By: Claude <noreply@anthropic.com>

* Update locales [skip ci]

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: github-actions <github-actions@github.com>

src/components/input/SearchBox.vue

@@ -1,8 +1,6 @@
 <template>
-  <div
-    class="flex w-full items-center rounded-lg px-2 py-1.5 gap-2 bg-white dark-theme:bg-zinc-800"
-  >
-    <i-lucide:search class="text-neutral" />
+  <div :class="wrapperStyle">
+    <i-lucide:search :class="iconColorStyle" />
     <InputText
       v-model="searchQuery"
       :placeholder="placeHolder || 'Search...'"
@@ -15,10 +13,21 @@
 
 <script setup lang="ts">
 import InputText from 'primevue/inputtext'
-import { defineModel } from 'vue'
+import { computed, defineModel } from 'vue'
 
-const { placeHolder } = defineProps<{
+const { placeHolder, hasBorder = false } = defineProps<{
   placeHolder?: string
+  hasBorder?: boolean
 }>()
 const searchQuery = defineModel<string>('')
+
+const wrapperStyle = computed(() => {
+  return hasBorder
+    ? 'flex w-full items-center rounded gap-2 bg-white dark-theme:bg-zinc-800 p-1 border border-solid border-zinc-200 dark-theme:border-zinc-700'
+    : 'flex w-full items-center rounded px-2 py-1.5 gap-2 bg-white dark-theme:bg-zinc-800'
+})
+
+const iconColorStyle = computed(() => {
+  return !hasBorder ? 'text-neutral' : 'text-zinc-300 dark-theme:text-zinc-700'
+})
 </script>