Extend Projects Search Component with Category Filter and Unified Sorting Dropdown

Community & Support: [LinkedIn Group](https://www.linkedin.com/groups/14656108/) · [Slack #project-nest](https://owasp.slack.com/archives/project-nest)

Active project leaders: Arkadii Yakovets -- [GitHub](https://github.com/arkid15r/) · [LinkedIn](https://www.linkedin.com/in/arkid15r/) · [Slack](https://owasp.slack.com/team/U060W3NKLTF); Kate Golovanova -- [GitHub](https://github.com/kasya/) · [LinkedIn](https://www.linkedin.com/in/kate-golovanova/) · [Slack](https://owasp.slack.com/team/U07PWB1JZ6Z)

[Contributing](https://github.com/owasp/nest/blob/main/CONTRIBUTING.md) · [Code of Conduct](https://github.com/owasp/nest/blob/main/CODE_OF_CONDUCT.md) · [GSoC Mentors](https://github.com/owasp/nest/blob/main/MENTORS.md)

---

**Description:**

We want to extend the Projects page search component by adding:

* A **category filter dropdown** (on the left of the search input)
* A **sorting dropdown** (on the right of the search input)

Sorting already exists, but it should be refactored into a **holistic, reusable search component** rather than being implemented as a standalone control.

This component must be reusable across:

* The **Projects list page**
* The **Project Health dashboard**

This is a **full-stack task** requiring both frontend and backend changes, and it must support **both Algolia-based search and GraphQL-based search results**. As an option we can consider changing PHD list to be handled by Algolia if it's feasible/justified.

**Requirements:**

* UI / Frontend:

* Add a category filter dropdown to the left of the search input
* Replace the current sorting UI with a unified sorting dropdown on the right
* Refactor the search UI into a reusable component that can be shared between:

* Projects list page
* Project Health dashboard
* Ensure UI states (search, filter, sort) are consistent and reusable
* Maintain visual and UX consistency across both pages

* Backend / API:

* Extend search APIs to support:

* Filtering by category
* Sorting options compatible with existing behavior
* Ensure both search backends are supported:

* Algolia
* GraphQL
* Filtering and sorting must work consistently across both backends

* Behavior:

* Category filter, search query, and sorting must work together
* Changing any of these should update results immediately
* Results must remain consistent between Algolia and GraphQL implementations

**Acceptance Criteria:**

* Category filter dropdown is visible and functional on both pages
* Sorting control is presented as a unified dropdown within the search component
* Search component is reusable and used by:

* Projects list page
* Project Health dashboard
* Backend supports category filtering and sorting for both Algolia and GraphQL
* Combined filtering + sorting + search works correctly
* No regression in existing search or sorting behavior
* UI/UX looks cohesive as a single, holistic search component

**Notes:**

* The goal is to avoid page-specific search implementations
* Prefer a single shared component and shared query/state logic
* Make sure the component is extensible for future filters (e.g., tags, status)

**Are you going to work on implementing this?**

- [ ] Yes
- [x] No