From a7b101519af3aa0e59f58d4e90e56955d0c80f58 Mon Sep 17 00:00:00 2001
From: varutasu <104105839+varutasu@users.noreply.github.com>
Date: Wed, 3 Jun 2026 16:53:08 -0500
Subject: [PATCH] Extract CollectionsCreateModal and tag helpers (Brief 1).
 (#82)

Moves create-list modal UI to components/CollectionsCreateModal.js and tag input helpers to lib/collection-tag-input.js (shared with edit modal).

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/CollectionsCreateModal.js | 181 +++++++++++++++++++++++
 lib/collection-tag-input.js          |  29 ++++
 pages/collections.js                 | 208 +++------------------------
 3 files changed, 231 insertions(+), 187 deletions(-)
 create mode 100644 components/CollectionsCreateModal.js
 create mode 100644 lib/collection-tag-input.js

diff --git a/components/CollectionsCreateModal.js b/components/CollectionsCreateModal.js
new file mode 100644
index 0000000..6eeed29
--- /dev/null
+++ b/components/CollectionsCreateModal.js
@@ -0,0 +1,181 @@
+import {
+  addCollectionTag,
+  handleCollectionTagKeyPress,
+  removeCollectionTag,
+} from '../lib/collection-tag-input.js';
+
+export default function CollectionsCreateModal({
+  isOpen,
+  newCollection,
+  setNewCollection,
+  tagInput,
+  setTagInput,
+  onClose,
+  onCreate,
+}) {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="card max-w-md w-full mx-4">
+        <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
+          Create New List
+        </h2>
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+              List Name
+            </label>
+            <input
+              type="text"
+              className="input-field w-full"
+              value={newCollection.name}
+              onChange={(e) => setNewCollection({ ...newCollection, name: e.target.value })}
+              placeholder="Enter list name"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+              Description
+            </label>
+            <textarea
+              className="input-field w-full"
+              rows="3"
+              value={newCollection.description}
+              onChange={(e) => setNewCollection({ ...newCollection, description: e.target.value })}
+              placeholder="Describe your list"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+              Hero Image (Optional)
+            </label>
+            <input
+              type="url"
+              className="input-field w-full"
+              value={newCollection.image}
+              onChange={(e) => setNewCollection({ ...newCollection, image: e.target.value })}
+              placeholder="Enter image URL or upload later"
+            />
+            <p className="text-xs mt-1" style={{ color: 'var(--text-secondary)' }}>
+              Add a custom thumbnail image, or we&apos;ll use your rarest cards
+            </p>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+              Tags (Optional)
+            </label>
+            <div className="space-y-2">
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  className="input-field flex-1"
+                  value={tagInput}
+                  onChange={(e) => setTagInput(e.target.value)}
+                  onKeyPress={(e) =>
+                    handleCollectionTagKeyPress(e, tagInput, setTagInput, newCollection, setNewCollection)
+                  }
+                  placeholder="Add tags (press Enter)"
+                />
+                <button
+                  type="button"
+                  onClick={() => addCollectionTag(tagInput, setTagInput, newCollection, setNewCollection)}
+                  className="px-3 py-2 rounded-lg text-sm font-medium transition-colors"
+                  style={{
+                    backgroundColor: 'var(--accent-ember)',
+                    color: 'white',
+                  }}
+                  disabled={!tagInput.trim()}
+                >
+                  Add
+                </button>
+              </div>
+              {newCollection.tags.length > 0 && (
+                <div className="flex flex-wrap gap-2">
+                  {newCollection.tags.map((tag, index) => (
+                    <span
+                      key={index}
+                      className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium"
+                      style={{
+                        backgroundColor: 'var(--bg-tertiary)',
+                        color: 'var(--text-primary)',
+                        border: '1px solid var(--border)',
+                      }}
+                    >
+                      {tag}
+                      <button
+                        type="button"
+                        onClick={() => removeCollectionTag(tag, newCollection, setNewCollection)}
+                        className="ml-1 hover:text-red-500 transition-colors"
+                      >
+                        ×
+                      </button>
+                    </span>
+                  ))}
+                </div>
+              )}
+              <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
+                Add tags to help organize and categorize your list
+              </p>
+            </div>
+          </div>
+
+          <div
+            className="flex items-center justify-between p-4 rounded-lg border"
+            style={{ borderColor: 'var(--border)' }}
+          >
+            <div>
+              <label className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
+                Public List
+              </label>
+              <p className="text-xs mt-1" style={{ color: 'var(--text-secondary)' }}>
+                Make this list discoverable by other users
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={() => setNewCollection({ ...newCollection, isPublic: !newCollection.isPublic })}
+              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                newCollection.isPublic ? 'bg-green-600' : 'bg-gray-300 dark:bg-gray-600'
+              }`}
+            >
+              <span
+                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                  newCollection.isPublic ? 'translate-x-6' : 'translate-x-1'
+                }`}
+              />
+            </button>
+          </div>
+        </div>
+        <div className="flex space-x-3 mt-6">
+          <button
+            type="button"
+            onClick={onClose}
+            className="flex-1 py-2 px-4 rounded-xl border transition-colors"
+            style={{
+              borderColor: 'var(--border)',
+              color: 'var(--text-secondary)',
+            }}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={onCreate}
+            disabled={!newCollection.name.trim()}
+            className="flex-1 py-2 px-4 rounded-xl font-medium transition-all duration-200 hover:shadow-md disabled:opacity-50"
+            style={{
+              backgroundColor: 'var(--accent-ember)',
+              color: 'white',
+            }}
+          >
+            Create List
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/lib/collection-tag-input.js b/lib/collection-tag-input.js
new file mode 100644
index 0000000..fc117d8
--- /dev/null
+++ b/lib/collection-tag-input.js
@@ -0,0 +1,29 @@
+export function addCollectionTag(tagInput, setTagInput, collection, setCollection) {
+  if (tagInput.trim() && !collection.tags.includes(tagInput.trim())) {
+    setCollection({
+      ...collection,
+      tags: [...collection.tags, tagInput.trim()],
+    });
+    setTagInput('');
+  }
+}
+
+export function removeCollectionTag(tagToRemove, collection, setCollection) {
+  setCollection({
+    ...collection,
+    tags: collection.tags.filter((tag) => tag !== tagToRemove),
+  });
+}
+
+export function handleCollectionTagKeyPress(
+  e,
+  tagInput,
+  setTagInput,
+  collection,
+  setCollection
+) {
+  if (e.key === 'Enter') {
+    e.preventDefault();
+    addCollectionTag(tagInput, setTagInput, collection, setCollection);
+  }
+}
diff --git a/pages/collections.js b/pages/collections.js
index a4742b9..7a4ae7f 100644
--- a/pages/collections.js
+++ b/pages/collections.js
@@ -6,6 +6,12 @@ import PermissionIndicator from '../components/PermissionIndicator';
 import { useAuth } from '../lib/use-auth';
 import Link from 'next/link';
 import { VOCAB, collectionDisplayName } from '../lib/collection-vocabulary.js';
