Enhance search bar styling to fit theme (#48)

Author: jagdish-15

frontend/leaderboard.html

@@ -42,13 +42,19 @@ <h1 class="page-title">Leaderboard</h1>
 
 
            <div class="search-container">
-                <input
-                type="text"
-                id="leaderboard-search"
-                class="search-input"
-                placeholder="./search_by_name_or_leetcode_id"
-                autocomplete="off"
-                >
+                <div class="search-bar">
+                    <span class="search-prefix">$ grep -i</span>
+                    <input
+                        type="text"
+                        id="leaderboard-search"
+                        class="search-input"
+                        placeholder="pattern"
+                        autocomplete="off"
+                        spellcheck="false"
+                    >
+                    <span class="search-result-count" id="search-result-count"></span>
+                    <kbd class="search-shortcut" id="search-shortcut">Ctrl+K</kbd>
+                </div>
             </div>
 
             <div class="leaderboard">
@@ -107,12 +113,37 @@ <h1 class="page-title">Leaderboard</h1>
             });
 
             const searchInput = document.getElementById('leaderboard-search');
+            const shortcutBadge = document.getElementById('search-shortcut');
 
             searchInput.addEventListener('input', (e) => {
                 currentSearchTerm = e.target.value.toLowerCase().trim();
                 applyFiltersAndRender();
             });
 
+            searchInput.addEventListener('focus', () => {
+                shortcutBadge.style.opacity = '0';
+            });
+
+            searchInput.addEventListener('blur', () => {
+                if (!searchInput.value) {
+                    shortcutBadge.style.opacity = '1';
+                }
+            });
+
+            // Ctrl+K / Cmd+K keyboard shortcut
+            document.addEventListener('keydown', (e) => {
+                if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+                    e.preventDefault();
+                    searchInput.focus();
+                }
+                if (e.key === 'Escape' && document.activeElement === searchInput) {
+                    searchInput.value = '';
+                    currentSearchTerm = '';
+                    searchInput.blur();
+                    applyFiltersAndRender();
+                }
+            });
+
             fetchLeaderboardData();
         });
 
@@ -214,12 +245,25 @@ <h1 class="page-title">Leaderboard</h1>
             }));
 
             const filteredData = rankedData.filter(user => {
+                if (!currentSearchTerm) return true;
                 return (
                     user.name.toLowerCase().includes(currentSearchTerm) ||
                     user.id.toLowerCase().includes(currentSearchTerm)
                 );
             });
 
+            // Update result count
+            const countEl = document.getElementById('search-result-count');
+            if (currentSearchTerm) {
+                const total = originalData.length;
+                const matched = filteredData.length;
+                countEl.textContent = `${matched}/${total}`;
+                countEl.style.opacity = '1';
+            } else {
+                countEl.textContent = '';
+                countEl.style.opacity = '0';
+            }
+
             renderLeaderboard(filteredData);
         }
 
@@ -309,7 +353,7 @@ <h1 class="page-title">Leaderboard</h1>
                 mobileCards.appendChild(card);
             });
 
-            if (data.length > currentDisplayLimit) {
+            if (!isSearching && data.length > currentDisplayLimit) {
                 document.getElementById('load-more-btn').style.display = 'inline-block';
                 document.getElementById('scroll-top-btn').style.display = 'none';
 
@@ -323,7 +367,7 @@ <h1 class="page-title">Leaderboard</h1>
                 }
             } else {
                 document.getElementById('load-more-btn').style.display = 'none';
-                document.getElementById('scroll-top-btn').style.display = 'inline-block';
+                document.getElementById('scroll-top-btn').style.display = isSearching ? 'none' : 'inline-block';
             }
         }
 

frontend/styles/main.css

@@ -1920,42 +1920,96 @@ body::-webkit-scrollbar-thumb {
 
 
 
+/* ── Search Bar ── */
 .search-container {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 1.5rem;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 2rem;
+  padding: 0 1rem;
+}
+
+.search-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0.55rem 1rem;
+  width: 100%;
+  max-width: 420px;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.search-bar:focus-within {
+  border-color: var(--green-dim);
+  box-shadow: 0 0 12px rgba(0, 255, 65, 0.06), 0 0 0 1px rgba(0, 255, 65, 0.08);
+}
+
+.search-prefix {
+  color: var(--text-muted);
+  font-family: 'Fira Code', monospace;
+  font-size: 0.82rem;
+  white-space: nowrap;
+  user-select: none;
+  flex-shrink: 0;
+  transition: color 0.2s ease;
+}
+
+.search-bar:focus-within .search-prefix {
+  color: var(--green-dim);
 }
 
 .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);
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--green);
+  font-family: 'Fira Code', monospace;
+  font-size: 0.88rem;
+  caret-color: var(--green);
+  min-width: 0;
+  padding: 0;
+  box-shadow: none !important;
 }
 
 .search-input::placeholder {
-    color: var(--text-muted);
-    font-family: 'Fira Code', monospace;
+  color: var(--text-muted);
+  font-style: italic;
+  opacity: 0.6;
+}
+
+.search-result-count {
+  color: var(--text-dim);
+  font-family: 'Fira Code', monospace;
+  font-size: 0.72rem;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  flex-shrink: 0;
 }
 
-.search-input:focus {
-    border-color: var(--green);
-    box-shadow: 0 0 12px rgba(0, 255, 100, 0.2);
+.search-shortcut {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  font-family: 'Fira Code', monospace;
+  font-size: 0.65rem;
+  color: var(--text-muted);
+  background: var(--bg-raised);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: opacity 0.15s ease;
+  user-select: none;
 }
 
 .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;
+  text-align: center;
+  padding: 2rem 1rem;
+  color: var(--text-muted);
+  font-family: 'Fira Code', monospace;
+  font-size: 0.85rem;
 }