From c1751a1ab6d1bfc2bb834f88421374d49fc3859a Mon Sep 17 00:00:00 2001
From: Froidefond Julien <julienfroidefond@gmail.com>
Date: Wed, 25 Feb 2026 08:14:35 +0100
Subject: [PATCH] feat: animation de confirmation sur le bouton save
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ajoute 3 états visuels au bouton save : repos (gris), saving (spinner),
saved (fond vert + checkmark animé pendant 2 secondes).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/globals.css                 | 11 +++++++++++
 src/components/EvaluationEditor.tsx | 18 ++++++++++++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 9fd460e..53d0a2f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -25,3 +25,14 @@ input:focus, select:focus, textarea:focus {
   outline: none;
   ring: 2px;
 }
+
+@keyframes check {
+  0% { stroke-dashoffset: 20; opacity: 0; }
+  50% { opacity: 1; }
+  100% { stroke-dashoffset: 0; opacity: 1; }
+}
+
+.check-icon polyline {
+  stroke-dasharray: 20;
+  animation: check 0.3s ease-out forwards;
+}
diff --git a/src/components/EvaluationEditor.tsx b/src/components/EvaluationEditor.tsx
index 9017b98..582ce3c 100644
--- a/src/components/EvaluationEditor.tsx
+++ b/src/components/EvaluationEditor.tsx
@@ -59,6 +59,7 @@ export function EvaluationEditor({ id, initialEvaluation, templates, users }: Ev
   const router = useRouter();
   const [evaluation, setEvaluation] = useState<Evaluation>(initialEvaluation);
   const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
   const [exportOpen, setExportOpen] = useState(false);
   const [shareOpen, setShareOpen] = useState(false);
   const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
@@ -149,6 +150,8 @@ export function EvaluationEditor({ id, initialEvaluation, templates, users }: Ev
       });
       if (result.success) {
         if (!options?.skipRefresh) fetchEval();
+        setSaved(true);
+        setTimeout(() => setSaved(false), 2000);
       } else {
         alert(result.error);
       }
@@ -208,9 +211,20 @@ export function EvaluationEditor({ id, initialEvaluation, templates, users }: Ev
           <button
             onClick={() => handleSave()}
             disabled={saving}
-            className="rounded border border-zinc-300 dark:border-zinc-600 bg-zinc-100 dark:bg-zinc-700 px-3 py-1.5 font-mono text-xs text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-700 disabled:opacity-50"
+            className={`rounded border px-3 py-1.5 font-mono text-xs disabled:opacity-50 transition-all duration-300 flex items-center gap-1.5 ${
+              saved
+                ? "border-emerald-500/50 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+                : "border-zinc-300 dark:border-zinc-600 bg-zinc-100 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-600"
+            }`}
           >
-            {saving ? "..." : "save"}
+            {saving ? (
+              <span className="inline-block h-3 w-3 animate-spin rounded-full border border-zinc-400 border-t-transparent" />
+            ) : saved ? (
+              <svg className="check-icon h-3 w-3" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <polyline points="1.5,6 4.5,9 10.5,3" />
+              </svg>
+            ) : null}
+            {saving ? "saving" : saved ? "saved" : "save"}
           </button>
           <button
             onClick={() => {