@jhits/plugin-images 0.0.14 → 0.0.15

package/src/views/ImageManager.tsx

@@ -1,60 +1,27 @@
 /**
  * Image Manager View
- * Full-featured image management with CRUD operations and usage tracking
+ * Refactored modular interface for media management
  */
 
 'use client';
 
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { 
-    Plus, 
-    Search, 
-    Trash2, 
-    Upload, 
-    Image as ImageIcon, 
-    Grid3x3, 
-    List,
-    Loader2,
-    AlertTriangle,
-    CheckCircle,
-    ExternalLink,
-    X,
-    RefreshCw,
-    Eye,
-    HardDrive,
-    CheckCircle2,
-    Circle,
-    Trash
+    ImageIcon, 
+    Loader2
 } from 'lucide-react';
-import Image from 'next/image';
-
-interface ImageMetadata {
-    id: string;
-    filename: string;
-    url: string;
-    size: number;
-    mimeType: string;
-    uploadedAt: string;
-}
 
-interface ImageUsage {
-    imageId: string;
-    filename: string;
-    usage: Array<{
-        plugin: string;
-        type: string;
-        title: string;
-        id: string;
-        url?: string;
-    }>;
-}
+// Components
+import { ImageManagerHeader } from './ImageManager/components/ImageManagerHeader';
+import { ImageManagerStats } from './ImageManager/components/ImageManagerStats';
+import { ImageManagerToolbar } from './ImageManager/components/ImageManagerToolbar';
+import { ImageGrid } from './ImageManager/components/ImageGrid';
+import { ImageTable } from './ImageManager/components/ImageTable';
+import { DeleteImageModal } from './ImageManager/components/DeleteImageModal';
+import { CleanupLibraryModal } from './ImageManager/components/CleanupLibraryModal';
 
