feat: search clear X button

docs_v1.0/doc_wasm/index.html

@@ -37,7 +37,10 @@ html, body { height: 100%; }
 <div id="app">
   <div class="sidebar" id="sidebar">
     <h1>Momentry Docs</h1>
-    <input id="search" type="text" placeholder="搜尋模組..." style="width:100%;padding:8px;margin-bottom:12px;border:1px solid #ddd;border-radius:6px;font-size:13px;box-sizing:border-box">
+    <div style="position:relative">
+      <input id="search" type="text" placeholder="搜尋模組..." style="width:100%;padding:8px;margin-bottom:12px;border:1px solid #ddd;border-radius:6px;font-size:13px;box-sizing:border-box">
+      <span id="search-clear" style="display:none;position:absolute;right:8px;top:6px;cursor:pointer;font-size:16px;color:#999;line-height:1" onclick="clearSearch()">×</span>
+    </div>
     <div id="module-list"></div>
     <div id="search-results" style="display:none;margin-top:8px"></div>
     <div class="logout">
@@ -224,6 +227,15 @@ function showSearchResult(module, q) {
   loadDoc(module, q);
 }
 
+function clearSearch() {
+  var el = document.getElementById('search');
+  el.value = '';
+  el.focus();
+  // Simulate input event to trigger the handler
+  var evt = new Event('input', { bubbles: true });
+  el.dispatchEvent(evt);
+}
+
 async function loginUser(user, pass) {
   var resp = await fetch('/api/v1/auth/login', {
     method:'POST', headers:{'Content-Type':'application/json'},
@@ -275,8 +287,10 @@ async function initApp() {
     var searchResultsEl = document.getElementById('search-results');
     var moduleListEl = document.getElementById('module-list');
     if (searchEl) {
+      var clearEl = document.getElementById('search-clear');
       searchEl.oninput = function() {
         var q = this.value.toLowerCase().trim();
+        clearEl.style.display = q ? 'block' : 'none';
         if (q.length < 2) {
           moduleListEl.style.display = '';
           searchResultsEl.style.display = 'none';