fix(search): resolve persistent keyword highlight in card list

Author: RYGRIT

app/composables/useStructuredFilters.ts

@@ -118,22 +118,36 @@ export function useStructuredFilters(options: UseStructuredFiltersOptions) {
   const { t } = useI18n()
 
   const searchQuery = shallowRef(normalizeSearchParam(route.query.q))
+
+  // Filter state - must be declared before the watcher that uses it
+  const filters = ref<StructuredFilters>({
+    ...DEFAULT_FILTERS,
+    ...initialFilters,
+  })
+
+  // Watch route query changes and sync filter state
   watch(
     () => route.query.q,
     urlQuery => {
       const value = normalizeSearchParam(urlQuery)
       if (searchQuery.value !== value) {
         searchQuery.value = value
       }
+
+      // Sync filters with URL
+      // When URL changes (e.g. from search input or navigation),
+      // we need to update our local filter state to match
+      const parsed = parseSearchOperators(value)
+
+      filters.value.text = parsed.text ?? ''
+      filters.value.keywords = [...(parsed.keywords ?? [])]
+
+      // Note: We intentionally don't reset other filters (security, downloadRange, etc.)
+      // as those are not typically driven by the search query string structure
     },
+    { immediate: true },
   )
 
-  // Filter state
-  const filters = ref<StructuredFilters>({
-    ...DEFAULT_FILTERS,
-    ...initialFilters,
-  })
-
   // Sort state
   const sortOption = shallowRef<SortOption>(initialSort ?? 'updated-desc')
 

test/nuxt/composables/useStructuredFilters.spec.ts

@@ -185,3 +185,43 @@ describe('hasSearchOperators', () => {
     expect(hasSearchOperators({ name: [], keywords: [] })).toBe(false)
   })
 })
+
+describe('keyword clearing scenarios', () => {
+  it('returns keywords when kw: operator is present', () => {
+    const result = parseSearchOperators('test kw:react')
+    expect(result.keywords).toEqual(['react'])
+    expect(result.text).toBe('test')
+  })
+
+  it('returns undefined keywords when kw: operator is removed', () => {
+    const result = parseSearchOperators('test')
+    expect(result.keywords).toBeUndefined()
+    expect(result.text).toBe('test')
+  })
+
+  it('handles transition from keyword to no keyword', () => {
+    // Simulate the state transition when user removes keyword from search
+    const withKeyword = parseSearchOperators('test kw:react')
+    expect(withKeyword.keywords).toEqual(['react'])
+
+    const withoutKeyword = parseSearchOperators('test')
+    expect(withoutKeyword.keywords).toBeUndefined()
+
+    // This is what useStructuredFilters does in the watcher:
+    // filters.value.keywords = [...(parsed.keywords ?? [])]
+    const updatedKeywords = [...(withoutKeyword.keywords ?? [])]
+    expect(updatedKeywords).toEqual([])
+  })
+
+  it('returns empty keywords array after nullish coalescing', () => {
+    // Verify the exact logic used in useStructuredFilters watcher
+    const testCases = ['', 'test', 'some search query', 'name:package', 'desc:something']
+
+    for (const query of testCases) {
+      const parsed = parseSearchOperators(query)
+      // This is the exact line from useStructuredFilters.ts:
+      const keywords = [...(parsed.keywords ?? [])]
+      expect(keywords).toEqual([])
+    }
+  })
+})