From 54aac626a23d937535038faeebec3189a90f5752 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Fri, 21 Nov 2025 18:31:28 +0100
Subject: [PATCH] feat: add Import Image functionality to add images as new
 layers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implements image import feature that adds images as new layers without clearing existing work:

**New Import Image Function** (`hooks/use-file-operations.ts`):
- `importImage()` - Creates new layer with imported image
- Preserves all existing layers and canvas state
- Automatically names layer from filename (removes extension)
- Loading indicator during import process
- Success/error toast notifications
- Supports all common image formats (PNG, JPG, WEBP, etc.)

**File Menu Integration** (`components/editor/file-menu.tsx`):
- Added "Import Image..." menu item with ImagePlus icon
- Positioned after "Open..." for logical flow
- Separate file input for import (only accepts images)
- Import handler with file input reset
- Keyboard accessible with proper ARIA roles

**Key Differences from Open:**
- **Open** - Replaces entire canvas (clears all layers, resets dimensions)
- **Import** - Adds image as new layer (preserves existing work)

**User Experience:**
- File > Import Image... opens native file picker
- Only image files accepted (image/*)
- Import creates layer with image dimensions
- Layer positioned at origin (0, 0)
- Can import multiple images as separate layers
- Works alongside existing drag & drop functionality

**Use Cases:**
- Adding reference images to canvas
- Building collages from multiple images
- Importing assets without losing current work
- Layer-based compositing workflows

All functionality tested and working with no build errors.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/editor/file-menu.tsx | 37 ++++++++++++++++++++++++++++++++-
 hooks/use-file-operations.ts    | 35 +++++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 1 deletion(-)

diff --git a/components/editor/file-menu.tsx b/components/editor/file-menu.tsx
index 07fe20e..4842411 100644
--- a/components/editor/file-menu.tsx
+++ b/components/editor/file-menu.tsx
@@ -10,6 +10,7 @@ import {
   Download,
   Save,
   ChevronDown,
+  ImagePlus,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
@@ -17,6 +18,7 @@ export function FileMenu() {
   const {
     createNewImage,
     handleFileInput,
+    importImage,
     exportImage,
     saveProject,
   } = useFileOperations();
@@ -25,6 +27,7 @@ export function FileMenu() {
   const [isNewDialogOpen, setIsNewDialogOpen] = useState(false);
   const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const importInputRef = useRef<HTMLInputElement>(null);
 
   const handleOpenFile = () => {
     fileInputRef.current?.click();
@@ -42,6 +45,22 @@ export function FileMenu() {
     }
   };
 
+  const handleImportImage = () => {
+    importInputRef.current?.click();
+    setIsMenuOpen(false);
+  };
+
+  const handleImportChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      await importImage(file);
+    }
+    // Reset input
+    if (importInputRef.current) {
+      importInputRef.current.value = '';
+    }
+  };
+
   const handleSaveProject = () => {
     saveProject('project');
     setIsMenuOpen(false);
@@ -94,6 +113,15 @@ export function FileMenu() {
                 Open...
               </button>
 
+              <button
+                onClick={handleImportImage}
+                className="flex items-center gap-3 w-full px-4 py-2 text-sm hover:bg-accent transition-colors focus:outline-none focus:bg-accent text-left"
+                role="menuitem"
+              >
+                <ImagePlus className="h-4 w-4" aria-hidden="true" />
+                Import Image...
+              </button>
+
               <div className="h-px bg-border my-1" role="separator" />
 
               <button
@@ -121,7 +149,7 @@ export function FileMenu() {
         )}
       </div>
 
-      {/* Hidden file input */}
+      {/* Hidden file inputs */}
       <input
         ref={fileInputRef}
         type="file"
@@ -129,6 +157,13 @@ export function FileMenu() {
         onChange={handleFileChange}
         className="hidden"
       />
+      <input
+        ref={importInputRef}
+        type="file"
+        accept="image/*"
+        onChange={handleImportChange}
+        className="hidden"
+      />
 
       {/* Dialogs */}
       <NewImageDialog
diff --git a/hooks/use-file-operations.ts b/hooks/use-file-operations.ts
index 86da653..38ec4bb 100644
--- a/hooks/use-file-operations.ts
+++ b/hooks/use-file-operations.ts
@@ -127,6 +127,40 @@ export function useFileOperations() {
     [clearLayers, clearHistory, setDimensions, createLayer, setLoading]
   );
 
+  /**
+   * Import image as new layer (without clearing existing layers)
+   */
+  const importImage = useCallback(
+    async (file: File) => {
+      setLoading(true, `Importing ${file.name}...`);
+      try {
+        const img = await openImageFile(file);
+
+        // Create new layer with imported image
+        const layer = createLayer({
+          name: file.name.replace(/\.[^/.]+$/, ''), // Remove extension
+          width: img.width,
+          height: img.height,
+        });
+
+        if (layer.canvas) {
+          const ctx = layer.canvas.getContext('2d');
+          if (ctx) {
+            ctx.drawImage(img, 0, 0);
+          }
+        }
+
+        toast.success(`Imported ${file.name} as new layer`);
+      } catch (error) {
+        console.error('Failed to import image:', error);
+        toast.error('Failed to import image file');
+      } finally {
+        setLoading(false);
+      }
+    },
+    [createLayer, setLoading]
+  );
+
   /**
    * Export current view as image
    */
@@ -223,6 +257,7 @@ export function useFileOperations() {
     createNewImage,
     openImage,
     openProject,
+    importImage,
     exportImage,
     saveProject,
     handleFileInput,