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 { useAuth } from '../lib/use-auth';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { VOCAB, collectionDisplayName } from '../lib/collection-vocabulary.js';
|
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() {
|
export default function Collections() {
|
||||||
const router = useRouter();
|
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) => {
|
const formatCurrency = (amount) => {
|
||||||
return new Intl.NumberFormat('en-US', {
|
return new Intl.NumberFormat('en-US', {
|
||||||
style: 'currency',
|
style: 'currency',
|
||||||
|
|
@ -638,165 +619,18 @@ export default function Collections() {
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Create List Modal */}
|
<CollectionsCreateModal
|
||||||
{showCreateModal && (
|
isOpen={showCreateModal}
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
newCollection={newCollection}
|
||||||
<div className="card max-w-md w-full mx-4">
|
setNewCollection={setNewCollection}
|
||||||
<h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
|
tagInput={tagInput}
|
||||||
Create New List
|
setTagInput={setTagInput}
|
||||||
</h2>
|
onClose={() => {
|
||||||
<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);
|
setShowCreateModal(false);
|
||||||
setTagInput(''); // Clear tag input when closing
|
setTagInput('');
|
||||||
}}
|
}}
|
||||||
className="flex-1 py-2 px-4 rounded-xl border transition-colors"
|
onCreate={handleCreateCollection}
|
||||||
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>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Success Modal */}
|
{/* Success Modal */}
|
||||||
{showSuccessModal && createdCollection && (
|
{showSuccessModal && createdCollection && (
|
||||||
|
|
@ -893,12 +727,12 @@ export default function Collections() {
|
||||||
className="input-field flex-1"
|
className="input-field flex-1"
|
||||||
value={editTagInput}
|
value={editTagInput}
|
||||||
onChange={(e) => setEditTagInput(e.target.value)}
|
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)"
|
placeholder="Add tags (press Enter)"
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
type="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"
|
className="px-3 py-2 rounded-lg text-sm font-medium transition-colors"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: 'var(--accent-ember)',
|
backgroundColor: 'var(--accent-ember)',
|
||||||
|
|
@ -924,7 +758,7 @@ export default function Collections() {
|
||||||
{tag}
|
{tag}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => handleRemoveTag(tag, editingCollection, setEditingCollection)}
|
onClick={() => removeCollectionTag(tag, editingCollection, setEditingCollection)}
|
||||||
className="ml-1 hover:text-red-500 transition-colors"
|
className="ml-1 hover:text-red-500 transition-colors"
|
||||||
>
|
>
|
||||||
×
|
×
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue