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;