From 69d1ee8c61f064e74593767369b9ee0269306005 Mon Sep 17 00:00:00 2001
From: Garth de Wet <garthofhearts@gmail.com>
Date: Thu, 29 Jan 2026 17:43:21 +0200
Subject: [PATCH 1/4] feat: keep search box in header

Avoid taking up space for searchbox on search page.

Mainly moved the query string watching from search.vue to AppHeader.vuue

# Conflicts:
#	app/components/AppHeader.vue
#	app/pages/search.vue

# Conflicts:
#	app/components/AppHeader.vue
#	app/pages/search.vue
---
 app/components/AppHeader.vue | 46 ++++++++++++++------
 app/pages/search.vue         | 84 +-----------------------------------
 2 files changed, 34 insertions(+), 96 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 7d30b29fe..c905bad24 100644
--- a/app/components/AppHeader.vue
+++ b/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
@@ -95,7 +116,6 @@ onKeyStroke(',', e => {
                   :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"
                 />
diff --git a/app/pages/search.vue b/app/pages/search.vue
index 1453f3f65..1d893c9ef 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -18,14 +18,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 +28,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
@@ -759,60 +729,8 @@ 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">
+    <div class="container-sm py-6">
       <section v-if="query" :aria-label="$t('search.results')" @keydown="handleResultsKeydown">
         <!-- Initial loading (only after user interaction, not during view transition) -->
         <LoadingSpinner v-if="showSearching" :text="$t('search.searching')" />

From 1218453c2c840d5fc41bfad82186b3a05f65e3f5 Mon Sep 17 00:00:00 2001
From: Garth de Wet <garthofhearts@gmail.com>
Date: Thu, 29 Jan 2026 19:26:17 +0200
Subject: [PATCH 2/4] feat: update tests and fix handling of selected item

Selected item was jumping when scrolling up because of focus.

Hook to the up/down arrows on a document level instead of section level.
---
 app/components/AppHeader.vue |  2 +-
 app/pages/search.vue         | 37 ++++++------------------------------
 tests/interactions.spec.ts   | 20 ++++++++++++++++---
 3 files changed, 24 insertions(+), 35 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index c905bad24..008386e46 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -95,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>
diff --git a/app/pages/search.vue b/app/pages/search.vue
index 1d893c9ef..e55c4321c 100644
--- a/app/pages/search.vue
+++ b/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'
@@ -638,38 +639,14 @@ 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
   }
 
@@ -677,11 +654,7 @@ function handleResultsKeydown(e: KeyboardEvent) {
     e.preventDefault()
     userHasNavigated.value = true
     unifiedSelectedIndex.value = clampUnifiedIndex(unifiedSelectedIndex.value - 1)
-    if (isFromInput) {
-      scrollToSelectedItem()
-    } else {
-      focusSelectedItem()
-    }
+    scrollToSelectedItem()
     return
   }
 
@@ -707,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)
@@ -731,7 +706,7 @@ defineOgImageComponent('Default', {
   <main class="overflow-x-hidden">
     <!-- Results area with container padding -->
     <div class="container-sm py-6">
-      <section v-if="query" :aria-label="$t('search.results')" @keydown="handleResultsKeydown">
+      <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')" />
 
diff --git a/tests/interactions.spec.ts b/tests/interactions.spec.ts
index 7adacd32e..bae7ed32b 100644
--- a/tests/interactions.spec.ts
+++ b/tests/interactions.spec.ts
@@ -6,12 +6,13 @@ 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"]')
+    // manually focus search
+    await searchInput.focus()
+
     // ArrowDown changes visual selection but keeps focus in input
     await page.keyboard.press('ArrowDown')
     await expect(searchInput).toBeFocused()
@@ -35,4 +36,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()
+  })
 })

From 736ac2cb47e2e4384645ccc5b36edf20181f1c7d Mon Sep 17 00:00:00 2001
From: Garth de Wet <garthofhearts@gmail.com>
Date: Thu, 29 Jan 2026 19:56:28 +0200
Subject: [PATCH 3/4] feat: focus search input by default

