feat: keep search box in header (#313)

Author: garthdw

app/components/AppHeader.vue

@@ -17,27 +17,48 @@ const { isConnected, npmUser } = useConnector()
 const router = useRouter()
 const route = useRoute()
 
-const searchQuery = ref('')
 const isSearchFocused = ref(false)
 
 const showSearchBar = computed(() => {
-  return route.name !== 'search' && route.name !== 'index'
+  return route.name !== 'index'
 })
 
-const debouncedNavigate = debounce(async () => {
-  const query = searchQuery.value.trim()
-  await router.push({
+// Local input value (updates immediately as user types)
+const searchQuery = ref((route.query.q as string) ?? '')
+
+// Debounced URL update for search query
+const updateUrlQuery = debounce((value: string) => {
+  if (route.name === 'search') {
+    router.replace({ query: { q: value || undefined } })
+    return
+  }
+  if (!value) {
+    return
+  }
+
+  router.push({
     name: 'search',
-    query: query ? { q: query } : undefined,
+    query: {
+      q: value,
+    },
   })
-  // allow time for the navigation to occur before resetting searchQuery
-  setTimeout(() => (searchQuery.value = ''), 1000)
-}, 100)
+}, 250)
 
-async function handleSearchInput() {
-  debouncedNavigate()
-}
+// Watch input and debounce URL updates
+watch(searchQuery, value => {
+  updateUrlQuery(value)
+})
 
+// Sync input with URL when navigating (e.g., back button)
+watch(
+  () => route.query.q,
+  urlQuery => {
+    const value = (urlQuery as string) ?? ''
+    if (searchQuery.value !== value) {
+      searchQuery.value = value
+    }
+  },
+)
 onKeyStroke(',', e => {
   // Don't trigger if user is typing in an input
   const target = e.target as HTMLElement
@@ -74,7 +95,7 @@ onKeyStroke(',', e => {
       <div class="flex-1 flex items-center justify-center gap-4 sm:gap-6">
         <!-- Search bar (shown on all pages except home and search) -->
         <search v-if="showSearchBar" class="hidden sm:block flex-1 max-w-md">
-          <form method="GET" action="/search" class="relative" @submit.prevent="handleSearchInput">
+          <form method="GET" action="/search" class="relative">
             <label for="header-search" class="sr-only">
               {{ $t('search.label') }}
             </label>
@@ -89,13 +110,13 @@ onKeyStroke(',', e => {
 
                 <input
                   id="header-search"
+                  autofocus
                   v-model="searchQuery"
                   type="search"
                   name="q"
                   :placeholder="$t('search.placeholder')"
                   v-bind="noCorrect"
                   class="w-full bg-bg-subtle border border-border rounded-md ps-7 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
-                  @input="handleSearchInput"
                   @focus="isSearchFocused = true"
                   @blur="isSearchFocused = false"
                 />

app/pages/search.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { formatNumber } from '#imports'
 import type { FilterChip, SortOption } from '#shared/types/preferences'
+import { onKeyDown } from '@vueuse/core'
 import { debounce } from 'perfect-debounce'
 import { isValidNewPackageName, checkPackageExists } from '~/utils/package-name'
 import { isPlatformSpecificPackage } from '~/utils/platform-packages'
@@ -18,14 +19,6 @@ const {
   resetColumns,
 } = usePackageListPreferences()
 
-// Local input value (updates immediately as user types)
-const inputValue = ref((route.query.q as string) ?? '')
-
-// Debounced URL update for search query
-const updateUrlQuery = debounce((value: string) => {
-  router.replace({ query: { q: value || undefined } })
-}, 250)
-
 // Debounced URL update for page (less aggressive to avoid too many URL changes)
 const updateUrlPage = debounce((page: number) => {
   router.replace({
@@ -36,37 +29,15 @@ const updateUrlPage = debounce((page: number) => {
   })
 }, 500)
 
-// Watch input and debounce URL updates
-watch(inputValue, value => {
-  updateUrlQuery(value)
-})
-
 // The actual search query (from URL, used for API calls)
 const query = computed(() => (route.query.q as string) ?? '')
 
-// Sync input with URL when navigating (e.g., back button)
-watch(
-  () => route.query.q,
-  urlQuery => {
-    const value = (urlQuery as string) ?? ''
-    if (inputValue.value !== value) {
-      inputValue.value = value
-    }
-  },
-)
-
-// For glow effect
-const searchInputRef = useTemplateRef('searchInputRef')
-const { focused: isSearchFocused } = useFocus(searchInputRef)
-
 const selectedIndex = ref(0)
 const packageListRef = useTemplateRef('packageListRef')
 
 // Track if page just loaded (for hiding "Searching..." during view transition)
 const hasInteracted = ref(false)
 onMounted(() => {
-  // Focus search onMount
-  isSearchFocused.value = true
   // Small delay to let view transition complete
   setTimeout(() => {
     hasInteracted.value = true
@@ -668,50 +639,22 @@ function scrollToSelectedItem() {
   }
 }
 
-function focusSelectedItem() {
-  const suggIdx = toSuggestionIndex(unifiedSelectedIndex.value)
-  const pkgIdx = toPackageIndex(unifiedSelectedIndex.value)
-
-  nextTick(() => {
-    if (suggIdx !== null) {
-      const el = document.querySelector<HTMLElement>(`[data-suggestion-index="${suggIdx}"]`)
-      el?.focus()
-    } else if (pkgIdx !== null) {
-      scrollToSelectedItem()
-      nextTick(() => {
-        const el = document.querySelector<HTMLElement>(`[data-result-index="${pkgIdx}"]`)
-        el?.focus()
-      })
-    }
-  })
-}
-
 function handleResultsKeydown(e: KeyboardEvent) {
   if (totalSelectableCount.value <= 0) return
 
-  const isFromInput = (e.target as HTMLElement).tagName === 'INPUT'
-
   if (e.key === 'ArrowDown') {
     e.preventDefault()
     userHasNavigated.value = true
     unifiedSelectedIndex.value = clampUnifiedIndex(unifiedSelectedIndex.value + 1)
-    if (isFromInput) {
-      scrollToSelectedItem()
-    } else {
-      focusSelectedItem()
-    }
+    scrollToSelectedItem()
     return
   }
 
   if (e.key === 'ArrowUp') {
     e.preventDefault()
     userHasNavigated.value = true
     unifiedSelectedIndex.value = clampUnifiedIndex(unifiedSelectedIndex.value - 1)
-    if (isFromInput) {
-      scrollToSelectedItem()
-    } else {
-      focusSelectedItem()
-    }
+    scrollToSelectedItem()
     return
   }
 
@@ -737,6 +680,8 @@ function handleResultsKeydown(e: KeyboardEvent) {
   }
 }
 
+onKeyDown(['ArrowDown', 'ArrowUp', 'Enter'], handleResultsKeydown)
+
 function handleSuggestionSelect(index: number) {
   // Convert suggestion index to unified index
   unifiedSelectedIndex.value = -(suggestionCount.value - index)
@@ -759,61 +704,9 @@ defineOgImageComponent('Default', {
 
 <template>
   <main class="overflow-x-hidden">
-    <!-- Sticky search header - positioned below AppHeader (h-14 = 56px) -->
-    <header class="sticky top-14 z-40 bg-bg/95 backdrop-blur-sm border-b border-border">
-      <div class="container-sm py-4">
-        <h1 class="font-mono text-xl sm:text-2xl font-medium mb-4">{{ $t('nav.search') }}</h1>
-
-        <search>
-          <form method="GET" action="/search" class="relative" @submit.prevent>
-            <label for="search-input" class="sr-only">{{ $t('search.label') }}</label>
-
-            <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
-              <!-- Subtle glow effect -->
-              <div
-                class="absolute -inset-px rounded-lg bg-gradient-to-r from-fg/0 via-fg/5 to-fg/0 opacity-0 transition-opacity duration-500 blur-sm group-[.is-focused]:opacity-100 motion-reduce:transition-none"
-              />
-
-              <div class="search-box relative flex items-center">
-                <span
-                  class="absolute left-4 text-fg-subtle font-mono text-base pointer-events-none transition-colors duration-200 group-focus-within:text-accent"
-                  aria-hidden="true"
-                >
-                  /
-                </span>
-                <input
-                  id="search-input"
-                  ref="searchInputRef"
-                  v-model="inputValue"
-                  type="search"
-                  name="q"
-                  :placeholder="$t('search.placeholder')"
-                  v-bind="noCorrect"
-                  autofocus
-                  class="w-full max-w-full bg-bg-subtle border border-border rounded-lg pl-8 pr-10 py-3 font-mono text-base text-fg placeholder:text-fg-subtle transition-colors duration-300 focus:border-accent focus-visible:outline-none appearance-none"
-                  @keydown="handleResultsKeydown"
-                />
-                <button
-                  v-show="inputValue"
-                  type="button"
-                  class="absolute right-3 p-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                  :aria-label="$t('search.clear')"
-                  @click="inputValue = ''"
-                >
-                  <span class="i-carbon-close-large block w-3.5 h-3.5" aria-hidden="true" />
-                </button>
-                <!-- Hidden submit button for accessibility (form must have submit button per WCAG) -->
-                <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
-              </div>
-            </div>
-          </form>
-        </search>
-      </div>
-    </header>
-
     <!-- Results area with container padding -->
-    <div class="container-sm pt-20 pb-6">
-      <section v-if="query" :aria-label="$t('search.results')" @keydown="handleResultsKeydown">
+    <div class="container-sm py-6">
+      <section v-if="query" :aria-label="$t('search.results')">
         <!-- Initial loading (only after user interaction, not during view transition) -->
         <LoadingSpinner v-if="showSearching" :text="$t('search.searching')" />
 

tests/interactions.spec.ts

@@ -6,12 +6,11 @@ test.describe('Search Pages', () => {
 
     await expect(page.locator('text=/found \\d+/i')).toBeVisible()
 
-    const searchInput = page.locator('input[type="search"]')
-    await expect(searchInput).toBeFocused()
-
     const firstResult = page.locator('[data-result-index="0"]').first()
     await expect(firstResult).toBeVisible()
 
+    const searchInput = page.locator('input[type="search"]')
+
     // ArrowDown changes visual selection but keeps focus in input
     await page.keyboard.press('ArrowDown')
     await expect(searchInput).toBeFocused()
@@ -35,4 +34,17 @@ test.describe('Search Pages', () => {
     await page.keyboard.press('/')
     await expect(page.locator('input[type="search"]')).toBeFocused()
   })
+
+  test('/settings → search, keeps focus on search input', async ({ page, goto }) => {
+    await goto('/settings', { waitUntil: 'domcontentloaded' })
+
+    const searchInput = page.locator('input[type="search"]')
+    await searchInput.fill('vue')
+
+    await page.waitForLoadState('domcontentloaded')
+
+    await expect(page.locator('text=/found \\d+/i')).toBeVisible()
+
+    await expect(searchInput).toBeFocused()
+  })
 })