[dyad] Improved filename generation logic - wrote 1 file(s)

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,7 +276,8 @@ 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-4 pt-2">
+                      <div className="grid grid-cols-2 gap-4">
                         <div className="space-y-2">
                           <Label htmlFor="counter-start">Start number</Label>
                           <Input
@@ -294,6 +299,16 @@ export function ImageConverter() {
                           />
                         </div>
                       </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="counter-suffix">Counter Suffix</Label>
+                        <Input
+                          id="counter-suffix"
+                          placeholder="e.g., _final"
+                          value={counterSuffix}
+                          onChange={(e) => setCounterSuffix(e.target.value)}
+                        />
+                      </div>
+                    </div>
                   )}
                 </div>
               </AccordionContent>
@@ -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}`}>