feat: implement label management with color filtering

keep-notes/components/note-card.tsx

@@ -1,10 +1,9 @@
 'use client'
 
-import { Note, NOTE_COLORS, NoteColor, LABEL_COLORS } from '@/lib/types'
+import { Note, NOTE_COLORS, NoteColor } from '@/lib/types'
 import { Card } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
-import { Badge } from '@/components/ui/badge'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -22,13 +21,13 @@ import {
   Trash2,
   Bell,
 } from 'lucide-react'
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { deleteNote, toggleArchive, togglePin, updateColor, updateNote } from '@/app/actions/notes'
 import { cn } from '@/lib/utils'
 import { formatDistanceToNow } from 'date-fns'
 import { fr } from 'date-fns/locale'
 import { MarkdownContent } from './markdown-content'
-import { getLabelColor } from '@/lib/label-storage'
+import { LabelBadge } from './label-badge'
 
 interface NoteCardProps {
   note: Note
@@ -39,20 +38,8 @@ interface NoteCardProps {
 
 export function NoteCard({ note, onEdit, isDragging, isDragOver }: NoteCardProps) {
   const [isDeleting, setIsDeleting] = useState(false)
-  const [labelColors, setLabelColors] = useState<Record<string, string>>({})
   const colorClasses = NOTE_COLORS[note.color as NoteColor] || NOTE_COLORS.default
 
-  // Load label colors from localStorage
-  useEffect(() => {
-    if (note.labels) {
-      const colors: Record<string, string> = {}
-      note.labels.forEach(label => {
-        colors[label] = getLabelColor(label)
-      })
-      setLabelColors(colors)
-    }
-  }, [note.labels])
-
   const handleDelete = async () => {
     if (confirm('Are you sure you want to delete this note?')) {
       setIsDeleting(true)
@@ -232,23 +219,9 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver }: NoteCardProps
       {/* Labels */}
       {note.labels && note.labels.length > 0 && (
         <div className="flex flex-wrap gap-1 mt-3">
-          {note.labels.map((label) => {
-            const colorName = labelColors[label] || 'gray'
-            const colorClasses = LABEL_COLORS[colorName as keyof typeof LABEL_COLORS] || LABEL_COLORS.gray
-            return (
-              <Badge 
-                key={label} 
-                className={cn(
-                  'text-xs border',
-                  colorClasses.bg,
-                  colorClasses.text,
-                  colorClasses.border
-                )}
-              >
-                {label}
-              </Badge>
-            )
-          })}
+          {note.labels.map((label) => (
+            <LabelBadge key={label} label={label} />
+          ))}
         </div>
       )}