Added panel to select image from images panel to fill images or uploa…

apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/ImagePicker.tsx

@@ -9,6 +9,8 @@ import {
 } from '@onlook/ui/dropdown-menu';
 import { Icons } from '@onlook/ui/icons';
 import { memo, useCallback, useState } from 'react';
+import ImageSelectionModal from './ImageSelection';
+import type { ImageContentData } from '@onlook/models';
 
 enum ImageFit {
     FILL = 'fill',
@@ -60,6 +62,8 @@ const ImagePickerContent: React.FC<{ backgroundImage?: string; compoundStyle?: C
 }) => {
     const editorEngine = useEditorEngine();
     const [isDragging, setIsDragging] = useState(false);
+    const [isImageSelectionOpen, setIsImageSelectionOpen] = useState(false);
+
     const getDefaultImageData = () => {
         const selectedStyle = editorEngine.style.selectedStyle?.styles;
         const url = backgroundImage;
@@ -96,6 +100,18 @@ const ImagePickerContent: React.FC<{ backgroundImage?: string; compoundStyle?: C
             mimeType: '',
         };
     };
+
+    const handleImageSelection = (selectedImage: ImageContentData) => {
+        const newImageData: ImageData = {
+            url: selectedImage.content,
+            base64: selectedImage.content,
+            mimeType: selectedImage.mimeType,
+            fit: imageData?.fit || ImageFit.FILL,
+        };
+        setImageData(newImageData);
+        editorEngine.image.insert(selectedImage.content, selectedImage.mimeType);
+    };
+
     const [imageData, setImageData] = useState<ImageData | null>(getDefaultImageData());
 
     const handleDragOver = useCallback((e: React.DragEvent) => {
@@ -175,14 +191,23 @@ const ImagePickerContent: React.FC<{ backgroundImage?: string; compoundStyle?: C
                 onDragLeave={handleDragLeave}
                 onDrop={handleDrop}
             >
-                <UploadButton onButtonClick={handleButtonClick} />
-                <input
-                    type="file"
-                    accept="image/*"
-                    className="hidden"
-                    id="image-upload"
-                    onChange={handleFileSelect}
-                />
+                <div className="flex flex-col gap-2 p-2">
+                    <UploadButton onButtonClick={handleButtonClick} />
+                    <input
+                        type="file"
+                        accept="image/*"
+                        className="hidden"
+                        id="image-upload"
+                        onChange={handleFileSelect}
+                    />
+                    <SelectImageButton onButtonClick={() => setIsImageSelectionOpen(true)} />
+
+                    <ImageSelectionModal
+                        isOpen={isImageSelectionOpen}
+                        onClose={() => setIsImageSelectionOpen(false)}
+                        onSelect={handleImageSelection}
+                    />
+                </div>
             </div>
 
             <DropdownMenu>
@@ -220,6 +245,22 @@ const UploadButton: React.FC<{ onButtonClick: (e: React.MouseEvent) => void }> =
     ),
 );
 
+const SelectImageButton: React.FC<{ onButtonClick: (e: React.MouseEvent) => void }> = memo(
+    ({ onButtonClick }) => (
+        <Button
+            variant="secondary"
+            className="flex items-center gap-2 px-4 py-0 backdrop-blur-sm rounded border border-foreground-tertiary/20 opacity-0 group-hover:opacity-90 transition-opacity"
+            type="button"
+            onClick={onButtonClick}
+        >
+            <Icons.Image className="w-3 h-3" />
+            <span>Select Images</span>
+        </Button>
+    ),
+);
+
+SelectImageButton.displayName = 'SelectImageButton';
+
 UploadButton.displayName = 'UploadButton';
 
 export default memo(ImagePickerContent);

apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/ImageSelection.tsx

@@ -0,0 +1,58 @@
+import { useEditorEngine } from '@/components/Context';
+import type { ImageContentData } from '@onlook/models';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@onlook/ui/dialog';
+import { Input } from '@onlook/ui/input';
+import React, { useState } from 'react';
+
+interface ImageSelectionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSelect: (image: ImageContentData) => void;
+}
+
+const ImageSelectionModal: React.FC<ImageSelectionModalProps> = ({ isOpen, onClose, onSelect }) => {
+    const editorEngine = useEditorEngine();
+    const [search, setSearch] = useState('');
+
+    const filteredImages = editorEngine.image.assets.filter(
+        (image) => !search || image.fileName.toLowerCase().includes(search.toLowerCase()),
+    );
+
+    return (
+        <Dialog open={isOpen} onOpenChange={() => onClose()}>
+            <DialogContent className="sm:max-w-[600px]">
+                <DialogHeader>
+                    <DialogTitle>Select Image</DialogTitle>
+                </DialogHeader>
+                <div className="flex flex-col gap-4">
+                    <Input
+                        placeholder="Search images..."
+                        value={search}
+                        onChange={(e) => setSearch(e.target.value)}
+                        className="h-8 text-xs"
+                    />
+                    <div className="grid grid-cols-3 gap-3 max-h-[400px] overflow-y-auto p-1">
+                        {filteredImages.map((image) => (
+                            <div
+                                key={image.fileName}
+                                className="aspect-square cursor-pointer hover:opacity-80 transition-opacity border rounded-md overflow-hidden"
+                                onClick={() => {
+                                    onSelect(image);
+                                    onClose();
+                                }}
+                            >
+                                <img
+                                    src={image.content}
+                                    alt={image.fileName}
+                                    className="w-full h-full object-cover"
+                                />
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default ImageSelectionModal;