[feat] loading inventory

src/components/CardGrid.astro

@@ -48,6 +48,21 @@ import BackToTop from "./BackToTop.astro"
 (function () {
 
   function initInventoryForms(root = document) {
+    // Fetch inventory entries for this card
+    const invList = root.querySelector('#inventoryEntryList') || document.getElementById('inventoryEntryList');
+    if (invList && !invList.dataset.inventoryFetched) {
+      invList.dataset.inventoryFetched = 'true';
+      const cardId = invList.dataset.cardId;
+      if (cardId) {
+        const body = new FormData();
+        body.append('cardId', cardId);
+        fetch('/api/inventory', { method: 'POST', body })
+          .then(r => r.text())
+          .then(html => { invList.innerHTML = html || ''; })
+          .catch(() => { invList.innerHTML = '<span class="text-danger">Failed to load inventory</span>'; });
+      }
+    }
+
     const forms = root.querySelectorAll('[data-inventory-form]');
 
     forms.forEach((form) => {

src/pages/api/inventory.ts

@@ -145,16 +145,11 @@ export const POST: APIRoute = async ({ request, locals }) => {
             break;
 
         default:
-            return new Response(
-                'Invalid action',
-                {
-                    status: 400,
-                    headers: { 'Content-Type': 'text/html' }
-                }
-            );
+            // No action = list inventory for this card
+            return getInventory(userId!, cardId);
     }
 
-    // Always return current inventory
+    // Always return current inventory after a mutation
     return getInventory(userId!, cardId);
 
 

src/pages/partials/card-modal.astro

@@ -500,17 +500,9 @@ const altSearchUrl = (card: any) => {
                         </div>
 
                         <!-- Inventory list -->
-                        <div class="d-flex flex-column gap-3" id="inventoryEntryList" hx-post="/api/inventory" hx-trigger="intersect once" hx-target="this" hx-vals=`{"cardId": ${cardId}}`>
+                        <div class="d-flex flex-column gap-3" id="inventoryEntryList" data-card-id={cardId}>
                           <span>Loading...</span>
                         </div>
-                        <script is:inline>
-                          console.log('Setting up inventory tooltips');
-                          document.addEventListener('DOMContentLoaded', () => {
-                            console.log('Initializing tooltips');
-                            htmx.process(document.getElementById('inventoryEntryList'));
-                            console.log('Tooltips initialized');
-                          });
-                        </script>
                       </div>
                     </div>
                   </div>