From 1c61f8959e263b4c70b9a48b9e5a499a153291a1 Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Sun, 18 Jan 2026 12:59:07 +0100
Subject: [PATCH] [dyad] Added a 'Reset Settings' button - wrote 1 file(s)

---
 src/components/image-converter.tsx | 117 +++++++++++++++++++++--------
 1 file changed, 86 insertions(+), 31 deletions(-)

diff --git a/src/components/image-converter.tsx b/src/components/image-converter.tsx
index 760def6..6fcaec0 100644
--- a/src/components/image-converter.tsx
+++ b/src/components/image-converter.tsx
@@ -17,7 +17,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Upload, Download, X, Trash2, Check, ArrowRightLeft, HelpCircle } from "lucide-react";
+import { Upload, Download, X, Trash2, Check, ArrowRightLeft, HelpCircle, RotateCcw } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { Switch } from "@/components/ui/switch";
@@ -45,27 +45,45 @@ const aspectRatios = [
   { name: "16:9 (Widescreen)", value: "16/9" },
 ];
 
+const initialSettings = {
+  width: "",
+  height: "",
+  aspectRatio: "custom",
+  keepOrientation: true,
+  format: "webp" as "png" | "jpeg" | "webp",
+  quality: 90,
+  prefix: "",
+  suffix: "",
+  useCounter: false,
+  counterStart: 1,
+  counterDigits: 3,
+  useDefaultBaseName: false,
+  defaultBaseName: "",
+  scaleMode: 'cover' as 'fill' | 'cover' | 'contain',
+  objectPosition: 'center center',
+};
+
 export function ImageConverter() {
   const [images, setImages] = useState<File[]>([]);
   const [previewUrls, setPreviewUrls] = useState<string[]>([]);
   const [filenames, setFilenames] = useState<string[]>([]);
-  const [width, setWidth] = useState<number | string>("");
-  const [height, setHeight] = useState<number | string>("");
-  const [aspectRatio, setAspectRatio] = useState<string>("custom");
-  const [keepOrientation, setKeepOrientation] = useState<boolean>(true);
-  const [format, setFormat] = useState<"png" | "jpeg" | "webp">("webp");
-  const [quality, setQuality] = useState<number>(90);
+  const [width, setWidth] = useState<number | string>(initialSettings.width);
+  const [height, setHeight] = useState<number | string>(initialSettings.height);
+  const [aspectRatio, setAspectRatio] = useState<string>(initialSettings.aspectRatio);
+  const [keepOrientation, setKeepOrientation] = useState<boolean>(initialSettings.keepOrientation);
+  const [format, setFormat] = useState<"png" | "jpeg" | "webp">(initialSettings.format);
+  const [quality, setQuality] = useState<number>(initialSettings.quality);
   
-  const [prefix, setPrefix] = useState<string>("");
-  const [suffix, setSuffix] = useState<string>("");
-  const [useCounter, setUseCounter] = useState<boolean>(false);
-  const [counterStart, setCounterStart] = useState<number>(1);
-  const [counterDigits, setCounterDigits] = useState<number>(3);
-  const [useDefaultBaseName, setUseDefaultBaseName] = useState<boolean>(false);
-  const [defaultBaseName, setDefaultBaseName] = useState<string>("");
+  const [prefix, setPrefix] = useState<string>(initialSettings.prefix);
+  const [suffix, setSuffix] = useState<string>(initialSettings.suffix);
+  const [useCounter, setUseCounter] = useState<boolean>(initialSettings.useCounter);
+  const [counterStart, setCounterStart] = useState<number>(initialSettings.counterStart);
+  const [counterDigits, setCounterDigits] = useState<number>(initialSettings.counterDigits);
+  const [useDefaultBaseName, setUseDefaultBaseName] = useState<boolean>(initialSettings.useDefaultBaseName);
+  const [defaultBaseName, setDefaultBaseName] = useState<string>(initialSettings.defaultBaseName);
 
-  const [scaleMode, setScaleMode] = useState<'fill' | 'cover' | 'contain'>('cover');
-  const [objectPosition, setObjectPosition] = useState<string>('center center');
+  const [scaleMode, setScaleMode] = useState<'fill' | 'cover' | 'contain'>(initialSettings.scaleMode);
+  const [objectPosition, setObjectPosition] = useState<string>(initialSettings.objectPosition);
 
   const [isConverting, setIsConverting] = useState(false);
   const [convertingIndex, setConvertingIndex] = useState<number | null>(null);
@@ -307,6 +325,25 @@ export function ImageConverter() {
     toast.info("Settings updated and will be used for all downloads.");
   };
 
+  const handleResetSettings = () => {
+    setWidth(initialSettings.width);
+    setHeight(initialSettings.height);
+    setAspectRatio(initialSettings.aspectRatio);
+    setKeepOrientation(initialSettings.keepOrientation);
+    setFormat(initialSettings.format);
+    setQuality(initialSettings.quality);
+    setPrefix(initialSettings.prefix);
+    setSuffix(initialSettings.suffix);
+    setUseCounter(initialSettings.useCounter);
+    setCounterStart(initialSettings.counterStart);
+    setCounterDigits(initialSettings.counterDigits);
+    setUseDefaultBaseName(initialSettings.useDefaultBaseName);
+    setDefaultBaseName(initialSettings.defaultBaseName);
+    setScaleMode(initialSettings.scaleMode);
+    setObjectPosition(initialSettings.objectPosition);
+    toast.success("All settings have been reset to their defaults.");
+  };
+
   const handleAspectRatioChange = (value: string) => {
     setAspectRatio(value);
 
@@ -698,21 +735,39 @@ export function ImageConverter() {
               </AccordionContent>
             </AccordionItem>
           </Accordion>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                onClick={handleApplySettings}
-                disabled={!hasImages}
-                className="w-full"
-              >
-                <Check className="mr-2 h-4 w-4" />
-                Apply Settings
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Confirm and apply all the settings above. This does not download the images.</p>
-            </TooltipContent>
-          </Tooltip>
+          <div className="flex items-center gap-2">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onClick={handleResetSettings}
+                  disabled={!hasImages}
+                  className="w-full"
+                  variant="outline"
+                >
+                  <RotateCcw className="mr-2 h-4 w-4" />
+                  Reset
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Reset all settings to their default values.</p>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onClick={handleApplySettings}
+                  disabled={!hasImages}
+                  className="w-full"
+                >
+                  <Check className="mr-2 h-4 w-4" />
+                  Apply
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Confirm and apply all the settings above. This does not download the images.</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
         </div>
 
         <div className="lg:col-span-2 flex flex-col gap-4">