feat: add clear button in search input (#1895)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Willow (GHOST) <git@willow.sh>
Co-authored-by: Willow (GHOST) <ghostdevbusiness@gmail.com>
Co-authored-by: Nathan Knowler <nathan@knowler.dev>

Author: 4 people

app/components/Header/SearchBox.vue

@@ -17,11 +17,17 @@ const showSearchBar = computed(() => {
 })
 
 const { model: searchQuery, startSearch } = useGlobalSearch('header')
+const hasSearchQuery = computed(() => searchQuery.value.trim().length > 0)
 
 function handleSubmit() {
   startSearch()
 }
 
+function clearSearch() {
+  searchQuery.value = ''
+  inputRef.value?.focus()
+}
+
 // Expose focus method for parent components
 const inputRef = useTemplateRef('inputRef')
 function focus() {
@@ -52,11 +58,21 @@ defineExpose({ focus })
             name="q"
             :placeholder="$t('search.placeholder')"
             no-correct
-            class="w-full min-w-25 ps-7"
+            class="w-full min-w-25 ps-7 pe-8"
             @focus="isSearchFocused = true"
             @blur="isSearchFocused = false"
             size="small"
           />
+          <button
+            v-if="hasSearchQuery"
+            type="button"
+            class="absolute inset-ie-2 h-6 w-6 items-center justify-center rounded text-fg-muted hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent group-focus-within:flex group-hover:inline-flex hidden"
+            @click="clearSearch"
+            aria-hidden="true"
+            tabindex="-1"
+          >
+            <span class="i-lucide:circle-x h-4 w-4" />
+          </button>
           <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
         </div>
       </div>