From 25a95f1ea32dde33044004c465cbf7fbd734a0eb Mon Sep 17 00:00:00 2001
From: Anthony GAEREMYNCK <1@anthony.sh>
Date: Fri, 31 Jul 2026 10:18:07 +0200
Subject: [PATCH] feat: add ICO size picker to the upload UI

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 frontend/src/App.jsx | 39 +++++++++++++++++++++++++++++++++++++--
 frontend/src/api.js  |  3 +++
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 1124f3b..427ad60 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -13,6 +13,8 @@ const DEFAULT_QUALITY = {
 };
 
 const QUALITY_FORMATS = ['jpg', 'jpeg', 'webp', 'avif', 'tiff'];
+const ICON_SIZES = [16, 32, 48, 256, 512];
+const DEFAULT_ICON_SIZE = 256;
 
 function extensionOf(fileName) {
   return fileName.split('.').pop().toLowerCase();
@@ -32,7 +34,13 @@ export default function App() {
       files.map(async (file) => {
         const targets = await fetchFormats(extensionOf(file.name));
         const targetFormat = targets[0] ?? null;
-        return { file, targets, targetFormat, quality: defaultQualityFor(targetFormat) };
+        return {
+          file,
+          targets,
+          targetFormat,
+          quality: defaultQualityFor(targetFormat),
+          iconSize: targetFormat === 'ico' ? DEFAULT_ICON_SIZE : null,
+        };
       })
     );
     setPendingFiles(withTargets);
@@ -41,7 +49,14 @@ export default function App() {
   function updateTargetFormat(index, targetFormat) {
     setPendingFiles((current) =>
       current.map((item, i) =>
-        i === index ? { ...item, targetFormat, quality: defaultQualityFor(targetFormat) } : item
+        i === index
+          ? {
+              ...item,
+              targetFormat,
+              quality: defaultQualityFor(targetFormat),
+              iconSize: targetFormat === 'ico' ? DEFAULT_ICON_SIZE : null,
+            }
+          : item
       )
     );
   }
@@ -50,6 +65,10 @@ export default function App() {
     setPendingFiles((current) => current.map((item, i) => (i === index ? { ...item, quality } : item)));
   }
 
+  function updateIconSize(index, iconSize) {
+    setPendingFiles((current) => current.map((item, i) => (i === index ? { ...item, iconSize } : item)));
+  }
+
   async function handleConvert() {
     const validItems = pendingFiles.filter((item) => item.targetFormat);
     const jobs = await uploadFiles(validItems);
@@ -108,6 +127,22 @@ export default function App() {
                       </label>
                     )}
 
+                    {item.targetFormat === 'ico' && (
+                      <label>
+                        Taille de l'icône
+                        <select
+                          value={item.iconSize ?? DEFAULT_ICON_SIZE}
+                          onChange={(event) => updateIconSize(index, Number(event.target.value))}
+                        >
+                          {ICON_SIZES.map((size) => (
+                            <option key={size} value={size}>
+                              {size}px
+                            </option>
+                          ))}
+                        </select>
+                      </label>
+                    )}
+
                     {item.targetFormat === 'pdf' && (
                       <label>
                         <input
diff --git a/frontend/src/api.js b/frontend/src/api.js
index 5d40d15..8ab9466 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -8,13 +8,16 @@ export async function uploadFiles(items) {
   const formData = new FormData();
   const targetFormats = [];
   const qualities = [];
+  const iconSizes = [];
   for (const item of items) {
     formData.append('files', item.file);
     targetFormats.push(item.targetFormat);
     qualities.push(item.quality ?? null);
+    iconSizes.push(item.iconSize ?? null);
   }
   formData.append('targetFormats', JSON.stringify(targetFormats));
   formData.append('qualities', JSON.stringify(qualities));
+  formData.append('iconSizes', JSON.stringify(iconSizes));
 
   const response = await fetch('/api/jobs', { method: 'POST', body: formData });
   const data = await response.json();