Improve search bar & filtering UI

[jessiejalca]

Description

There are some inconsistencies and awkward spacing in the search bar and filter's UI. There are some screenshots below of the bugs I'd fix, but I'd also recommend making some improvements in accessibility. The color contrast is pretty low and the keyboard navigation isn't great. If it's alright, I'd love to work on a solution for these improvements.

Screenshots

Suggested updates

• [x] Move filters beneath search bar for a more predictable layout and space for a longer search string
• [x] Fix filter list layout (i.e. give the popup list more horizontal space)
• [x] Use brand colors to provide more color contrast for accessibility
• [x] Provide visual feedback for keyboard navigation
• [x] Provide some kind of indication that a filter has been selected
• [x] Add a "quick clear" button

If approved, I'd love to be assigned this issue.

[swve]

Hey @jessiejalca, great finds and thanks for offering to help with this!

I’m excited to have another designer’s perspective on it. I’m on board with all your suggested updates and can’t wait to see how it all comes together visually. I’ve assigned the issue to you!

[jessiejalca]

Hey @swve, I've made most of the updates, but I noticed that the filter dropdowns were pretty repetitive and can probably have its own component. Where should I put that kind of component? And under the ui folder, there's the dropdown-menu.tsx file with some components, but they all seem unused. Any idea what those are for?

[MukhteshPendem]

"Guys, I found an issue. When I select 'Java' in the dropdown for languages, it also shows projects tagged with 'JavaScript.' Can anyone confirm this?"

[jessiejalca]

@MukhteshPendem Good catch! I couldn't really tell while I was working on it since there were no projects on the docker database, but looking at the actual website, I do see that happening.

Somewhat related, it would probably be nice to add the tags to the project cards from the list, instead of having to click on it to see (probably would be great for debugging this issue too), especially since filters don't seem to persist when returning from a project page (though I think would be another nice feature to add).

@swve do you want me to work on one or some of those improvements?

[swve]

Hey @jessiejalca sorry for replying late, hectic week.

The dropdown-menu.tsx file is actually unused code. I left it there while experimenting with shad/cn, but it’s not in use, I'll be reviewing your PR in a bit.

Adding tags on the card is a good idea, but it might visually overload the cards. Maybe we could implement it in a more subtle, hidden way. The saved filters idea is fantastic! This could be easily achieved with local storage to retain the user's last filter settings—go ahead with it!

Hey @MukhteshPendem, pretty embarrassing bug! The irony is real—I’m always bothered when people mix up Java and JavaScript and now I end up doing it myself lol. I'll work on it shouldn't take time and i'll update you guys here, thanks for finding this bug!

[jessiejalca]

@swve No problem. I'll start tackling the saved filters, then see if I can brainstorm a way to show the tags without being too much. Thanks for the feedback!