feat: implement label management with color filtering

keep-notes/components/note-editor.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState, useEffect, useRef } from 'react'
-import { Note, CheckItem, NOTE_COLORS, NoteColor, LABEL_COLORS } from '@/lib/types'
+import { Note, CheckItem, NOTE_COLORS, NoteColor } from '@/lib/types'
 import {
   Dialog,
   DialogContent,
@@ -12,19 +12,18 @@ import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
-import { Badge } from '@/components/ui/badge'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { X, Plus, Palette, Tag, Image as ImageIcon, Bell, FileText, Eye } from 'lucide-react'
+import { X, Plus, Palette, Image as ImageIcon, Bell, FileText, Eye } from 'lucide-react'
 import { updateNote } from '@/app/actions/notes'
 import { cn } from '@/lib/utils'
 import { useToast } from '@/components/ui/toast'
 import { MarkdownContent } from './markdown-content'
 import { LabelManager } from './label-manager'
-import { getLabelColor } from '@/lib/label-storage'
+import { LabelBadge } from './label-badge'
 
 interface NoteEditorProps {
   note: Note
@@ -308,29 +307,13 @@ export function NoteEditor({ note, onClose }: NoteEditorProps) {
           {/* Labels */}
           {labels.length > 0 && (
             <div className="flex flex-wrap gap-2">
-              {labels.map((label) => {
-                const colorName = getLabelColor(label)
-                const colorClasses = LABEL_COLORS[colorName]
-                return (
-                  <Badge 
-                    key={label} 
-                    className={cn(
-                      'gap-1 border',
-                      colorClasses.bg,
-                      colorClasses.text,
-                      colorClasses.border
-                    )}
-                  >
-                    {label}
-                    <button
-                      onClick={() => handleRemoveLabel(label)}
-                      className="hover:text-red-600"
-                    >
-                      <X className="h-3 w-3" />
-                    </button>
-                  </Badge>
-                )
-              })}
+              {labels.map((label) => (
+                <LabelBadge
+                  key={label}
+                  label={label}
+                  onRemove={() => handleRemoveLabel(label)}
+                />
+              ))}
             </div>
           )}