[FEAT] Add search filter to TopRepos widget

[Priyanshu-byte-coder]

Feature request

Users with many repositories need to scroll through a long list in the TopRepos widget to find a specific repo. A simple text filter input would make this much faster.

Proposed solution

Add a small search input at the top of the TopRepos card that client-side filters the displayed list by repo name.

File

src/components/TopRepos.tsx

Implementation hints

const [filter, setFilter] = useState('');
const filtered = repos.filter(r => r.name.toLowerCase().includes(filter.toLowerCase()));

Acceptance criteria

• Input filters repos by name in real-time (no API call needed)
• Input clears on widget re-mount
• Shows a 'No results' message when filter matches nothing
• Input is accessible (has an aria-label)

[YashKrTripathi]

Hi! @Priyanshu-byte-coder  I'm a GSSoC'26 contributor and I'd like to work on this issue. Please assign it to me!

My approach:

**1️⃣ Add Client-Side Filter Input**
- Open `src/components/TopRepos.tsx` and add a small search input at the top of the card
- Manage filter state locally with `useState`:
  ```tsx
  const [filter, setFilter] = useState('');
  const filtered = repos.filter(r => r.name.toLowerCase().includes(filter.toLowerCase()));

• Render filtered instead of the raw repos array so filtering happens instantly without any API calls

2️⃣ Empty State

• When filtered.length === 0 and filter.length > 0, display a clean "No results" message inside the widget body (instead of an empty list)
• Use existing typography/colors so it blends with the widget's design

3️⃣ State Reset on Re-mount

• Since filter state lives inside TopRepos via useState, it naturally resets when the component re-mounts — verified behavior matches the acceptance criteria
• (No extra logic needed beyond clean state isolation)

4️⃣ Accessibility

• Add aria-label="Filter repositories" (or similar) for screen readers
• Add a clear placeholder like "Search repos..." for visual users
• Ensure keyboard accessibility — input is focusable via Tab and works with standard input shortcuts
• Consider adding a small search icon (e.g. 🔍 / Lucide <Search />) prefix for better UX

5️⃣ UI Polish

• Style the input to match the existing widget's design (rounded corners, padding, focus ring)
• Ensure it looks good in both light and dark themes (if applicable)
• Make sure it's responsive across mobile, tablet, and desktop

6️⃣ Verify

• Test real-time filtering with various search terms (case-insensitive matches confirmed)
• Test "No results" message rendering
• Test no regressions to existing widget functionality
• Confirm performance stays smooth even with large repo lists

Scope guarantees:

• Pure client-side enhancement — no API or backend changes
• Small, focused improvement to the TopRepos widget UX

ETA: 1 day. Please assign this to me!

[github-actions]

@YashKrTripathi You already have 2 open issue(s) assigned. Complete those first before picking up more.

[YashKrTripathi]

Hi! I've opened this PR #1929 to add the requested search filtering functionality to the TopRepos widget, fixing issue #1909.

The search is performed purely client-side, making it extremely responsive, and the input includes proper accessibility labels. I also cleaned up some duplicated search input code that was present in the component.

Let me know if you need any adjustments or further styling changes before merging. Thanks!

[github-actions]

✅ Closed as completed!

If DevTrack has been useful, a ⭐ star on the repo helps the project grow and reach more developers.