From 87235ab37a00061bc5c4194fd62d05f471fdb254 Mon Sep 17 00:00:00 2001
From: Zach Harding <zachary.b.harding@gmail.com>
Date: Sun, 5 Apr 2026 11:20:26 -0400
Subject: [PATCH] working with inventory style changes - tbd

---
 src/pages/partials/card-modal.astro | 321 +++++++++++++++-------------
 src/pages/partials/cards.astro      |  11 +-
 2 files changed, 182 insertions(+), 150 deletions(-)

diff --git a/src/pages/partials/card-modal.astro b/src/pages/partials/card-modal.astro
index a89b972..989c476 100644
--- a/src/pages/partials/card-modal.astro
+++ b/src/pages/partials/card-modal.astro
@@ -1,4 +1,6 @@
 ---
+import { Show } from '@clerk/astro/components';
+
 import ebay from "/vendors/ebay.svg?raw";
 import SetIcon from '../../components/SetIcon.astro';
 import EnergyIcon from '../../components/EnergyIcon.astro';
@@ -168,6 +170,7 @@ const ebaySearchUrl = (card: any) => {
 const altSearchUrl = (card: any) => {
   return `https://alt.xyz/browse?query=${encodeURIComponent(card?.productUrlName)}+${encodeURIComponent(card?.set?.setUrlName)}+${encodeURIComponent(card?.number)}&sortBy=newest_first`;
 };
+
 ---
   <div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
     <div class="modal-content" data-card-id={card?.cardId}>
@@ -248,11 +251,13 @@ const altSearchUrl = (card: any) => {
                       <span class="d-none">Damaged</span><span class="d-inline">DMG</span>
                     </button>
                   </li>
-                  <li class="nav-item" role="presentation">
-                    <button class="nav-link vendor" id="vendor-tab" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false">
-                      <span class="d-none d-xxl-inline">Inventory</span><span class="d-xxl-none">+/-</span>
-                    </button>
-                  </li>
+
+                    <li class="nav-item" role="presentation">
+                      <button class="nav-link vendor" id="vendor-tab" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false">
+                        <span class="d-none d-xxl-inline">Inventory</span><span class="d-xxl-none">+/-</span>
+                      </button>
+                    </li>
+
                 </ul>
 
                 <div class="tab-content" id="myTabContent">
@@ -336,176 +341,198 @@ const altSearchUrl = (card: any) => {
                     );
                   })}
 
-                  <div class="tab-pane fade" id="nav-vendor" role="tabpanel" aria-labelledby="nav-vendor" tabindex="0">
-                    <div class="row g-3">
-                      <div class="col-12 col-md-6">
-                        <h5 class="my-3">Add {card?.productName} to inventory</h5>
+                    <div class="tab-pane fade" id="nav-vendor" role="tabpanel" aria-labelledby="nav-vendor" tabindex="0">
+                      <div class="row g-3">
+                        <div class="col-12 col-md-6">
+                          <h5 class="mt-1 mb-2">Add {card?.productName} to inventory</h5>
 
-                        <form id="inventoryForm" data-inventory-form novalidate>
-                          <div class="row g-3">
-                            <div class="col-4">
-                              <label for="quantity" class="form-label fw-medium">Quantity</label>
-                              <input
-                                type="number"
-                                class="form-control mt-1"
-                                id="quantity"
-                                name="quantity"
-                                min="1"
-                                step="1"
-                                value="1"
-                                required
-                              />
-                              <div class="invalid-feedback">Required.</div>
-                            </div>
+                          <form id="inventoryForm" data-inventory-form novalidate>
+                            <div class="row g-3">
+                              <div class="col-4">
+                                <label for="quantity" class="form-label fw-medium">Quantity</label>
+                                <input
+                                  type="number"
+                                  class="form-control mt-1"
+                                  id="quantity"
+                                  name="quantity"
+                                  min="1"
+                                  step="1"
+                                  value="1"
+                                  required
+                                />
+                                <div class="invalid-feedback">Required.</div>
+                              </div>
 
