From f69c22039bcfd149635d36743a9f5afaa326b043 Mon Sep 17 00:00:00 2001
From: Gilles Soulier <gilles@maison43>
Date: Fri, 22 May 2026 21:58:46 +0200
Subject: [PATCH] =?UTF-8?q?fix(icon):=20upload=20d'ic=C3=B4ne=20=E2=80=94?=
 =?UTF-8?q?=20retour=20d'erreur,=20WEBP,=20limite=20Nginx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- nginx: client_max_body_size 10m (limite par défaut 1 Mo bloquait les images)
- icons.go: import _ golang.org/x/image/webp et image/gif pour décoder WEBP/GIF
- index.html: retire SVG de l'accept (serveur le rejette) et corrige le hint
- popups.js: try/catch autour de uploadIcon → message d'erreur visible dans le hint
  pendant 4s si l'upload échoue ; reset du file input pour re-sélectionner le même
  fichier ; rafraîchit l'img de la tuile avec cache-busting après succès

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 dashboard/index.html     |  6 +++---
 dashboard/js/popups.js   | 23 +++++++++++++++++++++--
 server/handlers/icons.go |  2 ++
 server/nginx/nginx.conf  |  1 +
 4 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/dashboard/index.html b/dashboard/index.html
index 0bfede6..1ceefa5 100644
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -73,12 +73,12 @@
         <img id="pop-icon-img" src="" alt="" style="display:none">
         <div class="agent-icon-overlay"><i class="fa-solid fa-camera"></i><span>Changer</span></div>
       </div>
-      <input type="file" id="icon-upload" accept=".svg,.jpg,.jpeg,.png,.webp" style="display:none">
+      <input type="file" id="icon-upload" accept=".jpg,.jpeg,.png,.webp" style="display:none">
       <div style="flex:1">
         <div class="pop-host" id="pop-host">—</div>
         <div class="pop-ip" id="pop-ip">—</div>
-        <div style="font-size:10px;color:var(--ink-4);font-family:var(--font-terminal);margin-top:2px">
-          Cliquer sur l'icône pour personnaliser · SVG JPG PNG WEBP · max 128×128 px
+        <div id="icon-hint" style="font-size:10px;color:var(--ink-4);font-family:var(--font-terminal);margin-top:2px">
+          Cliquer sur l'icône pour personnaliser · JPG PNG WEBP · max 128×128 px
         </div>
       </div>
       <div class="pop-led" id="pop-led"></div>
diff --git a/dashboard/js/popups.js b/dashboard/js/popups.js
index 7bba143..1b5f42f 100644
--- a/dashboard/js/popups.js
+++ b/dashboard/js/popups.js
@@ -30,8 +30,27 @@ const Popups = (() => {
         document.getElementById('icon-upload').onchange = async (e) => {
             const file = e.target.files[0];
             if (!file) return;
-            await API.uploadIcon(agentId, file);
-            img.src = API.iconUrl(agentId) + '?t=' + Date.now();
+            const hint = document.getElementById('icon-hint');
+            try {
+                await API.uploadIcon(agentId, file);
+                const ts = '?t=' + Date.now();
+                img.src = API.iconUrl(agentId) + ts;
+                img.style.display = 'block';
+                document.getElementById('pop-icon-fa').style.display = 'none';
+                const tileImg = document.querySelector(`#tile-${CSS.escape(agentId)} .t-icon img`);
+                if (tileImg) tileImg.src = API.iconUrl(agentId) + ts;
+            } catch (err) {
+                if (hint) {
+                    hint.style.color = 'var(--err)';
+                    hint.textContent = 'Erreur : ' + (err.message || 'téléversement échoué');
+                    setTimeout(() => {
+                        hint.style.color = '';
+                        hint.textContent = 'Cliquer sur l\'icône pour personnaliser · JPG PNG WEBP · max 128×128 px';
+                    }, 4000);
+                }
+            } finally {
+                e.target.value = '';
+            }
         };
 
         // Uptime
diff --git a/server/handlers/icons.go b/server/handlers/icons.go
index 97e01a0..8185773 100644
--- a/server/handlers/icons.go
+++ b/server/handlers/icons.go
@@ -3,6 +3,7 @@ package handlers
 import (
 	"bytes"
 	"image"
+	_ "image/gif"
 	_ "image/jpeg"
 	"image/png"
 	"io"
@@ -11,6 +12,7 @@ import (
 
 	"github.com/disintegration/imaging"
 	"github.com/user/nanometrics/server/db"
+	_ "golang.org/x/image/webp"
 )
 
 const maxIconSize = 128
diff --git a/server/nginx/nginx.conf b/server/nginx/nginx.conf
index b585da6..98f4e33 100644
--- a/server/nginx/nginx.conf
+++ b/server/nginx/nginx.conf
@@ -2,6 +2,7 @@ server {
     listen 80;
     root /usr/share/nginx/html;
     index index.html;
+    client_max_body_size 10m;
 
     location /api/ {
         proxy_pass http://server:8080;