[feat] infinite scolling complete

src/components/CardGrid.astro

@@ -4,7 +4,7 @@
 
     <div class="row mb-5">
         <div class="col-md-3 display-sm-none">
-            <div class="h5">Inventory management placeholder</div>
+            <div class="h5 d-none">Inventory management placeholder</div>
         </div>
         <div class="col-sm-12 col-md-9 mt-0">
             <div id="cardGrid" class="row g-xxl-3 g-2 row-cols-2 row-cols-lg-3 row-cols-xl-4">

src/components/StickyFilter.astro

@@ -1,12 +1,26 @@
 ---
 
 ---
+<script is:inline>
+    const afterUpdate = (e) => {
+        const start = document.querySelector('#start');
+        if (start) {
+            const val = Number(start.value) || 0;
+            start.value = (val + 20).toString();
+        }
+        // delete the triggering element
+        if (e && e.detail && e.detail.elt) {
+            e.detail.elt.remove();
+        }
+    };
+</script>
 
 <div class="sticky border-bottom">
     <div class="container">
-        <form hx-post="/partials/cards" hx-target="#cardGrid" hx-trigger="load, submit">
+        <form id="searchform" hx-post="/partials/cards" hx-target="#cardGrid" hx-trigger="load, submit" hx-vals='{"start":"0"}' hx-on--after-request="afterUpdate()">
             <div class="d-flex justify-content-between">
                 <div class="my-2 flex-grow-1 me-2">
+                    <input type="hidden" name="start" id="start" value="0" />
                     <input type="text" name="q" class="form-control w-100 search-box" placeholder="Search cards..." />
                 </div>
                 <div class="my-2">