[FEAT] Add search and filter to GoalTracker widget

[shreyamahesh07-git]

Summary

The GoalTracker widget currently displays all goals in a flat list with no way to search or filter them. Users with many goals have to scroll through everything to find a specific one. Adding a search input and status filter would make goal management significantly more usable.

Problem Statement

As users add more goals over time, the GoalTracker becomes cluttered and hard to navigate. There is no way to:

• Find a specific goal by name quickly
• View only active/in-progress goals
• View only completed goals
• Hide goals that are not relevant right now

Proposed Solution

Add a search input and a status filter dropdown/toggle above the goals list in the GoalTracker widget.

Expected Behaviour

Search:

• Text input above the goals list
• Filters goals in real time as the user types
• Matches against goal title (case-insensitive)
• Shows "No goals match your search" empty state when nothing matches
• Clear (×) button appears when search has text

Filter tabs:

• All — shows every goal (default)
• Active — goals where current < target
• Completed — goals where current >= target

Combined:

• Search and filter work together
• URL does not need to update (in-component state is fine)

UI Mockup

[ 🔍 Search goals... × ]
[ All ] [ Active ] [ Completed ]

Goal 1 ████████░░ 80%
Goal 2 ███░░░░░░░ 30%

Files to Modify

File	Change
src/components/GoalTracker.tsx	Add search input + filter tabs + filtered list logic

Implementation Notes

• Pure React useState — no new libraries needed
• Debounce the search input by 300ms for performance
• Filter logic runs client-side on already-fetched goals array
• Empty state should match the style of other widgets

Acceptance Criteria

• Search input filters goals in real time
• Clear button resets search
• All / Active / Completed filter tabs work correctly
• Search + filter combine correctly
• Empty state shown when no goals match
• No new libraries added

---

I am a GSSoC 2026 contributor and would like to work on this issue. Please assign it to me 🙏

[github-actions]

Thanks for opening your first issue on DevTrack! 🎉

A maintainer will take a look shortly. In the meantime:

• Check the Contributing guide if you are planning to work on this
• Browse Discussions for Q&A and ideas
• Look for good first issue if you want somewhere to start

[tech-dipesh]

/assign gssoc

[Jeshika311]

Hi @shreyamahesh07-git

I would like to work on this issue under GSSoC'26.

I’ve gone through the complete requirements, expected behavior, and implementation notes for the GoalTracker widget. I’m comfortable implementing both the real-time search functionality and status-based filtering while maintaining the current UI consistency and performance.

My implementation approach would include:

• Adding a responsive search input above the goals list.

• Implementing real-time filtering using React state management.

• Matching goal titles in a case-insensitive manner.

• Adding filter tabs for:

  • All goals
  • Active goals
  • Completed goals

• Combining search + filter logic together efficiently.

• Implementing a clear/reset button for the search input.

• Showing a proper empty state message when no goals match the filter/search.

• Maintaining the existing widget styling and component structure.

• Keeping the logic client-side without adding unnecessary libraries.

I can also implement debounced search handling for smoother performance and cleaner user interaction while ensuring the feature integrates properly with the existing GoalTracker component logic.

Additionally, I’ll thoroughly test:

• search behavior,
• filter combinations,
• edge cases,
• responsiveness,
• and UI consistency before submitting the PR.

Please assign this issue to me. I’d love to contribute to this enhancement. Thank you!