Search bar UX/UI improvements (#35)

* style(search): Separate search input & filters

REASON
Adjust for a more predictable layout and space for a longer search
string.

CHANGES
- Move filters below search input within their own div container
- Adjust border radius to better complement new layout

* style(search): Improve filter buttons UX

REASON
The drop shadows didn't provide enough contrast for accessibility, and
the buttons could use more visual feedback.

SOLUTION
- Change drop shadow to gray border for drop-downs and green border for
  Hacktoberfest toggle
- Change border color to purple on hover and when the dropdown is active

* style(search): Provide more filter button feedback

REASON
Current feedback is a bit inconsistent: Hacktoberfest button doesn't
give hover feedback, though the other filters do.

SOLUTION
- Use the light green color for Hacktoberfest button hover effect
- Use a light purple color for the other filters when their modals are
  active

* style(search): Make filter text darker on hover

REASON
Provide more visual feedback and offer more color contrast, especially
when there is a colored background on the button.

SOLUTION
- Add a darker text style on hover for each filter
- Persist darker text when filter modal is open for colored background

* fix(search): Allow filter dropdowns to fit content width

REASON
Filter options were squashed into a width that maxed at the button's
width. This caused some of the longer options to take up more virtual
space in the small window and throw off the layout.

SOLUTION
- Set the min width for each filter container to the maximum content

* docs: Update  occurrences of Group filters called Tags in code

* docs: Update  occurrences of Group filters called Tags in code

* style(search): Update filter color feedback to match brand

REASON
Use more contrast and eye-catching colors, and make it easier to see
what's already been selected.

SOLUTION
- Change the hover background to light purple
- Persist hover background for selected filters

* feat(search): Highlight filter button when an option is selected

* style: Visually space out selections in filter dropdown

* style(search): Improve filter buttons UX

REASON
The drop shadows didn't provide enough contrast for accessibility, and
the buttons could use more visual feedback.

SOLUTION
- Change drop shadow to gray border for drop-downs and green border for
  Hacktoberfest toggle
- Change border color to purple on hover and when the dropdown is active

style(search): Provide more filter button feedback

REASON
Current feedback is a bit inconsistent: Hacktoberfest button doesn't
give hover feedback, though the other filters do.

SOLUTION
- Use the light green color for Hacktoberfest button hover effect
- Use a light purple color for the other filters when their modals are
  active

style(search): Make filter text darker on hover

REASON
Provide more visual feedback and offer more color contrast, especially
when there is a colored background on the button.

SOLUTION
- Add a darker text style on hover for each filter
- Persist darker text when filter modal is open for colored background

* fix(search): Allow filter dropdowns to fit content width

REASON
Filter options were squashed into a width that maxed at the button's
width. This caused some of the longer options to take up more virtual
space in the small window and throw off the layout.

SOLUTION
- Set the min width for each filter container to the maximum content

docs: Update  occurrences of Group filters called Tags in code

* style(search): Update filter color feedback to match brand

REASON
Use more contrast and eye-catching colors, and make it easier to see
what's already been selected.

SOLUTION
- Change the hover background to light purple
- Persist hover background for selected filters

* feat(search): Highlight filter button when an option is selected

* style: Visually space out selections in filter dropdown

* Add a issues counter in the issue tab tittle

* Generalize badge component

* feat: use turbopack for the dev server

Turbopack is ready for development https://areweturboyet.com/

* feat(edit-project): add edit project page

* feat: Skip dropdown focus unless open

* feat: List selected filters & quickly toggle them off

feat: Add Clear All button to quickly remove all selected filters

* feat: Make selected filters tabbable

* style: Adjust spacing around selected filters

refactor: Adjust code formatting

* feat: Clean up selected filter chip labels by using option labels

style: Add emoji icon to selected filter chip labels

* style: Add transition to filter buttons for smoother animation

* feat: Use local storage to persist filter selections

* remove profile link to prevent 404 error

* feat: upgrade packages

---------

Co-authored-by: Rogerio Bordignon <[email protected]>
Co-authored-by: swve <[email protected]>
Co-authored-by: The Anh Nguyen <[email protected]>
Co-authored-by: Muhammad-Owais-Warsi <[email protected]>

.gitignore

@@ -27,10 +27,12 @@ yarn-error.log*
 
 # local env files
 .env*.local
+supabase
+.vscode
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.ts