feat: implement label management with color filtering

keep-notes/components/label-badge.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { Badge } from '@/components/ui/badge'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { LABEL_COLORS } from '@/lib/types'
+import { useLabels } from '@/context/LabelContext'
+
+interface LabelBadgeProps {
+  label: string
+  onRemove?: () => void
+  variant?: 'default' | 'filter' | 'clickable'
+  onClick?: () => void
+  isSelected?: boolean
+  isDisabled?: boolean
+}
+
+export function LabelBadge({
+  label,
+  onRemove,
+  variant = 'default',
+  onClick,
+  isSelected = false,
+  isDisabled = false,
+}: LabelBadgeProps) {
+  const { getLabelColor } = useLabels()
+  const colorName = getLabelColor(label)
+  const colorClasses = LABEL_COLORS[colorName] || LABEL_COLORS.gray
+
+  return (
+    <Badge
+      className={cn(
+        'text-xs border gap-1',
+        colorClasses.bg,
+        colorClasses.text,
+        colorClasses.border,
+        variant === 'filter' && 'cursor-pointer hover:opacity-80',
+        variant === 'clickable' && 'cursor-pointer',
+        isDisabled && 'opacity-50',
+        isSelected && 'ring-2 ring-blue-500'
+      )}
+      onClick={onClick}
+    >
+      {label}
+      {onRemove && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation()
+            onRemove()
+          }}
+          className="hover:text-red-600"
+        >
+          <X className="h-3 w-3" />
+        </button>
+      )}
+    </Badge>
+  )
+}