feat: Enhance search functionality with clear button and metadata display

Author: Ashjha75

index.html

@@ -75,8 +75,12 @@ <h3>EXPLORER</h3>
                 </div>
 
                 <div class="search-box">
-                    <span class="material-symbols-outlined">search</span>
-                    <input type="text" id="fileSearch" placeholder="Search files..." class="search-input">
+                    <div class="search-field">
+                        <span class="material-symbols-outlined">search</span>
+                        <input type="text" id="fileSearch" placeholder="Search files or folders" class="search-input" autocomplete="off">
+                        <button type="button" class="search-clear" id="searchClear" aria-label="Clear search">×</button>
+                    </div>
+                    <small class="search-meta" id="searchMeta">Search file and folder names (case-insensitive)</small>
                 </div>
 
                 <div class="sidebar-select">

index.js

@@ -369,7 +369,8 @@
     };
     const D = {
         side: $safe('sidebar'), tog: $safe('toggleSidebar'), tree: $safe('fileTree'),
-        search: $safe('fileSearch'), sel: $safe('selectDirBtn'),
+        search: $safe('fileSearch'), searchMeta: $safe('searchMeta'), searchClear: $safe('searchClear'),
+        sel: $safe('selectDirBtn'),
         exp: $safe('expandAll'), col: $safe('collapseAll'),
         all: $safe('selectAll'), none: $safe('deselectAll'),
         gen: $safe('generateContextBtn'), ed: $safe('codeEditor'),
@@ -867,6 +868,8 @@
                 D.tok.textContent = '0';
                 D.sz.textContent = '0 B';
                 D.pron.textContent = 'zero tokens';
+                if (D.search) D.search.value = '';
+                updateTreeSearch('');
                 D.lang.textContent = '-';
                 // Clear search
                 D.search.value = '';
@@ -960,6 +963,57 @@
     };
     // Pass parents array for lines
     const renderSub = (nodes, lv, parents) => render(nodes, lv, [], parents).map(x => x.html).join('');
+
+    const openTreeParents = item => {
+        let current = item.parentElement;
+        while (current) {
+            if (current.classList && current.classList.contains('tree-children')) {
+                current.classList.add('open');
+                const parentItem = current.parentElement;
+                if (parentItem && parentItem.classList.contains('tree-item')) {
+                    const btn = parentItem.querySelector('.expand-btn');
+                    if (btn) {
+                        btn.classList.add('expanded');
+                        const arrowImg = btn.querySelector('.tree-arrow');
+                        if (arrowImg) {
+                            arrowImg.src = 'public/arrowDown.svg';
+                            arrowImg.setAttribute('data-arrow', 'down');
+                        }
+                    }
+                }
+                current = parentItem ? parentItem.parentElement : null;
+                continue;
+            }
+            current = current.parentElement;
+        }
+    };
+
+    const updateTreeSearch = query => {
+        const term = (query || '').trim().toLowerCase();
+        const items = document.querySelectorAll('.tree-item');
+        let matches = 0;
+        const total = items.length;
+        items.forEach(item => {
+            const nameEl = item.querySelector('.file-name');
+            const name = nameEl ? nameEl.textContent.toLowerCase() : '';
+            const path = (item.dataset.path || '').toLowerCase();
+            const match = !term || name.includes(term) || path.includes(term);
+            item.style.display = match ? '' : 'none';
+            item.classList.toggle('search-match', !!term && match);
+            if (term && match) {
+                matches += 1;
+                openTreeParents(item);
+            }
+        });
+        if (D.searchMeta) {
+            D.searchMeta.textContent = term
+                ? `${matches} match${matches === 1 ? '' : 'es'} of ${total}`
+                : 'Search file and folder names (case-insensitive)';
+        }
+        if (D.searchClear) {
+            D.searchClear.hidden = !term;
+        }
+    };
     // ============================================================================
     // FILE LOADING - ASYNC CHUNKS (ENHANCED FILTERING & UI UPDATE)
     // ============================================================================
@@ -1023,6 +1077,7 @@
             const items = render(S.tree);
             D.tree.innerHTML = items.map(x => x.html).join('');
             S.rendered = items.length;
+            if (D.search) updateTreeSearch(D.search.value);
             stats();
             toast(`Loaded ${S.files.length} files`, 'success');
         } catch (e) {
@@ -1576,13 +1631,25 @@
                 stats();
             }
         };
-        if (D.search) D.search.addEventListener('input', e => {
-            const q = e.target.value.toLowerCase();
-            document.querySelectorAll('.tree-item').forEach(item => {
-                const n = item.querySelector('.file-name').textContent.toLowerCase();
-                item.style.display = n.includes(q) ? '' : 'none';
+        if (D.search) {
+            D.search.addEventListener('input', e => updateTreeSearch(e.target.value));
+            D.search.addEventListener('keydown', e => {
+                if (e.key === 'Escape') {
+                    e.target.value = '';
+                    updateTreeSearch('');
+                }
             });
-        });
+        }
+        if (D.searchClear) {
+            D.searchClear.hidden = true;
+            D.searchClear.addEventListener('click', () => {
+                if (D.search) {
+                    D.search.value = '';
+                    updateTreeSearch('');
+                    D.search.focus();
+                }
+            });
+        }
         const togFold = o => {
             document.querySelectorAll('.expand-btn').forEach(btn => {
                 const item = btn.closest('.tree-item');

style.css

@@ -417,14 +417,21 @@ html, body {
 }
 
 .search-box {
-    position: relative;
     padding: 8px 12px;
     flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.search-field {
+    position: relative;
+    width: 100%;
 }
 
-.search-box .material-symbols-outlined {
+.search-field .material-symbols-outlined {
     position: absolute;
-    left: 20px;
+    left: 14px;
     top: 50%;
     transform: translateY(-50%);
     color: var(--text-secondary);
@@ -434,7 +441,7 @@ html, body {
 
 .search-input {
     width: 100%;
-    padding: 6px 8px 6px 32px;
+    padding: 6px 8px 6px 34px;
     background: var(--bg-editor);
     border: 1px solid var(--border-color);
     border-radius: 4px;
@@ -448,6 +455,31 @@ html, body {
     border-color: var(--color-accent);
 }
 
+.search-clear {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 14px;
+    padding: 0;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.2s ease;
+}
+
+.search-clear:hover {
+    opacity: 1;
+}
+
+.search-meta {
+    font-size: 10px;
+    color: var(--text-secondary);
+    line-height: 1.2;
+}
+
 .sidebar-select {
     padding: 0 12px;
     flex-shrink: 0;
@@ -558,6 +590,12 @@ html, body {
     transform: translateX(2px);
 }
 
+.tree-item.search-match > .tree-item-content {
+    background: rgba(59, 130, 246, 0.18);
+    border: 1px solid rgba(59, 130, 246, 0.3);
+    transform: translateX(0);
+}
+
 .tree-item-content:active {
     background: rgba(255, 255, 255, 0.12);
     transform: translateX(0);