-                            <div class="col-8">
-                              <div class="d-flex justify-content-between align-items-start gap-2 flex-wrap">
-                                <label for="purchasePrice" class="form-label fw-medium mb-0 mt-1">
-                                  Purchase price
-                                </label>
+                              <div class="col-8">
+                                <div class="d-flex justify-content-between align-items-start gap-2 flex-wrap">
+                                  <label for="purchasePrice" class="form-label fw-medium">
+                                    Purchase price
+                                  </label>
 
-                                <div class="btn-group btn-group-sm price-toggle" role="group" aria-label="Price mode">
+                                  <div class="btn-group btn-group-sm price-toggle" role="group" aria-label="Price mode">
+                                    <input
+                                      type="radio"
+                                      class="btn-check"
+                                      name="priceMode"
+                                      id="mode-dollar"
+                                      value="dollar"
+                                      autocomplete="off"
+                                      checked
+                                    />
+                                    <label class="btn btn-outline-secondary" for="mode-dollar">$</label>
+
+                                    <input
+                                      type="radio"
+                                      class="btn-check"
+                                      name="priceMode"
+                                      id="mode-percent"
+                                      value="percent"
+                                      autocomplete="off"
+                                    />
+                                    <label class="btn btn-outline-secondary" for="mode-percent">%</label>
+                                  </div>
+                                </div>
+
+                                <div class="input-group">
+                                  <span class="input-group-text mt-1" id="pricePrefix">$</span>
+                                  <input
+                                    type="number"
+                                    class="form-control mt-1 rounded-end"
+                                    id="purchasePrice"
+                                    name="purchasePrice"
+                                    min="0"
+                                    step="0.01"
+                                    placeholder="0.00"
+                                    aria-describedby="pricePrefix priceSuffix priceHint"
+                                    required
+                                  />
+                                  <span class="input-group-text d-none mt-1" id="priceSuffix">%</span>
+                                </div>
+
+                                <div class="form-text" id="priceHint">Enter the purchase price.</div>
+                                <div class="invalid-feedback">Enter a purchase price.</div>
+                              </div>
+
+                              <div class="col-12">
+                                <label class="form-label fw-medium">Condition</label>
+                                <div class="btn-group condition-input w-100" role="group" aria-label="Condition">
                                   <input
                                     type="radio"
                                     class="btn-check"
-                                    name="priceMode"
-                                    id="mode-dollar"
-                                    value="dollar"
+                                    name="condition"
+                                    id="cond-nm"
+                                    value="Near Mint"
                                     autocomplete="off"
                                     checked
                                   />
-                                  <label class="btn btn-outline-secondary" for="mode-dollar">$</label>
+                                  <label class="btn btn-cond-nm" for="cond-nm">NM</label>
 
                                   <input
                                     type="radio"
                                     class="btn-check"
-                                    name="priceMode"
-                                    id="mode-percent"
-                                    value="percent"
+                                    name="condition"
+                                    id="cond-lp"
+                                    value="Lightly Played"
                                     autocomplete="off"
                                   />
-                                  <label class="btn btn-outline-secondary" for="mode-percent">%</label>
+                                  <label class="btn btn-cond-lp" for="cond-lp">LP</label>
+
+                                  <input
+                                    type="radio"
+                                    class="btn-check"
+                                    name="condition"
+                                    id="cond-mp"
+                                    value="Moderately Played"
+                                    autocomplete="off"
+                                  />
+                                  <label class="btn btn-cond-mp" for="cond-mp">MP</label>
+
+                                  <input
+                                    type="radio"
+                                    class="btn-check"
+                                    name="condition"
+                                    id="cond-hp"
+                                    value="Heavily Played"
+                                    autocomplete="off"
+                                  />
+                                  <label class="btn btn-cond-hp" for="cond-hp">HP</label>
+
+                                  <input
+                                    type="radio"
+                                    class="btn-check"
+                                    name="condition"
+                                    id="cond-dmg"
+                                    value="Damaged"
+                                    autocomplete="off"
+                                  />
+                                  <label class="btn btn-cond-dmg" for="cond-dmg">DMG</label>
                                 </div>
                               </div>
