feat: homepage and skills : sorting and coloring

components/home/category-card.tsx

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { ChevronDown, ChevronRight, ExternalLink } from "lucide-react";
 import { getCategoryIcon } from "@/lib/category-icons";
 import { getScoreColors } from "@/lib/score-utils";
+import { getImportanceColors } from "@/lib/tech-colors";
 import { SkillProgress } from "./skill-progress";
 import Link from "next/link";
 
@@ -29,6 +30,7 @@ interface CategoryCardProps {
       id: string;
       name: string;
       icon?: string;
+      importance: "incontournable" | "majeure" | "standard";
     }>;
   };
 }
@@ -114,23 +116,39 @@ export function CategoryCard({
         <div className="px-3 pb-3 border-t border-white/10 bg-white/5">
           {categoryEval && skillCategory && skillsCount > 0 ? (
             <div className="pt-3 space-y-2 max-h-60 overflow-y-auto">
-              {categoryEval.selectedSkillIds.map((skillId) => {
-                const skill = skillCategory.skills.find(
-                  (s) => s.id === skillId
-                );
-                if (!skill) return null;
-
-                const skillEval = categoryEval.skills.find(
-                  (s) => s.skillId === skillId
-                );
-                return (
-                  <SkillProgress
-                    key={skillId}
-                    skill={skill}
-                    skillEval={skillEval}
-                  />
-                );
-              })}
+              {categoryEval.selectedSkillIds
+                .map((skillId) => {
+                  const skill = skillCategory.skills.find(
+                    (s) => s.id === skillId
+                  );
+                  return skill ? { ...skill, id: skillId } : null;
+                })
+                .filter(
+                  (skill): skill is NonNullable<typeof skill> => skill !== null
+                )
+                .sort((a, b) => {
+                  const importanceOrder = {
+                    incontournable: 2,
+                    majeure: 1,
+                    standard: 0,
+                  };
+                  return (
+                    importanceOrder[b.importance] -
+                    importanceOrder[a.importance]
+                  );
+                })
+                .map((skill) => {
+                  const skillEval = categoryEval.skills.find(
+                    (s) => s.skillId === skill.id
+                  );
+                  return (
+                    <SkillProgress
+                      key={skill.id}
+                      skill={skill}
+                      skillEval={skillEval}
+                    />
+                  );
+                })}
             </div>
           ) : (
             <div className="pt-3 pb-3 text-center">