diff --git a/frontend/src/components/common/ContentImageCell.tsx b/frontend/src/components/common/ContentImageCell.tsx index dea0ca99..85027bcd 100644 --- a/frontend/src/components/common/ContentImageCell.tsx +++ b/frontend/src/components/common/ContentImageCell.tsx @@ -20,10 +20,9 @@ export interface ContentImageData { interface ContentImageCellProps { image: ContentImageData | null; maxPromptLength?: number; - onImageClick?: () => void; } -export default function ContentImageCell({ image, maxPromptLength = 100, onImageClick }: ContentImageCellProps) { +export default function ContentImageCell({ image, maxPromptLength = 100 }: ContentImageCellProps) { const [showFullPrompt, setShowFullPrompt] = useState(false); // Check if image_path is a valid local file path (not a URL) @@ -114,14 +113,7 @@ export default function ContentImageCell({ image, maxPromptLength = 100, onImage {prompt { - if (onImageClick) { - onImageClick(); - } - }} + className="w-full h-24 object-cover rounded border border-gray-300 dark:border-gray-600" onError={(e) => { // Show empty placeholder if local image fails to load const target = e.target as HTMLImageElement; diff --git a/frontend/src/config/pages/images.config.tsx b/frontend/src/config/pages/images.config.tsx index 63f23641..6b9663d9 100644 --- a/frontend/src/config/pages/images.config.tsx +++ b/frontend/src/config/pages/images.config.tsx @@ -52,7 +52,6 @@ export const createImagesPageConfig = ( setCurrentPage: (page: number) => void; maxInArticleImages?: number; // Optional: max in-article images to display onGenerateImages?: (contentId: number) => void; // Handler for generate images button - onImageClick?: (contentId: number, imageType: 'featured' | 'in_article', position?: number) => void; // Handler for image click } ): ImagesPageConfig => { const maxImages = handlers.maxInArticleImages || 5; // Default to 5 in-article images @@ -85,10 +84,7 @@ export const createImagesPageConfig = ( sortable: false, width: '200px', render: (_value: any, row: ContentImagesGroup) => ( - handlers.onImageClick!(row.content_id, 'featured') : undefined} - /> + ), }, ]; @@ -102,12 +98,7 @@ export const createImagesPageConfig = ( width: '200px', render: (_value: any, row: ContentImagesGroup) => { const image = row.in_article_images.find(img => img.position === i); - return ( - handlers.onImageClick!(row.content_id, 'in_article', i) : undefined} - /> - ); + return ; }, }); } diff --git a/frontend/src/pages/Writer/Images.tsx b/frontend/src/pages/Writer/Images.tsx index d86ec590..6707f505 100644 --- a/frontend/src/pages/Writer/Images.tsx +++ b/frontend/src/pages/Writer/Images.tsx @@ -12,7 +12,6 @@ import { fetchImageGenerationSettings, generateImages, bulkUpdateImagesStatus, - ContentImage, } from '../../services/api'; import { useToast } from '../../components/ui/toast/ToastContainer'; import { FileIcon, DownloadIcon, BoltIcon } from '../../icons'; @@ -21,8 +20,6 @@ import ImageQueueModal, { ImageQueueItem } from '../../components/common/ImageQu import SingleRecordStatusUpdateModal from '../../components/common/SingleRecordStatusUpdateModal'; import { useResourceDebug } from '../../hooks/useResourceDebug'; import PageHeader from '../../components/common/PageHeader'; -import Lightbox from 'yet-another-react-lightbox'; -import 'yet-another-react-lightbox/styles.css'; export default function Images() { const toast = useToast(); @@ -88,11 +85,6 @@ export default function Images() { const [statusUpdateRecordName, setStatusUpdateRecordName] = useState(''); const [isUpdatingStatus, setIsUpdatingStatus] = useState(false); - // Lightbox state - const [lightboxOpen, setLightboxOpen] = useState(false); - const [lightboxIndex, setLightboxIndex] = useState(0); - const [lightboxSlides, setLightboxSlides] = useState>([]); - // Load images - wrapped in useCallback const loadImages = useCallback(async () => { setLoading(true); @@ -361,87 +353,6 @@ export default function Images() { } }, [toast, images, buildImageQueue]); - // Helper function to convert image_path to web-accessible URL - const getImageUrl = useCallback((image: ContentImage | null): string | null => { - if (!image || !image.image_path) return null; - - // Check if image_path is a valid local file path (not a URL) - const isValidLocalPath = (imagePath: string): boolean => { - if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) { - return false; - } - return imagePath.includes('ai-images'); - }; - - if (!isValidLocalPath(image.image_path)) return null; - - // Convert local file path to web-accessible URL - if (image.image_path.includes('ai-images')) { - const filename = image.image_path.split('ai-images/')[1] || image.image_path.split('ai-images\\')[1]; - if (filename) { - return `/images/ai-images/${filename}`; - } - } - - if (image.image_path.startsWith('/images/')) { - return image.image_path; - } - - const filename = image.image_path.split('/').pop() || image.image_path.split('\\').pop(); - return filename ? `/images/ai-images/${filename}` : null; - }, []); - - // Handle image click - open lightbox with all images from the same content - const handleImageClick = useCallback((contentId: number, imageType: 'featured' | 'in_article', position?: number) => { - const contentGroup = images.find(g => g.content_id === contentId); - if (!contentGroup) return; - - // Collect all generated images from this content - const slides: Array<{ src: string; alt?: string }> = []; - let startIndex = 0; - - // Add featured image first (if it exists and is generated) - if (contentGroup.featured_image && contentGroup.featured_image.status === 'generated') { - const url = getImageUrl(contentGroup.featured_image); - if (url) { - slides.push({ - src: url, - alt: contentGroup.featured_image.prompt || 'Featured image', - }); - // If clicked image is featured, start at index 0 - if (imageType === 'featured') { - startIndex = 0; - } - } - } - - // Add in-article images in order - const sortedInArticle = [...contentGroup.in_article_images] - .filter(img => img.status === 'generated') - .sort((a, b) => (a.position || 0) - (b.position || 0)); - - sortedInArticle.forEach((img) => { - const url = getImageUrl(img); - if (url) { - const currentIndex = slides.length; - slides.push({ - src: url, - alt: img.prompt || `In-article image ${img.position}`, - }); - // If clicked image is this in-article image, set start index - if (imageType === 'in_article' && img.position === position) { - startIndex = currentIndex; - } - } - }); - - if (slides.length > 0) { - setLightboxSlides(slides); - setLightboxIndex(startIndex); - setLightboxOpen(true); - } - }, [images, getImageUrl]); - // Get max in-article images from the data (to determine column count) const maxInArticleImages = useMemo(() => { if (images.length === 0) return 5; // Default @@ -459,9 +370,8 @@ export default function Images() { setCurrentPage, maxInArticleImages, onGenerateImages: handleGenerateImages, - onImageClick: handleImageClick, }); - }, [searchTerm, statusFilter, maxInArticleImages, handleGenerateImages, handleImageClick]); + }, [searchTerm, statusFilter, maxInArticleImages, handleGenerateImages]); // Calculate header metrics const headerMetrics = useMemo(() => { @@ -569,15 +479,6 @@ export default function Images() { isLoading={isUpdatingStatus} /> - {/* Lightbox */} - setLightboxOpen(false)} - index={lightboxIndex} - slides={lightboxSlides} - on={{ view: ({ index }) => setLightboxIndex(index) }} - /> - {/* AI Function Logs - Display below table (only when Resource Debug is enabled) */} {resourceDebugEnabled && aiLogs.length > 0 && (