Fix tests and add changelog

keep-notes/components/note-card.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Note, NOTE_COLORS, NoteColor } from '@/lib/types'
+import { Note, NOTE_COLORS, NoteColor, LABEL_COLORS } from '@/lib/types'
 import { Card } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
@@ -22,26 +22,37 @@ import {
   Trash2,
   Bell,
 } from 'lucide-react'
-import { useState } from 'react'
+import { useState, useEffect } 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'
 
 interface NoteCardProps {
   note: Note
   onEdit?: (note: Note) => void
-  onDragStart?: (note: Note) => void
-  onDragEnd?: () => void
-  onDragOver?: (note: Note) => void
   isDragging?: boolean
+  isDragOver?: boolean
 }
 
-export function NoteCard({ note, onEdit, onDragStart, onDragEnd, onDragOver, isDragging }: 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)
@@ -79,22 +90,14 @@ export function NoteCard({ note, onEdit, onDragStart, onDragEnd, onDragOver, isD
 
   return (
     <Card
-      draggable
-      onDragStart={(e) => {
-        e.stopPropagation()
-        onDragStart?.(note)
-      }}
-      onDragEnd={onDragEnd}
-      onDragOver={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
-        onDragOver?.(note)
-      }}
       className={cn(
-        'group relative p-4 transition-all duration-200 border',
-        'cursor-move hover:shadow-md',
+        'note-card-main group relative p-4 transition-all duration-200 border cursor-move',
+        'hover:shadow-md',
+        colorClasses.bg,
         colorClasses.card,
-        isDragging && 'opacity-30 scale-95'
+        colorClasses.hover,
+        isDragging && 'opacity-30',
+        isDragOver && 'ring-2 ring-blue-500'
       )}
       onClick={(e) => {
         // Only trigger edit if not clicking on buttons
@@ -229,11 +232,23 @@ export function NoteCard({ note, onEdit, onDragStart, onDragEnd, onDragOver, isD
       {/* Labels */}
       {note.labels && note.labels.length > 0 && (
         <div className="flex flex-wrap gap-1 mt-3">
-          {note.labels.map((label) => (
-            <Badge key={label} variant="secondary" className="text-xs">
-              {label}
-            </Badge>
-          ))}
+          {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>
+            )
+          })}
         </div>
       )}