Implement clickable flag buttons to filter records without updating search term

[basiratkareem]

In this update, when a flag is clicked, the filter is applied immediately to update the displayed records based on selected flag value.

The flag value is not added to search input field and the search input field is cleared upon flag selection.

[basiratkareem]

Hi @svrnm I have made the changes as discussed in this PR. I await your feedback. Thank you.

[svrnm]

a few inline comments.

Your code does not work as expected, when I click on "native" what I see are not all the items with the "native" flag set, but it still searches for "native" in the text of the element.

There is now an easy solution for you and one that is more complicated. The easy one is that you follow the example of the recently introduced tags: instead of having buttons you add a link that just sets the flag, e.g. <a href="/ecosystem/registry?flag={{ flagName }}" class="badge rounded-pill text-bg-danger text-white" title="..." ...>...

The more complicated solution would require you to update the ?flag= in the URL and then applies those changes. What I mean is that clicking that "native" or "deprecated" on an item should behave as if I click on "Flags > Deprecated" or "Flags > Native" in the search bar above, i.e. the elements in the red circles in the screenshot below should behave the same:

[svrnm]

Can you remove the empty lines in registrySearch.js? Otherwise it looks good to me.

[basiratkareem]

Can you remove the empty lines in registrySearch.js? Otherwise it looks good to me.

Suggested changes have been committed. I am glad to hear that it looks good. Thank you

[svrnm]

ah, one more thing!