\n {/* Header */}\n

Add Media

\n \n \n \n

\n \n {/* Form Content */}\n

\n {/* Title */}\n

\n \n Title *\n \n setFormData(prev => ({ ...prev, title: e.target.value }))}\n placeholder=\"e.g., The Great Gatsby, Avengers, The Office\"\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder-gray-400\"\n required\n autoFocus\n />\n

\n \n {/* Cover Image URL */}\n

\n \n Cover Image URL (optional)\n \n

\n handleImageUrlChange(e.target.value)}\n placeholder=\"https://example.com/cover-image.jpg\"\n className=\"flex-1 px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder-gray-400\"\n />\n onOpenImageSearch(formData.title || '', handleImageSelect)}\n className=\"px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors\"\n title=\"Search for images\"\n >\n 🔍\n \n

\n 📎 Paste an image from clipboard (Ctrl/Cmd+V) or search above\n

\n {formData.cover_url && (\n

\n setImageError(false)}\n />\n {imageError && (\n

\n Invalid URL\n

\n )}\n

\n Add a square image URL to represent this media item in the grid, or click the search button to find one\n

\n \n {/* Type */}\n

\n \n Type\n \n

\n {MEDIA_TYPES.map(type => (\n setFormData(prev => ({ ...prev, type: type.value }))}\n className={`p-3 rounded-lg border-2 text-center transition-colors ${\n formData.type === type.value\n ? 'border-blue-500 bg-blue-800 text-blue-300'\n : 'border-gray-600 hover:border-gray-500 text-gray-300'\n }`}\n >\n

{type.icon}

{type.label}

\n \n ))}\n

\n \n {/* Group and Status */}\n

\n \n Group\n \n setFormData(prev => ({ ...prev, group: e.target.value as MediaGroup }))}\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n >\n {MEDIA_GROUPS.map(group => (\n \n ))}\n \n

\n \n

\n \n Status\n \n setFormData(prev => ({ ...prev, status: e.target.value as MediaStatus }))}\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n >\n {MEDIA_STATUSES.map(status => (\n \n ))}\n \n

\n \n {/* Description */}\n

\n \n Description (optional)\n \n setFormData(prev => ({ ...prev, description: e.target.value }))}\n placeholder=\"What's this about? Why are you interested?\"\n rows={2}\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none\"\n />\n

\n \n {/* Progress */}\n

\n \n Current Progress (optional)\n \n setFormData(prev => ({ ...prev, progress: e.target.value }))}\n placeholder=\"e.g., Chapter 5, Episode 3, 50%\"\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n \n {/* Additional Metadata */}\n

Additional Info (optional)

\n \n

\n setFormData(prev => ({ \n ...prev, \n metadata: { ...prev.metadata, author: e.target.value }\n }))}\n placeholder=\"Author/Creator\"\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n \n

\n setFormData(prev => ({ \n ...prev, \n metadata: { ...prev.metadata, year: e.target.value ? parseInt(e.target.value) : undefined }\n }))}\n placeholder=\"Year\"\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n \n

\n setFormData(prev => ({ \n ...prev, \n metadata: { ...prev.metadata, genre: e.target.value }\n }))}\n placeholder=\"Genre\"\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n \n {/* Rating */}\n

\n \n Rating (optional)\n \n

\n {[1, 2, 3, 4, 5].map(star => (\n setFormData(prev => ({ \n ...prev, \n rating: prev.rating === star ? 0 : star \n }))}\n className={`w-8 h-8 ${\n star <= formData.rating \n ? 'text-yellow-400' \n : 'text-gray-300'\n } hover:text-yellow-300 transition-colors`}\n >\n ★\n \n ))}\n

\n \n {/* Footer */}\n

\n \n Cancel\n \n \n {saving ? 'Adding...' : 'Add Media'}\n \n

\n \n );\n}\n","deleted","label",[168,169,149],"frontend","components","permalink","https://www.val.town/x/ryi/pathfinder__5712n7-bore/code/frontend/components/AddMediaModal.tsx","extension","actionData","errors"]