From d01729700783c0efec89f743a14eb32da434207a Mon Sep 17 00:00:00 2001
From: drjones <drjones@drjoness-MacBook-Air.local>
Date: Mon, 20 Jul 2026 21:11:01 -0700
Subject: [PATCH] Add search clear button and visual thumbnail badges
 (screenshot/video/ext)

---
 index.html | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 6baf969..458ff26 100644
--- a/index.html
+++ b/index.html
@@ -424,7 +424,10 @@ mark{background:rgba(34,211,238,.28);color:#fff;border-radius:2px;padding:0 1px}
       <!-- TAGGED -->
       <div id="view-tagged" class="lib-view active">
         <div class="search-toolbar">
-          <input type="text" id="searchInput" placeholder="Search any word in the description, category, filename or path…" spellcheck="false">
+          <div style="position:relative;flex:2;min-width:220px;display:flex;align-items:center">
+            <input type="text" id="searchInput" placeholder="Search any word in the description, category, filename or path…" spellcheck="false" style="width:100%;padding-right:28px">
+            <button id="btnClearSearchInput" title="Clear search" style="position:absolute;right:6px;background:none;border:none;color:var(--dim);cursor:pointer;padding:2px 6px;font-size:12px;display:none">✕</button>
+          </div>
           <select id="searchCat"><option value="">All categories</option></select>
           <select id="searchFtype">
             <option value="">Photos & videos</option>
@@ -1151,10 +1154,20 @@ async function doSearch(reset){
   renderSearchResults();
 }
 
+function os_ext(p){ return p ? (p.split('.').pop() || '').toUpperCase() : ''; }
+
 $("searchInput").oninput = ()=>{
+  if($("btnClearSearchInput")) $("btnClearSearchInput").style.display = $("searchInput").value ? "block" : "none";
   clearTimeout(searchDebounce);
   searchDebounce = setTimeout(()=>doSearch(true), 280);
 };
+if($("btnClearSearchInput")){
+  $("btnClearSearchInput").onclick = ()=>{
+    $("searchInput").value = "";
+    $("btnClearSearchInput").style.display = "none";
+    doSearch(true);
+  };
+}
 $("searchInput").onkeydown = e => { if(e.key === "Enter"){ clearTimeout(searchDebounce); doSearch(true); } };
 $("searchCat").onchange = ()=>{ renderCatChips(); doSearch(true); };
 $("searchSort").onchange = ()=>doSearch(true);
@@ -1203,9 +1216,20 @@ function renderSearchResults(){
       }
       openLightbox(i);
     };
+    const ext = os_ext(rec.path);
+    const isVid = VIDEO_EXT_RE.test(rec.path);
+    const isShot = rec.route === 'screenshot' || rec.category === 'Screenshots & Documents';
+    
+    let badgesHtml = '';
+    if(isVid) badgesHtml += `<div class="video-badge" style="top:5px;right:5px">▶ ${ext}</div>`;
+    else badgesHtml += `<div style="position:absolute;top:5px;right:5px;font-size:8px;background:rgba(3,5,10,.7);color:var(--txt);padding:1px 4px;border-radius:2px;font-family:var(--font-mono);z-index:1">${ext}</div>`;
+    
+    if(isShot) badgesHtml += `<div style="position:absolute;top:5px;left:5px;font-size:8px;background:rgba(3,5,10,.85);color:var(--cyan);border:1px solid rgba(34,211,238,.4);padding:2px 5px;border-radius:3px;letter-spacing:1px;font-weight:bold;z-index:1">⌁ SCREENSHOT</div>`;
+
     card.innerHTML = `<div class="result-thumb">
                         <div class="result-checkbox ${selectMode ? 'show' : ''} ${checked ? 'checked' : ''}"></div>
                         <img loading="lazy" src="/api/thumbnail?path=${encodeURIComponent(rec.path)}">
+                        ${badgesHtml}
                         <span class="result-cat-badge">${escapeHtml(rec.category || "—")}</span>
                        </div>
                        <div class="result-body">
@@ -1217,6 +1241,8 @@ function renderSearchResults(){
   $("btnLoadMore").style.display = searchResults.length < searchTotal ? "block" : "none";
   if(selectMode) updateBulkBar();
 }
+  if(selectMode) updateBulkBar();
+}
 
 function os_basename(path){
   return path.replace(/\\/g, '/').replace(/.*\//, '');