From b87410a7e58eadd4af457f59a981b3c61f75475a Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Sun, 18 Jan 2026 11:20:25 +0100
Subject: [PATCH] [dyad] Improved filename generation logic - wrote 1 file(s)

---
 src/components/image-converter.tsx | 54 +++++++++++++++++++-----------
 1 file changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/components/image-converter.tsx b/src/components/image-converter.tsx
index 50580df..71a3832 100644
--- a/src/components/image-converter.tsx
+++ b/src/components/image-converter.tsx
@@ -44,6 +44,7 @@ export function ImageConverter() {
   const [useCounter, setUseCounter] = useState<boolean>(false);
   const [counterStart, setCounterStart] = useState<number>(1);
   const [counterDigits, setCounterDigits] = useState<number>(3);
+  const [counterSuffix, setCounterSuffix] = useState<string>("");
 
   const [isConverting, setIsConverting] = useState(false);
   const [isDraggingOver, setIsDraggingOver] = useState(false);
@@ -133,12 +134,15 @@ export function ImageConverter() {
   };
 
   const generateFinalFilename = (index: number) => {
+    const baseName = filenames[index] || "filename";
+    let finalName = `${prefix}${baseName}${suffix}`;
+
     if (useCounter) {
       const counter = (index + counterStart).toString().padStart(counterDigits, '0');
-      return `${prefix}${counter}${suffix}`;
+      finalName += `${counter}${counterSuffix}`;
     }
-    const baseName = filenames[index] || "filename";
-    return `${prefix}${baseName}${suffix}`;
+    
+    return finalName;
   };
 
   const handleConvertAndDownload = async () => {
@@ -272,25 +276,36 @@ export function ImageConverter() {
                     <Label htmlFor="use-counter">Add sequential number</Label>
                   </div>
                   {useCounter && (
-                    <div className="grid grid-cols-2 gap-4 pt-2">
-                      <div className="space-y-2">
-                        <Label htmlFor="counter-start">Start number</Label>
-                        <Input
-                          id="counter-start"
-                          type="number"
-                          value={counterStart}
-                          onChange={(e) => setCounterStart(Math.max(0, Number(e.target.value)))}
-                          min="0"
-                        />
+                    <div className="space-y-4 pt-2">
+                      <div className="grid grid-cols-2 gap-4">
+                        <div className="space-y-2">
+                          <Label htmlFor="counter-start">Start number</Label>
+                          <Input
+                            id="counter-start"
+                            type="number"
+                            value={counterStart}
+                            onChange={(e) => setCounterStart(Math.max(0, Number(e.target.value)))}
+                            min="0"
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor="counter-digits">Padding digits</Label>
+                          <Input
+                            id="counter-digits"
+                            type="number"
+                            value={counterDigits}
+                            onChange={(e) => setCounterDigits(Math.max(1, Number(e.target.value)))}
+                            min="1"
+                          />
+                        </div>
                       </div>
                       <div className="space-y-2">
-                        <Label htmlFor="counter-digits">Padding digits</Label>
+                        <Label htmlFor="counter-suffix">Counter Suffix</Label>
                         <Input
-                          id="counter-digits"
-                          type="number"
-                          value={counterDigits}
-                          onChange={(e) => setCounterDigits(Math.max(1, Number(e.target.value)))}
-                          min="1"
+                          id="counter-suffix"
+                          placeholder="e.g., _final"
+                          value={counterSuffix}
+                          onChange={(e) => setCounterSuffix(e.target.value)}
                         />
                       </div>
                     </div>
@@ -341,7 +356,6 @@ export function ImageConverter() {
                           id={`filename-${index}`}
                           value={filenames[index]}
                           onChange={(e) => handleFilenameChange(index, e.target.value)}
-                          disabled={useCounter}
                           className="text-sm font-medium h-8 mt-1"
                         />
                         <p className="text-xs text-muted-foreground truncate mt-1" title={`${generateFinalFilename(index)}_${width || 'w'}x${height || 'h'}.${format}`}>