From 2a03a0ff4f5e101d7a61a0b66274cbb838a23f99 Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Sat, 13 Jun 2026 00:45:50 -0500
Subject: [PATCH] refactor(decks): extract edit modal and deck grid (Brief 2)

Move the deck list grid (empty state + cards) into DecksGrid and the
edit form into DecksEditModal to continue shrinking pages/decks.js.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/DecksEditModal.js |  80 ++++++++++++++++
 components/DecksGrid.js      |  98 +++++++++++++++++++
 pages/decks.js               | 180 +++--------------------------------
 3 files changed, 192 insertions(+), 166 deletions(-)
 create mode 100644 components/DecksEditModal.js
 create mode 100644 components/DecksGrid.js

diff --git a/components/DecksEditModal.js b/components/DecksEditModal.js
new file mode 100644
index 0000000..eed667b
--- /dev/null
+++ b/components/DecksEditModal.js
@@ -0,0 +1,80 @@
+import { Modal, Input, Button } from './ui';
+import { DECK_INPUT_FIELD_CLASS } from '../lib/deck-format-utils.js';
+
+export default function DecksEditModal({
+  editingDeck,
+  setEditingDeck,
+  onClose,
+  onEdit,
+}) {
+  return (
+    <Modal open={!!editingDeck} onClose={onClose} title="Edit Deck" size="md">
+      {editingDeck && (
+        <form onSubmit={onEdit} className="space-y-4">
+          <Input
+            label="Deck Name *"
+            required
+            value={editingDeck.name}
+            onChange={(e) => setEditingDeck({ ...editingDeck, name: e.target.value })}
+          />
+          <div>
+            <label
+              className="block text-sm font-medium mb-2"
+              style={{ color: 'var(--text-primary)' }}
+              htmlFor="edit-deck-format"
+            >
+              Format
+            </label>
+            <select
+              id="edit-deck-format"
+              value={editingDeck.format}
+              onChange={(e) => setEditingDeck({ ...editingDeck, format: e.target.value })}
+              className={DECK_INPUT_FIELD_CLASS}
+            >
+              <option value="Commander">Commander</option>
+              <option value="Standard">Standard</option>
+              <option value="Modern">Modern</option>
+              <option value="Legacy">Legacy</option>
+            </select>
+          </div>
+          <div>
+            <label
+              className="block text-sm font-medium mb-2"
+              style={{ color: 'var(--text-primary)' }}
+              htmlFor="edit-deck-description"
+            >
+              Description
+            </label>
+            <textarea
+              id="edit-deck-description"
+              value={editingDeck.description || ''}
+              onChange={(e) => setEditingDeck({ ...editingDeck, description: e.target.value })}
+              className={DECK_INPUT_FIELD_CLASS}
+              rows="3"
+            />
+          </div>
+          <label className="flex items-center">
+            <input
+              type="checkbox"
+              checked={editingDeck.is_public}
+              onChange={(e) => setEditingDeck({ ...editingDeck, is_public: e.target.checked })}
+              className="mr-2"
+              style={{ accentColor: 'var(--accent-ember)' }}
+            />
+            <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+              Make deck public
+            </span>
+          </label>
+          <div className="flex space-x-3 pt-2">
+            <Button type="button" variant="secondary" onClick={onClose} className="flex-1">
+              Cancel
+            </Button>
+            <Button type="submit" variant="primary" className="flex-1">
+              Save Changes
+            </Button>
+          </div>
+        </form>
+      )}
+    </Modal>
+  );
+}
diff --git a/components/DecksGrid.js b/components/DecksGrid.js
new file mode 100644
index 0000000..4e78765
--- /dev/null
+++ b/components/DecksGrid.js
@@ -0,0 +1,98 @@
+import Link from 'next/link';
+import { Button } from './ui';
+import { DECK_FORMAT_BADGE_STYLE, getDeckFormatIcon } from '../lib/deck-format-utils.js';
+
+export default function DecksGrid({ decks, onEditDeck, onDeleteDeck, onCreateDeck }) {
+  if (decks.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <div className="text-6xl mb-4">🃏</div>
+        <h3 className="text-xl font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
+          No decks yet
+        </h3>
+        <p className="mb-6" style={{ color: 'var(--text-secondary)' }}>
+          Create your first deck to get started
+        </p>
+        <Button variant="primary" onClick={onCreateDeck}>
+          Create Your First Deck
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {decks.map((deck) => (
+        <div key={deck.id} className="glass-panel rounded-2xl p-6 transition-shadow">
+          <div className="flex justify-between items-start mb-4">
+            <div className="flex items-center space-x-2">
+              <span className="text-2xl">{getDeckFormatIcon(deck.format)}</span>
+              <span
+                className="px-2 py-1 rounded-full text-xs font-medium"
+                style={DECK_FORMAT_BADGE_STYLE}
+              >
+                {deck.format}
+              </span>
+            </div>
+            <div className="flex space-x-2">
+              <button
+                type="button"
+                onClick={() => onEditDeck({ ...deck })}
+                className="transition-colors"
+                style={{ color: 'var(--text-secondary)' }}
+                aria-label="Edit deck"
+              >
+                ✏️
+              </button>
+              <button
+                type="button"
+                onClick={() => onDeleteDeck(deck.id)}
+                className="transition-colors"
+                style={{ color: 'var(--text-secondary)' }}
+                aria-label="Delete deck"
+              >
+                🗑️
+              </button>
+            </div>
+          </div>
+
+          <h3 className="text-xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
+            {deck.name}
+          </h3>
+
+          {deck.description && (
+            <p
+              className="text-sm mb-4 line-clamp-2"
+              style={{ color: 'var(--text-secondary)' }}
+            >
+              {deck.description}
+            </p>
+          )}
+
+          <div
+            className="flex justify-between items-center text-sm mb-4"
+            style={{ color: 'var(--text-secondary)' }}
+          >
+            <span>{deck.card_count || 0} cards</span>
+            {deck.is_public && (
+              <span style={{ color: 'var(--accent-ember)' }}>Public</span>
+            )}
+          </div>
+
+          <div className="flex space-x-2">
+            <Link href={`/deck-builder?deck=${deck.id}`} className="flex-1">
+              <Button variant="primary" size="md" className="w-full">
+                Edit Deck
+              </Button>
+            </Link>
+            <Link href={`/deck/${deck.id}`} className="flex-1">
+              <Button variant="secondary" size="md" className="w-full">
+                View
+              </Button>
+            </Link>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/pages/decks.js b/pages/decks.js
index a8dc945..760ecf3 100644
--- a/pages/decks.js
+++ b/pages/decks.js
@@ -3,8 +3,9 @@ import { useRouter } from 'next/router';
 import Link from 'next/link';
 import Layout from '../components/Layout';
 import DecksCreateModal from '../components/DecksCreateModal';
-import { Modal, Input, Button } from '../components/ui';
-import { DECK_FORMAT_BADGE_STYLE, DECK_INPUT_FIELD_CLASS, getDeckFormatIcon } from '../lib/deck-format-utils.js';
+import DecksEditModal from '../components/DecksEditModal';
+import DecksGrid from '../components/DecksGrid';
+import { Button } from '../components/ui';
 import { useAuth } from '../lib/use-auth';
 
 /* 2026-06-04 design-sweep pass: the Tailwind token classes that this
@@ -210,93 +211,12 @@ export default function Decks() {
           </div>
         </div>
 
-        {/* Decks Grid */}
-        {decks.length === 0 ? (
-          <div className="text-center py-12">
-            <div className="text-6xl mb-4">🃏</div>
-            <h3 className="text-xl font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
-              No decks yet
-            </h3>
-            <p className="mb-6" style={{ color: 'var(--text-secondary)' }}>
-              Create your first deck to get started
-            </p>
-            <Button variant="primary" onClick={() => setShowCreateModal(true)}>
-              Create Your First Deck
-            </Button>
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {decks.map((deck) => (
-              <div key={deck.id} className="glass-panel rounded-2xl p-6 transition-shadow">
-                <div className="flex justify-between items-start mb-4">
-                  <div className="flex items-center space-x-2">
-                    <span className="text-2xl">{getDeckFormatIcon(deck.format)}</span>
-                    <span
-                      className="px-2 py-1 rounded-full text-xs font-medium"
-                      style={DECK_FORMAT_BADGE_STYLE}
-                    >
-                      {deck.format}
-                    </span>
-                  </div>
-                  <div className="flex space-x-2">
-                    <button
-                      onClick={() => setEditingDeck({ ...deck })}
-                      className="transition-colors"
-                      style={{ color: 'var(--text-secondary)' }}
-                      aria-label="Edit deck"
-                    >
-                      ✏️
-                    </button>
-                    <button
-                      onClick={() => handleDeleteDeck(deck.id)}
-                      className="transition-colors"
-                      style={{ color: 'var(--text-secondary)' }}
-                      aria-label="Delete deck"
-                    >
-                      🗑️
-                    </button>
-                  </div>
-                </div>
-
-                <h3 className="text-xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
-                  {deck.name}
-                </h3>
-
-                {deck.description && (
-                  <p
-                    className="text-sm mb-4 line-clamp-2"
-                    style={{ color: 'var(--text-secondary)' }}
-                  >
-                    {deck.description}
-                  </p>
-                )}
-
-                <div
-                  className="flex justify-between items-center text-sm mb-4"
-                  style={{ color: 'var(--text-secondary)' }}
-                >
-                  <span>{deck.card_count || 0} cards</span>
-                  {deck.is_public && (
-                    <span style={{ color: 'var(--accent-ember)' }}>Public</span>
-                  )}
-                </div>
-
-                <div className="flex space-x-2">
-                  <Link href={`/deck-builder?deck=${deck.id}`} className="flex-1">
-                    <Button variant="primary" size="md" className="w-full">
-                      Edit Deck
-                    </Button>
-                  </Link>
-                  <Link href={`/deck/${deck.id}`} className="flex-1">
-                    <Button variant="secondary" size="md" className="w-full">
-                      View
-                    </Button>
-                  </Link>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
+        <DecksGrid
+          decks={decks}
+          onEditDeck={setEditingDeck}
+          onDeleteDeck={handleDeleteDeck}
+          onCreateDeck={() => setShowCreateModal(true)}
+        />
 
         <DecksCreateModal
           isOpen={showCreateModal}
@@ -306,84 +226,12 @@ export default function Decks() {
           onCreate={handleCreateDeck}
         />
 
-        <Modal
-          open={!!editingDeck}
+        <DecksEditModal
+          editingDeck={editingDeck}
+          setEditingDeck={setEditingDeck}
           onClose={() => setEditingDeck(null)}
-          title="Edit Deck"
-          size="md"
-        >
-          {editingDeck && (
-            <form onSubmit={handleEditDeck} className="space-y-4">
-              <Input
-                label="Deck Name *"
-                required
-                value={editingDeck.name}
-                onChange={(e) => setEditingDeck({ ...editingDeck, name: e.target.value })}
-              />
-              <div>
-                <label
-                  className="block text-sm font-medium mb-2"
-                  style={{ color: 'var(--text-primary)' }}
-                  htmlFor="edit-deck-format"
-                >
-                  Format
-                </label>
-                <select
-                  id="edit-deck-format"
-                  value={editingDeck.format}
-                  onChange={(e) => setEditingDeck({ ...editingDeck, format: e.target.value })}
-                  className={DECK_INPUT_FIELD_CLASS}
-                >
-                  <option value="Commander">Commander</option>
-                  <option value="Standard">Standard</option>
-                  <option value="Modern">Modern</option>
-                  <option value="Legacy">Legacy</option>
-                </select>
-              </div>
-              <div>
-                <label
-                  className="block text-sm font-medium mb-2"
-                  style={{ color: 'var(--text-primary)' }}
-                  htmlFor="edit-deck-description"
-                >
-                  Description
-                </label>
-                <textarea
-                  id="edit-deck-description"
-                  value={editingDeck.description || ''}
-                  onChange={(e) => setEditingDeck({ ...editingDeck, description: e.target.value })}
-                  className={DECK_INPUT_FIELD_CLASS}
-                  rows="3"
-                />
-              </div>
-              <label className="flex items-center">
-                <input
-                  type="checkbox"
-                  checked={editingDeck.is_public}
-                  onChange={(e) => setEditingDeck({ ...editingDeck, is_public: e.target.checked })}
-                  className="mr-2"
-                  style={{ accentColor: 'var(--accent-ember)' }}
-                />
-                <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-                  Make deck public
-                </span>
-              </label>
-              <div className="flex space-x-3 pt-2">
-                <Button
-                  type="button"
-                  variant="secondary"
-                  onClick={() => setEditingDeck(null)}
-                  className="flex-1"
-                >
-                  Cancel
-                </Button>
-                <Button type="submit" variant="primary" className="flex-1">
-                  Save Changes
-                </Button>
-              </div>
-            </form>
-          )}
-        </Modal>
+          onEdit={handleEditDeck}
+        />
       </div>
     </Layout>
   );
-- 
2.45.2