[dyad] Added a 'Reset Settings' button - wrote 1 file(s)

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 [width, setWidth] = useState<number | string>(initialSettings.width);
-  const [height, setHeight] = useState<number | string>("");
+  const [height, setHeight] = useState<number | string>(initialSettings.height);
-  const [aspectRatio, setAspectRatio] = useState<string>("custom");
+  const [aspectRatio, setAspectRatio] = useState<string>(initialSettings.aspectRatio);
-  const [keepOrientation, setKeepOrientation] = useState<boolean>(true);
+  const [keepOrientation, setKeepOrientation] = useState<boolean>(initialSettings.keepOrientation);
-  const [format, setFormat] = useState<"png" | "jpeg" | "webp">("webp");
+  const [format, setFormat] = useState<"png" | "jpeg" | "webp">(initialSettings.format);
-  const [quality, setQuality] = useState<number>(90);
+  const [quality, setQuality] = useState<number>(initialSettings.quality);
   
-  const [prefix, setPrefix] = useState<string>("");
+  const [prefix, setPrefix] = useState<string>(initialSettings.prefix);
-  const [suffix, setSuffix] = useState<string>("");
+  const [suffix, setSuffix] = useState<string>(initialSettings.suffix);
-  const [useCounter, setUseCounter] = useState<boolean>(false);
+  const [useCounter, setUseCounter] = useState<boolean>(initialSettings.useCounter);
-  const [counterStart, setCounterStart] = useState<number>(1);
+  const [counterStart, setCounterStart] = useState<number>(initialSettings.counterStart);
-  const [counterDigits, setCounterDigits] = useState<number>(3);
+  const [counterDigits, setCounterDigits] = useState<number>(initialSettings.counterDigits);
-  const [useDefaultBaseName, setUseDefaultBaseName] = useState<boolean>(false);
+  const [useDefaultBaseName, setUseDefaultBaseName] = useState<boolean>(initialSettings.useDefaultBaseName);
-  const [defaultBaseName, setDefaultBaseName] = useState<string>("");
+  const [defaultBaseName, setDefaultBaseName] = useState<string>(initialSettings.defaultBaseName);
 
-  const [scaleMode, setScaleMode] = useState<'fill' | 'cover' | 'contain'>('cover');
+  const [scaleMode, setScaleMode] = useState<'fill' | 'cover' | 'contain'>(initialSettings.scaleMode);
-  const [objectPosition, setObjectPosition] = useState<string>('center center');
+  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,6 +735,23 @@ export function ImageConverter() {
               </AccordionContent>
             </AccordionItem>
           </Accordion>
+          <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
@@ -706,7 +760,7 @@ export function ImageConverter() {
                   className="w-full"
                 >
                   <Check className="mr-2 h-4 w-4" />
-                Apply Settings
+                  Apply
                 </Button>
               </TooltipTrigger>
               <TooltipContent>
@@ -714,6 +768,7 @@ export function ImageConverter() {
               </TooltipContent>
             </Tooltip>
           </div>
+        </div>
 
         <div className="lg:col-span-2 flex flex-col gap-4">
           <Card>