[chore] move cards to htmx post

src/components/Card.astro

@@ -1,66 +0,0 @@
----
-//import { eq } from 'drizzle-orm';
-import { isConditionalExpression } from 'typescript';
-import { client } from '../db/typesense.ts';
-import { db } from '../db';
-//import * as schema from '../db/schema.ts';
-import RarityIcon from './RarityIcon.astro';
-
-const { query } = Astro.props;
-const searchResults = await client.collections('cards').documents().search({
-    q: query,
-    query_by: 'productLineName,productName,setName,number,rarityName',
-    per_page: 250,
-});
-const productIds = searchResults.hits?.map((hit: any) => hit.document.productId) ?? [];
-
-// get pokemon data with prices and set info using searchResults and then query the database for each card to get the prices and set info
-const pokemon = await db.query.cards.findMany({
-    where: { productId: { in: productIds, }, },
-    with: {
-        prices: true,
-        set: true,
-    }
-});
-
-
-const formatPrice = (price:any) => {
-    if (price === null) {
-        return "–";
-    }
-    price = Number(price);
-    if (price >= 99.99) {
-        return `${Math.round(price)}`;
-    }
-    return `${price.toFixed(2)}`;
-};
-
-const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
----
-{pokemon.map((card) => (
-    <div class="col">
-        <div hx-get={`/partials/card-modal?productId=${card.productId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal">
-            <img src={`/cards/${card.productId}.jpg`} alt={card.productName} loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
-        </div>
-        <div class="row row-cols-5 gx-1 price-row mb-2">
-        {card.prices
-            .slice()
-            .sort((a, b) => order.indexOf(a.condition) - order.indexOf(b.condition))
-            .filter((price, index, arr) =>
-            arr.findIndex(p => p.condition === price.condition) === index
-            )
-            .map((price) => (
-            <div class="col price-label ps-1">
-                {price.condition.split(' ').map((w) => w[0]).join('')}
-                <br />${formatPrice(price.marketPrice)}
-            </div>
-            ))}
-        </div>
-        <div class="h5 my-0">{card.productName}</div>
-        <div class="d-flex flex-row lh-1 mt-1">
-            <div class="text-secondary flex-grow-1">{card.set?.setCode}</div>
-            <div class="text-secondary">{card.number}</div>
-            <span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
-        </div>
-    </div>
-))}

src/components/CardGrid.astro

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

src/components/StickyFilter.astro

@@ -1,14 +1,13 @@
 ---
-import '/src/assets/css/main.scss';
-const { query } = Astro.props;
+
 ---
 
 <div class="sticky border-bottom">
     <div class="container">
-        <form method="GET">
+        <form hx-post="/partials/cards" hx-target="#cardGrid" hx-trigger="load, submit">
             <div class="d-flex justify-content-between">
                 <div class="my-2 flex-grow-1 me-2">
-                    <input type="text" name="q" class="form-control w-100 search-box" placeholder="Search cards..." value={query} />
+                    <input type="text" name="q" class="form-control w-100 search-box" placeholder="Search cards..." />
                 </div>
                 <div class="my-2">
                     <input type="submit" class="w-100 search-button" value="Search" />