From f81cc7d3adca573ea347f2e7ed0fb6e2eabab5f7 Mon Sep 17 00:00:00 2001
From: varutasu <104105839+varutasu@users.noreply.github.com>
Date: Wed, 3 Jun 2026 16:58:06 -0500
Subject: [PATCH] Extract CardDetailDeckModal from card detail page (Brief 2).
 (#83)

Moves add-to-deck modal markup into components/CardDetailDeckModal.js.

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

diff --git a/components/CardDetailDeckModal.js b/components/CardDetailDeckModal.js
new file mode 100644
index 0000000..d270bda
--- /dev/null
+++ b/components/CardDetailDeckModal.js
@@ -0,0 +1,75 @@
+export default function CardDetailDeckModal({
+  isOpen,
+  card,
+  decks,
+  selectedDeck,
+  onSelectedDeckChange,
+  onAdd,
+  onClose,
+}) {
+  if (!isOpen || !card) {
+    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)' }}>
+          Add to Deck
+        </h3>
+        <div className="mb-6">
+          <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+            Select Deck
+          </label>
+          <select
+            value={selectedDeck}
+            onChange={(e) => onSelectedDeckChange(e.target.value)}
+            className="w-full p-3 rounded-xl border transition-all duration-200"
+            style={{
+              backgroundColor: 'var(--bg-secondary)',
+              borderColor: 'var(--border)',
+              color: 'var(--text-primary)',
+            }}
+          >
+            <option value="">Choose a deck...</option>
+            {decks
+              .filter((deck) => deck.game === card.game)
+              .map((deck) => (
+                <option key={deck.id} value={deck.id}>
+                  {deck.name}
+                </option>
+              ))}
+          </select>
+        </div>
+        <div className="flex gap-3">
+          <button
+            type="button"
+            onClick={onAdd}
+            disabled={!selectedDeck}
+            className={`flex-1 px-4 py-2 rounded-xl font-medium transition-all duration-200 ${
+              selectedDeck
+                ? 'gradient-bg-purple text-white hover:shadow-lg'
+                : 'opacity-50 cursor-not-allowed'
+            }`}
+          >
+            Add to Deck
+          </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 058b0e7..aa1b700 100644
--- a/pages/card/[id].js
+++ b/pages/card/[id].js
@@ -5,6 +5,7 @@ import Layout from '../../components/Layout';
 import { useAuth } from '../../lib/use-auth';
 import CollectionSelectionModal from '../../components/CollectionSelectionModal';
 import CardDetailQuantityModal from '../../components/CardDetailQuantityModal';
+import CardDetailDeckModal from '../../components/CardDetailDeckModal';
 import { ManaCost, ColorIdentity, AdvancedManaCost } from '../../components/ManaSymbols';
 import ManaSymbolSettings from '../../components/ManaSymbolSettings';
 import { VOCAB, collectionDisplayName } from '../../lib/collection-vocabulary.js';
@@ -801,66 +802,18 @@ export default function CardDetail() {
         }}
       />
 
-      {/* Deck Modal */}
-      {showDeckModal && (
-        <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)' }}>
-              Add to Deck
-            </h3>
-            <div className="mb-6">
-              <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
-                Select Deck
-              </label>
-              <select
-                value={selectedDeck}
-                onChange={(e) => setSelectedDeck(e.target.value)}
-                className="w-full p-3 rounded-xl border transition-all duration-200"
-                style={{
-                  backgroundColor: 'var(--bg-secondary)',
-                  borderColor: 'var(--border)',
-                  color: 'var(--text-primary)'
-                }}
-              >
-                <option value="">Choose a deck...</option>
-                {decks
-                  .filter(deck => deck.game === card.game)
-                  .map(deck => (
-                    <option key={deck.id} value={deck.id}>
-                      {deck.name}
-                    </option>
-                  ))}
-              </select>
-            </div>
-            <div className="flex gap-3">
-              <button
-                onClick={handleAddToDeck}
-                disabled={!selectedDeck}
-                className={`flex-1 px-4 py-2 rounded-xl font-medium transition-all duration-200 ${
-                  selectedDeck 
-                    ? 'gradient-bg-purple text-white hover:shadow-lg' 
-                    : 'opacity-50 cursor-not-allowed'
-                }`}
-              >
-                Add to Deck
-              </button>
-              <button
-                onClick={() => {
-                  setShowDeckModal(false);
-                  setSelectedDeck('');
-                }}
-                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>
-      )}
+      <CardDetailDeckModal
+        isOpen={showDeckModal}
+        card={card}
+        decks={decks}
+        selectedDeck={selectedDeck}
+        onSelectedDeckChange={setSelectedDeck}
+        onAdd={handleAddToDeck}
+        onClose={() => {
+          setShowDeckModal(false);
+          setSelectedDeck('');
+        }}
+      />
       </div>
     </Layout>
   );