+import {
+  addCollectionTag,
+  handleCollectionTagKeyPress,
+  removeCollectionTag,
+} from '../lib/collection-tag-input.js';
+import CollectionsCreateModal from '../components/CollectionsCreateModal';
 
 export default function Collections() {
   const router = useRouter();
@@ -218,31 +224,6 @@ export default function Collections() {
     }
   };
 
-  // Tag handling functions
-  const handleAddTag = (tagInput, setTagInput, collection, setCollection) => {
-    if (tagInput.trim() && !collection.tags.includes(tagInput.trim())) {
-      setCollection({
-        ...collection,
-        tags: [...collection.tags, tagInput.trim()]
-      });
-      setTagInput('');
-    }
-  };
-
-  const handleRemoveTag = (tagToRemove, collection, setCollection) => {
-    setCollection({
-      ...collection,
-      tags: collection.tags.filter(tag => tag !== tagToRemove)
-    });
-  };
-
-  const handleTagKeyPress = (e, tagInput, setTagInput, collection, setCollection) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      handleAddTag(tagInput, setTagInput, collection, setCollection);
-    }
-  };
-
   const formatCurrency = (amount) => {
     return new Intl.NumberFormat('en-US', {
       style: 'currency',
@@ -638,165 +619,18 @@ export default function Collections() {
         )}
       </div>
 
-      {/* Create List Modal */}
-      {showCreateModal && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <div className="card max-w-md w-full mx-4">
-            <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
-              Create New List
-            </h2>
-            <div className="space-y-4">
-              <div>
-                <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
-                  List Name
-                </label>
-                <input
-                  type="text"
-                  className="input-field w-full"
-                  value={newCollection.name}
-                  onChange={(e) => setNewCollection({...newCollection, name: e.target.value})}
-                  placeholder="Enter list name"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
-                  Description
-                </label>
-                <textarea
-                  className="input-field w-full"
-                  rows="3"
-                  value={newCollection.description}
-                  onChange={(e) => setNewCollection({...newCollection, description: e.target.value})}
-                  placeholder="Describe your list"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
-                  Hero Image (Optional)
-                </label>
-                <input
-                  type="url"
-                  className="input-field w-full"
-                  value={newCollection.image}
-                  onChange={(e) => setNewCollection({...newCollection, image: e.target.value})}
-                  placeholder="Enter image URL or upload later"
-                />
-                <p className="text-xs mt-1" style={{ color: 'var(--text-secondary)' }}>
-                  Add a custom thumbnail image, or we&apos;ll use your rarest cards
-                </p>
-              </div>
-              
-              {/* Tags Section */}
-              <div>
-                <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
-                  Tags (Optional)
-                </label>
-                <div className="space-y-2">
-                  <div className="flex gap-2">
-                    <input
-                      type="text"
-                      className="input-field flex-1"
-                      value={tagInput}
-                      onChange={(e) => setTagInput(e.target.value)}
-                      onKeyPress={(e) => handleTagKeyPress(e, tagInput, setTagInput, newCollection, setNewCollection)}
-                      placeholder="Add tags (press Enter)"
-                    />
-                    <button
-                      type="button"
-                      onClick={() => handleAddTag(tagInput, setTagInput, newCollection, setNewCollection)}
-                      className="px-3 py-2 rounded-lg text-sm font-medium transition-colors"
-                      style={{ 
-                        backgroundColor: 'var(--accent-ember)', 
-                        color: 'white' 
-                      }}
-                      disabled={!tagInput.trim()}
-                    >
-                      Add
-                    </button>
-                  </div>
-                  {newCollection.tags.length > 0 && (
-                    <div className="flex flex-wrap gap-2">
-                      {newCollection.tags.map((tag, index) => (
-                        <span
-                          key={index}
-                          className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium"
-                          style={{ 
-                            backgroundColor: 'var(--bg-tertiary)', 
-                            color: 'var(--text-primary)',
-                            border: '1px solid var(--border)'
-                          }}
-                        >
-                          {tag}
-                          <button
-                            type="button"
-                            onClick={() => handleRemoveTag(tag, newCollection, setNewCollection)}
-                            className="ml-1 hover:text-red-500 transition-colors"
-                          >
-                            ×
-                          </button>
-                        </span>
-                      ))}
-                    </div>
-                  )}
-                  <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
-                    Add tags to help organize and categorize your list
-                  </p>
-                </div>
-              </div>
-
-              <div className="flex items-center justify-between p-4 rounded-lg border" style={{ borderColor: 'var(--border)' }}>
-                <div>
-                  <label className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
-                    Public List
-                  </label>
-                  <p className="text-xs mt-1" style={{ color: 'var(--text-secondary)' }}>
-                    Make this list discoverable by other users
-                  </p>
-                </div>
-                <button
-                  type="button"
-                  onClick={() => setNewCollection({...newCollection, isPublic: !newCollection.isPublic})}
-                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                    newCollection.isPublic ? 'bg-green-600' : 'bg-gray-300 dark:bg-gray-600'
-                  }`}
-                >
-                  <span
-                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                      newCollection.isPublic ? 'translate-x-6' : 'translate-x-1'
-                    }`}
-                  />
-                </button>
-              </div>
-            </div>
-            <div className="flex space-x-3 mt-6">
-              <button
-                onClick={() => {
-                  setShowCreateModal(false);
-                  setTagInput(''); // Clear tag input when closing
-                }}
-                className="flex-1 py-2 px-4 rounded-xl border transition-colors"
-                style={{ 
-                  borderColor: 'var(--border)', 
-                  color: 'var(--text-secondary)' 
-                }}
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleCreateCollection}
-                disabled={!newCollection.name.trim()}
-                className="flex-1 py-2 px-4 rounded-xl font-medium transition-all duration-200 hover:shadow-md disabled:opacity-50"
-                style={{ 
-                  backgroundColor: 'var(--accent-ember)',
-                  color: 'white'
-                }}
-              >
-                Create List
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
+      <CollectionsCreateModal
+        isOpen={showCreateModal}
+        newCollection={newCollection}
+        setNewCollection={setNewCollection}
+        tagInput={tagInput}
+        setTagInput={setTagInput}
+        onClose={() => {
+          setShowCreateModal(false);
+          setTagInput('');
+        }}
+        onCreate={handleCreateCollection}
+      />
 
       {/* Success Modal */}
       {showSuccessModal && createdCollection && (
@@ -893,12 +727,12 @@ export default function Collections() {
                       className="input-field flex-1"
                       value={editTagInput}
                       onChange={(e) => setEditTagInput(e.target.value)}
-                      onKeyPress={(e) => handleTagKeyPress(e, editTagInput, setEditTagInput, editingCollection, setEditingCollection)}
+                      onKeyPress={(e) => handleCollectionTagKeyPress(e, editTagInput, setEditTagInput, editingCollection, setEditingCollection)}
                       placeholder="Add tags (press Enter)"
                     />
                     <button
                       type="button"
-                      onClick={() => handleAddTag(editTagInput, setEditTagInput, editingCollection, setEditingCollection)}
+                      onClick={() => addCollectionTag(editTagInput, setEditTagInput, editingCollection, setEditingCollection)}
                       className="px-3 py-2 rounded-lg text-sm font-medium transition-colors"
                       style={{ 
                         backgroundColor: 'var(--accent-ember)', 
@@ -924,7 +758,7 @@ export default function Collections() {
                           {tag}
                           <button
                             type="button"
-                            onClick={() => handleRemoveTag(tag, editingCollection, setEditingCollection)}
+                            onClick={() => removeCollectionTag(tag, editingCollection, setEditingCollection)}
                             className="ml-1 hover:text-red-500 transition-colors"
                           >
                             ×