feat: auto-save ciblé au blur avec feedback violet sur tous les champs

- Nouvelle action updateDimensionScore pour sauvegarder un seul champ
  en base sans envoyer tout le formulaire
- DimensionCard : blur sur notes, justification, exemples, confiance
  → upsert ciblé + bordure violette 800ms
- CandidateForm : même pattern sur tous les champs du cartouche
- Bouton save passe aussi en violet (cohérence visuelle)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/actions/evaluations.ts

@@ -107,6 +107,30 @@ export interface UpdateEvaluationInput {
   }[];
 }
 
+export async function updateDimensionScore(
+  evaluationId: string,
+  dimensionId: string,
+  data: { score?: number | null; justification?: string | null; examplesObserved?: string | null; confidence?: string | null; candidateNotes?: string | null }
+): Promise<ActionResult> {
+  const session = await auth();
+  if (!session?.user) return { success: false, error: "Non authentifié" };
+
+  const hasAccess = await canAccessEvaluation(evaluationId, session.user.id, session.user.role === "admin");
+  if (!hasAccess) return { success: false, error: "Accès refusé" };
+
+  try {
+    await prisma.dimensionScore.upsert({
+      where: { evaluationId_dimensionId: { evaluationId, dimensionId } },
+      update: data,
+      create: { evaluationId, dimensionId, ...data },
+    });
+    revalidatePath(`/evaluations/${evaluationId}`);
+    return { success: true };
+  } catch (e) {
+    return { success: false, error: e instanceof Error ? e.message : "Erreur" };
+  }
+}
+
 export async function updateEvaluation(id: string, data: UpdateEvaluationInput): Promise<ActionResult> {
   const session = await auth();
   if (!session?.user) return { success: false, error: "Non authentifié" };

src/components/CandidateForm.tsx

@@ -1,6 +1,10 @@
 "use client";
 
+import { useState } from "react";
+import { updateEvaluation } from "@/actions/evaluations";
+
 interface CandidateFormProps {
+  evaluationId?: string;
   candidateName: string;
   candidateRole: string;
   candidateTeam?: string;
@@ -18,7 +22,10 @@ const inputClass =
 
 const labelClass = "mb-1 block text-xs font-medium text-zinc-500 dark:text-zinc-400";
 
+const savedStyle = { borderColor: "#a855f7", boxShadow: "0 0 0 1px #a855f733" };
+
 export function CandidateForm({
+  evaluationId,
   candidateName,
   candidateRole,
   candidateTeam = "",
@@ -30,6 +37,25 @@ export function CandidateForm({
   disabled,
   templateDisabled,
 }: CandidateFormProps) {
+  const [dirtyFields, setDirtyFields] = useState<Record<string, boolean>>({});
+  const [savedField, setSavedField] = useState<string | null>(null);
+
+  const markDirty = (field: string, value: string) => {
+    setDirtyFields((p) => ({ ...p, [field]: true }));
+    setSavedField(null);
+    onChange(field, value);
+  };
+
+  const saveOnBlur = (field: string, value: string) => {
+    if (!dirtyFields[field] || !evaluationId) return;
+    setDirtyFields((p) => ({ ...p, [field]: false }));
+    setSavedField(field);
+    updateEvaluation(evaluationId, { [field]: value || null } as Parameters<typeof updateEvaluation>[1]);
+    setTimeout(() => setSavedField((cur) => (cur === field ? null : cur)), 800);
+  };
+
+  const fieldStyle = (field: string) => (savedField === field ? savedStyle : undefined);
+
   return (
     <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
       <div className="sm:col-span-2 lg:col-span-1">
@@ -37,8 +63,10 @@ export function CandidateForm({
         <input
           type="text"
           value={candidateName}
-          onChange={(e) => onChange("candidateName", e.target.value)}
+          onChange={(e) => markDirty("candidateName", e.target.value)}
-          className={inputClass}
+          onBlur={(e) => saveOnBlur("candidateName", e.target.value)}
+          className={`${inputClass} transition-colors duration-200`}
+          style={fieldStyle("candidateName")}
           disabled={disabled}
           placeholder="Alice Chen"
         />
@@ -48,8 +76,10 @@ export function CandidateForm({
         <input
           type="text"
           value={candidateRole}
-          onChange={(e) => onChange("candidateRole", e.target.value)}
+          onChange={(e) => markDirty("candidateRole", e.target.value)}
-          className={inputClass}
+          onBlur={(e) => saveOnBlur("candidateRole", e.target.value)}
+          className={`${inputClass} transition-colors duration-200`}
+          style={fieldStyle("candidateRole")}
           disabled={disabled}
           placeholder="ML Engineer"
         />
@@ -59,8 +89,10 @@ export function CandidateForm({
         <input
           type="text"
           value={candidateTeam}
-          onChange={(e) => onChange("candidateTeam", e.target.value)}
+          onChange={(e) => markDirty("candidateTeam", e.target.value)}
-          className={inputClass}
+          onBlur={(e) => saveOnBlur("candidateTeam", e.target.value)}
+          className={`${inputClass} transition-colors duration-200`}
+          style={fieldStyle("candidateTeam")}
           disabled={disabled}
           placeholder="Peaksys"
         />
@@ -71,8 +103,10 @@ export function CandidateForm({
         <input
           type="text"
           value={evaluatorName}
-          onChange={(e) => onChange("evaluatorName", e.target.value)}
+          onChange={(e) => markDirty("evaluatorName", e.target.value)}
-          className={inputClass}
+          onBlur={(e) => saveOnBlur("evaluatorName", e.target.value)}
+          className={`${inputClass} transition-colors duration-200`}
+          style={fieldStyle("evaluatorName")}
           disabled={disabled}
           placeholder="Jean D."
         />
@@ -82,8 +116,10 @@ export function CandidateForm({
         <input
           type="date"
           value={evaluationDate}
-          onChange={(e) => onChange("evaluationDate", e.target.value)}
+          onChange={(e) => markDirty("evaluationDate", e.target.value)}
-          className={inputClass}
+          onBlur={(e) => saveOnBlur("evaluationDate", e.target.value)}
+          className={`${inputClass} transition-colors duration-200`}
+          style={fieldStyle("evaluationDate")}
           disabled={disabled}
         />
       </div>
@@ -91,8 +127,10 @@ export function CandidateForm({
         <label className={labelClass}>Modèle</label>
         <select
           value={templateId}
-          onChange={(e) => onChange("templateId", e.target.value)}
+          onChange={(e) => markDirty("templateId", e.target.value)}
-          className={inputClass}
+          onBlur={(e) => saveOnBlur("templateId", e.target.value)}
+          className={`${inputClass} transition-colors duration-200`}
+          style={fieldStyle("templateId")}
           disabled={disabled || templateDisabled}
         >
           <option value="">—</option>

src/components/DimensionCard.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
+import { updateDimensionScore } from "@/actions/evaluations";
 
 const STORAGE_KEY_PREFIX = "eval-dim-expanded";
 
@@ -51,7 +52,6 @@ interface DimensionCardProps {
   index: number;
   evaluationId?: string;
   onScoreChange: (dimensionId: string, data: Partial<DimensionScore>) => void;
-  onSave?: () => void;
   /** Increment to collapse this card (e.g. from "Tout fermer" button) */
   collapseAllTrigger?: number;
 }
@@ -79,9 +79,23 @@ function parseQuestions(s: string | null | undefined): string[] {
 const inputClass =
   "w-full rounded border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-700/80 px-2.5 py-1.5 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-500 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/30";
 
-export function DimensionCard({ dimension, score, index, evaluationId, onScoreChange, onSave, collapseAllTrigger }: DimensionCardProps) {
+export function DimensionCard({ dimension, score, index, evaluationId, onScoreChange, collapseAllTrigger }: DimensionCardProps) {
   const [notes, setNotes] = useState(score?.candidateNotes ?? "");
-  const [notesDirty, setNotesDirty] = useState(false);
+  const [dirtyFields, setDirtyFields] = useState<Record<string, boolean>>({});
+  const [savedField, setSavedField] = useState<string | null>(null);
+
+  const markDirty = (field: string) => {
+    setDirtyFields((p) => ({ ...p, [field]: true }));
+    setSavedField(null);
+  };
+  const saveOnBlur = (field: string, data: Parameters<typeof updateDimensionScore>[2]) => {
+    if (!dirtyFields[field] || !evaluationId) return;
+    setDirtyFields((p) => ({ ...p, [field]: false }));
+    setSavedField(field);
+    updateDimensionScore(evaluationId, dimension.id, data);
+    setTimeout(() => setSavedField((cur) => (cur === field ? null : cur)), 800);
+  };
+  const savedStyle = { borderColor: "#a855f7", boxShadow: "0 0 0 1px #a855f733" };
   const hasQuestions = parseQuestions(dimension.suggestedQuestions).length > 0;
   const [expanded, setExpanded] = useState(hasQuestions);
 
@@ -193,19 +207,13 @@ export function DimensionCard({ dimension, score, index, evaluationId, onScoreCh
               value={notes}
               onChange={(e) => {
                 setNotes(e.target.value);
-                setNotesDirty(true);
+                markDirty("notes");
                 onScoreChange(dimension.id, { candidateNotes: e.target.value });
               }}
-              onBlur={() => {
+              onBlur={() => saveOnBlur("notes", { candidateNotes: notes })}
-                if (notesDirty) {
-                  setNotesDirty(false);
-                  onSave?.();
-                }
-              }}
               rows={2}
-              className={`${inputClass} transition-colors duration-200 ${
+              className={`${inputClass} transition-colors duration-200`}
-                notesDirty ? "!border-amber-400 dark:!border-amber-500" : ""
+              style={savedField === "notes" ? savedStyle : undefined}
-              }`}
               placeholder="Réponses du candidat..."
             />
           </div>
@@ -217,8 +225,13 @@ export function DimensionCard({ dimension, score, index, evaluationId, onScoreCh
               <input
                 type="text"
                 value={score?.justification ?? ""}
-                onChange={(e) => onScoreChange(dimension.id, { justification: e.target.value || null })}
+                onChange={(e) => {
-                className={inputClass}
+                  markDirty("justification");
+                  onScoreChange(dimension.id, { justification: e.target.value || null });
+                }}
+                onBlur={(e) => saveOnBlur("justification", { justification: e.target.value || null })}
+                className={`${inputClass} transition-colors duration-200`}
+                style={savedField === "justification" ? savedStyle : undefined}
                 placeholder="Courte..."
               />
             </div>
@@ -227,8 +240,13 @@ export function DimensionCard({ dimension, score, index, evaluationId, onScoreCh
               <input
                 type="text"
                 value={score?.examplesObserved ?? ""}
-                onChange={(e) => onScoreChange(dimension.id, { examplesObserved: e.target.value || null })}
+                onChange={(e) => {
-                className={inputClass}
+                  markDirty("examples");
+                  onScoreChange(dimension.id, { examplesObserved: e.target.value || null });
+                }}
+                onBlur={(e) => saveOnBlur("examples", { examplesObserved: e.target.value || null })}
+                className={`${inputClass} transition-colors duration-200`}
+                style={savedField === "examples" ? savedStyle : undefined}
                 placeholder="Concrets..."
               />
             </div>
@@ -236,8 +254,13 @@ export function DimensionCard({ dimension, score, index, evaluationId, onScoreCh
               <label className="text-xs text-zinc-500">Confiance</label>
               <select
                 value={score?.confidence ?? ""}
-                onChange={(e) => onScoreChange(dimension.id, { confidence: e.target.value || null })}
+                onChange={(e) => {
-                className={inputClass}
+                  markDirty("confidence");
+                  onScoreChange(dimension.id, { confidence: e.target.value || null });
+                }}
+                onBlur={(e) => saveOnBlur("confidence", { confidence: e.target.value || null })}
+                className={`${inputClass} transition-colors duration-200`}
+                style={savedField === "confidence" ? savedStyle : undefined}
               >
                 <option value="">—</option>
                 <option value="low">Faible</option>

src/components/EvaluationEditor.tsx

@@ -213,7 +213,7 @@ export function EvaluationEditor({ id, initialEvaluation, templates, users }: Ev
             disabled={saving}
             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-purple-500/50 bg-purple-500/10 text-purple-600 dark:text-purple-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"
             }`}
           >
@@ -267,6 +267,7 @@ export function EvaluationEditor({ id, initialEvaluation, templates, users }: Ev
           Session
         </h2>
         <CandidateForm
+          evaluationId={id}
           candidateName={evaluation.candidateName}
           candidateRole={evaluation.candidateRole}
           candidateTeam={evaluation.candidateTeam ?? ""}
@@ -318,7 +319,6 @@ export function EvaluationEditor({ id, initialEvaluation, templates, users }: Ev
                 evaluationId={id}
                 score={scoreMap.get(dim.id) ?? null}
                 onScoreChange={handleScoreChange}
-                onSave={() => handleSave()}
                 collapseAllTrigger={collapseAllTrigger}
               />
             </div>