Add leaderboard search functionality (#43)

Author: Yashaswini-K-P

frontend/leaderboard.html

@@ -39,6 +39,18 @@ <h1 class="page-title">Leaderboard</h1>
                 <button class="tab" data-tab="daily">Daily</button>
             </div>
 
+
+
+           <div class="search-container">
+                <input
+                type="text"
+                id="leaderboard-search"
+                class="search-input"
+                placeholder="./search_by_name_or_leetcode_id"
+                autocomplete="off"
+                >
+            </div>
+
             <div class="leaderboard">
                 <div class="leaderboard-header">
                     <div>Rank</div>
@@ -94,13 +106,21 @@ <h1 class="page-title">Leaderboard</h1>
                 });
             });
 
+            const searchInput = document.getElementById('leaderboard-search');
+
+            searchInput.addEventListener('input', (e) => {
+                currentSearchTerm = e.target.value.toLowerCase().trim();
+                applyFiltersAndRender();
+            });
+
             fetchLeaderboardData();
         });
 
         const leaderboardData = {};
         let currentDisplayLimit = 0;
         let activeDatasetType = 'overall';
         let fetchMoreClicks = 0;
+        let currentSearchTerm = '';
 
         function getInitialLimit() {
             return window.innerWidth <= 768 ? 12 : 25;
@@ -177,7 +197,30 @@ <h1 class="page-title">Leaderboard</h1>
                 document.getElementById('next-sync-time').style.color = "var(--red)";
             }
 
-            setActiveTab('overall');
+            applyFiltersAndRender();
+        }
+
+        function applyFiltersAndRender() {
+            if (currentDisplayLimit === 0) {
+                currentDisplayLimit = getInitialLimit();
+            }
+            if (!leaderboardData[activeDatasetType]) return;
+
+            const originalData = leaderboardData[activeDatasetType];
+
+            const rankedData = originalData.map((user, index) => ({
+                ...user,
+                originalRank: index + 1
+            }));
+
+            const filteredData = rankedData.filter(user => {
+                return (
+                    user.name.toLowerCase().includes(currentSearchTerm) ||
+                    user.id.toLowerCase().includes(currentSearchTerm)
+                );
+            });
+
+            renderLeaderboard(filteredData);
         }
 
         function getRankTag(rank) {
@@ -196,10 +239,33 @@ <h1 class="page-title">Leaderboard</h1>
             body.innerHTML = '';
             mobileCards.innerHTML = '';
 
-            const displayData = data.slice(0, currentDisplayLimit);
+            const isSearching = currentSearchTerm.length > 0;
+
+            const displayData = isSearching
+                ? data
+                : data.slice(0, currentDisplayLimit);
+
+                if (displayData.length === 0) {
+                    body.innerHTML = `
+                        <div class="no-results">
+                            [SYS]: NO_MATCHING_USERS_FOUND
+                        </div>
+                    `;
+
+                    mobileCards.innerHTML = `
+                        <div class="no-results">
+                            [SYS]: NO_MATCHING_USERS_FOUND
+                        </div>
+                    `;
+
+                    document.getElementById('load-more-btn').style.display = 'none';
+                    document.getElementById('scroll-top-btn').style.display = 'none';
+
+                    return;
+                }
 
             displayData.forEach((user, index) => {
-                const rank = index + 1;
+                const rank = user.originalRank || index + 1;
                 const tag = getRankTag(rank);
                 const leetcodeUrl = `https://leetcode.com/u/${user.id}`;
 
@@ -276,7 +342,7 @@ <h1 class="page-title">Leaderboard</h1>
             activeDatasetType = activeTab;
             currentDisplayLimit = getInitialLimit();
             fetchMoreClicks = 0;
-            renderLeaderboard(leaderboardData[activeTab]);
+            applyFiltersAndRender();
         }
 
     </script>

frontend/styles/main.css

@@ -1913,3 +1913,49 @@ body::-webkit-scrollbar-thumb {
 .tooltip-content a:hover {
   text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
 }
+
+
+
+
+
+
+
+.search-container {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1.5rem;
+}
+
+.search-input {
+    width: 100%;
+    max-width: 420px;
+    padding: 0.9rem 1rem;
+    background: rgba(0, 0, 0, 0.7);
+    border: 1px solid var(--cyan);
+    color: var(--text);
+    font-family: 'Fira Code', monospace;
+    font-size: 0.9rem;
+    outline: none;
+    transition: all 0.2s ease;
+    box-shadow: 0 0 10px rgba(0, 229, 255, 0.08);
+}
+
+.search-input::placeholder {
+    color: var(--text-muted);
+    font-family: 'Fira Code', monospace;
+}
+
+.search-input:focus {
+    border-color: var(--green);
+    box-shadow: 0 0 12px rgba(0, 255, 100, 0.2);
+}
+
+.no-results {
+    text-align: center;
+    padding: 2rem;
+    color: var(--text-muted);
+    font-family: 'Fira Code', monospace;
+    border: 1px dashed rgba(0, 229, 255, 0.2);
+    background: rgba(0, 0, 0, 0.3);
+    margin-top: 1rem;
+}