From 9a5d7106a461f9870e654197e54ece306e61dcfe Mon Sep 17 00:00:00 2001
From: Matthew Berman <748450+mberman84@users.noreply.github.com>
Date: Mon, 22 Jun 2026 11:17:55 -0700
Subject: [PATCH] Rebase clear-filters action onto database-backed site

---
 site/agents/index.html |  4 ++--
 site/index.html        | 11 ++++++++---
 site/learn/index.html  |  4 ++--
 site/script.js         | 22 ++++++++++++++++++++++
 site/styles.css        | 32 ++++++++++++++++++++++++++++++++
 5 files changed, 66 insertions(+), 7 deletions(-)
diff --git a/site/agents/index.html b/site/agents/index.html
index 937e8ae..3661b64 100644
--- a/site/agents/index.html
+++ b/site/agents/index.html
@@ -76,8 +76,8 @@
       href="https://signals.forwardfuture.ai/loop-library/catalog.txt"
     />
     <link rel="icon" type="image/png" href="../assets/favicon.png" />
-    <link rel="stylesheet" href="../styles.css?v=20260621-author-byline" />
-    <script src="../script.js?v=20260622-search-index" defer></script>
+    <link rel="stylesheet" href="../styles.css?v=20260622-empty-state" />
+    <script src="../script.js?v=20260622-empty-state" defer></script>
     <script type="application/ld+json">
       {
         "@context": "https://schema.org",
diff --git a/site/index.html b/site/index.html
index cc2fe3c..4d24047 100644
--- a/site/index.html
+++ b/site/index.html
@@ -132,7 +132,7 @@
       href="https://signals.forwardfuture.ai/loop-library/agents/"
     />
     <link rel="icon" type="image/png" href="./assets/favicon.png" />
-    <link rel="stylesheet" href="./styles.css?v=20260621-author-byline" />
+    <link rel="stylesheet" href="./styles.css?v=20260622-empty-state" />
     <script type="application/ld+json">
 {
   "@context": "https://schema.org",
@@ -198,7 +198,7 @@
   ]
 }
     </script>
-    <script src="./script.js?v=20260622-search-index" defer></script>
+    <script src="./script.js?v=20260622-empty-state" defer></script>
     <title>Loop Library: Repeatable AI Agent Workflows | Forward Future</title>
   </head>
   <body>
@@ -451,7 +451,12 @@ <h2 id="agent-skill-title">
         <div class="empty-state" id="empty-state" hidden>
           <h3>No matching loops</h3>
           <p>Try another category, broaden your search, or submit the workflow.</p>
-          <a href="#submit">Submit a loop</a>
+          <div class="empty-state-actions">
+            <button class="empty-state-reset" id="clear-filters" type="button">
+              Clear search &amp; filters
+            </button>
+            <a href="#submit">Submit a loop</a>
+          </div>
         </div>
 
         <nav
diff --git a/site/learn/index.html b/site/learn/index.html
index 00bb4fc..c4fb539 100644
--- a/site/learn/index.html
+++ b/site/learn/index.html
@@ -74,8 +74,8 @@
       href="https://signals.forwardfuture.ai/loop-library/agents/"
     />
     <link rel="icon" type="image/png" href="../assets/favicon.png" />
-    <link rel="stylesheet" href="../styles.css?v=20260621-author-byline" />
-    <script src="../script.js?v=20260622-search-index" defer></script>
+    <link rel="stylesheet" href="../styles.css?v=20260622-empty-state" />
+    <script src="../script.js?v=20260622-empty-state" defer></script>
     <script type="application/ld+json">
       {
         "@context": "https://schema.org",
diff --git a/site/script.js b/site/script.js
index 9fbf4ae..10eb995 100644
--- a/site/script.js
+++ b/site/script.js
@@ -270,6 +270,28 @@ categoryFilters.forEach((filter) => {
   });
 });
 
+const clearFiltersButton = document.querySelector("#clear-filters");
+
+if (clearFiltersButton) {
+  clearFiltersButton.addEventListener("click", () => {
+    if (searchInput) {
+      searchInput.value = "";
+    }
+
+    activeCategory = "all";
+    currentPage = 1;
+
+    categoryFilters.forEach((candidate) => {
+      const isActive = candidate.dataset.categoryFilter === "all";
+      candidate.classList.toggle("is-active", isActive);
+      candidate.setAttribute("aria-pressed", String(isActive));
+    });
+
+    updateLibrary();
+    searchInput?.focus();
+  });
+}
+
 if (paginationPrevious) {
   paginationPrevious.addEventListener("click", () => {
     if (currentPage > 1) {
diff --git a/site/styles.css b/site/styles.css
index 6bd2259..e790700 100644
--- a/site/styles.css
+++ b/site/styles.css
@@ -884,6 +884,38 @@ code {
   font-weight: 700;
 }
 
+.empty-state-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.empty-state-reset {
+  padding: 8px 12px;
+  border: 1px solid var(--ink);
+  color: var(--ink);
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: 0.64rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.empty-state-reset:hover,
+.empty-state-reset:focus-visible {
+  color: var(--solid-foreground);
+  background: var(--solid-background);
+}
+
+.empty-state-reset:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
 .pagination {
   display: flex;
   align-items: center;