---
 app/components/AppHeader.vue | 1 +
 tests/interactions.spec.ts   | 2 --
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 008386e46..1b2db2a6c 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -110,6 +110,7 @@ onKeyStroke(',', e => {
 
                 <input
                   id="header-search"
+                  autofocus
                   v-model="searchQuery"
                   type="search"
                   name="q"
diff --git a/tests/interactions.spec.ts b/tests/interactions.spec.ts
index bae7ed32b..f8ab8ed52 100644
--- a/tests/interactions.spec.ts
+++ b/tests/interactions.spec.ts
@@ -10,8 +10,6 @@ test.describe('Search Pages', () => {
     await expect(firstResult).toBeVisible()
 
     const searchInput = page.locator('input[type="search"]')
-    // manually focus search
-    await searchInput.focus()
 
     // ArrowDown changes visual selection but keeps focus in input
     await page.keyboard.press('ArrowDown')

From d2befa54c26b1b609c4bdce053200c4a736eda14 Mon Sep 17 00:00:00 2001
From: Garth de Wet <garthofhearts@gmail.com>
Date: Thu, 29 Jan 2026 22:01:07 +0200
Subject: [PATCH 4/4] feat: move SearchBox to its own component Improve search
 on mobile.

Smaller search box that expands full width on click.
---
 app/components/AppHeader.vue |  98 ++++++---------------------------
 app/components/SearchBox.vue | 102 +++++++++++++++++++++++++++++++++++
 2 files changed, 119 insertions(+), 81 deletions(-)
 create mode 100644 app/components/SearchBox.vue

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 1b2db2a6c..ae779a397 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { debounce } from 'perfect-debounce'
-
 withDefaults(
   defineProps<{
     showLogo?: boolean
@@ -15,50 +13,9 @@ withDefaults(
 const { isConnected, npmUser } = useConnector()
 
 const router = useRouter()
-const route = useRoute()
-
-const isSearchFocused = ref(false)
-
-const showSearchBar = computed(() => {
-  return route.name !== 'index'
-})
-
-// 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: {
-      q: value,
-    },
-  })
-}, 250)
 
-// Watch input and debounce URL updates
-watch(searchQuery, value => {
-  updateUrlQuery(value)
-})
+const showFullSearch = ref(false)
 
-// 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
@@ -78,7 +35,7 @@ onKeyStroke(',', e => {
       class="container h-14 flex items-center justify-start"
     >
       <!-- Start: Logo -->
-      <div class="flex-shrink-0">
+      <div :class="{ 'hidden sm:block': showFullSearch }" class="flex-shrink-0">
         <NuxtLink
           v-if="showLogo"
           to="/"
@@ -92,41 +49,17 @@ onKeyStroke(',', e => {
       </div>
 
       <!-- Center: Search bar + nav items -->
-      <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">
-            <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-focus-within:text-accent z-1"
-                >
-                  /
-                </span>
-
-                <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"
-                  @focus="isSearchFocused = true"
-                  @blur="isSearchFocused = false"
-                />
-                <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
-              </div>
-            </div>
-          </form>
-        </search>
-
-        <ul class="flex items-center gap-4 sm:gap-6 list-none m-0 p-0">
+      <div class="flex-1 flex items-center justify-center md:gap-6 mx-2">
+        <!-- Search bar (shown on all pages except home) -->
+        <SearchBox
+          :inputClass="showFullSearch ? '' : 'max-w[6rem]'"
+          @focus="showFullSearch = true"
+          @blur="showFullSearch = false"
+        />
+        <ul
+          :class="{ 'hidden sm:flex': showFullSearch }"
+          class="flex items-center gap-4 sm:gap-6 list-none m-0 p-0"
+        >
           <!-- Packages dropdown (when connected) -->
           <li v-if="isConnected && npmUser" class="flex items-center">
             <HeaderPackagesDropdown :username="npmUser" />
@@ -140,7 +73,10 @@ onKeyStroke(',', e => {
       </div>
 
       <!-- End: User status + GitHub -->
-      <div class="flex-shrink-0 flex items-center gap-4 sm:gap-6 ms-auto sm:ms-0">
+      <div
+        :class="{ 'hidden sm:flex': showFullSearch }"
+        class="flex-shrink-0 flex items-center gap-4 sm:gap-6 ms-auto sm:ms-0"
+      >
         <NuxtLink
           to="/about"
           class="sm:hidden link-subtle font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
diff --git a/app/components/SearchBox.vue b/app/components/SearchBox.vue
new file mode 100644
index 000000000..ce354da22
--- /dev/null
+++ b/app/components/SearchBox.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { debounce } from 'perfect-debounce'
+
+withDefaults(
+  defineProps<{
+    inputClass?: string
+  }>(),
+  {
+    inputClass: 'inline sm:block',
+  },
+)
+
+const emit = defineEmits(['blur', 'focus'])
+
+const router = useRouter()
+const route = useRoute()
+
+const isSearchFocused = ref(false)
+
+const showSearchBar = computed(() => {
+  return route.name !== 'index'
+})
+
+// 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: {
+      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 => {
+    const value = (urlQuery as string) ?? ''
+    if (searchQuery.value !== value) {
+      searchQuery.value = value
+    }
+  },
+)
+
+function handleSearchBlur() {
+  isSearchFocused.value = false
+  emit('blur')
+}
+function handleSearchFocus() {
+  isSearchFocused.value = true
+  emit('focus')
+}
+</script>
+<template>
+  <search v-if="showSearchBar" :class="'flex-1 sm:max-w-md ' + inputClass">
+    <form method="GET" action="/search" class="relative">
+      <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-focus-within:text-accent z-1"
+          >
+            /
+          </span>
+
+          <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"
+            @focus="handleSearchFocus"
+            @blur="handleSearchBlur"
+          />
+          <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
+        </div>
+      </div>
+    </form>
+  </search>
+</template>