From 24883a313a1de6bbcd07c618b09f95aee491be3a Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Fri, 13 Mar 2026 17:06:16 +0000
Subject: [PATCH] Add Reset button and per-image Remove button

- Reset button clears all images and crops without page refresh
- Remove button on active image preview (bottom-left, hover turns red)
- Remove buttons in thumbnail strip were already present but now active image can also be deleted individually

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/ImageUpload.tsx | 11 +++++++++--
 src/pages/Index.tsx            | 23 +++++++++++++++++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/components/ImageUpload.tsx b/src/components/ImageUpload.tsx
index dfa3944..d09e724 100644
--- a/src/components/ImageUpload.tsx
+++ b/src/components/ImageUpload.tsx
@@ -128,8 +128,15 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
           </div>
         )}
 
-        {/* Bottom-right: add more */}
-        <div className="absolute bottom-3 right-3">
+        {/* Bottom row: remove current + add more */}
+        <div className="absolute bottom-3 left-3 right-3 flex items-center justify-between">
+          <button
+            onClick={() => removeImage(activeIndex)}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-background/85 backdrop-blur text-xs font-medium border border-border/60 text-muted-foreground hover:bg-destructive/90 hover:text-destructive-foreground hover:border-destructive transition-colors"
+          >
+            <X className="w-3.5 h-3.5" />
+            Remove
+          </button>
           <button
             onClick={handleClick}
             className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-background/85 backdrop-blur text-xs font-medium border border-border/60 hover:bg-background transition-colors"
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 7333fdc..08e5467 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -20,6 +20,7 @@ import {
   SlidersHorizontal,
   Zap,
   ChevronRight,
+  RotateCcw,
 } from "lucide-react";
 import { toast } from "sonner";
 import type { AspectRatioPreset, CropSuggestion, ImageFile } from "@/lib/crop-types";
@@ -158,6 +159,14 @@ const Index = () => {
     });
   };
 
+  const handleReset = () => {
+    setImages([]);
+    setActiveIndex(0);
+    setCropsMap(new Map());
+    setEditingIndex(null);
+    toast.success("Cleared — ready for new images");
+  };
+
   // Determine current step for workflow indicator
   const step = images.length === 0 ? 1 : selectedRatios.length === 0 ? 2 : totalCrops === 0 ? 3 : 4;
 
@@ -338,6 +347,20 @@ const Index = () => {
                       </Button>
                     </>
                   )}
+
+                  <div className="ml-auto">
+                    <Button
+                      onClick={handleReset}
+                      disabled={anyBusy}
+                      variant="ghost"
+                      size="default"
+                      className="gap-2 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+                      title="Clear all images and crops"
+                    >
+                      <RotateCcw className="w-4 h-4" />
+                      Reset
+                    </Button>
+                  </div>
                 </div>
 
                 {/* Hint when ratios not selected */}