Merge pull request steam-bell-92#1683 from jyotish6699/feature/search-clear-button

feat(web-app): add clear button to sidebar search input

Author: steam-bell-92

web-app/css/styles.css

@@ -3876,6 +3876,40 @@ textarea:focus-visible,
   box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
 }
 
+.clear-search-btn {
+    position: absolute;
+    top: 50%;
+    right: 0.85rem;
+    transform: translateY(-50%);
+    width: 1.4rem;
+    height: 1.4rem;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--text-muted);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    transition: background-color 0.2s ease, color 0.2s ease;
+    z-index: 5;
+}
+
+.clear-search-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--text-color);
+}
+
+.clear-search-btn:focus-visible {
+    outline: 2px solid var(--accent-color);
+    outline-offset: 2px;
+}
+
+.search-box input {
+    padding-right: 3rem;
+}
+
 /* Search dropdown items — keyboard highlight */
 .dropdown-item:focus-visible,
 .dropdown-item.selected {
@@ -3953,6 +3987,7 @@ button:focus-visible,
 
 
   .search-box {
+    position: relative;
     max-width: none;
     width: 100%;
   }

web-app/index.html

@@ -62,6 +62,14 @@
         <i class="fas fa-search" aria-hidden="true"></i>
         <input aria-label="Search projects" id="searchInput" placeholder="Search projects or tags..." type="text"
           role="combobox" aria-autocomplete="list" aria-controls="resultsList" aria-expanded="false" />
+          <button
+            id="clearSearchBtn"
+            class="clear-search-btn"
+            type="button"
+            aria-label="Clear search"
+            hidden>
+            <i class="fas fa-times"></i>
+          </button>
         <div class="search-dropdown" id="searchDropdown" aria-live="polite">
           <div class="dropdown-content" id="searchDropdownContent">
             <div class="search-loader" id="searchLoader" style="display: none">

web-app/js/main.js

@@ -286,6 +286,7 @@ document.addEventListener("DOMContentLoaded", function () {
   var html = document.documentElement;
   var backToTopButton = document.getElementById("backToTop");
   var searchInput = document.querySelector(".sidebar-dock #searchInput");
+  const clearSearchBtn = document.getElementById("clearSearchBtn");
   var navSearchInput = document.getElementById("navSearchInput");
   var searchDropdown = document.getElementById("searchDropdown");
   var searchLoader = document.getElementById("searchLoader");
@@ -1264,6 +1265,10 @@ if (searchInputs.length) {
       var rawValue = e.target.value;
       var query = rawValue.trim();
       currentSearchQuery = query;
+
+      if (clearSearchBtn) {
+        clearSearchBtn.hidden = query === "";
+      }
 
       // Show loader
       if (searchLoader) {
@@ -1301,11 +1306,16 @@ if (searchInputs.length) {
     // Keyboard navigation
     input.addEventListener("keydown", function (e) {
       if (e.key === "Escape") {
-        input.value = "";
-        currentSearchQuery = "";
-        performSearch(false);
-        closeDropdown();
-        input.blur();
+          input.value = "";
+          currentSearchQuery = "";
+
+          if (clearSearchBtn) {
+              clearSearchBtn.hidden = true;
+          }
+
+          performSearch(false);
+          closeDropdown();
+          input.blur();
       }
 
       if (e.key === "Enter") {
@@ -1345,6 +1355,27 @@ if (searchInputs.length) {
       }
     });
   });
+
+  if (clearSearchBtn) {
+      clearSearchBtn.addEventListener("click", function () {
+
+          searchInputs.forEach(function (input) {
+              input.value = "";
+          });
+
+          currentSearchQuery = "";
+
+          performSearch(false);
+
+          closeDropdown();
+
+          clearSearchBtn.hidden = true;
+
+          if (searchInput) {
+              searchInput.focus();
+          }
+      });
+  }
 }
 
 // Close dropdown when clicking outside