[feat] dashboard catalogs are real and clickable

src/db/schema.ts

@@ -137,7 +137,8 @@ export const inventory = pokeSchema.table('inventory',{
 	createdAt: timestamp().notNull().defaultNow(),
 },
 (table) => [
-	index('idx_userid_skuId').on(table.userId, table.skuId)
+	index('idx_userid_skuId').on(table.userId, table.skuId),
+	index('idx_userid_catalogName').on(table.userId, table.catalogName)
 ]);
 
 export const processingSkus = pokeSchema.table('processing_skus', {

src/pages/dashboard.astro

@@ -26,6 +26,18 @@ const totalQty = summary.totalQty || 0;
 const totalValue = summary.totalValue || 0;
 const totalGain = summary.totalGain || 0;
 
+// distinct catalog names for this user, for the sidebar catalog list
+const catalogRows = userId
+  ? await db
+      .selectDistinct({ name: inventory.catalogName })
+      .from(inventory)
+      .where(eq(inventory.userId, userId))
+  : [];
+const catalogs = catalogRows
+  .map(r => r.name)
+  .filter((n): n is string => !!n)
+  .sort((a, b) => a.localeCompare(b));
+
 ---
 
 <Layout title="Inventory Dashboard">
@@ -50,6 +62,10 @@ const totalGain = summary.totalGain || 0;
           data-catalog="all"
           role="button"
           style="cursor:pointer"
+          hx-post="/partials/inventory-cards"
+          hx-vals={JSON.stringify({ catalog: "all" })}
+          hx-target="#gridView"
+          hx-swap="innerHTML"
         >
           <span class="d-flex align-items-center gap-2">
             View all cards
@@ -57,12 +73,16 @@ const totalGain = summary.totalGain || 0;
           <span class="badge rounded-pill text-bg-secondary small ms-auto">{totalQty}</span>
         </li>
 
-        {["Case Cards", "Japanese Singles", "Bulk"].map((name) => (
+        {catalogs.map((name) => (
           <li
             class="ms-2 list-group-item list-group-item-action bg-transparent text-light border-0 rounded px-2 py-2 d-flex align-items-center gap-2"
             data-catalog={name}
             role="button"
             style="cursor:pointer"
+            hx-post="/partials/inventory-cards"
+            hx-vals={JSON.stringify({ catalog: name })}
+            hx-target="#gridView"
+            hx-swap="innerHTML"
           >
             {name}
           </li>
@@ -299,6 +319,18 @@ const totalGain = summary.totalGain || 0;
   </div> -->
 
 <script is:inline>
+(function () {
+  const catalogList = document.getElementById('catalogList');
+  if (catalogList) {
+    catalogList.addEventListener('click', (e) => {
+      const li = e.target.closest('li[data-catalog]');
+      if (!li) return;
+      catalogList.querySelectorAll('li[data-catalog]').forEach(el => el.classList.remove('active'));
+      li.classList.add('active');
+    });
+  }
+})();
+
 (function () {
   const modal = document.getElementById('inventoryModal');
   if (!modal) return;

src/pages/partials/inventory-cards.astro

@@ -11,9 +11,16 @@ import { db } from '../../db';
 const formData = await Astro.request.formData();
 const query = formData.get('q')?.toString() || '';
 const start = Number(formData.get('start')?.toString() || '0');
+const catalog = formData.get('catalog')?.toString() || '';
 
 const { userId } = Astro.locals.auth();
 
+// scope results to the selected catalog (empty / "all" => every catalog)
+let filterBy = `userId:=${userId}`;
+if (catalog && catalog !== 'all') {
+    filterBy += ` && catalogName:=\`${catalog}\``;
+}
+
 const InventoryDetails = async (inventoryId: string) => {
     //console.log('inventoryid', inventoryId);
     const details = await db.query.inventory.findFirst({
@@ -27,7 +34,7 @@ const InventoryDetails = async (inventoryId: string) => {
 // primary search values (for cards)
 let searchArray = [{
     collection: 'inventories',
-    filter_by: `userId:=${userId}`,
+    filter_by: filterBy,
     per_page: 20,
     facet_by: '',
     max_facet_values: 0,