fix: reinstate reference page filter with search by title and desc.

[Anshumancanrock]

Problem

The search/filter input on the reference page was rendered but non-functional. The component was never hydrated on the client, so typing into it did nothing.

Fixes: #1401

What this PR does

• Makes the reference filter functional again. Typing a keyword now filters entries in real-time across all categories and subcategories.
• Search matches against both entry titles and descriptions (case-insensitive).
• Added a clear button so users can quickly reset the filter.
• Shows a "No Results" message when nothing matches instead of just showing a blank page.

Testing

Built and tested locally across all reference categories. Filter matches, clear button, and empty state all work as expected.

[Anshumancanrock]

hii @ksen0 , This PR is up for review, please take a look.

[ksen0]

Hi @Anshumancanrock thanks for working on this, it's got some false positives at the moment - by description, what is expected is that the filter filters based on the title and the short description (@limzykenneth please correct me if I've misunderstood the goal though):

Also I think only if possible without adding much more lines of code filtering by category title would also be good, ie display the whole category if filter keyword matches.

[Anshumancanrock]

Hi @ksen0 , Thanks for catching! Fixed both:

The filter was matching against the full HTML description instead of the short one-line description shown on the page. Now it uses getOneLineDescription() so only title + visible description are matched.

[Anshumancanrock]

Also added category/subcategory name matching, so searching "typog" now shows all of Typography, "2D Primitives" shows that whole section, etc.

[Nwakaego-Ego]

Hi @Anshumancanrock, thank you for working on this. I tested this locally, and here is what I found.

What works well
Filter correctly matches entry titles and visible descriptions, Kit's false positive issue from the first review is fixed. Category-level matching works correctly. The clear button and "No Results" message both work as expected.

Suggested issues to address
The previous implementation used Filter by keyword as the translation key. This key existed in all 5 language files (en, es, hi, ko, zh-Hans) before the filter was removed in #1377. This PR introduces a new key name Filter and only adds it to en.yaml, leaving the other language files untouched. This means users on the Spanish, Hindi, Korean, or Chinese reference page will see the English word Filter as the placeholder text instead of a translation in their own language.
I would suggest restoring the original key name Filter by keyword to stay consistent with how the codebase already does it. For the missing translations in the other language files, I would suggest a separate issue to track this.

Here is how they were translated in PR #1377 before they were removed:
es.yaml - Filtrar por palabra clave
hi.yaml - कीवर्ड द्वारा फ़िल्टर करें
ko.yaml - 키워드로 필터링
zh-Hans.yaml - 按关键字筛选

cc @ksen0 @doradocodes would love your thoughts on this.

[ksen0]

Thanks @Nwakaego-Ego ! Good catch on the localization, @Anshumancanrock do you mind adding the strings back based on the link/comment above? Thank you

[Anshumancanrock]

@Nwakaego-Ego @ksen0 Thanks for the review! Good catch on the translation key. I've restored the original Filter by keyword key name and added back the translations for all 5 languages (es, hi, ko, zh-Hans) using the strings from before #1377. Should be good to go now!

[ksen0]

Hi @Anshumancanrock sorry to keep going back and forth! But the fact that this is a bit of a subtle feature is the reason it was removed before it could be implemented well! So thank you for the patience. @Nwakaego-Ego thanks for your review, please also include more subtle and weird tests as you keep testing this- same reason as above.

In addition to above tests, I tried the string "sin." In case when there is:

• word match
• function name (or I guess section/etc names) match

then partial substring matches should be excluded.

Currently MANY are shown because "sin" is a substring of "since" "single" and "using", which are common words. (I am not trying to be difficult, I just didn't think of it before 😅 )

@Anshumancanrock if you could include all the different tests listed here as unit tests that would be amazing.

[ksen0]

Hi @Anshumancanrock are you still working on this one? Let me know if you prefer for someone else to complete this one! Please ping if you're still on it by ~July 11th, otherwise we'll continue the work directly. Thanks again for all your work on it already.

[Nwakaego-Ego]

Hi @Anshumancanrock, just checking in. Please let us know if you are still working on this or if you need any help.

[Anshumancanrock]

Hi @ksen0 @Nwakaego-Ego , Yes, I am working on the issue and will push the changes shortly.

[Anshumancanrock]

Hi @ksen0, thanks for the detailed feedback.

I've reworked the matching so partial substrings no longer flood the results. It now does two passes:

Strict pass: exact function/section name matches + whole-word description matches.
Loose pass: substring fallback, but only if the strict pass finds nothing.

So now when there's a precise match, it ignores partial substrings like you described:

sin returns sin() (and anything with the actual word "sin" in the description), but no longer matches "using", "since", "single", or "asin".
sin. gets normalised to sin, so trailing punctuation works as expected.
Prefix searches still work via the fallback (e.g. typog brings up the whole Typography section, circ brings up circle()).

I also added unit tests for all the cases from this thread : sin/sin. substring stuff, exact name matches, prefix fallbacks, category/subcategory matches, whole-word descriptions, and case-insensitivity. 14 new tests, all green, full suite passing.

One quick question: in the fallback pass I kept substring matching on descriptions too, since it only triggers when nothing better matches. I thought "show something relevant" is better than showing nothing, but happy to limit it to names if you prefer.