-
-                              <div class="input-group">
-                                <span class="input-group-text mt-1" id="pricePrefix">$</span>
+                              <div class="col-12">
+                                <label for="catalogName" class="form-label fw-medium">
+                                  Catalog
+                                  <span class="text-body-tertiary fw-normal ms-1 small">optional</span>
+                                </label>
                                 <input
-                                  type="number"
-                                  class="form-control mt-1 rounded-end"
-                                  id="purchasePrice"
-                                  name="purchasePrice"
-                                  min="0"
-                                  step="0.01"
-                                  placeholder="0.00"
-                                  aria-describedby="pricePrefix priceSuffix priceHint"
-                                  required
+                                  type="text"
+                                  class="form-control"
+                                  id="catalogName"
+                                  name="catalogName"
+                                  list="catalogSuggestions"
+                                  placeholder="Default"
+                                  autocomplete="off"
+                                  maxlength="100"
                                 />
-                                <span class="input-group-text d-none mt-1" id="priceSuffix">%</span>
+                                <datalist id="catalogSuggestions">
+
+                                </datalist>
+                                <div class="form-text">
+                                  Type a name or pick an existing catalog.
+                                </div>
+                              </div>
+                              <div class="col-12">
+                                <label for="note" class="form-label fw-medium">
+                                  Note
+                                  <span class="text-body-tertiary fw-normal ms-1 small">optional</span>
+                                </label>
+                                <textarea
+                                  class="form-control"
+                                  id="note"
+                                  name="note"
+                                  rows="2"
+                                  maxlength="255"
+                                  placeholder="e.g. bought at local shop, gift, graded copy…"
+                                ></textarea>
+                                <div class="form-text text-end" id="noteCount">0 / 255</div>
                               </div>
 
-                              <div class="form-text" id="priceHint">Enter the purchase price.</div>
-                              <div class="invalid-feedback">Enter a purchase price.</div>
-                            </div>
-
-                            <div class="col-12">
-                              <label class="form-label fw-medium">Condition</label>
-                              <div class="btn-group condition-input w-100" role="group" aria-label="Condition">
-                                <input
-                                  type="radio"
-                                  class="btn-check"
-                                  name="condition"
-                                  id="cond-nm"
-                                  value="Near Mint"
-                                  autocomplete="off"
-                                  checked
-                                />
-                                <label class="btn btn-cond-nm" for="cond-nm">NM</label>
-
-                                <input
-                                  type="radio"
-                                  class="btn-check"
-                                  name="condition"
-                                  id="cond-lp"
-                                  value="Lightly Played"
-                                  autocomplete="off"
-                                />
-                                <label class="btn btn-cond-lp" for="cond-lp">LP</label>
-
-                                <input
-                                  type="radio"
-                                  class="btn-check"
-                                  name="condition"
-                                  id="cond-mp"
-                                  value="Moderately Played"
-                                  autocomplete="off"
-                                />
-                                <label class="btn btn-cond-mp" for="cond-mp">MP</label>
-
-                                <input
-                                  type="radio"
-                                  class="btn-check"
-                                  name="condition"
-                                  id="cond-hp"
-                                  value="Heavily Played"
-                                  autocomplete="off"
-                                />
-                                <label class="btn btn-cond-hp" for="cond-hp">HP</label>
-
-                                <input
-                                  type="radio"
-                                  class="btn-check"
-                                  name="condition"
-                                  id="cond-dmg"
-                                  value="Damaged"
-                                  autocomplete="off"
-                                />
-                                <label class="btn btn-cond-dmg" for="cond-dmg">DMG</label>
+                              <div class="col-12 d-flex gap-3 pt-2">
+                                <button type="reset" class="btn btn-outline-danger flex-fill">Reset</button>
+                                <button type="submit" class="btn btn-success flex-fill">Save to inventory</button>
                               </div>
                             </div>
