Extract edit and success modals from collections page (Brief 2).
Adds CollectionsEditModal and CollectionsSuccessModal; drops unused tag-input imports from the page. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Randall Stillwell
parent
a7b101519a
commit
4d0eba4c1e
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 { 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';
|
import CollectionsCreateModal from '../components/CollectionsCreateModal';
|
||||||
|
import CollectionsEditModal from '../components/CollectionsEditModal';
|
||||||
|
import CollectionsSuccessModal from '../components/CollectionsSuccessModal';
|
||||||
|
|
||||||
export default function Collections() {
|
export default function Collections() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
@ -632,197 +629,27 @@ export default function Collections() {
|
||||||
onCreate={handleCreateCollection}
|
onCreate={handleCreateCollection}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Success Modal */}
|
<CollectionsSuccessModal
|
||||||
{showSuccessModal && createdCollection && (
|
isOpen={showSuccessModal}
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
createdCollection={createdCollection}
|
||||||
<div className="card max-w-md w-full mx-4 text-center">
|
onViewList={() => {
|
||||||
<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={() => {
|
|
||||||
setShowSuccessModal(false);
|
setShowSuccessModal(false);
|
||||||
router.push(`/collection/${createdCollection.slug || createdCollection.id}`);
|
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"
|
onStay={() => setShowSuccessModal(false)}
|
||||||
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>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Edit Collection Modal */}
|
<CollectionsEditModal
|
||||||
{editingCollection && (
|
editingCollection={editingCollection}
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
setEditingCollection={setEditingCollection}
|
||||||
<div className="card max-w-md w-full mx-4">
|
editTagInput={editTagInput}
|
||||||
<h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
|
setEditTagInput={setEditTagInput}
|
||||||
Edit List
|
onClose={() => {
|
||||||
</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);
|
setEditingCollection(null);
|
||||||
setEditTagInput(''); // Clear tag input when closing
|
setEditTagInput('');
|
||||||
}}
|
}}
|
||||||
className="flex-1 py-2 px-4 rounded-xl border transition-colors"
|
onUpdate={handleUpdateCollection}
|
||||||
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>
|
|
||||||
)}
|
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue