From 97f18d295f1832fdb265b53e848650319e48c718 Mon Sep 17 00:00:00 2001
From: Vinta Chen <vinta.chen@gmail.com>
Date: Sun, 22 Mar 2026 15:28:25 +0800
Subject: [PATCH] feat: add clear action to no-results message

When a search or filter yields no results, the message now includes
an inline button that resets both the search input and the active
filter. Improves discoverability and reduces dead-end frustration.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 website/static/main.js       | 10 ++++++++++
 website/static/style.css     | 20 ++++++++++++++++++++
 website/templates/index.html |  5 ++++-
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/website/static/main.js b/website/static/main.js
index 97b56e2f..223100ea 100644
--- a/website/static/main.js
+++ b/website/static/main.js
@@ -270,6 +270,16 @@ if (filterClear) {
   });
 }
 
+// No-results clear
+var noResultsClear = document.querySelector('.no-results-clear');
+if (noResultsClear) {
+  noResultsClear.addEventListener('click', function () {
+    if (searchInput) searchInput.value = '';
+    activeFilter = null;
+    applyFilters();
+  });
+}
+
 // Column sorting
 document.querySelectorAll('th[data-sort]').forEach(function (th) {
   th.addEventListener('click', function () {
diff --git a/website/static/style.css b/website/static/style.css
index 16a16c1d..da525151 100644
--- a/website/static/style.css
+++ b/website/static/style.css
@@ -837,6 +837,26 @@ th[data-sort].sort-asc::after {
   font-size: var(--text-lg);
 }
 
+.no-results-hint {
+  margin-top: 0.5rem;
+  font-size: var(--text-sm);
+}
+
+.no-results-clear {
+  background: none;
+  border: none;
+  color: var(--accent-deep);
+  font: inherit;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: oklch(58% 0.16 45 / 0.4);
+  text-underline-offset: 0.2em;
+}
+
+.no-results-clear:hover {
+  color: var(--accent);
+}
+
 .final-cta {
   padding-block: clamp(3rem, 7vw, 5.5rem);
   background: oklch(94% 0.025 72);
diff --git a/website/templates/index.html b/website/templates/index.html
index 88960135..f3183f30 100644
--- a/website/templates/index.html
+++ b/website/templates/index.html
@@ -237,7 +237,10 @@
     </table>
   </div>
 
-  <div class="no-results" hidden>No libraries match your search or filter.</div>
+  <div class="no-results" hidden>
+    <p>No projects match your search or filter.</p>
+    <p class="no-results-hint">Try a broader term, or <button class="no-results-clear">browse all projects</button>.</p>
+  </div>
 </section>
 
 <section class="final-cta section-shell" data-reveal>