feat: add skill creation functionality and reload categories

- Introduced a new button to create skills within the SkillSelector component, allowing users to add missing skills directly.
- Implemented a dialog for skill creation, including a form to handle new skill submissions.
- Added a reloadSkillCategories function in the useEvaluation hook to refresh skill categories and migrate existing evaluations if necessary.
- Enhanced error handling for category reloading to improve robustness.

components/skill-selector.tsx

@@ -11,9 +11,10 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
-import { Plus, Search } from "lucide-react";
+import { Plus, Search, Sparkles } from "lucide-react";
 import { SkillCategory, CategoryEvaluation } from "@/lib/types";
 import { TechIcon } from "./icons/tech-icon";
+import { CreateSkillForm } from "./create-skill-form";
 
 interface SkillSelectorProps {
   categories: SkillCategory[];
@@ -31,6 +32,7 @@ export function SkillSelector({
   onRemoveSkill,
 }: SkillSelectorProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
 
   const currentCategory = categories.find(
@@ -97,6 +99,40 @@ export function SkillSelector({
                   />
                 </div>
 
+                {/* Create New Skill Button */}
+                <div className="border-t pt-4">
+                  <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
+                    <DialogTrigger asChild>
+                      <Button
+                        variant="outline"
+                        className="w-full gap-2 border-dashed border-2 border-blue-300/50 text-blue-200 hover:border-blue-400 hover:bg-blue-500/10 hover:text-blue-100 transition-all duration-200"
+                      >
+                        <Sparkles className="h-4 w-4" />
+                        Créer une nouvelle compétence dans {selectedCategory}
+                      </Button>
+                    </DialogTrigger>
+                    <DialogContent className="max-w-md">
+                      <DialogHeader>
+                        <DialogTitle>Créer une nouvelle compétence</DialogTitle>
+                        <DialogDescription>
+                          Ajoutez une compétence manquante dans la catégorie{" "}
+                          {selectedCategory}
+                        </DialogDescription>
+                      </DialogHeader>
+                      <CreateSkillForm
+                        categoryName={selectedCategory}
+                        onSuccess={(skillId) => {
+                          setIsCreateOpen(false);
+                          setIsOpen(false);
+                          // Ajouter automatiquement la skill créée à l'évaluation
+                          onAddSkill(selectedCategory, skillId);
+                        }}
+                        onCancel={() => setIsCreateOpen(false)}
+                      />
+                    </DialogContent>
+                  </Dialog>
+                </div>
+
                 {/* Available Skills Grid */}
                 <div className="max-h-96 overflow-y-auto">
                   <div className="grid gap-2">