@jhits/plugin-images 0.0.13 → 0.0.15

package/dist/views/ImageManager.d.ts

@@ -1,6 +1,6 @@
 /**
  * Image Manager View
- * Main view for managing uploaded images
+ * Refactored modular interface for media management
  */
 export interface ImageManagerViewProps {
     siteId: string;

package/dist/views/ImageManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageManager.d.ts","sourceRoot":"","sources":["../../src/views/ImageManager.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,MAAM,WAAW,qBAAqB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,qBAAqB,2CAczE"}
+{"version":3,"file":"ImageManager.d.ts","sourceRoot":"","sources":["../../src/views/ImageManager.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAsBH,MAAM,WAAW,qBAAqB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAmBD,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,qBAAqB,2CAqRzE"}

package/dist/views/ImageManager.js

@@ -1,9 +1,213 @@
 /**
  * Image Manager View
- * Main view for managing uploaded images
+ * Refactored modular interface for media management
  */
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { ImageIcon, Loader2 } from 'lucide-react';
+// 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';
+function formatFileSize(bytes) {
+    if (bytes === 0)
+        return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+function formatDate(dateString) {
+    const date = new Date(dateString);
+    return date.toLocaleDateString(undefined, {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric'
+    });
+}
 export function ImageManagerView({ siteId, locale }) {
-    return (_jsx("div", { className: "min-h-screen bg-dashboard-bg p-8", children: _jsxs("div", { className: "max-w-7xl mx-auto", children: [_jsx("h1", { className: "text-4xl font-black uppercase tracking-tighter text-dashboard-text mb-8", children: "Image Manager" }), _jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 mb-8", children: "This plugin provides image upload and management functionality. Use the ImagePicker component in other plugins to select images." })] }) }));
+    const [images, setImages] = useState([]);
+    const [usageData, setUsageData] = useState({});
+    const [stats, setStats] = useState(null);
+    const [mappedImages, setMappedImages] = useState(new Set());
+    const [loading, setLoading] = useState(true);
+    const [search, setSearch] = useState('');
+    const [viewMode, setViewMode] = useState('grid');
+    const [uploading, setUploading] = useState(false);
+    const [selectedImage, setSelectedImage] = useState(null);
+    const [showDeleteModal, setShowDeleteModal] = useState(false);
+    const [showCleanupModal, setShowCleanupModal] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const [cleaning, setCleaning] = useState(false);
+    const [refreshKey, setRefreshKey] = useState(0);
+    const fetchImages = useCallback(async () => {
+        try {
+            setLoading(true);
+            const response = await fetch('/api/plugin-images/list');
+            const data = await response.json();
+            if (data.images) {
+                setImages(data.images);
+                setStats(data.stats || null);
+                setMappedImages(new Set(data.mappedImages || []));
+            }
+        }
+        catch (error) {
+            console.error('Failed to fetch images:', error);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    const fetchUsageData = useCallback(async () => {
+        try {
+            const response = await fetch('/api/plugin-images/usage');
+            const data = await response.json();
+            if (data.images) {
+                const usageMap = {};
+                data.images.forEach((img) => {
+                    usageMap[img.filename] = img.usage;
+                });
+                setUsageData(usageMap);
+            }
+        }
+        catch (error) {
+            console.error('Failed to fetch usage data:', error);
+        }
+    }, []);
+    useEffect(() => {
+        fetchImages();
+        fetchUsageData();
+    }, [fetchImages, fetchUsageData, refreshKey]);
+    const handleUpload = async (e) => {
+        const files = e.target.files;
+        if (!files || files.length === 0)
+            return;
+        setUploading(true);
+        try {
+            for (const file of Array.from(files)) {
+                const formData = new FormData();
+                formData.append('file', file);
+                const response = await fetch('/api/plugin-images/upload', {
+                    method: 'POST',
+                    body: formData,
+                });
+                const data = await response.json();
+                if (data.success && data.image) {
+                    setImages(prev => [data.image, ...prev]);
+                }
+            }
+            handleRefresh();
+        }
+        catch (error) {
+            console.error('Upload failed:', error);
+        }
+        finally {
+            setUploading(false);
+            if (e.target)
+                e.target.value = '';
+        }
+    };
+    const handleDelete = async () => {
+        if (!selectedImage)
+            return;
+        setDeleting(true);
+        try {
+            const response = await fetch(`/api/plugin-images/uploads/${selectedImage.filename}`, {
+                method: 'DELETE',
+            });
+            if (response.ok) {
+                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');
+            }
+        }
+        catch (error) {
+            console.error('Delete failed:', error);
+            alert('Failed to delete image');
+        }
+        finally {
+            setDeleting(false);
+        }
+    };
+    const handleCleanup = async () => {
+        setCleaning(true);
+        try {
+            const unusedImages = images.filter(img => !isImageInUse(img.filename));
+            let deletedCount = 0;
+            let failedCount = 0;
+            for (const image of unusedImages) {
+                try {
+                    const response = await fetch(`/api/plugin-images/uploads/${image.filename}`, {
+                        method: 'DELETE',
+                    });
+                    if (response.ok) {
+                        deletedCount++;
+                    }
+                    else {
+                        failedCount++;
+                    }
+                }
+                catch {
+                    failedCount++;
+                }
+            }
+            if (deletedCount > 0) {
+                setImages(prev => prev.filter(img => isImageInUse(img.filename)));
+                handleRefresh();
+            }
+            setShowCleanupModal(false);
+            if (failedCount > 0) {
+                alert(`Deleted ${deletedCount} images. ${failedCount} failed.`);
+            }
+            else {
+                alert(`Successfully deleted ${deletedCount} unused assets.`);
+            }
+        }
+        catch (error) {
+            console.error('Cleanup failed:', error);
+            alert('Failed to cleanup assets');
+        }
+        finally {
+            setCleaning(false);
+        }
+    };
+    const getUnusedImagesCount = () => {
+        return images.filter(img => !isImageInUse(img.filename)).length;
+    };
+    const handleRefresh = () => {
+        setRefreshKey(prev => prev + 1);
+    };
+    const filteredImages = useMemo(() => {
+        return images.filter(img => search === '' ||
+            img.filename.toLowerCase().includes(search.toLowerCase()));
+    }, [images, search]);
+    const getImageUsage = (filename) => {
+        return usageData[filename] || [];
+    };
+    const isImageMapped = (filename) => {
+        return mappedImages.has(filename);
+    };
+    const isImageInUse = (filename) => {
+        return isImageMapped(filename) || getImageUsage(filename).length > 0;
+    };
+    return (_jsxs("div", { className: "w-full flex flex-col space-y-8 px-6 lg:px-10 py-6 lg:py-10 pb-10 bg-transparent", children: [_jsx(ImageManagerHeader, { uploading: uploading, unusedCount: getUnusedImagesCount(), onUpload: handleUpload, onRefresh: handleRefresh, onShowCleanup: () => setShowCleanupModal(true) }), stats && _jsx(ImageManagerStats, { stats: stats, formatFileSize: formatFileSize }), _jsx(ImageManagerToolbar, { search: search, setSearch: setSearch, viewMode: viewMode, setViewMode: setViewMode }), _jsx("div", { className: "flex-1 px-4 min-h-[400px]", children: loading ? (_jsx("div", { className: "h-full flex items-center justify-center py-20", children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx(Loader2, { size: 40, className: "animate-spin text-primary opacity-40" }), _jsx("p", { className: "text-[10px] font-bold text-primary uppercase tracking-widest animate-pulse", children: "Syncing Library" })] }) })) : filteredImages.length === 0 ? (_jsxs("div", { className: "h-full flex flex-col items-center justify-center py-32 text-center", children: [_jsxs("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", children: [_jsx(ImageIcon, { size: 40, className: "text-dashboard-text-secondary opacity-20" }), _jsx("div", { className: "absolute inset-0 bg-primary/5 rounded-3xl animate-pulse" })] }), _jsx("h3", { className: "text-xl font-bold text-dashboard-text tracking-tight opacity-40 mb-1.5", children: search ? 'Reference Not Found' : 'Repository Empty' }), _jsx("p", { className: "text-xs text-dashboard-text-secondary font-medium opacity-60", children: search ? 'Try refining your search parameters' : 'Upload your first image to begin building your library' })] })) : viewMode === 'grid' ? (_jsx(ImageGrid, { images: filteredImages, isImageInUse: isImageInUse, getImageUsage: getImageUsage, formatFileSize: formatFileSize, onViewFull: (url) => window.open(url, '_blank'), onDelete: (img) => {
+                        setSelectedImage(img);
+                        setShowDeleteModal(true);
+                    } })) : (_jsx(ImageTable, { images: filteredImages, isImageInUse: isImageInUse, getImageUsage: getImageUsage, formatFileSize: formatFileSize, formatDate: formatDate, onViewFull: (url) => window.open(url, '_blank'), onDelete: (img) => {
+                        setSelectedImage(img);
+                        setShowDeleteModal(true);
+                    } })) }), _jsx(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 }), _jsx(CleanupLibraryModal, { isOpen: showCleanupModal, stats: stats, unusedCount: getUnusedImagesCount(), isCleaning: cleaning, onClose: () => setShowCleanupModal(false), onConfirm: handleCleanup })] }));
 }

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@jhits/plugin-images",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "Image management and storage plugin for the JHITS ecosystem",
   "publishConfig": {
     "access": "public"
   },
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.tsx",
-      "import": "./src/index.tsx",
-      "default": "./src/index.tsx"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./src": {
       "types": "./src/index.tsx",
@@ -19,12 +19,13 @@
       "default": "./src/index.tsx"
     },
     "./server": {
-      "types": "./src/index.server.ts",
-      "import": "./src/index.server.ts",
-      "default": "./src/index.server.ts"
+      "types": "./dist/index.server.d.ts",
+      "import": "./dist/index.server.js",
+      "default": "./dist/index.server.js"
     }
   },
   "dependencies": {
+    "framer-motion": "^12.36.0",
     "lucide-react": "^0.564.0",
     "mongodb": "^7.1.0",
     "@jhits/plugin-core": "0.0.10"

package/src/api/list/index.ts

@@ -4,65 +4,183 @@
  */
 
 import { NextRequest, NextResponse } from 'next/server';
-import { readdir, stat } from 'fs/promises';
+import { readdir, stat, readFile } from 'fs/promises';
 import path from 'path';
 
 const uploadsDir = path.join(process.cwd(), 'data', 'uploads');
+const mappingsPath = path.join(process.cwd(), 'data', 'image-mappings.json');
+
+interface BlogDoc {
+    _id: string;
+    slug?: string;
+    title?: string;
+    image?: { id?: string; src?: string };
+    contentBlocks?: any[];
+}
+
+interface UserDoc {
+    _id: string;
+    name?: string;
+    email?: string;
+    image?: string;
+}
+
+async function queryDatabase(): Promise<{ blogFilenames: Set<string>; userFilenames: Set<string> }> {
+    const blogFilenames = new Set<string>();
+    const userFilenames = new Set<string>();
+    
+    try {
+        const { MongoClient } = await import('mongodb');
+        const uri = process.env.DATABASE_URL || process.env.MONGODB_URI;
+        if (!uri) return { blogFilenames, userFilenames };
+
+        const client = new MongoClient(uri);
+        await client.connect();
+        const db = client.db();
+
+        // Get blogs
+        const blogs = await db.collection('blogs').find({}).project({ image: 1, contentBlocks: 1 }).toArray() as BlogDoc[];
+        
+        for (const blog of blogs) {
+            // Featured image
+            if (blog.image?.id) blogFilenames.add(blog.image.id);
+            if (blog.image?.src) blogFilenames.add(blog.image.src);
+            
+            // Content blocks - recursively find image.src
+            if (blog.contentBlocks) {
+                const findImages = (obj: any) => {
+                    if (!obj || typeof obj !== 'object') return;
+                    if (Array.isArray(obj)) {
+                        obj.forEach(findImages);
+                        return;
+                    }
+                    if (obj.src && typeof obj.src === 'string' && !obj.src.startsWith('http')) {
+                        blogFilenames.add(obj.src);
+                    }
+                    if (obj.children) findImages(obj.children);
+                    if (obj.data) findImages(obj.data);
+                };
+                findImages(blog.contentBlocks);
+            }
+        }
+
+        // Get users with avatars
+        const users = await db.collection('users').find({ image: { $exists: true, $ne: null } }).project({ image: 1 }).toArray() as UserDoc[];
+        for (const user of users) {
+            if (user.image && user.image.includes('/api/uploads/')) {
+                const filename = user.image.split('/api/uploads/')[1];
+                if (filename) userFilenames.add(filename);
+            }
+        }
+
+        await client.close();
+    } catch (error) {
+        console.error('Error querying database for list:', error);
+    }
+    
+    return { blogFilenames, userFilenames };
+}
+
+function extractMappings(): { mappedFilenames: Set<string>; semanticIdToFilename: Record<string, string> } {
+    const mappedFilenames = new Set<string>();
+    const semanticIdToFilename: Record<string, string> = {};
+    
+    try {
+        const mappingsContent = require('fs').readFileSync(mappingsPath, 'utf-8');
+        const mappings = JSON.parse(mappingsContent);
+        Object.entries(mappings).forEach(([semanticId, mapping]) => {
+            const filename = typeof mapping === 'string' ? mapping : (mapping as any).filename;
+            if (filename) {
+                mappedFilenames.add(filename);
+                semanticIdToFilename[semanticId] = filename;
+            }
+        });
+    } catch {}
+    
+    return { mappedFilenames, semanticIdToFilename };
+}
 
 export async function GET(request: NextRequest) {
     try {
         const { searchParams } = new URL(request.url);
         const page = parseInt(searchParams.get('page') || '1');
-        const limit = parseInt(searchParams.get('limit') || '20');
+        const limit = parseInt(searchParams.get('limit') || '1000');
         const search = searchParams.get('search') || '';
 
-        // Read uploads directory
         let files: string[] = [];
+        let totalSize = 0;
+        
         try {
             files = await readdir(uploadsDir);
         } catch (error) {
-            // Directory doesn't exist yet
             return NextResponse.json({
                 images: [],
                 total: 0,
                 page: 1,
                 limit,
+                stats: {
+                    totalImages: 0,
+                    totalSize: 0,
+                    usedImages: 0,
+                    availableImages: 0,
+                }
             });
         }
 
-        // Filter image files and get metadata
         const imageExtensions = ['.jpg', '.jpeg', '.png', '.webp', '.gif'];
         const imageFiles = files.filter(file => {
             const ext = path.extname(file).toLowerCase();
             return imageExtensions.includes(ext);
         });
 
-        // Apply search filter if provided
-        const filteredFiles = search
-            ? imageFiles.filter(file => file.toLowerCase().includes(search.toLowerCase()))
-            : imageFiles;
-
-        // Sort by modification time (newest first)
         const filesWithStats = await Promise.all(
-            filteredFiles.map(async (filename) => {
+            imageFiles.map(async (filename) => {
                 const filePath = path.join(uploadsDir, filename);
-                const stats = await stat(filePath);
-                return {
-                    filename,
-                    mtime: stats.mtime,
-                    size: stats.size,
-                };
+                try {
+                    const stats = await stat(filePath);
+                    totalSize += stats.size;
+                    return {
+                        filename,
+                        mtime: stats.mtime,
+                        size: stats.size,
+                    };
+                } catch {
+                    return { filename, mtime: new Date(), size: 0 };
+                }
             })
         );
 
-        filesWithStats.sort((a, b) => b.mtime.getTime() - a.mtime.getTime());
+        // Get mappings
+        const { mappedFilenames, semanticIdToFilename } = extractMappings();
+        
+        // Get database references
+        const { blogFilenames, userFilenames } = await queryDatabase();
+
+        // An image is "in use" if it's in mappings OR referenced in database
+        // First resolve database references through mappings, then check
+        const inUseFilenames = new Set<string>();
+        
+        // Add mapped filenames
+        mappedFilenames.forEach(f => inUseFilenames.add(f));
+        
+        // Add database references (check if they resolve through mappings)
+        [...blogFilenames, ...userFilenames].forEach(idOrFilename => {
+            const resolved = semanticIdToFilename[idOrFilename] || idOrFilename;
+            inUseFilenames.add(resolved);
+        });
+
+        const usedCount = filesWithStats.filter(f => inUseFilenames.has(f.filename)).length;
+
+        const filteredFiles = search
+            ? filesWithStats.filter(file => file.filename.toLowerCase().includes(search.toLowerCase()))
+            : filesWithStats;
+
+        filteredFiles.sort((a, b) => b.mtime.getTime() - a.mtime.getTime());
 
-        // Paginate
         const start = (page - 1) * limit;
         const end = start + limit;
-        const paginatedFiles = filesWithStats.slice(start, end);
+        const paginatedFiles = filteredFiles.slice(start, end);
 
-        // Build image metadata
         const images = paginatedFiles.map(({ filename, mtime, size }) => {
             const ext = path.extname(filename).toLowerCase();
             const mimeType = ext === '.png' ? 'image/png' : 
@@ -84,6 +202,13 @@ export async function GET(request: NextRequest) {
             total: filteredFiles.length,
             page,
             limit,
+            stats: {
+                totalImages: imageFiles.length,
+                totalSize,
+                usedImages: usedCount,
+                availableImages: imageFiles.length - usedCount,
+            },
+            mappedImages: Array.from(mappedFilenames),
         });
     } catch (error) {
         console.error('List images error:', error);

package/src/api/router.ts

@@ -69,6 +69,14 @@ export async function handleImagesApi(
             }
         }
 
+        // Route: /api/plugin-images/usage (get image usage across plugins)
+        else if (route === 'usage') {
+            if (method === 'GET') {
+                const usageModule = await import('./usage/route');
+                return await usageModule.GET(req);
+            }
+        }
+
         // Method not allowed
         return NextResponse.json(
             { error: `Method ${method} not allowed for route: ${route || '/'}` },