-
-                            <div class="col-12">
-                              <label for="note" class="form-label fw-medium">
-                                Note
-                                <span class="text-body-tertiary fw-normal ms-1 small">optional</span>
-                              </label>
-                              <textarea
-                                class="form-control"
-                                id="note"
-                                name="note"
-                                rows="2"
-                                maxlength="255"
-                                placeholder="e.g. bought at local shop, gift, graded copy…"
-                              ></textarea>
-                              <div class="form-text text-end" id="noteCount">0 / 255</div>
-                            </div>
-
-                            <div class="col-12 d-flex gap-3 pt-2">
-                              <button type="reset" class="btn btn-outline-danger flex-fill">Reset</button>
-                              <button type="submit" class="btn btn-success flex-fill">Save to inventory</button>
-                            </div>
-                          </div>
-                        </form>
-                      </div>
-
-                      <div class="col-12 col-md-6">
-                        <h5 class="my-3">Inventory entries for {card?.productName}</h5>
-
-                        <!-- Empty state -->
-                        <div class="alert alert-dark border-0 rounded-4 d-none" id="inventoryEmptyState">
-                          <div class="fw-medium mb-1">No inventory entries yet</div>
-                          <div class="text-secondary small">
-                            Once you add copies of this card, they'll show up here.
-                          </div>
+                          </form>
                         </div>
 
-                        <!-- Inventory list -->
-                        <div class="d-flex flex-column gap-3" id="inventoryEntryList" data-card-id={cardId}>
-                          <span>Loading...</span>
+                        <div class="col-12 col-md-6">
+                          <h5 class="mt-1 mb-2">Inventory entries for {card?.productName}</h5>
+
+                          <!-- Empty state -->
+                          <div class="alert alert-dark border-0 rounded-4 d-none" id="inventoryEmptyState">
+                            <div class="fw-medium mb-1">No inventory entries yet</div>
+                            <div class="text-secondary small">
+                              Once you add copies of this card, they'll show up here.
+                            </div>
+                          </div>
+
+                          <!-- Inventory list -->
+                          <div class="d-flex flex-column gap-3" id="inventoryEntryList" data-card-id={cardId}>
+                            <span>Loading...</span>
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
+
                 </div>
 
                 <!-- Chart lives permanently outside tab-content so Bootstrap never hides it. -->
diff --git a/src/pages/partials/cards.astro b/src/pages/partials/cards.astro
index 7579d01..3528e55 100644
--- a/src/pages/partials/cards.astro
+++ b/src/pages/partials/cards.astro
@@ -1,5 +1,8 @@
 ---
 import { client } from '../../db/typesense';
+
+import { Show } from '@clerk/astro/components';
+
 import RarityIcon from '../../components/RarityIcon.astro';
 import FirstEditionIcon from "../../components/FirstEditionIcon.astro";
 export const prerender = false;
@@ -283,9 +286,11 @@ const facets = searchResults.results.slice(1).map((result: any) => {
 
 {pokemon.map((card:any) => (
     <div class="col">
-        <button type="button" class="btn btn-sm inventory-button position-relative float-end shadow-filter text-center p-2" data-card-id={card.cardId} hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="event.stopPropagation(); sessionStorage.setItem('openModalTab', 'nav-vendor');">
-            <b>+/–</b>
-        </button>
+        
+            <button type="button" class="btn btn-sm inventory-button position-relative float-end shadow-filter text-center p-2" data-card-id={card.cardId} hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="event.stopPropagation(); sessionStorage.setItem('openModalTab', 'nav-vendor');">
+                <b>+/–</b>
+            </button>
+        
         <div class="card-trigger position-relative" data-card-id={card.cardId} hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="const cardTitle = this.querySelector('#cardImage').getAttribute('alt'); dataLayer.push({'event': 'virtualPageview', 'pageUrl': this.getAttribute('hx-get'), 'pageTitle': cardTitle, 'previousUrl': '/pokemon'});">
             <div class="image-grow rounded-4 card-image" data-energy={card.energyType} data-rarity={card.rarityName} data-variant={card.variant} data-name={card.productName}><img src={`/static/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-4 mb-2 w-100" onerror="this.onerror=null; this.src='/static/cards/default.jpg'; this.closest('.image-grow')?.setAttribute('data-default','true')"/><span class="position-absolute top-50 start-0 d-inline medium-icon"><FirstEditionIcon edition={card?.variant} /></span>
               <div class="holo-shine"></div>