CLOSES: #464 (#600)

Co-authored-by: Copilot <[email protected]>

Author: Malix-Labs

features.html

@@ -57,7 +57,7 @@ <h1 style="margin-left: auto;margin-right: auto;">Available Dev Container Featur
     const collectionTable = document.getElementById('collectionTable');
     const rows = collectionTable.getElementsByTagName('tr');
 
-    searchInput.addEventListener('input', function () {
+    function performSearch() {
         const searchValue = searchInput.value.toLowerCase();
 
         for (let i = 1; i < rows.length; i++) {
@@ -71,5 +71,24 @@ <h1 style="margin-left: auto;margin-right: auto;">Available Dev Container Featur
                 rows[i].style.display = 'none';
             }
         }
+    }
+
+    searchInput.addEventListener('input', function () {
+        performSearch();
+        const url = new URL(window.location);
+        if (searchInput.value) {
+            url.searchParams.set('search', searchInput.value);
+        } else {
+            url.searchParams.delete('search');
+        }
+        window.history.replaceState({}, '', url);
     });
+
+    // Read search parameter from URL on page load
+    const urlParams = new URLSearchParams(window.location.search);
+    const searchParam = urlParams.get('search');
+    if (searchParam) {
+        searchInput.value = searchParam;
+        performSearch();
+    }
 </script>

templates.html

@@ -53,7 +53,7 @@ <h1 style="margin-left: auto;margin-right: auto;">Available Dev Container Templa
     const collectionTable = document.getElementById('collectionTable');
     const rows = collectionTable.getElementsByTagName('tr');
 
-    searchInput.addEventListener('input', function () {
+    function performSearch() {
         const searchValue = searchInput.value.toLowerCase();
 
         for (let i = 1; i < rows.length; i++) {
@@ -66,5 +66,24 @@ <h1 style="margin-left: auto;margin-right: auto;">Available Dev Container Templa
                 rows[i].style.display = 'none';
             }
         }
+    }
+
+    searchInput.addEventListener('input', function () {
+        performSearch();
+        const url = new URL(window.location);
+        if (searchInput.value) {
+            url.searchParams.set('search', searchInput.value);
+        } else {
+            url.searchParams.delete('search');
+        }
+        window.history.replaceState({}, '', url);
     });
+
+    // Read search parameter from URL on page load
+    const urlParams = new URLSearchParams(window.location.search);
+    const searchParam = urlParams.get('search');
+    if (searchParam) {
+        searchInput.value = searchParam;
+        performSearch();
+    }
 </script>