fix: missed input parts on quick search (#1394)

Author: alexdln

app/components/Header/SearchBox.vue

@@ -28,8 +28,7 @@ const showSearchBar = computed(() => {
   return route.name !== 'index'
 })
 
-// Local input value (updates immediately as user types)
-const searchQuery = shallowRef(normalizeSearchParam(route.query.q))
+const searchQuery = useGlobalSearchQuery()
 
 // Pages that have their own local filter using ?q
 const pagesWithLocalFilter = new Set(['~username', 'org'])
@@ -75,21 +74,6 @@ 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 handleSubmit() {
   if (pagesWithLocalFilter.has(route.name as string)) {
     router.push({

app/composables/useGlobalSearchQuery.ts

@@ -0,0 +1,16 @@
+import { normalizeSearchParam } from '#shared/utils/url'
+
+export function useGlobalSearchQuery() {
+  const route = useRoute()
+  const searchQuery = useState<string>('search-query', () => normalizeSearchParam(route.query.q))
+
+  // clean search input when navigating away from search page
+  watch(
+    () => route.query.q,
+    urlQuery => {
+      const value = normalizeSearchParam(urlQuery)
+      if (!value) searchQuery.value = ''
+    },
+  )
+  return searchQuery
+}

app/pages/index.vue

@@ -4,7 +4,7 @@ import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks'
 
 const { searchProvider } = useSearchProvider()
 
-const searchQuery = shallowRef('')
+const searchQuery = useGlobalSearchQuery()
 const isSearchFocused = shallowRef(false)
 
 async function search() {

app/pages/search.vue

@@ -38,8 +38,8 @@ 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 = useGlobalSearchQuery()
+const query = computed(() => searchQuery.value)
 
 // Track if page just loaded (for hiding "Searching..." during view transition)
 const hasInteracted = shallowRef(false)