feat: add multiple skills addition and optimize evaluation handling

- Introduced `addMultipleSkillsToEvaluation` function in `EvaluationClientWrapper` for batch skill addition.
- Updated `SkillEvaluation` and `SkillSelector` components to utilize the new multiple skills addition feature.
- Implemented optimistic UI updates for skill level, mentor status, and learning status changes, enhancing user experience.
- Refactored evaluation state management to improve performance and maintainability.
- Added error handling and rollback mechanisms for better reliability during API interactions.

components/skill-selector.tsx

@@ -21,6 +21,7 @@ interface SkillSelectorProps {
   evaluations: CategoryEvaluation[];
   selectedCategory: string;
   onAddSkill: (category: string, skillId: string) => void;
+  onAddMultipleSkills?: (category: string, skillIds: string[]) => void;
   onRemoveSkill: (category: string, skillId: string) => void;
 }
 
@@ -29,11 +30,14 @@ export function SkillSelector({
   evaluations,
   selectedCategory,
   onAddSkill,
+  onAddMultipleSkills,
   onRemoveSkill,
 }: SkillSelectorProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [isCreateOpen, setIsCreateOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
+  const [isAddingAll, setIsAddingAll] = useState(false);
+  const [addingSkillIds, setAddingSkillIds] = useState<Set<string>>(new Set());
 
   const currentCategory = categories.find(
     (cat) => cat.category === selectedCategory
@@ -60,6 +64,47 @@ export function SkillSelector({
     selectedSkillIds.includes(skill.id)
   );
 
+  const handleAddSkill = async (skillId: string) => {
+    setAddingSkillIds((prev) => new Set(prev).add(skillId));
+    try {
+      await onAddSkill(selectedCategory, skillId);
+    } catch (error) {
+      console.error("Failed to add skill:", error);
+    } finally {
+      setAddingSkillIds((prev) => {
+        const next = new Set(prev);
+        next.delete(skillId);
+        return next;
+      });
+    }
+  };
+
+  const handleAddAllSkills = async () => {
+    setIsAddingAll(true);
+    try {
+      const skillIds = availableSkills.map((skill) => skill.id);
+
+      // Utiliser la fonction d'ajout multiple si disponible, sinon fallback sur l'ajout individuel
+      if (onAddMultipleSkills) {
+        await onAddMultipleSkills(selectedCategory, skillIds);
+      } else {
+        // Fallback: ajouter en séquentiel pour éviter les conflits d'état
+        for (const skill of availableSkills) {
+          await onAddSkill(selectedCategory, skill.id);
+        }
+      }
+
+      // Petit délai pour permettre à l'UI de se mettre à jour avant de fermer
+      setTimeout(() => {
+        setIsOpen(false);
+      }, 100);
+    } catch (error) {
+      console.error("Failed to add all skills:", error);
+    } finally {
+      setIsAddingAll(false);
+    }
+  };
+
   return (
     <div className="space-y-4">
       {/* Selected Skills */}
@@ -88,15 +133,30 @@ export function SkillSelector({
               </DialogHeader>
 
               <div className="space-y-4">
-                {/* Search */}
-                <div className="relative">
-                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                  <Input
-                    placeholder="Rechercher une compétence..."
-                    value={searchTerm}
-                    onChange={(e) => setSearchTerm(e.target.value)}
-                    className="pl-10"
-                  />
+                {/* Search and Add All */}
+                <div className="space-y-3">
+                  <div className="relative">
+                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                    <Input
+                      placeholder="Rechercher une compétence..."
+                      value={searchTerm}
+                      onChange={(e) => setSearchTerm(e.target.value)}
+                      className="pl-10"
+                    />
+                  </div>
+
+                  {availableSkills.length > 1 && (
+                    <Button
+                      onClick={handleAddAllSkills}
+                      disabled={isAddingAll}
+                      className="w-full gap-2 bg-green-600 hover:bg-green-700 text-white disabled:opacity-50"
+                    >
+                      <Plus className="h-4 w-4" />
+                      {isAddingAll
+                        ? "Ajout en cours..."
+                        : `Ajouter toutes les compétences (${availableSkills.length})`}
+                    </Button>
+                  )}
                 </div>
 
                 {/* Create New Skill Button */}
@@ -159,13 +219,16 @@ export function SkillSelector({
                           </div>
                           <Button
                             size="sm"
-                            onClick={() => {
-                              onAddSkill(selectedCategory, skill.id);
-                            }}
-                            className="gap-2"
+                            onClick={() => handleAddSkill(skill.id)}
+                            disabled={
+                              addingSkillIds.has(skill.id) || isAddingAll
+                            }
+                            className="gap-2 disabled:opacity-50"
                           >
                             <Plus className="h-3 w-3" />
-                            Ajouter
+                            {addingSkillIds.has(skill.id)
+                              ? "Ajout..."
+                              : "Ajouter"}
                           </Button>
                         </div>
                       ))