Add skill removal functionality and enhance UI components

- Integrated onRemoveSkill functionality in SkillEvaluation, SkillSelector, and SkillEvaluationCard components for better skill management.
- Updated UI to improve user experience when removing skills, including tooltip descriptions and styling adjustments.
- Added new skills to backend, devops, frontend, and mobile JSON files for comprehensive skill coverage.

components/skill-selector.tsx

@@ -11,8 +11,7 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
-import { Plus, Search, X } from "lucide-react";
+import { Plus, Search } from "lucide-react";
 import { SkillCategory, CategoryEvaluation } from "@/lib/types";
 import { getTechIcon } from "./icons/tech-icons";
 
@@ -41,9 +40,9 @@ export function SkillSelector({
     (evaluation) => evaluation.category === selectedCategory
   );
 
-  if (!currentCategory || !currentEvaluation) return null;
+  if (!currentCategory) return null;
 
-  const selectedSkillIds = currentEvaluation.selectedSkillIds || [];
+  const selectedSkillIds = currentEvaluation?.selectedSkillIds || [];
 
   const filteredSkills = currentCategory.skills.filter(
     (skill) =>
@@ -67,7 +66,10 @@ export function SkillSelector({
           <h4 className="text-lg font-medium">Mes compétences sélectionnées</h4>
           <Dialog open={isOpen} onOpenChange={setIsOpen}>
             <DialogTrigger asChild>
-              <Button size="sm" className="gap-2">
+              <Button
+                size="sm"
+                className="gap-2 bg-blue-500 hover:bg-blue-600 text-white shadow-lg"
+              >
                 <Plus className="h-4 w-4" />
                 Ajouter une compétence
               </Button>
@@ -147,24 +149,17 @@ export function SkillSelector({
         </div>
 
         {selectedSkills.length > 0 ? (
-          <div className="flex flex-wrap gap-2">
-            {selectedSkills.map((skill) => (
-              <Badge
-                key={skill.id}
-                variant="secondary"
-                className="gap-2 pr-1 cursor-pointer hover:bg-destructive/10 transition-colors"
-              >
-                {skill.name}
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-auto p-0.5 hover:bg-destructive hover:text-destructive-foreground"
-                  onClick={() => onRemoveSkill(selectedCategory, skill.id)}
-                >
-                  <X className="h-3 w-3" />
-                </Button>
-              </Badge>
-            ))}
+          <div className="bg-muted/30 rounded-lg p-4">
+            <div className="flex items-center justify-between">
+              <p className="text-sm text-muted-foreground">
+                {selectedSkills.length} compétence
+                {selectedSkills.length > 1 ? "s" : ""} sélectionnée
+                {selectedSkills.length > 1 ? "s" : ""}
+              </p>
+              <div className="text-xs text-muted-foreground">
+                Supprimez directement depuis les lignes ci-dessous
+              </div>
+            </div>
           </div>
         ) : (
           <div className="text-center py-8 text-muted-foreground border-2 border-dashed border-muted rounded-lg">