-interface StorageStats {
-    totalImages: number;
-    totalSize: number;
-    usedImages: number;
-    availableImages: number;
-}
+// Types
+import { ImageMetadata, ImageUsage, StorageStats } from './ImageManager/types';
 
 export interface ImageManagerViewProps {
     siteId: string;
@@ -71,12 +38,10 @@ function formatFileSize(bytes: number): string {
 
 function formatDate(dateString: string): string {
     const date = new Date(dateString);
-    return date.toLocaleDateString('en-US', {
+    return date.toLocaleDateString(undefined, {
         year: 'numeric',
         month: 'short',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit'
+        day: 'numeric'
     });
 }
 
@@ -158,6 +123,7 @@ export function ImageManagerView({ siteId, locale }: ImageManagerViewProps) {
                     setImages(prev => [data.image, ...prev]);
                 }
             }
+            handleRefresh();
         } catch (error) {
             console.error('Upload failed:', error);
         } finally {
@@ -180,6 +146,7 @@ export function ImageManagerView({ siteId, locale }: ImageManagerViewProps) {
                 setImages(prev => prev.filter(img => img.id !== selectedImage.id));
                 setShowDeleteModal(false);
                 setSelectedImage(null);
+                handleRefresh();
             } else {
                 const error = await response.json();
                 alert(error.error || 'Failed to delete image');
@@ -217,6 +184,7 @@ export function ImageManagerView({ siteId, locale }: ImageManagerViewProps) {
 
             if (deletedCount > 0) {
                 setImages(prev => prev.filter(img => isImageInUse(img.filename)));
+                handleRefresh();
             }
 
             setShowCleanupModal(false);
@@ -224,11 +192,11 @@ export function ImageManagerView({ siteId, locale }: ImageManagerViewProps) {
             if (failedCount > 0) {
                 alert(`Deleted ${deletedCount} images. ${failedCount} failed.`);
             } else {
-                alert(`Successfully deleted ${deletedCount} unused image${deletedCount !== 1 ? 's' : ''}.`);
+                alert(`Successfully deleted ${deletedCount} unused assets.`);
             }
         } catch (error) {
             console.error('Cleanup failed:', error);
-            alert('Failed to cleanup images');
+            alert('Failed to cleanup assets');
         } finally {
             setCleaning(false);
         }
@@ -262,532 +230,96 @@ export function ImageManagerView({ siteId, locale }: ImageManagerViewProps) {
     };
 
     return (
-        <div className="h-full w-full rounded-[2.5rem] bg-white dark:bg-neutral-900 p-8 overflow-y-auto">
-            {/* Header Section */}
-            <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
-                <div>
-                    <h1 className="text-3xl font-black text-neutral-950 dark:text-white uppercase tracking-tighter mb-2">
-                        Images
-                    </h1>
-                    <p className="text-sm text-neutral-500 dark:text-neutral-400">
-                        Upload and manage your media library
-                    </p>
-                </div>
-
-                <div className="flex items-center gap-3">
-                    {stats && stats.availableImages > 0 && (
-                        <button
-                            onClick={() => setShowCleanupModal(true)}
-                            className="inline-flex items-center gap-2 px-4 py-3 bg-red-500/10 text-red-600 dark:text-red-400 rounded-full text-[10px] font-bold uppercase tracking-widest hover:bg-red-500/20 transition-all"
-                            title={`Remove ${stats.availableImages} unused images`}
-                        >
-                            <Trash size={16} />
-                            Clean Up
-                        </button>
-                    )}
-                    
-                    <label className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-primary/90 transition-all shadow-lg shadow-primary/20 cursor-pointer">
-                        {uploading ? (
-                            <Loader2 size={16} className="animate-spin" />
-                        ) : (
-                            <Upload size={16} />
-                        )}
-                        {uploading ? 'Uploading...' : 'Upload'}
-                        <input 
-                            type="file" 
-                            accept="image/*" 
-                            multiple 
-                            onChange={handleUpload}
-                            className="hidden"
-                            disabled={uploading}
-                        />
-                    </label>
-                    
-                    <button
-                        onClick={handleRefresh}
-                        className="p-3 bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
-                        title="Refresh"
-                    >
-                        <RefreshCw size={16} />
-                    </button>
-                </div>
-            </div>
-
-            {/* Stats Cards */}
-            {stats && (
-                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-                    <div className="bg-neutral-100 dark:bg-neutral-800 rounded-2xl p-5 border border-neutral-200 dark:border-neutral-700">
-                        <div className="flex items-center gap-3 mb-2">
-                            <div className="p-2 bg-primary/10 rounded-xl">
-                                <ImageIcon className="text-primary" size={20} />
-                            </div>
-                            <span className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Total Images</span>
-                        </div>
-                        <p className="text-2xl font-black text-neutral-900 dark:text-white">{stats.totalImages}</p>
-                    </div>
-                    
-                    <div className="bg-neutral-100 dark:bg-neutral-800 rounded-2xl p-5 border border-neutral-200 dark:border-neutral-700">
-                        <div className="flex items-center gap-3 mb-2">
-                            <div className="p-2 bg-amber-500/10 rounded-xl">
-                                <HardDrive className="text-amber-500" size={20} />
-                            </div>
-                            <span className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Storage Used</span>
-                        </div>
-                        <p className="text-2xl font-black text-neutral-900 dark:text-white">{formatFileSize(stats.totalSize)}</p>
-                    </div>
-                    
-                    <div className="bg-neutral-100 dark:bg-neutral-800 rounded-2xl p-5 border border-neutral-200 dark:border-neutral-700">
-                        <div className="flex items-center gap-3 mb-2">
-                            <div className="p-2 bg-red-500/10 rounded-xl">
-                                <CheckCircle2 className="text-red-500" size={20} />
-                            </div>
-                            <span className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">In Use</span>
+        <div className="w-full flex flex-col space-y-8 px-6 lg:px-10 py-6 lg:py-10 pb-10 bg-transparent">
+            <ImageManagerHeader 
+                uploading={uploading}
+                unusedCount={getUnusedImagesCount()}
+                onUpload={handleUpload}
+                onRefresh={handleRefresh}
+                onShowCleanup={() => setShowCleanupModal(true)}
+            />
+
+            {stats && <ImageManagerStats stats={stats} formatFileSize={formatFileSize} />}
+
+            <ImageManagerToolbar 
+                search={search}
+                setSearch={setSearch}
+                viewMode={viewMode}
+                setViewMode={setViewMode}
+            />
+
+            <div className="flex-1 px-4 min-h-[400px]">
+                {loading ? (
+                    <div className="h-full flex items-center justify-center py-20">
+                        <div className="flex flex-col items-center gap-4">
+                            <Loader2 size={40} className="animate-spin text-primary opacity-40" />
+                            <p className="text-[10px] font-bold text-primary uppercase tracking-widest animate-pulse">Syncing Library</p>
                         </div>
-                        <p className="text-2xl font-black text-neutral-900 dark:text-white">{stats.usedImages}</p>
                     </div>
-                    
-                    <div className="bg-neutral-100 dark:bg-neutral-800 rounded-2xl p-5 border border-neutral-200 dark:border-neutral-700">
-                        <div className="flex items-center gap-3 mb-2">
-                            <div className="p-2 bg-green-500/10 rounded-xl">
-                                <Circle className="text-green-500" size={20} />
-                            </div>
-                            <span className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Available</span>
+                ) : filteredImages.length === 0 ? (
+                    <div className="h-full flex flex-col items-center justify-center py-32 text-center">
+                        <div className="size-24 bg-dashboard-card/40 rounded-3xl border border-dashed border-dashboard-border/50 flex items-center justify-center mb-6 relative">
+                            <ImageIcon size={40} className="text-dashboard-text-secondary opacity-20" />
+                            <div className="absolute inset-0 bg-primary/5 rounded-3xl animate-pulse" />
                         </div>
-                        <p className="text-2xl font-black text-neutral-900 dark:text-white">{stats.availableImages}</p>
+                        <h3 className="text-xl font-bold text-dashboard-text tracking-tight opacity-40 mb-1.5">
+                            {search ? 'Reference Not Found' : 'Repository Empty'}
+                        </h3>
+                        <p className="text-xs text-dashboard-text-secondary font-medium opacity-60">
+                            {search ? 'Try refining your search parameters' : 'Upload your first image to begin building your library'}
+                        </p>
                     </div>
-                </div>
-            )}
-
-            {/* Filters & Search Bar with View Toggle */}
-            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
-                <div className="relative flex-1 max-w-md">
-                    <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400" size={18} />
-                    <input
-                        type="text"
-                        placeholder="Search images..."
-                        value={search}
-                        onChange={(e) => setSearch(e.target.value)}
-                        className="w-full pl-12 pr-4 py-3 bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-300 dark:border-neutral-700 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
+                ) : viewMode === 'grid' ? (
+                    <ImageGrid 
+                        images={filteredImages}
+                        isImageInUse={isImageInUse}
+                        getImageUsage={getImageUsage}
+                        formatFileSize={formatFileSize}
+                        onViewFull={(url) => window.open(url, '_blank')}
+                        onDelete={(img) => {
+                            setSelectedImage(img);
+                            setShowDeleteModal(true);
+                        }}
                     />
-                </div>
-
-                <div className="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800/50 rounded-full p-1 border border-neutral-300 dark:border-neutral-700">
-                    <button
-                        onClick={() => setViewMode('grid')}
-                        className={`p-2 rounded-full transition-all ${
-                            viewMode === 'grid'
-                                ? 'bg-white dark:bg-neutral-900 text-primary shadow-sm'
-                                : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'
-                        }`}
-                        title="Grid View"
-                    >
-                        <Grid3x3 size={18} />
-                    </button>
-                    <button
-                        onClick={() => setViewMode('list')}
-                        className={`p-2 rounded-full transition-all ${
-                            viewMode === 'list'
-                                ? 'bg-white dark:bg-neutral-900 text-primary shadow-sm'
-                                : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'
-                        }`}
-                        title="List View"
-                    >
-                        <List size={18} />
-                    </button>
-                </div>
+                ) : (
+                    <ImageTable 
+                        images={filteredImages}
+                        isImageInUse={isImageInUse}
+                        getImageUsage={getImageUsage}
+                        formatFileSize={formatFileSize}
+                        formatDate={formatDate}
+                        onViewFull={(url) => window.open(url, '_blank')}
+                        onDelete={(img) => {
+                            setSelectedImage(img);
+                            setShowDeleteModal(true);
+                        }}
+                    />
+                )}
             </div>
 
-            {/* Content */}
-            {loading ? (
-                <div className="flex items-center justify-center py-20">
-                    <Loader2 size={32} className="animate-spin text-primary" />
-                </div>
-            ) : filteredImages.length === 0 ? (
-                <div className="flex flex-col items-center justify-center py-20 text-center">
-                    <div className="w-24 h-24 bg-neutral-100 dark:bg-neutral-800 rounded-full flex items-center justify-center mb-6">
-                        <ImageIcon size={40} className="text-neutral-400" />
-                    </div>
-                    <h3 className="text-xl font-bold text-neutral-600 dark:text-neutral-400 mb-2">
-                        {search ? 'No images found' : 'No images yet'}
-                    </h3>
-                    <p className="text-neutral-500 dark:text-neutral-500 mb-6">
-                        {search ? 'Try a different search term' : 'Upload your first image to get started'}
-                    </p>
-                    {!search && (
-                        <label className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-primary/90 transition-all shadow-lg shadow-primary/20 cursor-pointer">
-                            <Upload size={16} />
-                            Upload Image
-                            <input 
-                                type="file" 
-                                accept="image/*" 
-                                onChange={handleUpload}
-                                className="hidden"
-                            />
-                        </label>
-                    )}
-                </div>
-            ) : viewMode === 'grid' ? (
-                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
-                    {filteredImages.map((image) => {
-                        const usage = getImageUsage(image.filename);
-                        const inUse = isImageInUse(image.filename);
-                        
-                        return (
-                            <div 
-                                key={image.id}
-                                className={`group relative bg-neutral-100 dark:bg-neutral-800 rounded-2xl overflow-hidden border transition-all hover:shadow-lg ${
-                                    inUse 
-                                        ? 'border-amber-300 dark:border-amber-700' 
-                                        : 'border-neutral-200 dark:border-neutral-700 hover:border-primary/50'
-                                }`}
-                            >
-                                <div className="aspect-square relative bg-neutral-200 dark:bg-neutral-700">
-                                    <Image
-                                        src={image.url}
-                                        alt={image.filename}
-                                        fill
-                                        className="object-cover"
-                                        unoptimized
-                                    />
-                                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all flex items-center justify-center gap-2 opacity-0 group-hover:opacity-100">
-                                        <button
-                                            onClick={() => window.open(image.url, '_blank')}
-                                            className="p-2 bg-white dark:bg-neutral-900 rounded-full text-primary hover:bg-primary/10 transition-colors"
-                                            title="View full size"
-                                        >
-                                            <Eye size={16} />
-                                        </button>
-                                        <button
-                                            onClick={() => {
-                                                setSelectedImage(image);
-                                                setShowDeleteModal(true);
-                                            }}
-                                            className={`p-2 bg-white dark:bg-neutral-900 rounded-full transition-colors ${
-                                                inUse
-                                                    ? 'text-neutral-400 cursor-not-allowed'
-                                                    : 'text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20'
-                                            }`}
-                                            title={inUse ? 'Cannot delete - image is in use' : 'Delete'}
-                                            disabled={inUse}
-                                        >
-                                            <Trash2 size={16} />
-                                        </button>
-                                    </div>
-                                    {inUse && (
-                                        <div className="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white text-[10px] font-bold uppercase rounded-full flex items-center gap-1 shadow-lg">
-                                            <CheckCircle size={10} />
-                                            In Use
-                                        </div>
-                                    )}
-                                </div>
-                                <div className="p-3">
-                                    <p className="text-xs font-medium text-neutral-700 dark:text-neutral-300 truncate" title={image.filename}>
-                                        {image.filename}
-                                    </p>
-                                    <div className="flex items-center justify-between mt-1">
-                                        <p className="text-[10px] text-neutral-500">
-                                            {formatFileSize(image.size)}
-                                        </p>
-                                        {inUse ? (
-                                            <p className="text-[10px] text-red-500 dark:text-red-400 font-bold">
-                                                {usage.length > 0 ? `${usage.length} ref${usage.length > 1 ? 's' : ''}` : 'mapped'}
-                                            </p>
-                                        ) : (
-                                            <p className="text-[10px] text-green-500 dark:text-green-400 font-bold">
-                                                available
-                                            </p>
-                                        )}
-                                    </div>
-                                </div>
-                            </div>
-                        );
-                    })}
-                </div>
-            ) : (
-                <div className="bg-neutral-100 dark:bg-neutral-800 rounded-2xl overflow-hidden border border-neutral-200 dark:border-neutral-700">
-                    <table className="w-full">
-                        <thead className="bg-neutral-200 dark:bg-neutral-700/50">
-                            <tr>
-                                <th className="text-left px-4 py-3 text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase">Preview</th>
-                                <th className="text-left px-4 py-3 text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase">Filename</th>
-                                <th className="text-left px-4 py-3 text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase">Size</th>
-                                <th className="text-left px-4 py-3 text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase">Uploaded</th>
-                                <th className="text-left px-4 py-3 text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase">Status</th>
-                                <th className="text-right px-4 py-3 text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase">Actions</th>
-                            </tr>
-                        </thead>
-                        <tbody className="divide-y divide-neutral-200 dark:divide-neutral-700">
-                            {filteredImages.map((image) => {
-                                const usage = getImageUsage(image.filename);
-                                const inUse = isImageInUse(image.filename);
-                                
-                                return (
-                                    <tr key={image.id} className={`transition-colors ${
-                                        inUse 
-                                            ? 'bg-amber-50/30 dark:bg-amber-900/5 hover:bg-amber-50/50 dark:hover:bg-amber-900/10' 
-                                            : 'hover:bg-neutral-200/50 dark:hover:bg-neutral-700/30'
-                                    }`}>
-                                        <td className="px-4 py-3">
-                                            <div className={`w-12 h-12 relative bg-neutral-200 dark:bg-neutral-700 rounded-lg overflow-hidden ring-2 ${
-                                                inUse ? 'ring-red-400 dark:ring-red-600' : 'ring-transparent'
-                                            }`}>
-                                                <Image
-                                                    src={image.url}
-                                                    alt={image.filename}
-                                                    fill
-                                                    className="object-cover"
-                                                    unoptimized
-                                                />
-                                            </div>
-                                        </td>
-                                        <td className="px-4 py-3">
-                                            <p className="text-sm font-medium text-neutral-700 dark:text-neutral-300 truncate max-w-[200px]" title={image.filename}>
-                                                {image.filename}
-                                            </p>
-                                        </td>
-                                        <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
-                                            {formatFileSize(image.size)}
-                                        </td>
-                                        <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
-                                            {formatDate(image.uploadedAt)}
-                                        </td>
-                                        <td className="px-4 py-3">
-                                            {inUse ? (
-                                                <span className="inline-flex items-center gap-1 px-2 py-1 bg-red-500/10 text-red-600 dark:text-red-400 text-xs font-bold rounded-full">
-                                                    <CheckCircle size={12} />
-                                                    In Use{usage.length > 0 ? ` (${usage.length})` : ''}
-                                                </span>
-                                            ) : (
-                                                <span className="inline-flex items-center gap-1 px-2 py-1 bg-green-500/10 text-green-600 dark:text-green-400 text-xs font-medium rounded-full">
-                                                    <Circle size={12} />
-                                                    Available
-                                                </span>
-                                            )}
-                                        </td>
-                                        <td className="px-4 py-3 text-right">
-                                            <div className="flex items-center justify-end gap-2">
-                                                <button
-                                                    onClick={() => window.open(image.url, '_blank')}
-                                                    className="p-2 text-neutral-500 hover:text-primary hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded-lg transition-colors"
-                                                    title="View"
-                                                >
-                                                    <Eye size={16} />
-                                                </button>
-                                                <button
-                                                    onClick={() => {
-                                                        setSelectedImage(image);
-                                                        setShowDeleteModal(true);
-                                                    }}
-                                                    className={`p-2 rounded-lg transition-colors ${
-                                                        inUse 
-                                                            ? 'text-neutral-400 cursor-not-allowed' 
-                                                            : 'text-neutral-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20'
-                                                    }`}
-                                                    title={inUse ? 'Cannot delete - image is in use' : 'Delete'}
-                                                    disabled={inUse}
-                                                >
-                                                    <Trash2 size={16} />
-                                                </button>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                );
-                            })}
-                        </tbody>
-                    </table>
-                </div>
-            )}
-
-            {/* Delete Confirmation Modal */}
-            {showDeleteModal && selectedImage && (
-                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-                    <div className="bg-white dark:bg-neutral-900 rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl">
-                        <div className="flex items-center justify-between mb-4">
-                            <h3 className="text-xl font-bold text-neutral-900 dark:text-white">Delete Image</h3>
-                            <button
-                                onClick={() => {
-                                    setShowDeleteModal(false);
-                                    setSelectedImage(null);
-                                }}
-                                className="p-2 text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300 rounded-lg"
-                            >
-                                <X size={20} />
-                            </button>
-                        </div>
-                        
-                        {(() => {
-                            const usage = getImageUsage(selectedImage.filename);
-                            const inUse = isImageInUse(selectedImage.filename);
-                            const isMapped = isImageMapped(selectedImage.filename);
-                            
-                            return (
-                                <>
-                                    {inUse ? (
-                                        <div className="mb-6">
-                                            <div className="flex items-center gap-2 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl mb-4">
-                                                <AlertTriangle className="text-red-500 shrink-0" size={24} />
-                                                <div>
-                                                    <p className="text-sm font-medium text-red-800 dark:text-red-200">
-                                                        {isMapped && usage.length === 0 
-                                                            ? 'This image is mapped to content' 
-                                                            : 'This image is currently in use'}
-                                                    </p>
-                                                    <p className="text-xs text-red-600 dark:text-red-400 mt-1">
-                                                        {isMapped && usage.length === 0
-                                                            ? 'The image is linked via semantic ID mapping.'
-                                                            : 'Please remove the image from all content before deleting.'}
-                                                    </p>
-                                                </div>
-                                            </div>
-                                            
-                                            {(usage.length > 0) && (
-                                                <div className="space-y-2 max-h-[200px] overflow-y-auto">
-                                                    <p className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Used in:</p>
-                                                    {usage.map((item, idx) => (
-                                                        <div key={idx} className="flex items-center justify-between p-3 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
-                                                            <div>
-                                                                <p className="text-sm font-medium text-neutral-700 dark:text-neutral-300">{item.title}</p>
-                                                                <p className="text-xs text-neutral-500">{item.plugin} - {item.type}</p>
-                                                            </div>
-                                                            {item.url && (
-                                                                <a
-                                                                    href={item.url}
-                                                                    target="_blank"
-                                                                    rel="noopener noreferrer"
-                                                                    className="p-2 text-primary hover:bg-primary/10 rounded-lg transition-colors"
-                                                                >
-                                                                    <ExternalLink size={16} />
-                                                                </a>
-                                                            )}
-                                                        </div>
-                                                    ))}
-                                                </div>
-                                            )}
-                                            
-                                            {isMapped && usage.length === 0 && (
-                                                <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-2">
-                                                    This image is being used through semantic ID mappings. Delete the mapping first.
-                                                </p>
-                                            )}
-                                        </div>
-                                    ) : (
-                                        <div className="mb-6">
-                                            <div className="flex items-center gap-4 mb-4">
-                                                <div className="w-20 h-20 relative bg-neutral-200 dark:bg-neutral-700 rounded-lg overflow-hidden shrink-0">
-                                                    <Image
-                                                        src={selectedImage.url}
-                                                        alt={selectedImage.filename}
-                                                        fill
-                                                        className="object-cover"
-                                                        unoptimized
-                                                    />
-                                                </div>
-                                                <div>
-                                                    <p className="font-medium text-neutral-900 dark:text-white">{selectedImage.filename}</p>
-                                                    <p className="text-sm text-neutral-500">{formatFileSize(selectedImage.size)}</p>
-                                                    <p className="text-sm text-neutral-500">{formatDate(selectedImage.uploadedAt)}</p>
-                                                </div>
-                                            </div>
-                                            <p className="text-sm text-neutral-600 dark:text-neutral-400">
-                                                Are you sure you want to delete this image? This action cannot be undone.
-                                            </p>
-                                        </div>
-                                    )}
-                                    
-                                    <div className="flex justify-end gap-3">
-                                        <button
-                                            onClick={() => {
-                                                setShowDeleteModal(false);
-                                                setSelectedImage(null);
-                                            }}
-                                            className="px-4 py-2 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
-                                        >
-                                            Cancel
-                                        </button>
-                                        {!inUse && (
-                                            <button
-                                                onClick={handleDelete}
-                                                disabled={deleting}
-                                                className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors disabled:opacity-50 flex items-center gap-2"
-                                            >
-                                                {deleting && <Loader2 size={16} className="animate-spin" />}
-                                                Delete
-                                            </button>
-                                        )}
-                                    </div>
-                                </>
-                            );
-                        })()}
-                    </div>
-                </div>
-            )}
-
-            {/* Cleanup Confirmation Modal */}
-            {showCleanupModal && (
-                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-                    <div className="bg-white dark:bg-neutral-900 rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl">
-                        <div className="flex items-center justify-between mb-4">
-                            <h3 className="text-xl font-bold text-neutral-900 dark:text-white">Clean Up Unused Images</h3>
-                            <button
-                                onClick={() => setShowCleanupModal(false)}
-                                className="p-2 text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300 rounded-lg"
-                            >
-                                <X size={20} />
-                            </button>
-                        </div>
-                        
-                        <div className="mb-6">
-                            <div className="flex items-center gap-2 p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-xl mb-4">
-                                <AlertTriangle className="text-amber-500 shrink-0" size={24} />
-                                <div>
-                                    <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
-                                        Warning: This action cannot be undone
-                                    </p>
-                                    <p className="text-xs text-amber-600 dark:text-amber-400 mt-1">
-                                        {getUnusedImagesCount()} unused image{getUnusedImagesCount() !== 1 ? 's' : ''} will be permanently deleted.
-                                    </p>
-                                </div>
-                            </div>
-                            
-                            <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
-                                This will delete all images that are not currently in use by any content (blogs, newsletters, or user avatars).
-                            </p>
-                            
-                            <div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
-                                <div className="flex items-center justify-between text-sm">
-                                    <span className="text-neutral-600 dark:text-neutral-400">Total images:</span>
-                                    <span className="font-bold text-neutral-900 dark:text-white">{stats?.totalImages || 0}</span>
-                                </div>
-                                <div className="flex items-center justify-between text-sm mt-2">
-                                    <span className="text-neutral-600 dark:text-neutral-400">In use:</span>
-                                    <span className="font-bold text-red-500">{stats?.usedImages || 0}</span>
-                                </div>
-                                <div className="flex items-center justify-between text-sm mt-2">
-                                    <span className="text-neutral-600 dark:text-neutral-400">Will be deleted:</span>
-                                    <span className="font-bold text-red-500">{getUnusedImagesCount()}</span>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div className="flex justify-end gap-3">
-                            <button
-                                onClick={() => setShowCleanupModal(false)}
-                                className="px-4 py-2 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
-                            >
-                                Cancel
-                            </button>
-                            <button
-                                onClick={handleCleanup}
-                                disabled={cleaning}
-                                className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors disabled:opacity-50 flex items-center gap-2"
-                            >
-                                {cleaning && <Loader2 size={16} className="animate-spin" />}
-                                {cleaning ? 'Deleting...' : `Delete ${getUnusedImagesCount()} Images`}
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            )}
+            <DeleteImageModal 
+                isOpen={showDeleteModal}
+                image={selectedImage}
+                inUse={selectedImage ? isImageInUse(selectedImage.filename) : false}
+                usage={selectedImage ? getImageUsage(selectedImage.filename) : []}
+                isDeleting={deleting}
+                formatFileSize={formatFileSize}
+                formatDate={formatDate}
+                onClose={() => {
+                    setShowDeleteModal(false);
+                    setSelectedImage(null);
+                }}
+                onConfirm={handleDelete}
+            />
+
+            <CleanupLibraryModal 
+                isOpen={showCleanupModal}
+                stats={stats}
+                unusedCount={getUnusedImagesCount()}
+                isCleaning={cleaning}
+                onClose={() => setShowCleanupModal(false)}
+                onConfirm={handleCleanup}
+            />
         </div>
     );
 }