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>
This commit is contained in:
varutasu
GitHub
parent
f81cc7d3ad
commit
30bc154bec
3 changed files with 252 additions and 195 deletions
182
components/CollectionsEditModal.js
Normal file
182
components/CollectionsEditModal.js
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
48
components/CollectionsSuccessModal.js
Normal file
48
components/CollectionsSuccessModal.js
Normal file
|
|
@ -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 "{createdCollection.name}" 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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 "{createdCollection.name}" has been created successfully.
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
<CollectionsSuccessModal
|
||||
isOpen={showSuccessModal}
|
||||
createdCollection={createdCollection}
|
||||
onViewList={() => {
|
||||
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>
|
||||
)}
|
||||
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={() => {
|
||||
<CollectionsEditModal
|
||||
editingCollection={editingCollection}
|
||||
setEditingCollection={setEditingCollection}
|
||||
editTagInput={editTagInput}
|
||||
setEditTagInput={setEditTagInput}
|
||||
onClose={() => {
|
||||
setEditingCollection(null);
|
||||
setEditTagInput(''); // Clear tag input when closing
|
||||
setEditTagInput('');
|
||||
}}
|
||||
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>
|
||||
)}
|
||||
onUpdate={handleUpdateCollection}
|
||||
/>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue