From c71c6df55aa1577c3c7eea49da16862a03082772 Mon Sep 17 00:00:00 2001
From: YashKrTripathi <yashkr.tripathi@gmail.com>
Date: Wed, 3 Jun 2026 13:30:49 +0530
Subject: [PATCH] feat: add search filter to TopRepos widget (Fixes #1909)

---
 src/components/TopRepos.tsx | 54 +++++++++++++++----------------------
 1 file changed, 21 insertions(+), 33 deletions(-)

diff --git a/src/components/TopRepos.tsx b/src/components/TopRepos.tsx
index 9d0facfc8..8c557a6a6 100644
--- a/src/components/TopRepos.tsx
+++ b/src/components/TopRepos.tsx
@@ -459,29 +459,27 @@ export default function TopRepos() {
         <p className="text-sm text-[var(--muted-foreground)]">No commits in the last {days} days.</p>
       ) : (
       <>
-      {repos.length > 10 && (
-  <div className="relative mb-3">
-    <input
-      type="text"
-      value={searchQuery}
-      onChange={(e) => setSearchQuery(e.target.value)}
-      placeholder="Search repositories…"
-      aria-label="Search repositories"
-      className="w-full rounded-lg border border-[var(--border)] bg-[var(--control)] px-3 py-1.5 pr-10 text-sm text-[var(--card-foreground)] placeholder:text-[var(--muted-foreground)] focus-visible:outline-none focus:border-[var(--accent)]"
-    />
-
-    {searchQuery.length > 0 && (
-      <button
-        type="button"
-        onClick={() => setSearchQuery("")}
-        aria-label="Clear search"
-        className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)] hover:text-[var(--card-foreground)]"
-      >
-        ✕
-      </button>
-    )}
-  </div>
-)}
+        <div className="relative mb-4">
+          <Search className="absolute left-3 top-2.5 h-4 w-4 text-[var(--muted-foreground)]" aria-hidden="true" />
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search repositories…"
+            aria-label="Search repositories by name"
+            className="w-full rounded-lg border border-[var(--border)] bg-[var(--control)] px-9 py-1.5 pr-10 text-sm text-[var(--card-foreground)] placeholder:text-[var(--muted-foreground)] focus-visible:outline-none focus:border-[var(--accent)]"
+          />
+          {searchQuery.length > 0 && (
+            <button
+              type="button"
+              onClick={() => setSearchQuery("")}
+              aria-label="Clear search"
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)] hover:text-[var(--card-foreground)]"
+            >
+              ✕
+            </button>
+          )}
+        </div>
         <div className="flex items-center justify-between text-xs text-[var(--muted-foreground)] mb-2 px-0">
           <button
             type="button"
@@ -506,16 +504,6 @@ export default function TopRepos() {
             </span>
           </button>
         </div>
-        <div className="relative mb-4">
-  <Search className="absolute left-3 top-2.5 h-4 w-4 text-[var(--muted-foreground)]" />
-  <input
-    type="text"
-    value={searchQuery}
-    onChange={(e) => setSearchQuery(e.target.value)}
-    placeholder="Search repositories…"
-    className="w-full rounded-lg border border-[var(--border)] bg-[var(--control)] px-9 py-2 text-sm focus:border-[var(--accent)] focus:outline-none"
-  />
-</div>
         <ul className="space-y-3">
           {filteredRepos.length === 0 ? (
             <p className="text-sm text-[var(--muted-foreground)] py-4 text-center">