[dyad] Enhance sequential numbering options - wrote 1 file(s)

src/components/image-converter.tsx

@@ -42,6 +42,7 @@ export function ImageConverter() {
   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 [isConverting, setIsConverting] = useState(false);
@@ -133,7 +134,7 @@ export function ImageConverter() {
 
   const generateFinalFilename = (index: number) => {
     if (useCounter) {
-      const counter = (index + 1).toString().padStart(counterDigits, '0');
+      const counter = (index + counterStart).toString().padStart(counterDigits, '0');
       return `${prefix}${counter}${suffix}`;
     }
     const baseName = filenames[index] || "filename";
@@ -271,17 +272,27 @@ export function ImageConverter() {
                     <Label htmlFor="use-counter">Add sequential number</Label>
                   </div>
                   {useCounter && (
-                    <div className="space-y-2 pl-8">
+                    <div className="grid grid-cols-2 gap-4 pl-8 pt-2">
-                      <Label htmlFor="counter-digits">Number of digits</Label>
+                      <div className="space-y-2">
-                      <Select value={String(counterDigits)} onValueChange={(val) => setCounterDigits(Number(val))}>
+                        <Label htmlFor="counter-start">Start number</Label>
-                        <SelectTrigger id="counter-digits"><SelectValue /></SelectTrigger>
+                        <Input
-                        <SelectContent>
+                          id="counter-start"
-                          <SelectItem value="1">1 (e.g., 1)</SelectItem>
+                          type="number"
-                          <SelectItem value="2">2 (e.g., 01)</SelectItem>
+                          value={counterStart}
-                          <SelectItem value="3">3 (e.g., 001)</SelectItem>
+                          onChange={(e) => setCounterStart(Math.max(0, Number(e.target.value)))}
-                          <SelectItem value="4">4 (e.g., 0001)</SelectItem>
+                          min="0"
-                        </SelectContent>
+                        />
-                      </Select>
+                      </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>