From fc08134f321a94ee21f8de59433d6daad8375fab Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Fri, 6 Feb 2026 17:53:52 +0100
Subject: [PATCH 01/16] refactor: create a general search box

---
 app/components/AppHeader.vue        |  36 ++++++--
 app/components/Header/SearchBox.vue | 134 ----------------------------
 app/components/SearchBox.vue        |  98 ++++++++++++++++++++
 app/pages/index.vue                 |  74 +++------------
 4 files changed, 137 insertions(+), 205 deletions(-)
 delete mode 100644 app/components/Header/SearchBox.vue
 create mode 100644 app/components/SearchBox.vue

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index d4dd80d82..d476e5951 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -21,6 +21,26 @@ const isMobile = useIsMobile()
 const isSearchExpandedManually = shallowRef(false)
 const searchBoxRef = useTemplateRef('searchBoxRef')
 
+const searchQuery = shallowRef('')
+watch(
+  () => route.query.q,
+  queryValue => {
+    searchQuery.value = normalizeSearchParam(queryValue)
+  },
+  { immediate: true },
+)
+
+async function handleSearchSubmit() {
+  if (!searchQuery.value) {
+    return
+  }
+
+  await navigateTo({
+    name: 'search',
+    query: { q: searchQuery.value },
+  })
+}
+
 // On search page, always show search expanded on mobile
 const isOnHomePage = computed(() => route.name === 'index')
 const isOnSearchPage = computed(() => route.name === 'search')
