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>
This commit is contained in:
varutasu
GitHub
parent
5582638935
commit
a7b101519a
3 changed files with 231 additions and 187 deletions
181
components/CollectionsCreateModal.js
Normal file
181
components/CollectionsCreateModal.js
Normal file
|
|
@ -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'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>
|
||||
);
|
||||
}
|
||||
29
lib/collection-tag-input.js
Normal file
29
lib/collection-tag-input.js
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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'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"
|
||||
>
|
||||
×
|
||||
|
|
|
|||
Loading…
Reference in a new issue