feat: fix and improve keywords search and navigation

Author: alexdln

app/composables/useStructuredFilters.ts

@@ -113,8 +113,21 @@ function matchesSecurity(pkg: NpmSearchResult, security: SecurityFilter): boolea
  *
  */
 export function useStructuredFilters(options: UseStructuredFiltersOptions) {
+  const route = useRoute()
+  const router = useRouter()
   const { packages, initialFilters, initialSort } = options
 
+  const searchQuery = shallowRef(normalizeSearchParam(route.query.q))
+  watch(
+    () => route.query.q,
+    urlQuery => {
+      const value = normalizeSearchParam(urlQuery)
+      if (searchQuery.value !== value) {
+        searchQuery.value = value
+      }
+    },
+  )
+
   // Filter state
   const filters = ref<StructuredFilters>({
     ...DEFAULT_FILTERS,
@@ -366,11 +379,17 @@ export function useStructuredFilters(options: UseStructuredFiltersOptions) {
   function addKeyword(keyword: string) {
     if (!filters.value.keywords.includes(keyword)) {
       filters.value.keywords = [...filters.value.keywords, keyword]
+      const newQ = searchQuery.value
+        ? `${searchQuery.value.trim()} keyword:${keyword}`
+        : `keyword:${keyword}`
+      router.replace({ query: { ...route.query, q: newQ } })
     }
   }
 
   function removeKeyword(keyword: string) {
     filters.value.keywords = filters.value.keywords.filter(k => k !== keyword)
+    const newQ = searchQuery.value.replace(new RegExp(`keyword:${keyword}($| )`, 'g'), '').trim()
+    router.replace({ query: { ...route.query, q: newQ || undefined } })
   }
 
   function toggleKeyword(keyword: string) {

app/pages/@[org].vue

@@ -52,7 +52,7 @@ const {
 } = useStructuredFilters({
   packages,
   initialFilters: {
-    text: normalizeSearchParam(route.query.q),
+    ...parseSearchOperators(normalizeSearchParam(route.query.q)),
   },
   initialSort: (normalizeSearchParam(route.query.sort) as SortOption) ?? 'updated-desc',
 })

app/pages/search.vue

@@ -142,6 +142,9 @@ const {
   clearAllFilters,
 } = useStructuredFilters({
   packages: resultsArray,
+  initialFilters: {
+    ...parseSearchOperators(normalizeSearchParam(route.query.q)),
+  },
   initialSort: 'relevance-desc', // Default to search relevance
 })