@@ -88,7 +108,7 @@ onKeyStroke(
   <header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
     <nav
       :aria-label="$t('nav.main_navigation')"
-      class="container min-h-14 flex items-center gap-2"
+      class="container min-h-14 flex items-center gap-4"
       :class="isOnHomePage ? 'justify-end' : 'justify-between'"
     >
       <!-- Mobile: Logo + search button (expands search, doesn't navigate) -->
@@ -119,18 +139,20 @@ onKeyStroke(
       <span v-else class="hidden sm:block w-1" />
 
       <!-- Center: Search bar + nav items -->
-      <div
-        class="flex-1 flex items-center justify-center md:gap-6"
-        :class="{ 'hidden sm:flex': !isSearchExpanded }"
-      >
+      <div class="flex-1 flex max-w-md md:gap-6" :class="{ 'hidden sm:flex': !isSearchExpanded }">
         <!-- Search bar (hidden on mobile unless expanded) -->
-        <HeaderSearchBox
+        <SearchBox
+          v-if="!isOnHomePage"
           ref="searchBoxRef"
-          :inputClass="isSearchExpanded ? 'w-full' : ''"
+          class="max-w-sm"
           :class="{ 'max-w-md': !isSearchExpanded }"
+          compact
+          v-model:search-query="searchQuery"
+          @submit="handleSearchSubmit"
           @focus="handleSearchFocus"
           @blur="handleSearchBlur"
         />
+
         <ul
           v-if="!isSearchExpanded && isConnected && npmUser"
           :class="{ hidden: showFullSearch }"
diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue
deleted file mode 100644
index b99fa79cb..000000000
--- a/app/components/Header/SearchBox.vue
+++ /dev/null
@@ -1,134 +0,0 @@
-<script setup lang="ts">
-import { debounce } from 'perfect-debounce'
-import { normalizeSearchParam } from '#shared/utils/url'
-
-withDefaults(
-  defineProps<{
-    inputClass?: string
-  }>(),
-  {
-    inputClass: 'inline sm:block',
-  },
-)
-
-const emit = defineEmits(['blur', 'focus'])
-
-const router = useRouter()
-const route = useRoute()
-
-const isSearchFocused = shallowRef(false)
-
-const showSearchBar = computed(() => {
-  return route.name !== 'index'
-})
-
-// Local input value (updates immediately as user types)
-const searchQuery = shallowRef(normalizeSearchParam(route.query.q))
-
-// Pages that have their own local filter using ?q
-const pagesWithLocalFilter = new Set(['~username', 'org'])
-
-// Debounced URL update for search query
-const updateUrlQuery = debounce((value: string) => {
-  // Don't navigate away from pages that use ?q for local filtering
-  if (pagesWithLocalFilter.has(route.name as string)) {
-    return
-  }
-  if (route.name === 'search') {
-    router.replace({ query: { q: value || undefined } })
-    return
-  }
-  if (!value) {
-    return
-  }
-
-  router.push({
-    name: 'search',
-    query: {
-      q: value,
-    },
-  })
-}, 250)
-
-// 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 => {
-    // Don't sync from pages that use ?q for local filtering
-    if (pagesWithLocalFilter.has(route.name as string)) {
-      return
-    }
-    const value = normalizeSearchParam(urlQuery)
-    if (searchQuery.value !== value) {
-      searchQuery.value = value
-    }
-  },
-)
-
-function handleSearchBlur() {
-  isSearchFocused.value = false
-  emit('blur')
-}
-function handleSearchFocus() {
-  isSearchFocused.value = true
-  emit('focus')
-}
-
-function handleSubmit() {
-  if (pagesWithLocalFilter.has(route.name as string)) {
-    router.push({
-      name: 'search',
-      query: {
-        q: searchQuery.value,
-      },
-    })
-  } else {
-    updateUrlQuery.flush()
-  }
-}
-
-// Expose focus method for parent components
-const inputRef = useTemplateRef('inputRef')
-function focus() {
-  inputRef.value?.focus()
-}
-defineExpose({ focus })
-</script>
-<template>
-  <search v-if="showSearchBar" :class="'flex-1 sm:max-w-md ' + inputClass">
-    <form method="GET" action="/search" class="relative" @submit.prevent="handleSubmit">
-      <label for="header-search" class="sr-only">
-        {{ $t('search.label') }}
-      </label>
-
-      <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
-        <div class="search-box relative flex items-center">
-          <span
-            class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"
-          >
-            /
-          </span>
-
-          <input
-            id="header-search"
-            ref="inputRef"
-            v-model="searchQuery"
-            type="search"
-            name="q"
-            :placeholder="$t('search.placeholder')"
-            v-bind="noCorrect"
-            class="w-full min-w-25 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,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
-            @focus="handleSearchFocus"
-            @blur="handleSearchBlur"
-          />
-          <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
-        </div>
-      </div>
-    </form>
-  </search>
-</template>
diff --git a/app/components/SearchBox.vue b/app/components/SearchBox.vue
new file mode 100644
index 000000000..14ee20752
--- /dev/null
+++ b/app/components/SearchBox.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+defineProps<{
+  searchQuery: string
+  compact?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'submit', searchQuery: string): void
+  (e: 'blur'): void
+  (e: 'focus'): void
+}>()
+
+const searchQuery = defineModel<string>('searchQuery', {
+  default: '',
+})
+
+function handleSubmit(): void {
+  emit('submit', searchQuery.value)
+}
+
+function handleBlur() {
+  emit('blur')
+}
+function handleFocus() {
+  emit('focus')
+}
+
+// Expose focus method for parent components
+const inputRef = useTemplateRef('inputRef')
+function focus() {
+  inputRef.value?.focus()
+}
+
+defineExpose({
+  focus,
+})
+</script>
+
+<template>
+  <search class="w-full @container">
+    <form method="GET" action="/search" class="relative" @submit.prevent.trim="handleSubmit">
+      <label for="home-search" class="sr-only">
+        {{ $t('search.label') }}
+      </label>
+
+      <div class="relative group">
+        <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"
+        />
+
+        <div class="search-box relative flex items-center">
+          <span
+            class="absolute inset-is-4 text-fg-subtle font-mono text-lg pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"
+          >
+            /
+          </span>
+
+          <input
+            id="home-search"
+            ref="inputRef"
+            v-model.trim="searchQuery"
+            type="search"
+            name="q"
+            autofocus
+            :placeholder="$t('search.placeholder')"
+            v-bind="noCorrect"
+            class="w-full bg-bg-subtle border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 motion-reduce:transition-none hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
+            :class="
+              compact
+                ? 'ps-7 pe-3 py-1.5 rounded-md text-sm'
+                : 'ps-8 pe-24 h-14 py-4 rounded-xl text-base'
+            "
+            @blur="handleBlur"
+            @focus="handleFocus"
+          />
+
+          <button
+            type="submit"
+            class="absolute hidden @xs:block group inset-ie-2.5 font-mono text-sm transition-[background-color,transform] duration-200 active:scale-95 focus-visible:outline-accent/70"
+            :class="
+              compact
+                ? 'px-1.5 py-0.5 @md:ps-4 @md:pe-4'
+                : 'rounded-md px-2.5 @md:ps-4 @md:pe-4 py-2 text-bg bg-fg/90 hover:bg-fg! group-focus-within:bg-fg/80'
+            "
+          >
+            <span
+              class="inline-block i-carbon:search align-middle w-4 h-4 @md:me-2"
+              aria-hidden="true"
+            ></span>
+            <span class="sr-only @md:not-sr-only">
+              {{ $t('search.button') }}
+            </span>
+          </button>
+        </div>
+      </div>
+    </form>
+  </search>
+</template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 31e29aaf1..1f33a935a 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,28 +1,18 @@
 <script setup lang="ts">
-import { debounce } from 'perfect-debounce'
 import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks'
 
 const searchQuery = shallowRef('')
