Enhance skill evaluation UI with category icons and URL state management

- Added category icons to the skill evaluation components for better visual representation.
- Implemented URL parameter handling in SkillEvaluation to maintain selected category state across navigation.
- Improved the HomePage layout with expandable skill categories and enhanced user interaction.
- Updated skill data files to include icon properties for each category.

app/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useEvaluation } from "@/hooks/use-evaluation";
 import { ProfileForm } from "@/components/profile-form";
 import { SkillsRadarChart } from "@/components/radar-chart";
@@ -15,14 +15,17 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { generateRadarData } from "@/lib/evaluation-utils";
 import { useUser } from "@/hooks/use-user-context";
+import { getTechIcon } from "@/components/icons/tech-icons";
 import Link from "next/link";
-import { Code2 } from "lucide-react";
+import { Code2, ChevronDown, ChevronRight, ExternalLink } from "lucide-react";
+import { getCategoryIcon } from "@/lib/category-icons";
 
 export default function HomePage() {
   const { userEvaluation, skillCategories, teams, loading, updateProfile } =
     useEvaluation();
 
   const { setUserInfo } = useUser();
+  const [expandedCategory, setExpandedCategory] = useState<string | null>(null);
 
   // Update user info in navigation when user evaluation is loaded
   useEffect(() => {
@@ -148,36 +151,124 @@ export default function HomePage() {
                 const evaluatedCount =
                   categoryEval?.skills.filter((s) => s.level !== null).length ||
                   0;
+                const isExpanded = expandedCategory === category.category;
+                const currentSkillCategory = skillCategories.find(
+                  (sc) => sc.category === category.category
+                );
+                const CategoryIcon = currentSkillCategory 
+                  ? getCategoryIcon(currentSkillCategory.icon) 
+                  : null;
 
                 return (
                   <div
                     key={category.category}
-                    className="bg-white/5 border border-white/10 rounded-lg p-3 hover:bg-white/10 transition-colors"
+                    className="bg-white/5 border border-white/10 rounded-lg overflow-hidden transition-colors"
                   >
-                    <div className="flex justify-between items-center mb-2">
+                    <div
-                      <h4 className="font-medium text-white text-sm">
+                      className="p-3 hover:bg-white/10 transition-colors cursor-pointer"
-                        {category.category}
+                      onClick={() =>
-                      </h4>
+                        setExpandedCategory(
-                      <div className="px-2 py-0.5 rounded-full bg-blue-500/20 border border-blue-500/30">
+                          isExpanded ? null : category.category
-                        <span className="text-xs font-medium text-blue-400">
+                        )
-                          {category.score.toFixed(1)}/3
+                      }
-                        </span>
+                    >
+                      <div className="flex justify-between items-center mb-2">
+                        <div className="flex items-center gap-2">
+                          {isExpanded ? (
+                            <ChevronDown className="h-4 w-4 text-slate-400" />
+                          ) : (
+                            <ChevronRight className="h-4 w-4 text-slate-400" />
+                          )}
+                          {CategoryIcon && (
+                            <CategoryIcon className="h-4 w-4 text-blue-400" />
+                          )}
+                          <h4 className="font-medium text-white text-sm">
+                            {category.category}
+                          </h4>
+                        </div>
+                        <div className="px-2 py-0.5 rounded-full bg-blue-500/20 border border-blue-500/30">
+                          <span className="text-xs font-medium text-blue-400">
+                            {category.score.toFixed(1)}/3
+                          </span>
+                        </div>
+                      </div>
+                      <div className="text-xs text-slate-400 mb-2">
+                        {evaluatedCount}/{skillsCount} compétences sélectionnées
+                        évaluées
+                      </div>
+                      <div className="w-full bg-white/10 rounded-full h-1.5">
+                        <div
+                          className="bg-gradient-to-r from-blue-500 to-blue-400 h-1.5 rounded-full transition-all"
+                          style={{
+                            width: `${
+                              (category.score / category.maxScore) * 100
+                            }%`,
+                          }}
+                        ></div>
                       </div>
                     </div>
-                    <div className="text-xs text-slate-400 mb-2">
+
-                      {evaluatedCount}/{skillsCount} compétences sélectionnées
+                    {/* Expanded Skills */}
-                      évaluées
+                    {isExpanded && categoryEval && currentSkillCategory && (
-                    </div>
+                      <div className="px-3 pb-3 border-t border-white/10 bg-white/5">
-                    <div className="w-full bg-white/10 rounded-full h-1.5">
+                        <div className="pt-3 space-y-2 max-h-60 overflow-y-auto">
-                      <div
+                          {categoryEval.selectedSkillIds.map((skillId) => {
-                        className="bg-gradient-to-r from-blue-500 to-blue-400 h-1.5 rounded-full transition-all"
+                            const skill = currentSkillCategory.skills.find(
-                        style={{
+                              (s) => s.id === skillId
-                          width: `${
+                            );
-                            (category.score / category.maxScore) * 100
+                            if (!skill) return null;
-                          }%`,
+
-                        }}
+                            const skillEval = categoryEval.skills.find(
-                      ></div>
+                              (s) => s.skillId === skillId
-                    </div>
+                            );
+                            const TechIcon = getTechIcon(skill.id);
+
+                            return (
+                              <div
+                                key={skillId}
+                                className="flex items-center justify-between p-2 bg-white/5 border border-white/10 rounded-lg"
+                              >
+                                <div className="flex items-center gap-2">
+                                  <TechIcon className="w-4 h-4 text-blue-400" />
+                                  <span className="text-sm text-white">
+                                    {skill.name}
+                                  </span>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                  {skillEval?.level && (
+                                    <span className="text-xs text-slate-400">
+                                      {skillEval.level === "never" &&
+                                        "Jamais utilisé"}
+                                      {skillEval.level === "not-autonomous" &&
+                                        "Non autonome"}
+                                      {skillEval.level === "autonomous" &&
+                                        "Autonome"}
+                                      {skillEval.level === "expert" && "Expert"}
+                                    </span>
+                                  )}
+                                </div>
+                              </div>
+                            );
+                          })}
+                        </div>
+
+                        <div className="mt-3 pt-3 border-t border-white/10">
+                          <Button
+                            asChild
+                            className="w-full bg-blue-500 hover:bg-blue-600 text-white"
+                          >
+                            <Link
+                              href={`/evaluation?category=${encodeURIComponent(
+                                category.category
+                              )}`}
+                            >
+                              <ExternalLink className="w-4 h-4 mr-2" />
+                              Évaluer {category.category}
+                            </Link>
+                          </Button>
+                        </div>
+                      </div>
+                    )}
                   </div>
                 );
               })}

components/evaluation/category-tabs.tsx

@@ -1,5 +1,6 @@
 import { ChevronRight } from "lucide-react";
 import { SkillCategory } from "@/lib/types";
+import { getCategoryIcon } from "@/lib/category-icons";
 
 interface CategoryTabsProps {
   categories: SkillCategory[];
@@ -16,12 +17,13 @@ export function CategoryTabs({
     <div className="flex flex-wrap gap-2 mb-8">
       {categories.map((category) => {
         const isActive = selectedCategory === category.category;
+        const CategoryIcon = getCategoryIcon(category.icon);
         return (
           <button
             key={category.category}
             onClick={() => onCategoryChange(category.category)}
             className={`
-              relative px-6 py-3 rounded-xl font-medium transition-all duration-300 group
+              relative px-6 py-3 rounded-xl font-medium transition-all duration-300 group flex items-center gap-2
               ${
                 isActive
                   ? "bg-blue-500 text-white shadow-lg shadow-blue-500/25"
@@ -29,6 +31,7 @@ export function CategoryTabs({
               }
             `}
           >
+            <CategoryIcon className="w-4 h-4 relative z-10" />
             <span className="relative z-10">{category.category}</span>
             {isActive && (
               <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-600/20 to-blue-400/20 animate-pulse" />

components/evaluation/skill-evaluation-card.tsx

@@ -94,35 +94,40 @@ export function SkillEvaluationCard({
         </div>
 
         {/* Level Selection */}
-        <div className="flex items-center gap-2 flex-shrink-0 ml-4">
+        <div className="flex items-center gap-3 flex-shrink-0 ml-4">
           {Object.entries(SKILL_LEVELS).map(([value, label]) => {
             const isSelected = currentLevel === value;
             const levelValue = value as Exclude<SkillLevel, null>;
             return (
-              <Tooltip key={value}>
+              <div key={value} className="flex items-center gap-1.5">
-                <TooltipTrigger asChild>
+                <button
-                  <button
+                  onClick={() => onUpdateSkill(skill.id, levelValue)}
-                    onClick={() => onUpdateSkill(skill.id, levelValue)}
+                  className={`
-                    className={`
+                    relative w-4 h-4 rounded-md border-2 transition-all hover:scale-110
-                      relative w-5 h-5 rounded-md border-2 transition-all hover:scale-110
+                    ${
-                      ${
+                      isSelected
-                        isSelected
+                        ? `${getLevelColor(levelValue)} ${getLevelColorBorder(
-                          ? `${getLevelColor(levelValue)} ${getLevelColorBorder(
+                            levelValue
-                              levelValue
+                          )} shadow-lg`
-                            )} shadow-lg`
+                        : "bg-white/5 border-white/20 hover:border-white/30 hover:bg-white/10"
-                          : "bg-white/5 border-white/20 hover:border-white/30 hover:bg-white/10"
+                    }
-                      }
+                  `}
-                    `}
+                >
-                  >
+                  {isSelected && (
-                    {isSelected && (
+                    <div className="absolute inset-0.5 bg-white rounded-sm"></div>
-                      <div className="absolute inset-0.5 bg-white rounded-sm"></div>
+                  )}
-                    )}
+                </button>
-                  </button>
+                <span
-                </TooltipTrigger>
+                  className={`text-xs font-medium transition-colors cursor-pointer ${
-                <TooltipContent>
+                    isSelected
-                  <p className="text-sm font-medium">{label}</p>
+                      ? "text-white"
-                </TooltipContent>
+                      : "text-slate-400 hover:text-slate-300"
-              </Tooltip>
+                  }`}
+                  onClick={() => onUpdateSkill(skill.id, levelValue)}
+                >
+                  {label}
+                </span>
+              </div>
             );
           })}
 

components/evaluation/skill-evaluation-grid.tsx

@@ -37,7 +37,7 @@ export function SkillEvaluationGrid({
         </div>
       </div>
 
-      <div className="space-y-2">
+      <div className="space-y-3">
         {currentEvaluation.selectedSkillIds.map((skillId) => {
           const skill = currentCategory.skills.find((s) => s.id === skillId);
           if (!skill) return null;

components/skill-evaluation.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { SkillCategory, SkillLevel, CategoryEvaluation } from "@/lib/types";
 import { SkillSelector } from "./skill-selector";
@@ -26,10 +27,31 @@ export function SkillEvaluation({
   onAddSkill,
   onRemoveSkill,
 }: SkillEvaluationProps) {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const categoryParam = searchParams.get("category");
+
   const [selectedCategory, setSelectedCategory] = useState(
     categories[0]?.category || ""
   );
 
+  const handleCategoryChange = (category: string) => {
+    setSelectedCategory(category);
+    // Update URL without page reload
+    const newUrl = new URL(window.location.href);
+    newUrl.searchParams.set("category", category);
+    router.replace(newUrl.pathname + newUrl.search);
+  };
+
+  // Update selected category when URL param changes or categories load
+  useEffect(() => {
+    if (categoryParam && categories.some((c) => c.category === categoryParam)) {
+      setSelectedCategory(categoryParam);
+    } else if (categories.length > 0 && !selectedCategory) {
+      setSelectedCategory(categories[0].category);
+    }
+  }, [categoryParam, categories]); // Remove selectedCategory from deps to avoid loop
+
   const currentCategory = categories.find(
     (cat) => cat.category === selectedCategory
   );
@@ -55,7 +77,7 @@ export function SkillEvaluation({
           <CategoryTabs
             categories={categories}
             selectedCategory={selectedCategory}
-            onCategoryChange={setSelectedCategory}
+            onCategoryChange={handleCategoryChange}
           />
 
           <div className="space-y-8">

data/skills/backend.json

@@ -1,5 +1,6 @@
 {
   "category": "Backend",
+  "icon": "server",
   "skills": [
     {
       "id": "nodejs",

data/skills/devops.json

@@ -1,5 +1,6 @@
 {
   "category": "DevOps",
+  "icon": "settings",
   "skills": [
     {
       "id": "docker",

data/skills/frontend.json

@@ -1,5 +1,6 @@
 {
   "category": "Frontend",
+  "icon": "monitor",
   "skills": [
     {
       "id": "react",

data/skills/mobile.json

@@ -1,5 +1,6 @@
 {
   "category": "Mobile",
+  "icon": "smartphone",
   "skills": [
     {
       "id": "reactnative",

lib/category-icons.ts

@@ -0,0 +1,18 @@
+import { 
+  Monitor, 
+  Server, 
+  Settings, 
+  Smartphone, 
+  LucideIcon 
+} from "lucide-react";
+
+const CATEGORY_ICON_MAP: Record<string, LucideIcon> = {
+  monitor: Monitor,
+  server: Server,
+  settings: Settings,
+  smartphone: Smartphone,
+};
+
+export function getCategoryIcon(iconName: string): LucideIcon {
+  return CATEGORY_ICON_MAP[iconName] || Settings; // Settings as fallback
+}

lib/types.ts

@@ -28,6 +28,7 @@ export interface Skill {
 
 export interface SkillCategory {
   category: string;
+  icon: string;
   skills: Skill[];
 }
 

public/data/skills/backend.json

@@ -1,5 +1,6 @@
 {
   "category": "Backend",
+  "icon": "server",
   "skills": [
     {
       "id": "nodejs",

public/data/skills/devops.json

@@ -1,5 +1,6 @@
 {
   "category": "DevOps",
+  "icon": "settings",
   "skills": [
     {
       "id": "docker",

public/data/skills/frontend.json

@@ -1,5 +1,6 @@
 {
   "category": "Frontend",
+  "icon": "monitor",
   "skills": [
     {
       "id": "react",

public/data/skills/mobile.json

@@ -1,5 +1,6 @@
 {
   "category": "Mobile",
+  "icon": "smartphone",
   "skills": [
     {
       "id": "reactnative",