Remaster avec skill supabase only et grillme

src/pages/Skills.jsx

@@ -1,15 +1,18 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { supabase } from '@/lib/supabase'
+import { useCategories } from '@/hooks/useCategories'
+import { useSkills } from '@/hooks/useSkills'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import { CategoryCard } from '@/components/skills/CategoryCard'
+import { Search } from 'lucide-react'
 import { toast } from 'sonner'
 
 export function Skills() {
-  const [categories, setCategories] = useState([])
-  const [skills, setSkills] = useState([])
+  const { categories, refetch: refetchCats } = useCategories()
+  const { skills, refetch: refetchSkills } = useSkills()
+  const [search, setSearch] = useState('')
   const [newCatName, setNewCatName] = useState('')
   const [newCatColor, setNewCatColor] = useState('#3b82f6')
   const [editCat, setEditCat] = useState(null)
@@ -17,17 +20,6 @@ export function Skills() {
   const [catDialogOpen, setCatDialogOpen] = useState(false)
   const [skillDialogOpen, setSkillDialogOpen] = useState(false)
 
-  useEffect(() => { load() }, [])
-
-  async function load() {
-    const [catRes, skillRes] = await Promise.all([
-      supabase.from('categories').select('*').order('name'),
-      supabase.from('skills').select('*, category:category_id(name)').order('name'),
-    ])
-    if (catRes.data) setCategories(catRes.data)
-    if (skillRes.data) setSkills(skillRes.data)
-  }
-
   async function saveCategory() {
     if (editCat) {
       await supabase.from('categories').update({ name: newCatName, color: newCatColor }).eq('id', editCat)
@@ -37,28 +29,29 @@ export function Skills() {
     setCatDialogOpen(false)
     setEditCat(null)
     setNewCatName('')
-    load()
+    refetchCats()
     toast.success('Catégorie enregistrée')
   }
 
   async function deleteCategory(id) {
     const { error } = await supabase.from('categories').delete().eq('id', id)
     if (error) toast.error(error.message)
-    else { load(); toast.success('Catégorie supprimée') }
+    else { refetchCats(); toast.success('Catégorie supprimée') }
   }
 
   async function saveSkill() {
     await supabase.from('skills').insert({ name: newSkill.name, category_id: newSkill.category_id })
     setSkillDialogOpen(false)
     setNewSkill({ name: '', category_id: '' })
-    load()
+    refetchSkills()
     toast.success('Compétence ajoutée')
   }
 
-  async function deleteSkill(id) {
-    await supabase.from('skills').delete().eq('id', id)
-    load()
-    toast.success('Compétence supprimée')
+  function openEditCategory(cat) {
+    setEditCat(cat.id)
+    setNewCatName(cat.name)
+    setNewCatColor(cat.color)
+    setCatDialogOpen(true)
   }
 
   return (
@@ -73,7 +66,7 @@ export function Skills() {
               <div className="space-y-4">
                 <Input placeholder="Nom" value={newSkill.name} onChange={(e) => setNewSkill({ ...newSkill, name: e.target.value })} />
                 <select
-                  className="w-full border rounded-md px-3 py-2"
+                  className="w-full border rounded-md px-3 py-2 dark:bg-gray-800 dark:border-gray-700"
                   value={newSkill.category_id}
                   onChange={(e) => setNewSkill({ ...newSkill, category_id: e.target.value })}
                 >
@@ -99,41 +92,27 @@ export function Skills() {
         </div>
       </div>
 
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+        <Input
+          className="pl-10"
+          placeholder="Rechercher une compétence..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+      </div>
+
       {categories.map((cat) => {
-        const catSkills = skills.filter((s) => s.category_id === cat.id)
+        const catSkills = skills.filter((s) => s.category_id === cat.id && (!search || s.name.toLowerCase().includes(search.toLowerCase())))
+        if (search && catSkills.length === 0) return null
         return (
-          <Card key={cat.id}>
-            <CardHeader className="flex flex-row items-center justify-between py-3">
-              <CardTitle className="text-lg flex items-center gap-2">
-                <span className="w-3 h-3 rounded-full" style={{ backgroundColor: cat.color }} />
-                {cat.name}
-                <Badge variant="secondary" className="ml-2">{catSkills.length}</Badge>
-              </CardTitle>
-              <div className="flex gap-1">
-                <Button size="sm" variant="ghost" onClick={() => {
-                  setEditCat(cat.id)
-                  setNewCatName(cat.name)
-                  setNewCatColor(cat.color)
-                  setCatDialogOpen(true)
-                }}>✎</Button>
-                <Button size="sm" variant="ghost" onClick={() => deleteCategory(cat.id)}>🗑</Button>
-              </div>
-            </CardHeader>
-            <CardContent>
-              {catSkills.length === 0 ? (
-                <p className="text-sm text-gray-400">Aucune compétence dans cette catégorie</p>
-              ) : (
-                <div className="flex flex-wrap gap-2">
-                  {catSkills.map((s) => (
-                    <Badge key={s.id} variant="outline" className="pr-1">
-                      {s.name}
-                      <button className="ml-1 text-gray-400 hover:text-red-500" onClick={() => deleteSkill(s.id)}>×</button>
-                    </Badge>
-                  ))}
-                </div>
-              )}
-            </CardContent>
-          </Card>
+          <CategoryCard
+            key={cat.id}
+            category={cat}
+            skills={catSkills}
+            onEdit={openEditCategory}
+            onDelete={deleteCategory}
+          />
         )
       })}
     </div>