feat: rename/delete/add image (#2967)

Author: Kitenite

apps/web/client/src/app/project/[id]/_components/left-panel/image-tab/hooks/use-image-operations.tsx

@@ -1,11 +1,13 @@
+import type { EditorEngine } from '@/components/store/editor/engine';
 import type { CodeFileSystem } from '@onlook/file-system';
 import { useDirectory } from '@onlook/file-system/hooks';
 import { sanitizeFilename } from '@onlook/utility';
 import { isImageFile } from '@onlook/utility/src/file';
 import path from 'path';
 import { useMemo, useState } from 'react';
+import { updateImageReferences } from '../utils/image-references';
 
-export const useImageOperations = (projectId: string, branchId: string, activeFolder: string, codeEditor?: CodeFileSystem) => {
+export const useImageOperations = (projectId: string, branchId: string, activeFolder: string, codeEditor?: CodeFileSystem, editorEngine?: EditorEngine) => {
     const [isUploading, setIsUploading] = useState(false);
 
     // Get directory entries
@@ -56,12 +58,78 @@ export const useImageOperations = (projectId: string, branchId: string, activeFo
         }
     };
 
+    // Handle file rename
+    const handleRename = async (oldPath: string, newName: string) => {
+        if (!codeEditor) throw new Error('Code editor not available');
+
+        const directory = path.dirname(oldPath);
+        const sanitizedName = sanitizeFilename(newName);
+        const newPath = path.join(directory, sanitizedName);
+
+        // Find all JS/TS files in the project
+        const allFiles = await codeEditor.listFiles('**/*');
+        const jsFiles = allFiles.filter(f => {
+            const ext = path.extname(f);
+            // Only process JS/TS/JSX/TSX files, skip test files and build dirs
+            return ['.js', '.jsx', '.ts', '.tsx'].includes(ext) &&
+                   !f.includes('node_modules') &&
+                   !f.includes('.next') &&
+                   !f.includes('dist') &&
+                   !f.endsWith('.test.ts') &&
+                   !f.endsWith('.test.tsx');
+        });
+
+        // Update references in parallel
+        const updatePromises: Promise<void>[] = [];
+        const oldFileName = path.basename(oldPath);
+
+        for (const file of jsFiles) {
+            const filePath = path.join('/', file);
+            updatePromises.push(
+                (async () => {
+                    try {
+                        const content = await codeEditor.readFile(filePath);
+                        if (typeof content !== 'string' || !content.includes(oldFileName)) {
+                            return;
+                        }
+
+                        const updatedContent = await updateImageReferences(content, oldPath, newPath);
+                        if (updatedContent !== content) {
+                            await codeEditor.writeFile(filePath, updatedContent);
+                        }
+                    } catch (error) {
+                        console.warn(`Failed to update references in ${filePath}:`, error);
+                    }
+                })()
+            );
+        }
+
+        // Wait for all updates to complete
+        await Promise.all(updatePromises);
+
+        // Finally, rename the actual image file
+        await codeEditor.moveFile(oldPath, newPath);
+
+        // Refresh all frame views after a slight delay to show updated image references
+        setTimeout(() => {
+            editorEngine?.frames.reloadAllViews();
+        }, 500);
+    };
+
+    // Handle file delete
+    const handleDelete = async (filePath: string) => {
+        if (!codeEditor) throw new Error('Code editor not available');
+        await codeEditor.deleteFile(filePath);
+    };
+
     return {
         folders,
         images,
         loading,
         error,
         isUploading,
         handleUpload,
+        handleRename,
+        handleDelete,
     };
 };

apps/web/client/src/app/project/[id]/_components/left-panel/image-tab/image-grid.tsx

@@ -12,9 +12,12 @@ interface ImageGridProps {
     branchId: string;
     search: string;
     onUpload: (files: FileList) => Promise<void>;
+    onRename: (oldPath: string, newName: string) => Promise<void>;
+    onDelete: (filePath: string) => Promise<void>;
+    onAddToChat: (imagePath: string) => void;
 }
 
-export const ImageGrid = ({ images, projectId, branchId, search, onUpload }: ImageGridProps) => {
+export const ImageGrid = ({ images, projectId, branchId, search, onUpload, onRename, onDelete, onAddToChat }: ImageGridProps) => {
     const {
         handleDragEnter, handleDragLeave, handleDragOver, handleDrop, isDragging,
         onImageDragStart, onImageDragEnd, onImageMouseDown, onImageMouseUp
@@ -41,6 +44,9 @@ export const ImageGrid = ({ images, projectId, branchId, search, onUpload }: Ima
                         onImageDragEnd={onImageDragEnd}
                         onImageMouseDown={onImageMouseDown}
                         onImageMouseUp={onImageMouseUp}
+                        onRename={onRename}
+                        onDelete={onDelete}
+                        onAddToChat={onAddToChat}
                     />
                 ))}
             </div>

apps/web/client/src/app/project/[id]/_components/left-panel/image-tab/image-item.tsx

@@ -2,8 +2,28 @@
 
 import { useFile } from '@onlook/file-system/hooks';
 import type { ImageContentData } from '@onlook/models';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle
+} from '@onlook/ui/alert-dialog';
+import { Button } from '@onlook/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+} from '@onlook/ui/dropdown-menu';
 import { Icons } from '@onlook/ui/icons';
+import { Input } from '@onlook/ui/input';
+import { getMimeType } from '@onlook/utility';
 import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
 
 interface ImageItemProps {
     image: {
@@ -17,12 +37,19 @@ interface ImageItemProps {
     onImageDragEnd: () => void;
     onImageMouseDown: () => void;
     onImageMouseUp: () => void;
+    onRename: (oldPath: string, newName: string) => Promise<void>;
+    onDelete: (filePath: string) => Promise<void>;
+    onAddToChat: (imagePath: string) => void;
 }
 
-export const ImageItem = ({ image, projectId, branchId, onImageDragStart, onImageDragEnd, onImageMouseDown, onImageMouseUp }: ImageItemProps) => {
+export const ImageItem = ({ image, projectId, branchId, onImageDragStart, onImageDragEnd, onImageMouseDown, onImageMouseUp, onRename, onDelete, onAddToChat }: ImageItemProps) => {
     const { content, loading } = useFile(projectId, branchId, image.path);
     const [imageUrl, setImageUrl] = useState<string | null>(null);
     const [isDisabled, setIsDisabled] = useState(false);
+    const [isRenaming, setIsRenaming] = useState(false);
+    const [newName, setNewName] = useState(image.name);
+    const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+    const [dropdownOpen, setDropdownOpen] = useState(false);
 
     // Convert content to data URL for display
     useEffect(() => {
@@ -56,6 +83,13 @@ export const ImageItem = ({ image, projectId, branchId, onImageDragStart, onImag
         };
     }, [content, image.mimeType, image.name]);
 
+    // Close dropdown when entering rename mode or showing delete dialog
+    useEffect(() => {
+        if (isRenaming || showDeleteDialog) {
+            setDropdownOpen(false);
+        }
+    }, [isRenaming, showDeleteDialog]);
+
     if (loading) {
         return (
             <div className="aspect-square bg-background-secondary rounded-md border border-border-primary flex items-center justify-center">
@@ -81,30 +115,166 @@ export const ImageItem = ({ image, projectId, branchId, onImageDragStart, onImag
         const imageContentData: ImageContentData = {
             fileName: image.name,
             content: content as string,
-            mimeType: imageUrl,
+            mimeType: getMimeType(image.name),
             originPath: image.path,
         };
         onImageDragStart(e, imageContentData);
     };
 
+    const handleRename = async () => {
+        if (newName.trim() && newName !== image.name) {
+            try {
+                await onRename(image.path, newName.trim());
+                setIsRenaming(false);
+            } catch (error) {
+                toast.error('Failed to rename file', {
+                    description: error instanceof Error ? error.message : 'Unknown error',
+                });
+                console.error('Failed to rename file:', error);
+                setNewName(image.name); // Reset on error
+            }
+        } else {
+            setIsRenaming(false);
+        }
+    };
+
+    const handleDelete = async () => {
+        try {
+            await onDelete(image.path);
+            setShowDeleteDialog(false);
+        } catch (error) {
+            toast.error('Failed to delete file', {
+                description: error instanceof Error ? error.message : 'Unknown error',
+            });
+            console.error('Failed to delete file:', error);
+        }
+    };
+
+    const handleAddToChat = () => {
+        onAddToChat(image.path);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            void handleRename();
+        } else if (e.key === 'Escape') {
+            setNewName(image.name);
+            setIsRenaming(false);
+        }
+    };
+
     return (
-        <div className="aspect-square bg-background-secondary rounded-md border border-border-primary overflow-hidden cursor-pointer hover:border-border-onlook transition-colors"
-            onDragStart={handleDragStart}
-            onDragEnd={onImageDragEnd}
-            onMouseDown={onImageMouseDown}
-            onMouseUp={onImageMouseUp}
-        >
-            <img
-                src={imageUrl}
-                alt={image.name}
-                className="w-full h-full object-cover"
-                loading="lazy"
-            />
-            <div className="p-1 bg-background-primary/80 backdrop-blur-sm">
-                <div className="text-xs text-foreground-primary truncate" title={image.name}>
-                    {image.name}
-                </div>
+        <div className="group">
+            <div
+                className="aspect-square bg-background-secondary rounded-md border border-border-primary overflow-hidden cursor-pointer hover:border-border-onlook transition-colors relative"
+                onDragStart={handleDragStart}
+                onDragEnd={onImageDragEnd}
+                onMouseDown={onImageMouseDown}
+                onMouseUp={onImageMouseUp}
+            >
+                <img
+                    src={imageUrl}
+                    alt={image.name}
+                    className="w-full h-full object-cover"
+                    loading="lazy"
+                />
+
+                {/* Action menu */}
+                {!isRenaming && (
+                    <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+                            <DropdownMenuTrigger asChild>
+                                <Button
+                                    size="icon"
+                                    variant="secondary"
+                                    className="h-6 w-6 bg-background-secondary/90 hover:bg-background-onlook"
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                    }}
+                                >
+                                    <Icons.DotsHorizontal className="h-3 w-3" />
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end" className="w-40">
+                                <DropdownMenuItem
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        handleAddToChat();
+                                    }}
+                                    className="flex items-center gap-2"
+                                >
+                                    <Icons.Plus className="h-3 w-3" />
+                                    Add to Chat
+                                </DropdownMenuItem>
+                                <DropdownMenuItem
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        setIsRenaming(true);
+                                    }}
+                                    className="flex items-center gap-2"
+                                >
+                                    <Icons.Edit className="h-3 w-3" />
+                                    Rename
+                                </DropdownMenuItem>
+                                <DropdownMenuItem
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        setShowDeleteDialog(true);
+                                    }}
+                                    className="flex items-center gap-2 text-red-500 hover:text-red-600 focus:text-red-600"
+                                >
+                                    <Icons.Trash className="h-3 w-3" />
+                                    Delete
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </div>
+                )}
+            </div>
+
+            {/* Name section with rename functionality */}
+            <div className="mt-1 px-1">
+                {isRenaming ? (
+                    <Input
+                        value={newName}
+                        onChange={(e) => setNewName(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        onBlur={() => void handleRename()}
+                        className="h-6 text-xs p-1 border-0 bg-transparent focus-visible:ring-1 focus-visible:ring-ring"
+                        autoFocus
+                        onClick={(e) => e.stopPropagation()}
+                    />
+                ) : (
+                    <div className="text-xs text-foreground-primary truncate" title={image.name}>
+                        {image.name}
+                    </div>
+                )}
             </div>
+
+            {/* Delete confirmation dialog */}
+            <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>Delete Image</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            Are you sure you want to delete {image.name}? This action cannot be undone.
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                        <AlertDialogAction
+                            onClick={() => void handleDelete()}
+                            className="bg-destructive text-white hover:bg-destructive/90"
+                        >
+                            Delete
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
         </div>
     );
 };