change amount + pictures

src/components/CardRow/CardRow.jsx

@@ -0,0 +1,36 @@
+import React, { useContext } from 'react';
+import { CardContext } from '../../store/CardContext';
+import PrintingRow from '../PrintingRow/PrintingRow';
+
+function CardRow({ card }) {
+  const { expandedCardId, setExpandedCardId } = useContext(CardContext);
+  const isExpanded = expandedCardId === card.id;
+
+  const toggleExpand = () => setExpandedCardId(isExpanded ? null : card.id);
+
+  return (
+    <div style={{ borderBottom: '1px solid #eee', padding: '0.5rem' }}>
+      <div
+        style={{ cursor: 'pointer', display: 'flex', justifyContent: 'space-between' }}
+        onClick={toggleExpand}
+      >
+        <span>{card.name}</span>
+        <span>{card.type}</span>
+      </div>
+
+      {isExpanded && card.printings?.length > 0 && (
+        <div style={{ marginTop: '0.5rem', paddingLeft: '1rem' }}>
+          {card.printings.map(printing => (
+            <PrintingRow
+              key={`${card.id}-${printing.set_id}-${printing.rarity_id}`}
+              card_id={card.id}
+              printing={printing}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default CardRow;

src/components/PrintingRow/PrintingRow.jsx

@@ -0,0 +1,63 @@
+import React, { useContext, useState } 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 updateBackend = async (newAmount) => {
+    const { set_id, rarity_id } = printing;
+
+    if (card_id == null || set_id == null || rarity_id == null) return;
+
+    setLoading(true);
+    try {
+      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
+        })
+      });
+
+      if (response.ok) {
+        updateAmount(card_id, set_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);
+  };
+
+  return (
+    <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>
+        <span style={{ margin: '0 0.5rem' }}>{currentAmount}</span>
+        <button onClick={increment} disabled={loading}>+</button>
+      </div>
+    </div>
+  );
+}
+
+export default PrintingRow;