-const searchInputRef = useTemplateRef('searchInputRef')
-const { focused: isSearchFocused } = useFocus(searchInputRef)
+async function handleSearchSubmit() {
+  if (!searchQuery.value) {
+    return
+  }
 
-async function search() {
-  const query = searchQuery.value.trim()
-  if (!query) return
   await navigateTo({
-    path: '/search',
-    query: query ? { q: query } : undefined,
+    name: 'search',
+    query: { q: searchQuery.value },
   })
-  const newQuery = searchQuery.value.trim()
-  if (newQuery !== query) {
-    await search()
-  }
 }
 
-const handleInput = isTouchDevice()
-  ? search
-  : debounce(search, 250, { leading: true, trailing: true })
-
 useSeoMeta({
   title: () => $t('seo.home.title'),
   ogTitle: () => $t('seo.home.title'),
@@ -62,56 +52,12 @@ defineOgImageComponent('Default', {
           {{ $t('tagline') }}
         </p>
 
-        <search
+        <SearchBox
           class="w-full max-w-xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
           style="animation-delay: 0.2s"
-        >
-          <form method="GET" action="/search" class="relative" @submit.prevent.trim="search">
-            <label for="home-search" class="sr-only">
-              {{ $t('search.label') }}
-            </label>
-
-            <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
-              <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"
-              />
-
-              <div class="search-box relative flex items-center">
-                <span
-                  class="absolute inset-is-4 text-fg-subtle font-mono text-lg pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"
-                >
-                  /
-                </span>
-
-                <input
-                  id="home-search"
-                  ref="searchInputRef"
-                  v-model="searchQuery"
-                  type="search"
-                  name="q"
-                  autofocus
-                  :placeholder="$t('search.placeholder')"
-                  v-bind="noCorrect"
-                  class="w-full bg-bg-subtle border border-border rounded-xl ps-8 pe-24 h-14 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 motion-reduce:transition-none hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
-                  @input="handleInput"
-                />
-
-                <button
-                  type="submit"
-                  class="absolute group inset-ie-2.5 px-2.5 sm:ps-4 sm:pe-4 py-2 font-mono text-sm text-bg bg-fg/90 rounded-md transition-[background-color,transform] duration-200 hover:bg-fg! group-focus-within:bg-fg/80 active:scale-95 focus-visible:outline-accent/70"
-                >
-                  <span
-                    class="inline-block i-carbon:search align-middle w-4 h-4 sm:me-2"
-                    aria-hidden="true"
-                  ></span>
-                  <span class="sr-only sm:not-sr-only">
-                    {{ $t('search.button') }}
-                  </span>
-                </button>
-              </div>
-            </div>
-          </form>
-        </search>
+          v-model:search-query="searchQuery"
+          @submit="handleSearchSubmit"
+        />
 
         <BuildEnvironment class="mt-4" />
       </header>

From 8f40b1d6fb15821751081566b796a301ab68876c Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Fri, 6 Feb 2026 18:31:34 +0100
Subject: [PATCH 02/16] test: update import

---
 test/nuxt/a11y.spec.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index ad07e9664..ef860dc82 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -101,7 +101,7 @@ import {
   FilterPanel,
   HeaderAccountMenu,
   HeaderConnectorModal,
-  HeaderSearchBox,
+  SearchBox,
   LicenseDisplay,
   LoadingSpinner,
   PackageProvenanceSection,
@@ -2077,9 +2077,9 @@ describe('component accessibility audits', () => {
     })
   })
 
-  describe('HeaderSearchBox', () => {
+  describe('SearchBox', () => {
     it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(HeaderSearchBox)
+      const component = await mountSuspended(SearchBox)
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
@@ -2274,7 +2274,7 @@ describe('background theme accessibility', () => {
   const components = [
     { name: 'AppHeader', mount: () => mountSuspended(AppHeader) },
     { name: 'AppFooter', mount: () => mountSuspended(AppFooter) },
-    { name: 'HeaderSearchBox', mount: () => mountSuspended(HeaderSearchBox) },
+    { name: 'SearchBox', mount: () => mountSuspended(SearchBox) },
     {
       name: 'LoadingSpinner',
       mount: () => mountSuspended(LoadingSpinner, { props: { text: 'Loading...' } }),

From e8ac1e16b6606bb99d8eb8bc11017072d056c361 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Fri, 6 Feb 2026 18:39:16 +0100
Subject: [PATCH 03/16] fix: remove repeated class

---
 app/pages/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 1f33a935a..7636485c0 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -53,7 +53,7 @@ defineOgImageComponent('Default', {
         </p>
 
         <SearchBox
-          class="w-full max-w-xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
+          class="max-w-xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
           style="animation-delay: 0.2s"
           v-model:search-query="searchQuery"
           @submit="handleSearchSubmit"

From ef5bec457ba1376bafad59f62dee221a822e0f09 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Fri, 6 Feb 2026 18:43:41 +0100
Subject: [PATCH 04/16] refactor: use model-value

---
 app/components/AppHeader.vue | 2 +-
 app/components/SearchBox.vue | 3 +--
 app/pages/index.vue          | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index d476e5951..b2285271a 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -147,7 +147,7 @@ onKeyStroke(
           class="max-w-sm"
           :class="{ 'max-w-md': !isSearchExpanded }"
           compact
-          v-model:search-query="searchQuery"
+          v-model="searchQuery"
           @submit="handleSearchSubmit"
           @focus="handleSearchFocus"
           @blur="handleSearchBlur"
diff --git a/app/components/SearchBox.vue b/app/components/SearchBox.vue
index 14ee20752..bcb65220e 100644
--- a/app/components/SearchBox.vue
+++ b/app/components/SearchBox.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineProps<{
-  searchQuery: string
   compact?: boolean
 }>()
 
@@ -10,7 +9,7 @@ const emit = defineEmits<{
   (e: 'focus'): void
 }>()
 
-const searchQuery = defineModel<string>('searchQuery', {
+const searchQuery = defineModel<string>({
   default: '',
 })
 
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 7636485c0..b6735389c 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -55,7 +55,7 @@ defineOgImageComponent('Default', {
         <SearchBox
           class="max-w-xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
           style="animation-delay: 0.2s"
-          v-model:search-query="searchQuery"
+          v-model="searchQuery"
           @submit="handleSearchSubmit"
         />
 

From a772aa3e88c81558ab3a444815c622049a0d6188 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Fri, 6 Feb 2026 18:47:11 +0100
Subject: [PATCH 05/16] fix: remove trim modifier from submit

---
 app/components/SearchBox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/SearchBox.vue b/app/components/SearchBox.vue
index bcb65220e..9fab4da55 100644
--- a/app/components/SearchBox.vue
+++ b/app/components/SearchBox.vue
@@ -37,7 +37,7 @@ defineExpose({
 
 <template>
   <search class="w-full @container">
-    <form method="GET" action="/search" class="relative" @submit.prevent.trim="handleSubmit">
+    <form method="GET" action="/search" class="relative" @submit.prevent="handleSubmit">
       <label for="home-search" class="sr-only">
         {{ $t('search.label') }}
       </label>

From 079185665b92fdf4f7cd075bade0e55670925b47 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Fri, 6 Feb 2026 23:37:18 +0100
Subject: [PATCH 06/16] test: update

---
 app/components/SearchBox.vue  |  7 +++----
 test/e2e/interactions.spec.ts | 28 ++++++++++++----------------
 2 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/app/components/SearchBox.vue b/app/components/SearchBox.vue
index 9fab4da55..6c39f9fa2 100644
--- a/app/components/SearchBox.vue
+++ b/app/components/SearchBox.vue
@@ -13,7 +13,7 @@ const searchQuery = defineModel<string>({
   default: '',
 })
 
-function handleSubmit(): void {
+function handleSubmit() {
   emit('submit', searchQuery.value)
 }
 
@@ -38,7 +38,7 @@ defineExpose({
 <template>
   <search class="w-full @container">
     <form method="GET" action="/search" class="relative" @submit.prevent="handleSubmit">
-      <label for="home-search" class="sr-only">
+      <label for="search-box" class="sr-only">
         {{ $t('search.label') }}
       </label>
 
@@ -55,12 +55,11 @@ defineExpose({
           </span>
 
           <input
-            id="home-search"
+            id="search-box"
             ref="inputRef"
             v-model.trim="searchQuery"
             type="search"
             name="q"
-            autofocus
             :placeholder="$t('search.placeholder')"
             v-bind="noCorrect"
             class="w-full bg-bg-subtle border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 motion-reduce:transition-none hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
diff --git a/test/e2e/interactions.spec.ts b/test/e2e/interactions.spec.ts
index f40403267..5292cfdc5 100644
--- a/test/e2e/interactions.spec.ts
+++ b/test/e2e/interactions.spec.ts
@@ -88,24 +88,19 @@ test.describe('Search Pages', () => {
   test('/ (homepage) → search, keeps focus on search input', async ({ page, goto }) => {
     await goto('/', { waitUntil: 'hydration' })
 
-    const homeSearchInput = page.locator('#home-search')
-    await homeSearchInput.click()
+    const searchInput = page.locator('#search-box')
+    await searchInput.click()
     await page.keyboard.type('vue')
+    await page.keyboard.press('Enter')
 
-    // Wait for navigation to /search (debounce is 250ms)
     await expect(page).toHaveURL(/\/search/, { timeout: 10000 })
 
     await expect(page.locator('[data-result-index="0"]').first()).toBeVisible({
       timeout: 15000,
     })
 
-    // Home search input should be gone (we're on /search now)
-    await expect(homeSearchInput).not.toBeVisible()
-
-    // Header search input should now exist and be focused
-    const headerSearchInput = page.locator('#header-search')
-    await expect(headerSearchInput).toBeVisible()
-    await expect(headerSearchInput).toBeFocused()
+    await expect(searchInput).toBeVisible()
+    await expect(searchInput).toBeFocused()
   })
 
   test('/settings → search, keeps focus on search input', async ({ page, goto }) => {
@@ -116,6 +111,7 @@ test.describe('Search Pages', () => {
 
     await searchInput.click()
     await searchInput.fill('vue')
+    await page.keyboard.press('Enter')
 
     await expect(page).toHaveURL(/\/search/, { timeout: 10000 })
 
@@ -123,7 +119,7 @@ test.describe('Search Pages', () => {
       timeout: 15000,
     })
 
-    const headerSearchInput = page.locator('#header-search')
+    const headerSearchInput = page.locator('#search-box')
     await expect(headerSearchInput).toBeFocused()
   })
 })
@@ -167,15 +163,15 @@ test.describe('Keyboard Shortcuts', () => {
   test('"c" does not navigate when search input is focused', async ({ page, goto }) => {
     await goto('/settings', { waitUntil: 'hydration' })
 
-    const searchInput = page.locator('#header-search')
+    const searchInput = page.locator('#search-box')
     await searchInput.focus()
     await expect(searchInput).toBeFocused()
 
     await page.keyboard.press('c')
 
-    // Should still be on settings, not navigated to compare
+    // // Should still be on settings, not navigated to compare
     await expect(page).toHaveURL(/\/settings/)
-    // The 'c' should have been typed into the input
+    // // The 'c' should have been typed into the input
     await expect(searchInput).toHaveValue('c')
   })
 
@@ -208,7 +204,7 @@ test.describe('Keyboard Shortcuts', () => {
   test('"," does not navigate when any modifier key is pressed', async ({ page, goto }) => {
     await goto('/settings', { waitUntil: 'hydration' })
 
-    const searchInput = page.locator('#header-search')
+    const searchInput = page.locator('#search-box')
     await searchInput.focus()
     await expect(searchInput).toBeFocused()
 
@@ -227,7 +223,7 @@ test.describe('Keyboard Shortcuts', () => {
   test('"," does not navigate when search input is focused', async ({ page, goto }) => {
     await goto('/compare', { waitUntil: 'hydration' })
 
-    const searchInput = page.locator('#header-search')
+    const searchInput = page.locator('#search-box')
     await searchInput.focus()
     await expect(searchInput).toBeFocused()
 

From c91e729ec1ae495dfaf2978e392d998028d4a760 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Sat, 7 Feb 2026 00:03:36 +0100
Subject: [PATCH 07/16] fix: text size

---
 app/components/SearchBox.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/components/SearchBox.vue b/app/components/SearchBox.vue
index 6c39f9fa2..40887a2a6 100644
--- a/app/components/SearchBox.vue
+++ b/app/components/SearchBox.vue
@@ -49,7 +49,8 @@ defineExpose({
 
         <div class="search-box relative flex items-center">
           <span
-            class="absolute inset-is-4 text-fg-subtle font-mono text-lg pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"
+            class="absolute text-fg-subtle font-mono pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"
+            :class="compact ? 'inset-is-3 text-sm' : 'inset-is-4 text-xl'"
           >
             /
           </span>
@@ -62,11 +63,9 @@ defineExpose({
             name="q"
             :placeholder="$t('search.placeholder')"
             v-bind="noCorrect"
-            class="w-full bg-bg-subtle border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 motion-reduce:transition-none hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
+            class="w-full bg-bg-subtle border border-border text-base font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 motion-reduce:transition-none hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
             :class="
-              compact
-                ? 'ps-7 pe-3 py-1.5 rounded-md text-sm'
-                : 'ps-8 pe-24 h-14 py-4 rounded-xl text-base'
+              compact ? 'ps-7 pe-3 py-1.5 rounded-md text-sm!' : 'ps-8 pe-24 h-14 py-4 rounded-xl'
             "
             @blur="handleBlur"
             @focus="handleFocus"

From c7b2d2a1f2524c73890bbb91bc0fb834d4bc2c24 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Sat, 7 Feb 2026 00:12:13 +0100
Subject: [PATCH 08/16] refactor: handle class switch

---
 app/components/AppHeader.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 9c2e0d112..12ebcc0ac 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -145,8 +145,7 @@ onKeyStroke(
         <SearchBox
           v-if="!isOnHomePage"
           ref="searchBoxRef"
-          class="max-w-sm"
-          :class="{ 'max-w-md': !isSearchExpanded }"
+          :class="isSearchExpanded ? 'max-w-md' : 'max-w-sm'"
           compact
           v-model="searchQuery"
           @submit="handleSearchSubmit"

From 97861a149e1d183403cd543735183426fd7640af Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Sat, 7 Feb 2026 00:22:45 +0100
Subject: [PATCH 09/16] refactor: adjust sizes

---
 app/components/AppHeader.vue | 2 +-
 app/components/SearchBox.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 12ebcc0ac..9395fe8e7 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -145,7 +145,7 @@ onKeyStroke(
         <SearchBox
           v-if="!isOnHomePage"
           ref="searchBoxRef"
-          :class="isSearchExpanded ? 'max-w-md' : 'max-w-sm'"
+          class="max-w-sm"
           compact
           v-model="searchQuery"
           @submit="handleSearchSubmit"
diff --git a/app/components/SearchBox.vue b/app/components/SearchBox.vue
index 40887a2a6..d43bc70df 100644
--- a/app/components/SearchBox.vue
+++ b/app/components/SearchBox.vue
@@ -73,7 +73,7 @@ defineExpose({
 
           <button
             type="submit"
-            class="absolute hidden @xs:block group inset-ie-2.5 font-mono text-sm transition-[background-color,transform] duration-200 active:scale-95 focus-visible:outline-accent/70"
+            class="absolute hidden @xs:block group inset-ie-2.5 font-mono text-sm transition-[background-color,transform] duration-200 active:scale-95"
             :class="
               compact
                 ? 'px-1.5 py-0.5 @md:ps-4 @md:pe-4'

From e2b8a216d9c83f2f21a4eddbc8d829e633779246 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Sat, 7 Feb 2026 10:38:18 +0100
Subject: [PATCH 10/16] refactor: remove navigate to exact on enter

---
 app/pages/search.vue | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/app/pages/search.vue b/app/pages/search.vue
index 85868990b..9e8e097ed 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -573,24 +573,6 @@ watch(displayResults, results => {
 })
 
 function handleResultsKeydown(e: KeyboardEvent) {
-  // If the active element is an input, navigate to exact match or wait for results
-  if (e.key === 'Enter' && document.activeElement?.tagName === 'INPUT') {
-    // Get value directly from input (not from route query, which may be debounced)
-    const inputValue = (document.activeElement as HTMLInputElement).value.trim()
-    if (!inputValue) return
-
-    // Check if first result matches the input value exactly
-    const firstResult = displayResults.value[0]
-    if (firstResult?.package.name === inputValue) {
-      pendingEnterQuery.value = null
-      return navigateToPackage(firstResult.package.name)
-    }
-
-    // No match yet - store input value, watcher will handle navigation when results arrive
-    pendingEnterQuery.value = inputValue
-    return
-  }
-
   if (totalSelectableCount.value <= 0) return
 
   const elements = getFocusableElements()

From 29a84e2237945543d49dbae2b3ac905342fe5edb Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Sat, 7 Feb 2026 16:36:28 +0100
Subject: [PATCH 11/16] refactor: optimize search on update

---
 app/components/AppHeader.vue | 32 +++++++++++++++++---------------
 app/pages/search.vue         | 18 ++++++++++++++++++
 2 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 9395fe8e7..bcaaaebb5 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { debounce } from 'perfect-debounce'
 import { isEditableElement } from '~/utils/input'
 
 withDefaults(
@@ -16,30 +17,31 @@ const showFullSearch = shallowRef(false)
 const showMobileMenu = shallowRef(false)
 
 // On mobile, clicking logo+search button expands search
-const route = useRoute()
 const isMobile = useIsMobile()
 const isSearchExpandedManually = shallowRef(false)
 const searchBoxRef = useTemplateRef('searchBoxRef')
 
-const searchQuery = shallowRef('')
+const route = useRoute()
+const searchQuery = shallowRef<string>(normalizeSearchParam(route.query.q))
+
 watch(
   () => route.query.q,
   queryValue => {
-    searchQuery.value = normalizeSearchParam(queryValue)
+    if (queryValue !== searchQuery.value) {
+      searchQuery.value = normalizeSearchParam(queryValue)
+    }
   },
-  { immediate: true },
 )
 
-async function handleSearchSubmit() {
-  if (!searchQuery.value) {
-    return
+const router = useRouter()
+const onSearchQueryUpdate = debounce((newSearchQuery: string) => {
+  if (newSearchQuery !== searchQuery.value) {
+    router.replace({
+      name: 'search',
+      query: { q: newSearchQuery === '' ? undefined : newSearchQuery },
+    })
   }
-
-  await navigateTo({
-    name: 'search',
-    query: { q: searchQuery.value },
-  })
-}
+}, 500)
 
 // On search page, always show search expanded on mobile
 const isOnHomePage = computed(() => route.name === 'index')
@@ -147,8 +149,8 @@ onKeyStroke(
           ref="searchBoxRef"
           class="max-w-sm"
           compact
-          v-model="searchQuery"
-          @submit="handleSearchSubmit"
+          :model-value="searchQuery"
+          @update:model-value="onSearchQueryUpdate"
           @focus="handleSearchFocus"
           @blur="handleSearchBlur"
         />
diff --git a/app/pages/search.vue b/app/pages/search.vue
index 9e8e097ed..85868990b 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -573,6 +573,24 @@ watch(displayResults, results => {
 })
 
 function handleResultsKeydown(e: KeyboardEvent) {
+  // If the active element is an input, navigate to exact match or wait for results
+  if (e.key === 'Enter' && document.activeElement?.tagName === 'INPUT') {
+    // Get value directly from input (not from route query, which may be debounced)
+    const inputValue = (document.activeElement as HTMLInputElement).value.trim()
+    if (!inputValue) return
+
+    // Check if first result matches the input value exactly
+    const firstResult = displayResults.value[0]
+    if (firstResult?.package.name === inputValue) {
+      pendingEnterQuery.value = null
+      return navigateToPackage(firstResult.package.name)
+    }
+
+    // No match yet - store input value, watcher will handle navigation when results arrive
+    pendingEnterQuery.value = inputValue
+    return
+  }
+
   if (totalSelectableCount.value <= 0) return
 
   const elements = getFocusableElements()

From d4a3281ae1d1a853cc28f058f6feffcb5348f6d2 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Sun, 8 Feb 2026 15:54:24 +0100
Subject: [PATCH 12/16] Revert "refactor: optimize search on update"

This reverts commit 29a84e2237945543d49dbae2b3ac905342fe5edb.
---
 app/components/AppHeader.vue | 32 +++++++++++++++-----------------
 app/pages/search.vue         | 18 ------------------
 2 files changed, 15 insertions(+), 35 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index bcaaaebb5..9395fe8e7 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { debounce } from 'perfect-debounce'
 import { isEditableElement } from '~/utils/input'
 
 withDefaults(
@@ -17,31 +16,30 @@ const showFullSearch = shallowRef(false)
 const showMobileMenu = shallowRef(false)
 
 // On mobile, clicking logo+search button expands search
+const route = useRoute()
 const isMobile = useIsMobile()
 const isSearchExpandedManually = shallowRef(false)
 const searchBoxRef = useTemplateRef('searchBoxRef')
 
-const route = useRoute()
-const searchQuery = shallowRef<string>(normalizeSearchParam(route.query.q))
-
+const searchQuery = shallowRef('')
 watch(
   () => route.query.q,
   queryValue => {
-    if (queryValue !== searchQuery.value) {
-      searchQuery.value = normalizeSearchParam(queryValue)
-    }
+    searchQuery.value = normalizeSearchParam(queryValue)
   },
+  { immediate: true },
 )
 
-const router = useRouter()
-const onSearchQueryUpdate = debounce((newSearchQuery: string) => {
-  if (newSearchQuery !== searchQuery.value) {
-    router.replace({
-      name: 'search',
-      query: { q: newSearchQuery === '' ? undefined : newSearchQuery },
-    })
+async function handleSearchSubmit() {
+  if (!searchQuery.value) {
+    return
   }
-}, 500)
+
+  await navigateTo({
+    name: 'search',
+    query: { q: searchQuery.value },
+  })
+}
 
 // On search page, always show search expanded on mobile
 const isOnHomePage = computed(() => route.name === 'index')
@@ -149,8 +147,8 @@ onKeyStroke(
           ref="searchBoxRef"
           class="max-w-sm"
           compact
-          :model-value="searchQuery"
-          @update:model-value="onSearchQueryUpdate"
+          v-model="searchQuery"
+          @submit="handleSearchSubmit"
           @focus="handleSearchFocus"
           @blur="handleSearchBlur"
         />
diff --git a/app/pages/search.vue b/app/pages/search.vue
index 85868990b..9e8e097ed 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -573,24 +573,6 @@ watch(displayResults, results => {
 })
 
 function handleResultsKeydown(e: KeyboardEvent) {
-  // If the active element is an input, navigate to exact match or wait for results
-  if (e.key === 'Enter' && document.activeElement?.tagName === 'INPUT') {
-    // Get value directly from input (not from route query, which may be debounced)
-    const inputValue = (document.activeElement as HTMLInputElement).value.trim()
-    if (!inputValue) return
-
-    // Check if first result matches the input value exactly
-    const firstResult = displayResults.value[0]
-    if (firstResult?.package.name === inputValue) {
-      pendingEnterQuery.value = null
-      return navigateToPackage(firstResult.package.name)
-    }
-
-    // No match yet - store input value, watcher will handle navigation when results arrive
-    pendingEnterQuery.value = inputValue
-    return
-  }
-
   if (totalSelectableCount.value <= 0) return
 
   const elements = getFocusableElements()

From cc69dafa06595626f32cc5383cddfab420246bbc Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Sun, 8 Feb 2026 20:40:55 +0100
Subject: [PATCH 13/16] feat: update url on success

---
 app/components/AppHeader.vue             | 23 +++++++++--------------
 app/composables/npm/useNpmSearch.ts      |  3 +++
 app/composables/usePackageSearchQuery.ts | 21 +++++++++++++++++++++
 app/pages/search.vue                     |  9 +++++++--
 4 files changed, 40 insertions(+), 16 deletions(-)
 create mode 100644 app/composables/usePackageSearchQuery.ts

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index efd0d3f60..ed3cb2dae 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -22,23 +22,17 @@ const isMobile = useIsMobile()
 const isSearchExpandedManually = shallowRef(false)
 const searchBoxRef = useTemplateRef('searchBoxRef')
 
-const searchQuery = shallowRef('')
-watch(
-  () => route.query.q,
-  queryValue => {
-    searchQuery.value = normalizeSearchParam(queryValue)
-  },
-  { immediate: true },
-)
+const { searchQuery, updateSearchQuery } = usePackageSearchQuery()
 
-async function handleSearchSubmit() {
-  if (!searchQuery.value) {
+const router = useRouter()
+function handleSubmitSearch() {
+  if (searchQuery.value === '') {
     return
   }
 
-  await navigateTo({
+  router.replace({
     name: 'search',
-    query: { q: searchQuery.value },
+    query: { ...route.query, q: searchQuery.value },
   })
 }
 
@@ -148,8 +142,9 @@ onKeyStroke(
           ref="searchBoxRef"
           class="max-w-sm"
           compact
-          v-model="searchQuery"
-          @submit="handleSearchSubmit"
+          :model-value="searchQuery"
+          @update:model-value="updateSearchQuery"
+          @submit="handleSubmitSearch"
           @focus="handleSearchFocus"
           @blur="handleSearchBlur"
         />
diff --git a/app/composables/npm/useNpmSearch.ts b/app/composables/npm/useNpmSearch.ts
index af62c2a0a..e625ae8a8 100644
--- a/app/composables/npm/useNpmSearch.ts
+++ b/app/composables/npm/useNpmSearch.ts
@@ -41,6 +41,7 @@ export function packumentToSearchResult(
 export interface NpmSearchOptions {
   /** Number of results to fetch */
   size?: number
+  onSuccess?: (result: { query: string }) => void
 }
 
 export const emptySearchResponse = {
@@ -151,6 +152,8 @@ export function useNpmSearch(
         // Success - clear rate limit flag
         isRateLimited.value = false
 
+        opts.onSuccess?.({ query: q })
+
         return { ...response, isStale }
       } catch (error: unknown) {
         // Detect rate limit errors. npm's 429 response doesn't include CORS headers,
diff --git a/app/composables/usePackageSearchQuery.ts b/app/composables/usePackageSearchQuery.ts
new file mode 100644
index 000000000..c301c1077
--- /dev/null
+++ b/app/composables/usePackageSearchQuery.ts
@@ -0,0 +1,21 @@
+import { debounce } from 'perfect-debounce'
+
+export function usePackageSearchQuery() {
+  const searchQuery = useState<string>('package_search_query', () => '')
+
+  const route = useRoute()
+  onMounted(() => {
+    if (route.query.q) {
+      searchQuery.value = normalizeSearchParam(route.query.q)
+    }
+  })
+
+  const updateSearchQuery = debounce((newSearchQuery: string) => {
+    searchQuery.value = newSearchQuery
+  }, 400)
+
+  return {
+    searchQuery,
+    updateSearchQuery,
+  }
+}
diff --git a/app/pages/search.vue b/app/pages/search.vue
index c89bcf273..09d45ac9a 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -29,8 +29,7 @@ const updateUrlPage = debounce((page: number) => {
   })
 }, 500)
 
-// The actual search query (from URL, used for API calls)
-const query = computed(() => normalizeSearchParam(route.query.q))
+const { searchQuery: query } = usePackageSearchQuery()
 
 // Track if page just loaded (for hiding "Searching..." during view transition)
 const hasInteracted = shallowRef(false)
@@ -76,6 +75,12 @@ const {
 } = useNpmSearch(query, () => ({
   size: requestedSize.value,
   incremental: true,
+  onSuccess: data => {
+    router.replace({
+      name: 'search',
+      query: { ...route.query, q: data.query },
+    })
+  },
 }))
 
 // Results to display (directly from incremental search)

From 3176d58e9039be7cfb6f048f0145e1683b6fe1f6 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Sun, 8 Feb 2026 22:04:32 +0100
Subject: [PATCH 14/16] refactor: add success callback

---
 app/composables/npm/useNpmSearch.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/composables/npm/useNpmSearch.ts b/app/composables/npm/useNpmSearch.ts
index cad89e5ed..e5dade927 100644
--- a/app/composables/npm/useNpmSearch.ts
+++ b/app/composables/npm/useNpmSearch.ts
@@ -100,6 +100,8 @@ export function useNpmSearch(
           size: opts.size ?? 25,
         })
 
+        opts.onSuccess?.({ query: q })
+
         if (q !== toValue(query)) {
           return emptySearchResponse
         }
@@ -131,6 +133,8 @@ export function useNpmSearch(
             }),
           ])
 
+          opts.onSuccess?.({ query: q })
+
           if (!pkg) {
             return emptySearchResponse
           }
@@ -166,6 +170,8 @@ export function useNpmSearch(
           60,
         )
 
+        opts.onSuccess?.({ query: q })
+
         // If query changed/outdated, return empty search response
         if (q !== toValue(query)) {
           return emptySearchResponse
@@ -181,8 +187,6 @@ export function useNpmSearch(
         // Success - clear rate limit flag
         isRateLimited.value = false
 
-        opts.onSuccess?.({ query: q })
-
         return { ...response, isStale }
       } catch (error: unknown) {
         // Detect rate limit errors. npm's 429 response doesn't include CORS headers,

From 6cc780c354d7644ac8a7e8ab301ba0eca4e0cd23 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Sun, 8 Feb 2026 22:08:42 +0100
Subject: [PATCH 15/16] refactor: change callback name

---
 app/composables/npm/useNpmSearch.ts | 8 ++++----
 app/pages/search.vue                | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/composables/npm/useNpmSearch.ts b/app/composables/npm/useNpmSearch.ts
index e5dade927..a79795335 100644
--- a/app/composables/npm/useNpmSearch.ts
+++ b/app/composables/npm/useNpmSearch.ts
@@ -42,7 +42,7 @@ export function packumentToSearchResult(
 export interface NpmSearchOptions {
   /** Number of results to fetch */
   size?: number
-  onSuccess?: (result: { query: string }) => void
+  onResponse?: (result: { query: string }) => void
 }
 
 export const emptySearchResponse = {
@@ -100,7 +100,7 @@ export function useNpmSearch(
           size: opts.size ?? 25,
         })
 
-        opts.onSuccess?.({ query: q })
+        opts.onResponse?.({ query: q })
 
         if (q !== toValue(query)) {
           return emptySearchResponse
@@ -133,7 +133,7 @@ export function useNpmSearch(
             }),
           ])
 
-          opts.onSuccess?.({ query: q })
+          opts.onResponse?.({ query: q })
 
           if (!pkg) {
             return emptySearchResponse
@@ -170,7 +170,7 @@ export function useNpmSearch(
           60,
         )
 
-        opts.onSuccess?.({ query: q })
+        opts.onResponse?.({ query: q })
 
         // If query changed/outdated, return empty search response
         if (q !== toValue(query)) {
diff --git a/app/pages/search.vue b/app/pages/search.vue
index cfeb48112..9e2d766fa 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -193,7 +193,7 @@ const {
   isRateLimited,
 } = useNpmSearch(query, () => ({
   size: requestedSize.value,
-  onSuccess: data => {
+  onResponse: data => {
     router.replace({
       name: 'search',
       query: { ...route.query, q: data.query },

From 6c285e39feb55daa14661198a2288c268f8e224d Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Mon, 9 Feb 2026 10:41:42 +0100
Subject: [PATCH 16/16] refactor: use submitted query value

---
 app/components/AppHeader.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index e5f4ad627..d8698ff33 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -25,14 +25,14 @@ const searchBoxRef = useTemplateRef('searchBoxRef')
 const { searchQuery, updateSearchQuery } = usePackageSearchQuery()
 
 const router = useRouter()
-function handleSubmitSearch() {
-  if (searchQuery.value === '') {
+function handleSubmitSearch(queryValue: string) {
+  if (queryValue === '') {
     return
   }
 
   router.replace({
     name: 'search',
-    query: { ...route.query, q: searchQuery.value },
+    query: { ...route.query, q: queryValue },
   })
 }