fix: improve Clear Filters button functionality

Updated the clearFilters() function to properly reset the filter form
and trigger form submission.

Changes:
- Use form.reset() instead of manually clearing each input for
  cleaner, more reliable form reset
- Manually reset pagination hidden inputs (limit=50, offset=0) after
  form.reset() to ensure pagination state is properly cleared
- Changed HTMX trigger from "change" to "submit" to match the new
  visible form structure
- Simplified loadFilter function to not clear the form before
  populating, just update existing field values

The previous implementation was manually iterating through all inputs
and resetting them one by one, which was error-prone and didn't
properly handle the pagination state. The new implementation uses
the browser's native form.reset() for reliable form clearing.

This fix ensures that clicking "Clear" properly resets all filters
and pagination, allowing users to start fresh with their search.

web/src/bookshelf.ts

@@ -6,19 +6,19 @@ import { showToast } from "./toast";
 function clearFilters(): void {
   const filterForm = document.getElementById("filter-form") as HTMLFormElement;
   if (!filterForm) return;
-
   // Reset all form fields
-  const inputs = filterForm.querySelectorAll("input, select");
+  filterForm.reset();
-  inputs.forEach((input) => {
+  // Manually reset pagination values
-    if (input instanceof HTMLInputElement && input.type === "checkbox") {
+  const limitInput = filterForm.querySelector(
-      input.checked = false;
+    'input[name="limit"]',
-    } else {
+  ) as HTMLInputElement;
-      (input as HTMLInputElement).value = "";
+  const offsetInput = filterForm.querySelector(
-    }
+    'input[name="offset"]',
-  });
+  ) as HTMLInputElement;
-
+  if (limitInput) limitInput.value = "50";
-  // Trigger HTMX reload with cleared filters
+  if (offsetInput) offsetInput.value = "0";
-  window.htmx.trigger(filterForm, "change");
+  // Trigger form submit with cleared filters
+  window.htmx.trigger(filterForm, "submit");
 }
 
 // Alpine.js component
@@ -91,38 +91,34 @@ Alpine.data("bookshelf", () => ({
         return;
       }
 
-      // Clear existing filter values
+      // Don't clear form - just update values
-      filterForm.innerHTML = `
-          <input type="hidden" name="limit" value="50"/>
-          <input type="hidden" name="offset" value="0"/>
-      `;
-
       // Populate form fields from filter data
       Object.entries(filterData).forEach(([key, value]) => {
         if (value) {
           // Only set non-empty values
-          const input = document.createElement("input");
+          // Update visible form fields if they exist
-          input.type = "hidden";
+          const visibleField = filterForm.querySelector(
-          input.name = key;
-          input.value = value;
-          filterForm.appendChild(input);
-
-          // Also update visible form fields if they exist
-          const visibleField = document.querySelector(
             `[name="${key}"]`,
           ) as HTMLInputElement;
           if (visibleField) {
-            visibleField.value = value;
+            if (visibleField.type === "checkbox") {
+              visibleField.checked = value === "true";
+            } else {
+              visibleField.value = value;
+            }
+          } else {
+            // Create hidden input if visible field doesn't exist
+            const input = document.createElement("input");
+            input.type = "hidden";
+            input.name = key;
+            input.value = value;
+            filterForm.appendChild(input);
           }
         }
       });
 
-      // Trigger HTMX to apply the filter
+      // Trigger HTMX to apply the filter by submitting the form
-      // Use the first input to trigger the change event
+      window.htmx.trigger(filterForm, "submit");
-      const firstInput = filterForm.querySelector("input");
-      if (firstInput) {
-        window.htmx.trigger(firstInput, "change");
-      }
 
       showToast(`Filter applied: ${filterName}`, "success");