fix

Author: gameroman

app/components/Header/SearchBox.vue

@@ -28,39 +28,23 @@ 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)
+watch(searchQuery, (value) => {
+  if (route.name === 'search') {
+    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)) {
+  (urlQuery) => {
+    if (pagesWithLocalFilter.has(route.name)) {
       return
     }
     const value = normalizeSearchParam(urlQuery)
@@ -80,15 +64,25 @@ function handleSearchFocus() {
 }
 
 function handleSubmit() {
-  if (pagesWithLocalFilter.has(route.name as string)) {
+  const query = searchQuery.value.trim()
+  if (pagesWithLocalFilter.has(route.name)) {
     router.push({
       name: 'search',
-      query: {
-        q: searchQuery.value,
-      },
+      query: { q: query },
     })
-  } else {
+    return
+  }
+
+  if (route.name === 'search') {
     updateUrlQuery.flush()
+    return
+  }
+
+  if (query) {
+    router.push({
+      name: 'search',
+      query: { q: query },
+    })
   }
 }
 

app/pages/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { debounce } from 'perfect-debounce'
 import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks'
 
 const searchQuery = shallowRef('')
@@ -11,18 +10,10 @@ async function search() {
   if (!query) return
   await navigateTo({
     path: '/search',
-    query: query ? { q: query } : undefined,
+    query: { q: query },
   })
-  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'),
@@ -93,7 +84,6 @@ defineOgImageComponent('Default', {
                   :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"
                 />
 
                 <ButtonBase