From 5a3f799926290a5748a36d2a1c014f3acad6b0ee Mon Sep 17 00:00:00 2001
From: varutasu <104105839+varutasu@users.noreply.github.com>
Date: Wed, 3 Jun 2026 17:24:43 -0500
Subject: [PATCH] refactor(card-editor): extract search panel component (Brief
 1) (#90)

Move the find-card search input and results grid into
CardEditorSearchPanel to start splitting the admin card editor page.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/CardEditorSearchPanel.js | 95 +++++++++++++++++++++++++++++
 pages/admin/card-editor.js          | 87 ++++----------------------
 2 files changed, 106 insertions(+), 76 deletions(-)
 create mode 100644 components/CardEditorSearchPanel.js

diff --git a/components/CardEditorSearchPanel.js b/components/CardEditorSearchPanel.js
new file mode 100644
index 0000000..4bf4e41
--- /dev/null
+++ b/components/CardEditorSearchPanel.js
@@ -0,0 +1,95 @@
+/* eslint-disable @next/next/no-img-element -- External card image URLs; next/image migration is out of scope. */
+
+/**
+ * Admin card editor: search input + result grid for picking a card to edit.
+ */
+export default function CardEditorSearchPanel({
+  searchQuery,
+  onSearchQueryChange,
+  searchLoading,
+  searchResults,
+  onSelectCard,
+}) {
+  return (
+    <div className="mb-8 p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
+      <h2 className="text-xl font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
+        Find Card to Edit
+      </h2>
+
+      <div className="flex gap-4 mb-4">
+        <div className="flex-1">
+          <input
+            type="text"
+            placeholder="Search for cards by name..."
+            value={searchQuery}
+            onChange={(e) => onSearchQueryChange(e.target.value)}
+            className="w-full p-3 rounded-lg border transition-all duration-200"
+            style={{
+              backgroundColor: 'var(--bg-primary)',
+              borderColor: 'var(--border)',
+              color: 'var(--text-primary)',
+            }}
+          />
+        </div>
+      </div>
+
+      {searchLoading && (
+        <div className="text-center py-4">
+          <div
+            className="animate-spin rounded-full h-8 w-8 border-b-2 mx-auto"
+            style={{ borderColor: 'var(--text-accent)' }}
+          />
+        </div>
+      )}
+
+      {searchResults.length > 0 && (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {searchResults.map((searchCard) => (
+            <div
+              key={searchCard.id}
+              onClick={() => onSelectCard(searchCard)}
+              className="p-4 rounded-lg border cursor-pointer transition-all duration-200 hover:shadow-lg hover:scale-105"
+              style={{
+                backgroundColor: 'var(--bg-primary)',
+                borderColor: 'var(--border)',
+              }}
+            >
+              <div className="flex items-center gap-3">
+                <div
+                  className="w-12 h-16 rounded-lg overflow-hidden flex-shrink-0"
+                  style={{ backgroundColor: 'var(--bg-secondary)' }}
+                >
+                  {searchCard.image_url ? (
+                    <img
+                      src={searchCard.image_url}
+                      alt={searchCard.name}
+                      className="w-full h-full object-cover"
+                    />
+                  ) : (
+                    <div
+                      className="w-full h-full flex items-center justify-center text-xs"
+                      style={{ color: 'var(--text-secondary)' }}
+                    >
+                      {searchCard.game}
+                    </div>
+                  )}
+                </div>
+                <div className="flex-1">
+                  <h3 className="font-semibold" style={{ color: 'var(--text-primary)' }}>
+                    {searchCard.name}
+                  </h3>
+                  <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+                    {searchCard.set_name} • {searchCard.game}
+                  </p>
+                  <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+                    {searchCard.rarity}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/pages/admin/card-editor.js b/pages/admin/card-editor.js
index 1ab5dfe..bb984f1 100644
--- a/pages/admin/card-editor.js
+++ b/pages/admin/card-editor.js
@@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
 import Layout from '../../components/Layout';
 import AdminProtected from '../../components/AdminProtected';
+import CardEditorSearchPanel from '../../components/CardEditorSearchPanel';
 
 // Make this component client-side only to avoid SSR issues
 const CardEditor = () => {
@@ -230,82 +231,16 @@ const CardEditor = () => {
           </p>
         </div>
 
-        {/* Card Search */}
-        <div className="mb-8 p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
-          <h2 className="text-xl font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
-            Find Card to Edit
-          </h2>
-          
-          <div className="flex gap-4 mb-4">
-            <div className="flex-1">
-              <input
-                type="text"
-                placeholder="Search for cards by name..."
-                value={searchQuery}
-                onChange={(e) => {
-                  setSearchQuery(e.target.value);
-                  searchCards(e.target.value);
-                }}
-                className="w-full p-3 rounded-lg border transition-all duration-200"
-                style={{
-                  backgroundColor: 'var(--bg-primary)',
-                  borderColor: 'var(--border)',
-                  color: 'var(--text-primary)'
-                }}
-              />
-            </div>
-          </div>
-
-          {/* Search Results */}
-          {searchLoading && (
-            <div className="text-center py-4">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 mx-auto" style={{ borderColor: 'var(--text-accent)' }}></div>
-            </div>
-          )}
-
-          {searchResults.length > 0 && (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-              {searchResults.map((searchCard) => (
-                <div
-                  key={searchCard.id}
-                  onClick={() => selectCard(searchCard)}
-                  className="p-4 rounded-lg border cursor-pointer transition-all duration-200 hover:shadow-lg hover:scale-105"
-                  style={{
-                    backgroundColor: 'var(--bg-primary)',
-                    borderColor: 'var(--border)'
-                  }}
-                >
-                  <div className="flex items-center gap-3">
-                    <div className="w-12 h-16 rounded-lg overflow-hidden flex-shrink-0" style={{ backgroundColor: 'var(--bg-secondary)' }}>
-                      {searchCard.image_url ? (
-                        <img 
-                          src={searchCard.image_url} 
-                          alt={searchCard.name}
-                          className="w-full h-full object-cover"
-                        />
-                      ) : (
-                        <div className="w-full h-full flex items-center justify-center text-xs" style={{ color: 'var(--text-secondary)' }}>
-                          {searchCard.game}
-                        </div>
-                      )}
-                    </div>
-                    <div className="flex-1">
-                      <h3 className="font-semibold" style={{ color: 'var(--text-primary)' }}>
-                        {searchCard.name}
-                      </h3>
-                      <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-                        {searchCard.set_name} • {searchCard.game}
-                      </p>
-                      <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-                        {searchCard.rarity}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
+        <CardEditorSearchPanel
+          searchQuery={searchQuery}
+          onSearchQueryChange={(value) => {
+            setSearchQuery(value);
+            searchCards(value);
+          }}
+          searchLoading={searchLoading}
+          searchResults={searchResults}
+          onSelectCard={selectCard}
+        />
 
         {/* Card Editor Form */}
         {card && (