before optimization

src/components/CardRow/CardRow.jsx

@@ -3,19 +3,28 @@ import { CardContext } from '../../store/CardContext';
 import PrintingRow from '../PrintingRow/PrintingRow';
 
 function CardRow({ card }) {
-  const { expandedCardId, setExpandedCardId } = useContext(CardContext);
+  const { expandedCardId, setExpandedCardId, ownedAmounts } = useContext(CardContext);
   const isExpanded = expandedCardId === card.id;
 
   const toggleExpand = () => setExpandedCardId(isExpanded ? null : card.id);
 
+  // Calculate total owned across all printings
+  const totalOwned = card.printings?.reduce((sum, p) => {
+    const owned = ownedAmounts[card.id]?.[p.set_id] ?? p.amount_owned ?? 0;
+    return sum + owned;
+  }, 0) ?? 0;
+
   return (
     <div style={{ borderBottom: '1px solid #eee', padding: '0.5rem' }}>
       <div
-        style={{ cursor: 'pointer', display: 'flex', justifyContent: 'space-between' }}
+        style={{ cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
         onClick={toggleExpand}
       >
         <span>{card.name}</span>
-        <span>{card.type}</span>
+        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+          <span>{card.type}</span>
+          <span>Total owned: {totalOwned}</span>
+        </div>
       </div>
 
       {isExpanded && card.printings?.length > 0 && (
@@ -33,4 +42,4 @@ function CardRow({ card }) {
   );
 }
 
-export default CardRow;
+export default CardRow;

src/components/PrintingRow/PrintingRow.jsx

@@ -1,16 +1,14 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useState, memo } from 'react';
 import { CardContext } from '../../store/CardContext';
 
 function PrintingRow({ card_id, printing }) {
   const { ownedAmounts, updateAmount } = useContext(CardContext);
   const [loading, setLoading] = useState(false);
 
-  // Current amount from context, fallback to DB value
-  const currentAmount = ownedAmounts[card_id]?.[printing.set_id] ?? printing.amount_owned ?? 0;
+  const currentAmount = ownedAmounts[card_id]?.[printing.set_id]?.[printing.rarity_id] ?? printing.amount_owned ?? 0;
 
   const updateBackend = async (newAmount) => {
     const { set_id, rarity_id } = printing;
-
     if (card_id == null || set_id == null || rarity_id == null) return;
 
     setLoading(true);
@@ -18,38 +16,22 @@ function PrintingRow({ card_id, printing }) {
       const response = await fetch('http://localhost:3000/collection/amount', {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          card_id,
-          set_id,
-          rarity_id,
-          amount_owned: newAmount
-        })
+        body: JSON.stringify({ card_id, set_id, rarity_id, amount_owned: newAmount })
       });
 
       if (response.ok) {
-        updateAmount(card_id, set_id, newAmount);
+        updateAmount(card_id, set_id, rarity_id, newAmount);
       }
-    } catch (err) {
-      // silently fail or handle elsewhere
     } finally {
       setLoading(false);
     }
   };
 
   const increment = () => updateBackend(currentAmount + 1);
-  const decrement = () => {
-    if (currentAmount > 0) updateBackend(currentAmount - 1);
-  };
+  const decrement = () => { if (currentAmount > 0) updateBackend(currentAmount - 1); };
 
   return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        padding: '0.25rem 0',
-        opacity: loading ? 0.6 : 1
-      }}
-    >
+    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0.25rem 0', opacity: loading ? 0.6 : 1 }}>
       <span>{printing.set_name} {printing.rarity_name}</span>
       <div>
         <button onClick={decrement} disabled={loading || currentAmount === 0}>–</button>
@@ -60,4 +42,4 @@ function PrintingRow({ card_id, printing }) {
   );
 }
 
-export default PrintingRow;
+export default memo(PrintingRow);

src/components/SearchBar/SearchBar.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+function SearchBar({ searchTerm, setSearchTerm }) {
+  return (
+    <div style={{ position: 'relative', width: '100%' }}>
+      <input
+        type="text"
+        placeholder="Search by card name..."
+        value={searchTerm}
+        onChange={e => setSearchTerm(e.target.value)}
+        style={{
+          width: '100%',
+          padding: '0.5rem 2rem 0.5rem 0.5rem',
+          borderRadius: '4px',
+          border: '1px solid #ccc',
+          boxSizing: 'border-box'
+        }}
+      />
+      {searchTerm && (
+        <span
+          onClick={() => setSearchTerm('')}
+          style={{
+            position: 'absolute',
+            right: '0.5rem',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            cursor: 'pointer',
+            fontSize: '1rem',
+            color: '#888',
+            userSelect: 'none'
+          }}
+        >
+          ×
+        </span>
+      )}
+    </div>
+  );
+}
+
+export default SearchBar;