From 5582638935d607ea27cbab6622c82e3bf6eadfb3 Mon Sep 17 00:00:00 2001
From: varutasu <104105839+varutasu@users.noreply.github.com>
Date: Wed, 3 Jun 2026 16:53:04 -0500
Subject: [PATCH] Extract CardDetailQuantityModal from card detail page (Brief
 1). (#81)

Moves owned-quantity modal markup into components/CardDetailQuantityModal.js.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/CardDetailQuantityModal.js | 81 +++++++++++++++++++++++++++
 pages/card/[id].js                    | 69 +++--------------------
 2 files changed, 90 insertions(+), 60 deletions(-)
 create mode 100644 components/CardDetailQuantityModal.js

diff --git a/components/CardDetailQuantityModal.js b/components/CardDetailQuantityModal.js
new file mode 100644
index 0000000..263bb48
--- /dev/null
+++ b/components/CardDetailQuantityModal.js
@@ -0,0 +1,81 @@
+import { VOCAB } from '../lib/collection-vocabulary.js';
+
+export default function CardDetailQuantityModal({
+  isOpen,
+  ownedQuantity,
+  quantity,
+  onQuantityChange,
+  onConfirm,
+  onClose,
+}) {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div
+        className="bg-white rounded-2xl p-6 max-w-md w-full mx-4"
+        style={{ backgroundColor: 'var(--bg-primary)' }}
+      >
+        <h3 className="text-xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
+          {ownedQuantity > 0 ? 'Update Quantity' : VOCAB.ADD_TO_MY_COLLECTION}
+        </h3>
+        <div className="mb-6">
+          <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+            Quantity
+          </label>
+          <div className="flex items-center gap-4">
+            <button
+              type="button"
+              onClick={() => onQuantityChange(Math.max(1, quantity - 1))}
+              className="w-10 h-10 rounded-lg flex items-center justify-center border transition-all duration-200 hover:shadow-md"
+              style={{
+                backgroundColor: 'var(--bg-secondary)',
+                borderColor: 'var(--border)',
+                color: 'var(--text-primary)',
+              }}
+            >
+              -
+            </button>
+            <span className="text-2xl font-bold px-4" style={{ color: 'var(--text-primary)' }}>
+              {quantity}
+            </span>
+            <button
+              type="button"
+              onClick={() => onQuantityChange(quantity + 1)}
+              className="w-10 h-10 rounded-lg flex items-center justify-center border transition-all duration-200 hover:shadow-md"
+              style={{
+                backgroundColor: 'var(--bg-secondary)',
+                borderColor: 'var(--border)',
+                color: 'var(--text-primary)',
+              }}
+            >
+              +
+            </button>
+          </div>
+        </div>
+        <div className="flex gap-3">
+          <button
+            type="button"
+            onClick={() => onConfirm(quantity)}
+            className="flex-1 px-4 py-2 rounded-xl font-medium gradient-bg-purple text-white hover:shadow-lg transition-all duration-200"
+          >
+            {ownedQuantity > 0 ? 'Update' : VOCAB.ADD_TO_MY_COLLECTION}
+          </button>
+          <button
+            type="button"
+            onClick={onClose}
+            className="flex-1 px-4 py-2 rounded-xl font-medium border transition-all duration-200"
+            style={{
+              borderColor: 'var(--border)',
+              color: 'var(--text-secondary)',
+            }}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/pages/card/[id].js b/pages/card/[id].js
index 605d4a9..058b0e7 100644
--- a/pages/card/[id].js
+++ b/pages/card/[id].js
@@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
 import Layout from '../../components/Layout';
 import { useAuth } from '../../lib/use-auth';
 import CollectionSelectionModal from '../../components/CollectionSelectionModal';
+import CardDetailQuantityModal from '../../components/CardDetailQuantityModal';
 import { ManaCost, ColorIdentity, AdvancedManaCost } from '../../components/ManaSymbols';
 import ManaSymbolSettings from '../../components/ManaSymbolSettings';
 import { VOCAB, collectionDisplayName } from '../../lib/collection-vocabulary.js';
@@ -763,66 +764,14 @@ export default function CardDetail() {
         </div>
       </div>
 
-      {/* Quantity Modal */}
-      {showQuantityModal && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <div className="bg-white rounded-2xl p-6 max-w-md w-full mx-4" style={{ backgroundColor: 'var(--bg-primary)' }}>
-            <h3 className="text-xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
-              {ownedQuantity > 0 ? 'Update Quantity' : VOCAB.ADD_TO_MY_COLLECTION}
-            </h3>
-            <div className="mb-6">
-              <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
-                Quantity
-              </label>
-              <div className="flex items-center gap-4">
-                <button
-                  onClick={() => setQuantity(Math.max(1, quantity - 1))}
-                  className="w-10 h-10 rounded-lg flex items-center justify-center border transition-all duration-200 hover:shadow-md"
-                  style={{
-                    backgroundColor: 'var(--bg-secondary)',
-                    borderColor: 'var(--border)',
-                    color: 'var(--text-primary)'
-                  }}
-                >
-                  -
-                </button>
-                <span className="text-2xl font-bold px-4" style={{ color: 'var(--text-primary)' }}>
-                  {quantity}
-                </span>
-                <button
-                  onClick={() => setQuantity(quantity + 1)}
-                  className="w-10 h-10 rounded-lg flex items-center justify-center border transition-all duration-200 hover:shadow-md"
-                  style={{
-                    backgroundColor: 'var(--bg-secondary)',
-                    borderColor: 'var(--border)',
-                    color: 'var(--text-primary)'
-                  }}
-                >
-                  +
-                </button>
-              </div>
-            </div>
-            <div className="flex gap-3">
-              <button
-                onClick={() => handleOwnershipUpdate(quantity)}
-                className="flex-1 px-4 py-2 rounded-xl font-medium gradient-bg-purple text-white hover:shadow-lg transition-all duration-200"
-              >
-                {ownedQuantity > 0 ? 'Update' : VOCAB.ADD_TO_MY_COLLECTION}
-              </button>
-              <button
-                onClick={() => setShowQuantityModal(false)}
-                className="flex-1 px-4 py-2 rounded-xl font-medium border transition-all duration-200"
-                style={{
-                  borderColor: 'var(--border)',
-                  color: 'var(--text-secondary)'
-                }}
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
+      <CardDetailQuantityModal
+        isOpen={showQuantityModal}
+        ownedQuantity={ownedQuantity}
+        quantity={quantity}
+        onQuantityChange={setQuantity}
+        onConfirm={handleOwnershipUpdate}
+        onClose={() => setShowQuantityModal(false)}
+      />
 
       {/* Collection Selection Modal */}
       <CollectionSelectionModal