From 30bc154beccbff66f78b5b5740f330fa3b3945e2 Mon Sep 17 00:00:00 2001
From: varutasu <104105839+varutasu@users.noreply.github.com>
Date: Wed, 3 Jun 2026 16:58:09 -0500
Subject: [PATCH] Extract edit and success modals from collections page (Brief
 2). (#84)

Adds CollectionsEditModal and CollectionsSuccessModal; drops unused tag-input imports from the page.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/CollectionsEditModal.js    | 182 +++++++++++++++++++++
 components/CollectionsSuccessModal.js |  48 ++++++
 pages/collections.js                  | 217 +++-----------------------
 3 files changed, 252 insertions(+), 195 deletions(-)
 create mode 100644 components/CollectionsEditModal.js
 create mode 100644 components/CollectionsSuccessModal.js

diff --git a/components/CollectionsEditModal.js b/components/CollectionsEditModal.js
new file mode 100644
index 0000000..ee45ed6
--- /dev/null
+++ b/components/CollectionsEditModal.js
@@ -0,0 +1,182 @@
+import {
+  addCollectionTag,
+  handleCollectionTagKeyPress,
+  removeCollectionTag,
+} from '../lib/collection-tag-input.js';
+
+export default function CollectionsEditModal({
+  editingCollection,
+  setEditingCollection,
+  editTagInput,
+  setEditTagInput,
+  onClose,
+  onUpdate,
+}) {
+  if (!editingCollection) {
+    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)' }}>
+          Edit 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={editingCollection.name}
+              onChange={(e) => setEditingCollection({ ...editingCollection, name: e.target.value })}
+            />
+          </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={editingCollection.description}
+              onChange={(e) => setEditingCollection({ ...editingCollection, description: e.target.value })}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+              Hero Image
+            </label>
+            <input
+              type="url"
+              className="input-field w-full"
+              value={editingCollection.image || ''}
+              onChange={(e) => setEditingCollection({ ...editingCollection, image: e.target.value })}
+              placeholder="Enter image URL"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+              Tags
+            </label>
+            <div className="space-y-2">
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  className="input-field flex-1"
+                  value={editTagInput}
+                  onChange={(e) => setEditTagInput(e.target.value)}
+                  onKeyPress={(e) =>
+                    handleCollectionTagKeyPress(
+                      e,
+                      editTagInput,
+                      setEditTagInput,
+                      editingCollection,
+                      setEditingCollection
+                    )
+                  }
+                  placeholder="Add tags (press Enter)"
+                />
+                <button
+                  type="button"
+                  onClick={() =>
+                    addCollectionTag(editTagInput, setEditTagInput, editingCollection, setEditingCollection)
+                  }
+                  className="px-3 py-2 rounded-lg text-sm font-medium transition-colors"
+                  style={{
+                    backgroundColor: 'var(--accent-ember)',
+                    color: 'white',
+                  }}
+                  disabled={!editTagInput.trim()}
+                >
+                  Add
+                </button>
+              </div>
+              {editingCollection.tags && editingCollection.tags.length > 0 && (
+                <div className="flex flex-wrap gap-2">
+                  {editingCollection.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, editingCollection, setEditingCollection)}
+                        className="ml-1 hover:text-red-500 transition-colors"
+                      >
+                        ×
+                      </button>
+                    </span>
+                  ))}
+                </div>
+              )}
+            </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={() =>
+                setEditingCollection({ ...editingCollection, isPublic: !editingCollection.isPublic })
+              }
+              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                editingCollection.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 ${
+                  editingCollection.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={onUpdate}
+            disabled={!editingCollection.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',
+            }}
+          >
+            Update List
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/CollectionsSuccessModal.js b/components/CollectionsSuccessModal.js
new file mode 100644
index 0000000..b13e477
--- /dev/null
+++ b/components/CollectionsSuccessModal.js
@@ -0,0 +1,48 @@
+export default function CollectionsSuccessModal({
+  isOpen,
+  createdCollection,
+  onViewList,
+  onStay,
+}) {
+  if (!isOpen || !createdCollection) {
+    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 text-center">
+        <div className="text-6xl mb-4">🎉</div>
+        <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
+          List Created!
+        </h2>
+        <p className="mb-6" style={{ color: 'var(--text-secondary)' }}>
+          Your list &quot;{createdCollection.name}&quot; has been created successfully.
+        </p>
+        <div className="space-y-3">
+          <button
+            type="button"
+            onClick={onViewList}
+            className="w-full py-2 px-4 rounded-xl font-medium transition-all duration-200 hover:shadow-md"
+            style={{
+              backgroundColor: 'var(--accent-ember)',
+              color: 'white',
+            }}
+          >
+            View List
+          </button>
+          <button
+            type="button"
+            onClick={onStay}
+            className="w-full py-2 px-4 rounded-xl border transition-colors"
+            style={{
+              borderColor: 'var(--border)',
+              color: 'var(--text-secondary)',
+            }}
+          >
+            Stay on Lists Page
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/pages/collections.js b/pages/collections.js
index 7a4ae7f..efc8872 100644
--- a/pages/collections.js
+++ b/pages/collections.js
@@ -6,12 +6,9 @@ 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';
+import CollectionsEditModal from '../components/CollectionsEditModal';
+import CollectionsSuccessModal from '../components/CollectionsSuccessModal';
 
 export default function Collections() {
   const router = useRouter();
@@ -632,197 +629,27 @@ export default function Collections() {
         onCreate={handleCreateCollection}
       />
 
-      {/* Success Modal */}
-      {showSuccessModal && createdCollection && (
-        <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 text-center">
-            <div className="text-6xl mb-4">🎉</div>
-            <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
-              List Created!
-            </h2>
-            <p className="mb-6" style={{ color: 'var(--text-secondary)' }}>
-              Your list &quot;{createdCollection.name}&quot; has been created successfully.
-            </p>
-            <div className="space-y-3">
-              <button
-                onClick={() => {
-                  setShowSuccessModal(false);
-                  router.push(`/collection/${createdCollection.slug || createdCollection.id}`);
-                }}
-                className="w-full py-2 px-4 rounded-xl font-medium transition-all duration-200 hover:shadow-md"
-                style={{ 
-                  backgroundColor: 'var(--accent-ember)',
-                  color: 'white'
-                }}
-              >
-                View List
-              </button>
-              <button
-                onClick={() => setShowSuccessModal(false)}
-                className="w-full py-2 px-4 rounded-xl border transition-colors"
-                style={{ 
-                  borderColor: 'var(--border)', 
-                  color: 'var(--text-secondary)' 
-                }}
-              >
-                Stay on Lists Page
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
+      <CollectionsSuccessModal
+        isOpen={showSuccessModal}
+        createdCollection={createdCollection}
+        onViewList={() => {
+          setShowSuccessModal(false);
+          router.push(`/collection/${createdCollection.slug || createdCollection.id}`);
+        }}
+        onStay={() => setShowSuccessModal(false)}
+      />
 
-      {/* Edit Collection Modal */}
-      {editingCollection && (
-        <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)' }}>
-              Edit 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={editingCollection.name}
-                  onChange={(e) => setEditingCollection({...editingCollection, name: e.target.value})}
-                />
-              </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={editingCollection.description}
-                  onChange={(e) => setEditingCollection({...editingCollection, description: e.target.value})}
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
-                  Hero Image
-                </label>
-                <input
-                  type="url"
-                  className="input-field w-full"
-                  value={editingCollection.image || ''}
-                  onChange={(e) => setEditingCollection({...editingCollection, image: e.target.value})}
-                  placeholder="Enter image URL"
-                />
-              </div>
-              
-              {/* Tags Section */}
-              <div>
-                <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
-                  Tags
-                </label>
-                <div className="space-y-2">
-                  <div className="flex gap-2">
-                    <input
-                      type="text"
-                      className="input-field flex-1"
-                      value={editTagInput}
-                      onChange={(e) => setEditTagInput(e.target.value)}
-                      onKeyPress={(e) => handleCollectionTagKeyPress(e, editTagInput, setEditTagInput, editingCollection, setEditingCollection)}
-                      placeholder="Add tags (press Enter)"
-                    />
-                    <button
-                      type="button"
-                      onClick={() => addCollectionTag(editTagInput, setEditTagInput, editingCollection, setEditingCollection)}
-                      className="px-3 py-2 rounded-lg text-sm font-medium transition-colors"
-                      style={{ 
-                        backgroundColor: 'var(--accent-ember)', 
-                        color: 'white' 
-                      }}
-                      disabled={!editTagInput.trim()}
-                    >
-                      Add
-                    </button>
-                  </div>
-                  {editingCollection.tags && editingCollection.tags.length > 0 && (
-                    <div className="flex flex-wrap gap-2">
-                      {editingCollection.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, editingCollection, setEditingCollection)}
-                            className="ml-1 hover:text-red-500 transition-colors"
-                          >
-                            ×
-                          </button>
-                        </span>
-                      ))}
-                    </div>
-                  )}
-                </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={() => setEditingCollection({...editingCollection, isPublic: !editingCollection.isPublic})}
-                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                    editingCollection.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 ${
-                      editingCollection.isPublic ? 'translate-x-6' : 'translate-x-1'
-                    }`}
-                  />
-                </button>
-              </div>
-            </div>
-            <div className="flex space-x-3 mt-6">
-              <button
-                onClick={() => {
-                  setEditingCollection(null);
-                  setEditTagInput(''); // 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={handleUpdateCollection}
-                disabled={!editingCollection.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'
-                }}
-              >
-                Update List
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
+      <CollectionsEditModal
+        editingCollection={editingCollection}
+        setEditingCollection={setEditingCollection}
+        editTagInput={editTagInput}
+        setEditTagInput={setEditTagInput}
+        onClose={() => {
+          setEditingCollection(null);
+          setEditTagInput('');
+        }}
+        onUpdate={handleUpdateCollection}
+      />
     </Layout>
   );
 } 
\ No newline at end of file