From 4795758a0778f46e7a80b2ac5f2e83a94e5c2b35 Mon Sep 17 00:00:00 2001
From: Matthew Berman <748450+mberman84@users.noreply.github.com>
Date: Mon, 22 Jun 2026 11:20:17 -0700
Subject: [PATCH] Rebase URL filter state onto database-backed site

---
 site/agents/index.html |   2 +-
 site/index.html        |   2 +-
 site/learn/index.html  |   2 +-
 site/script.js         | 102 ++++++++++++++++++++++++++++++++++-------
 4 files changed, 89 insertions(+), 19 deletions(-)
diff --git a/site/agents/index.html b/site/agents/index.html
index 3661b64..88498da 100644
--- a/site/agents/index.html
+++ b/site/agents/index.html
@@ -77,7 +77,7 @@
     />
     <link rel="icon" type="image/png" href="../assets/favicon.png" />
     <link rel="stylesheet" href="../styles.css?v=20260622-empty-state" />
-    <script src="../script.js?v=20260622-empty-state" defer></script>
+    <script src="../script.js?v=20260622-url-state" defer></script>
     <script type="application/ld+json">
       {
         "@context": "https://schema.org",
diff --git a/site/index.html b/site/index.html
index 4d24047..5dd99c5 100644
--- a/site/index.html
+++ b/site/index.html
@@ -198,7 +198,7 @@
   ]
 }
     </script>
-    <script src="./script.js?v=20260622-empty-state" defer></script>
+    <script src="./script.js?v=20260622-url-state" defer></script>
     <title>Loop Library: Repeatable AI Agent Workflows | Forward Future</title>
   </head>
   <body>
diff --git a/site/learn/index.html b/site/learn/index.html
index c4fb539..2da9426 100644
--- a/site/learn/index.html
+++ b/site/learn/index.html
@@ -75,7 +75,7 @@
     />
     <link rel="icon" type="image/png" href="../assets/favicon.png" />
     <link rel="stylesheet" href="../styles.css?v=20260622-empty-state" />
-    <script src="../script.js?v=20260622-empty-state" defer></script>
+    <script src="../script.js?v=20260622-url-state" defer></script>
     <script type="application/ld+json">
       {
         "@context": "https://schema.org",
diff --git a/site/script.js b/site/script.js
index 10eb995..0b98d35 100644
--- a/site/script.js
+++ b/site/script.js
@@ -228,6 +228,65 @@ function updateLibrary() {
   window.requestAnimationFrame(syncVisiblePromptToggles);
 }
 
+// Keep the library's state shareable without discarding tracking or other
+// query parameters owned by the surrounding site.
+function syncUrlState(method = "replace") {
+  if (typeof window.history?.replaceState !== "function") {
+    return;
+  }
+
+  const params = new URLSearchParams(window.location.search);
+  const query = searchInput?.value.trim() ?? "";
+
+  if (query) {
+    params.set("q", query);
+  } else {
+    params.delete("q");
+  }
+
+  if (activeCategory && activeCategory !== "all") {
+    params.set("category", activeCategory);
+  } else {
+    params.delete("category");
+  }
+
+  if (currentPage > 1) {
+    params.set("page", String(currentPage));
+  } else {
+    params.delete("page");
+  }
+
+  const search = params.toString();
+  const nextUrl = `${window.location.pathname}${search ? `?${search}` : ""}${
+    window.location.hash
+  }`;
+  const currentUrl = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+
+  if (nextUrl === currentUrl) {
+    return;
+  }
+
+  if (method === "push" && typeof window.history.pushState === "function") {
+    window.history.pushState(null, "", nextUrl);
+  } else {
+    window.history.replaceState(null, "", nextUrl);
+  }
+}
+
+function readUrlState() {
+  const params = new URLSearchParams(window.location.search);
+
+  if (searchInput) {
+    searchInput.value = params.get("q") ?? "";
+  }
+
+  applyCategory(params.get("category") ?? "all");
+
+  const requestedPage = Number.parseInt(params.get("page") ?? "1", 10);
+  currentPage =
+    Number.isInteger(requestedPage) && requestedPage > 0 ? requestedPage : 1;
+}
+
 function focusFirstVisibleLoop() {
   const firstVisibleTitle = loopRows
     .find((row) => !row.hidden)
@@ -249,24 +308,32 @@ if (searchInput) {
   const resetSearchPage = () => {
     currentPage = 1;
     updateLibrary();
+    syncUrlState("replace");
   };
 
   searchInput.addEventListener("input", resetSearchPage);
   searchInput.addEventListener("search", resetSearchPage);
 }
 
+function applyCategory(category) {
+  const known = categoryFilters.some(
+    (filter) => filter.dataset.categoryFilter === category,
+  );
+  activeCategory = known ? category : "all";
+
+  categoryFilters.forEach((candidate) => {
+    const isActive = candidate.dataset.categoryFilter === activeCategory;
+    candidate.classList.toggle("is-active", isActive);
+    candidate.setAttribute("aria-pressed", String(isActive));
+  });
+}
+
 categoryFilters.forEach((filter) => {
   filter.addEventListener("click", () => {
-    activeCategory = filter.dataset.categoryFilter;
+    applyCategory(filter.dataset.categoryFilter);
     currentPage = 1;
-
-    categoryFilters.forEach((candidate) => {
-      const isActive = candidate === filter;
-      candidate.classList.toggle("is-active", isActive);
-      candidate.setAttribute("aria-pressed", String(isActive));
-    });
-
     updateLibrary();
+    syncUrlState("push");
   });
 });
 
@@ -278,16 +345,10 @@ if (clearFiltersButton) {
       searchInput.value = "";
     }
 
-    activeCategory = "all";
+    applyCategory("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();
+    syncUrlState("push");
     searchInput?.focus();
   });
 }
@@ -297,6 +358,7 @@ if (paginationPrevious) {
     if (currentPage > 1) {
       currentPage -= 1;
       updateLibrary();
+      syncUrlState("push");
       focusFirstVisibleLoop();
     }
   });
@@ -306,11 +368,19 @@ if (paginationNext) {
   paginationNext.addEventListener("click", () => {
     currentPage += 1;
     updateLibrary();
+    syncUrlState("push");
     focusFirstVisibleLoop();
   });
 }
 
+readUrlState();
 updateLibrary();
+syncUrlState("replace");
+
+window.addEventListener("popstate", () => {
+  readUrlState();
+  updateLibrary();
+});
 
 let promptResizeFrame;
 window.addEventListener("resize", () => {
