fix(ui): add close functionality for search input

Adds multiple ways to dismiss the expanded mobile search on subpages:
- Click outside the header to close
- Press Escape key to close
- Click the X close button

Fixes #1881

Author: epifaniofrancisco

app/components/AppHeader.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { onClickOutside } from '@vueuse/core'
 import { LinkBase } from '#components'
 import type { NavigationConfig, NavigationConfigWithGroups } from '~/types'
 import { isEditableElement } from '~/utils/input'
@@ -143,6 +144,7 @@ const route = useRoute()
 const isMobile = useIsMobile()
 const isSearchExpandedManually = shallowRef(false)
 const searchBoxRef = useTemplateRef('searchBoxRef')
+const headerRef = useTemplateRef('headerRef')
 
 // On search page, always show search expanded on mobile
 const isOnHomePage = computed(() => route.name === 'index')
@@ -156,6 +158,21 @@ function expandMobileSearch() {
   })
 }
 
+function collapseMobileSearch() {
+  if (!isMobile.value) return
+  if (isOnSearchPage.value) return
+  isSearchExpandedManually.value = false
+  if (document.activeElement instanceof HTMLElement) {
+    document.activeElement.blur()
+  }
+}
+
+onClickOutside(headerRef, () => {
+  if (isMobile.value && isSearchExpanded.value && !isOnSearchPage.value) {
+    collapseMobileSearch()
+  }
+})
+
 watch(
   isOnSearchPage,
   visible => {
@@ -171,13 +188,6 @@ watch(
 
 function handleSearchBlur() {
   showFullSearch.value = false
-  // Collapse expanded search on mobile after blur (with delay for click handling)
-  // But don't collapse if we're on the search page
-  if (isMobile.value && !isOnSearchPage.value) {
-    setTimeout(() => {
-      isSearchExpandedManually.value = false
-    }, 150)
-  }
 }
 
 function handleSearchFocus() {
@@ -200,10 +210,22 @@ onKeyStroke(
   },
   { dedupe: true },
 )
+
+onKeyStroke(
+  e =>
+    isKeyWithoutModifiers(e, 'Escape') &&
+    isMobile.value &&
+    isSearchExpanded.value &&
+    !isOnSearchPage.value,
+  e => {
+    e.preventDefault()
+    collapseMobileSearch()
+  },
+)
 </script>
 
 <template>
-  <header class="sticky top-0 z-50 border-b border-border">
+  <header ref="headerRef" class="sticky top-0 z-50 border-b border-border">
     <div class="absolute inset-0 bg-bg/80 backdrop-blur-md" />
     <nav
       :aria-label="$t('nav.main_navigation')"
@@ -301,15 +323,25 @@ onKeyStroke(
 
       <!-- Mobile: Search button (expands search) -->
       <ButtonBase
+        v-if="!isSearchExpanded && !isOnHomePage"
         type="button"
         class="sm:hidden ms-auto"
         :aria-label="$t('nav.tap_to_search')"
-        :aria-expanded="showMobileMenu"
+        :aria-expanded="isSearchExpanded"
         @click="expandMobileSearch"
-        v-if="!isSearchExpanded && !isOnHomePage"
         classicon="i-lucide:search"
       />
 
+      <!-- Mobile: Close search button (collapses search) -->
+      <ButtonBase
+        v-if="isSearchExpanded && !isOnSearchPage"
+        type="button"
+        class="sm:hidden flex-shrink-0"
+        :aria-label="$t('nav.close_search')"
+        @click="collapseMobileSearch"
+        classicon="i-lucide:x"
+      />
+
       <!-- Mobile: Menu button (always visible, click to open menu) -->
       <ButtonBase
         type="button"

i18n/locales/en.json

@@ -83,7 +83,8 @@
     "mobile_menu": "Navigation menu",
     "open_menu": "Open menu",
     "links": "Links",
-    "tap_to_search": "Tap to search"
+    "tap_to_search": "Tap to search",
+    "close_search": "Close search"
   },
   "blog": {
     "title": "Blog",

i18n/schema.json

@@ -255,6 +255,9 @@
         },
         "tap_to_search": {
           "type": "string"
+        },
+        "close_search": {
+          "type": "string"
         }
       },
       "additionalProperties": false