\n {GROUP_LABELS[group as keyof typeof GROUP_LABELS]} - {STATUS_LABELS[status as keyof typeof STATUS_LABELS]}\n

\n \n \n \n

\n \n

No items in this category yet.

\n \n

\n \n Close\n \n

\n );\n }\n \n return (\n

\n {/* Header */}\n

\n {GROUP_LABELS[group as keyof typeof GROUP_LABELS]} - {STATUS_LABELS[status as keyof typeof STATUS_LABELS]}\n

\n {items.length} item{items.length !== 1 ? 's' : ''}\n

\n \n \n \n

\n \n {/* Items List */}\n

\n {items.map(item => (\n

\n {/* Cover Image or Type Icon */}\n

\n {item.cover_url ? (\n {\n // Fallback to type icon if image fails\n const target = e.target as HTMLImageElement;\n target.style.display = 'none';\n const fallback = target.nextElementSibling as HTMLElement;\n if (fallback) fallback.style.display = 'block';\n }}\n />\n ) : null}\n

\n {MEDIA_TYPE_ICONS[item.type]}\n

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

{item.title}

\n {item.metadata?.author && (\n

by {item.metadata.author}

\n )}\n

\n \n {item.description && (\n

{item.description}

\n )}\n \n {item.progress && (\n

\n Progress: {item.progress}\n

\n )}\n \n {item.rating && (\n

\n Rating:\n {[1, 2, 3, 4, 5].map(star => (\n \n ★\n \n ))}\n

\n )}\n \n {item.notes && (\n

\"{item.notes}\"

\n )}\n

\n \n

\n {item.metadata?.genre && (\n {item.metadata.genre}\n )}\n {item.metadata?.year && (\n {item.metadata.year}\n )}\n

\n \n

\n handleEditStart(item)}\n className=\"px-3 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n >\n Edit\n \n \n {/* Quick status change buttons */}\n {item.status !== 'in_progress' && (\n handleStatusChange(item, 'in_progress')}\n className=\"px-3 py-1 text-xs bg-yellow-500 text-white rounded hover:bg-yellow-600 transition-colors\"\n >\n Start\n \n )}\n \n {item.status === 'in_progress' && (\n handleStatusChange(item, 'completed')}\n className=\"px-3 py-1 text-xs bg-green-500 text-white rounded hover:bg-green-600 transition-colors\"\n >\n Complete\n \n )}\n \n {item.status !== 'on_hold' && item.status !== 'completed' && (\n handleStatusChange(item, 'on_hold')}\n className=\"px-3 py-1 text-xs bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors\"\n >\n Pause\n \n )}\n

\n ))}\n

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

\n \n Close\n \n

\n \n {/* Edit Modal */}\n {editingItem && (\n

Edit {editingItem.title}

\n \n

\n Status\n setEditForm(prev => ({ ...prev, status: e.target.value as MediaStatus }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n {Object.entries(STATUS_LABELS).map(([value, label]) => (\n \n ))}\n \n

\n \n

\n Progress\n setEditForm(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-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n \n

\n Cover Image URL\n

\n {\n setEditForm(prev => ({ ...prev, cover_url: e.target.value }));\n setImageError(false);\n }}\n placeholder=\"https://example.com/cover.jpg\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n {editForm.cover_url && (\n

\n setImageError(true)}\n onLoad={() => setImageError(false)}\n />\n

\n )}\n

\n \n

\n Notes\n setEditForm(prev => ({ ...prev, notes: e.target.value }))}\n placeholder=\"Your thoughts, progress notes...\"\n rows={3}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none\"\n />\n

\n \n

\n Rating\n

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

\n \n

\n setEditingItem(null)}\n className=\"px-4 py-2 text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 transition-colors\"\n >\n Cancel\n \n \n Save Changes\n \n

\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/MediaDetailModal_backup.tsx","extension","actionData","errors"]