refactor(ui): fetch results on submit instead of on type

app/components/AppHeader.vue

@@ -22,6 +22,20 @@ const isMobile = useIsMobile()
 const isSearchExpandedManually = shallowRef(false)
 const searchBoxRef = useTemplateRef('searchBoxRef')
 
+const { searchQuery, updateSearchQuery } = usePackageSearchQuery()
+
+const router = useRouter()
+function handleSubmitSearch(queryValue: string) {
+  if (queryValue === '') {
+    return
+  }
+
+  router.replace({
+    name: 'search',
+    query: { ...route.query, q: queryValue },
+  })
+}
+
 // On search page, always show search expanded on mobile
 const isOnHomePage = computed(() => route.name === 'index')
 const isOnSearchPage = computed(() => route.name === 'search')
@@ -90,7 +104,7 @@ onKeyStroke(
     <div class="absolute inset-0 bg-bg/80 backdrop-blur-md" />
     <nav
       :aria-label="$t('nav.main_navigation')"
-      class="relative container min-h-14 flex items-center gap-2 z-1"
+      class="relative container min-h-14 flex items-center gap-4 z-1"
       :class="isOnHomePage ? 'justify-end' : 'justify-between'"
     >
       <!-- Mobile: Logo + search button (expands search, doesn't navigate) -->
@@ -130,13 +144,18 @@ onKeyStroke(
         }"
       >
         <!-- Search bar (hidden on mobile unless expanded) -->
-        <HeaderSearchBox
+        <SearchBox
+          v-if="!isOnHomePage"
           ref="searchBoxRef"
-          :inputClass="isSearchExpanded ? 'w-full' : ''"
-          :class="{ 'max-w-md': !isSearchExpanded }"
+          class="max-w-sm"
+          compact
+          :model-value="searchQuery"
+          @update:model-value="updateSearchQuery"
+          @submit="handleSubmitSearch"
           @focus="handleSearchFocus"
           @blur="handleSearchBlur"
         />
+
         <ul
           v-if="!isSearchExpanded && isConnected && npmUser"
           :class="{ hidden: showFullSearch }"

app/components/SearchBox.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+defineProps<{
+  compact?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'submit', searchQuery: string): void
+  (e: 'blur'): void
+  (e: 'focus'): void
+}>()
+
+const searchQuery = defineModel<string>({
+  default: '',
+})
+
+function handleSubmit() {
+  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="handleSubmit">
+      <label for="search-box" 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 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>
+
+          <input
+            id="search-box"
+            ref="inputRef"
+            v-model.trim="searchQuery"
+            type="search"
+            name="q"
+            :placeholder="$t('search.placeholder')"
+            v-bind="noCorrect"
+            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'
+            "
+            @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"
+            :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>

app/composables/npm/useNpmSearch.ts

@@ -42,6 +42,7 @@ export function packumentToSearchResult(
 export interface NpmSearchOptions {
   /** Number of results to fetch */
   size?: number
+  onResponse?: (result: { query: string }) => void
 }
 
 export const emptySearchResponse = {
@@ -99,6 +100,8 @@ export function useNpmSearch(
           size: opts.size ?? 25,
         })
 
+        opts.onResponse?.({ query: q })
+
         if (q !== toValue(query)) {
           return emptySearchResponse
         }
@@ -130,6 +133,8 @@ export function useNpmSearch(
             }),
           ])
 
+          opts.onResponse?.({ query: q })
+
           if (!pkg) {
             return emptySearchResponse
           }
@@ -165,6 +170,8 @@ export function useNpmSearch(
           60,
         )
 
+        opts.onResponse?.({ query: q })
+
         // If query changed/outdated, return empty search response
         if (q !== toValue(query)) {
           return emptySearchResponse

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,
+  }
+}