Added dynamic clear button to leaderboard search (#88)

* add dynamic clear button to leaderboard search

* change according to suggestion

* Update clear button text to `ESC` and update visibility logic

* Refactor clear search button style

* style: auto-format code with Prettier (/format)

---------

Co-authored-by: Jagdish Prajapati <jagadishdrp@gmail.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: 3 people

frontend/leaderboard.html

@@ -81,8 +81,17 @@ <h1 class="page-title">Leaderboard</h1>
               autocomplete="off"
               spellcheck="false"
             />
+
             <span class="search-result-count" id="search-result-count"></span>
             <kbd class="search-shortcut" id="search-shortcut">Ctrl+K</kbd>
+            <button
+              type="button"
+              id="clear-search"
+              class="clear-search-btn"
+              aria-label="Clear search"
+            >
+              ESC
+            </button>
           </div>
         </div>
 
@@ -134,19 +143,33 @@ <h1 class="page-title">Leaderboard</h1>
 
         const searchInput = document.getElementById("leaderboard-search");
         const shortcutBadge = document.getElementById("search-shortcut");
+        const clearBtn = document.getElementById("clear-search");
 
         searchInput.addEventListener("input", (e) => {
           currentSearchTerm = e.target.value.toLowerCase().trim();
+
+          clearBtn.style.display =
+            e.target.value.trim() !== "" ? "flex" : "none";
+
+          applyFiltersAndRender();
+        });
+        clearBtn.addEventListener("click", () => {
+          searchInput.value = "";
+          currentSearchTerm = "";
+
+          clearBtn.style.display = "none";
+
+          searchInput.focus();
           applyFiltersAndRender();
         });
 
         searchInput.addEventListener("focus", () => {
-          shortcutBadge.style.opacity = "0";
+          shortcutBadge.style.display = "none";
         });
 
         searchInput.addEventListener("blur", () => {
           if (!searchInput.value) {
-            shortcutBadge.style.opacity = "1";
+            shortcutBadge.style.display = "inline-flex";
           }
         });
 
@@ -159,6 +182,7 @@ <h1 class="page-title">Leaderboard</h1>
           if (e.key === "Escape" && document.activeElement === searchInput) {
             searchInput.value = "";
             currentSearchTerm = "";
+            clearBtn.style.display = "none";
             searchInput.blur();
             applyFiltersAndRender();
           }
@@ -186,7 +210,7 @@ <h1 class="page-title">Leaderboard</h1>
               window.scrollTo({ top: 0, behavior: "smooth" });
             }
           });
-
+        clearBtn.style.display = "none";
         fetchLeaderboardData();
       });
 

frontend/styles/main.css

@@ -2335,6 +2335,32 @@ body::-webkit-scrollbar-thumb {
   transition: opacity 0.15s ease;
   user-select: none;
 }
+.clear-search-btn {
+  background: rgba(255, 51, 51, 0.05);
+  border: 1px solid rgba(255, 51, 51, 0.4);
+  color: var(--red);
+  padding: 2px 6px;
+  border-radius: 3px;
+  cursor: pointer;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  font-family: "Fira Code", monospace;
+  font-size: 0.65rem;
+  font-weight: bold;
+  transition: all 0.15s ease;
+}
+
+.clear-search-btn:hover {
+  background: rgba(255, 51, 51, 0.15);
+  border-color: var(--red);
+  box-shadow: 0 0 8px rgba(255, 51, 51, 0.2);
+  text-shadow: 0 0 5px rgba(255, 51, 51, 0.8);
+}
+
+.clear-search-btn:active {
+  transform: scale(0.95);
+}
 
 .no-results {
   text-align: center;