Fix tests and add changelog

keep-notes/components/note-editor.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState, useEffect, useRef } from 'react'
-import { Note, CheckItem, NOTE_COLORS, NoteColor } from '@/lib/types'
+import { Note, CheckItem, NOTE_COLORS, NoteColor, LABEL_COLORS } from '@/lib/types'
 import {
   Dialog,
   DialogContent,
@@ -23,6 +23,8 @@ 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'
 
 interface NoteEditorProps {
   note: Note
@@ -306,17 +308,29 @@ export function NoteEditor({ note, onClose }: NoteEditorProps) {
           {/* Labels */}
           {labels.length > 0 && (
             <div className="flex flex-wrap gap-2">
-              {labels.map((label) => (
-                <Badge key={label} variant="secondary" className="gap-1">
-                  {label}
-                  <button
-                    onClick={() => handleRemoveLabel(label)}
-                    className="hover:text-red-600"
+              {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
+                    )}
                   >
-                    <X className="h-3 w-3" />
-                  </button>
-                </Badge>
-              ))}
+                    {label}
+                    <button
+                      onClick={() => handleRemoveLabel(label)}
+                      className="hover:text-red-600"
+                    >
+                      <X className="h-3 w-3" />
+                    </button>
+                  </Badge>
+                )
+              })}
             </div>
           )}
 
@@ -370,31 +384,10 @@ export function NoteEditor({ note, onClose }: NoteEditorProps) {
               </DropdownMenu>
 
               {/* Label Manager */}
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" size="sm" title="Add label">
-                    <Tag className="h-4 w-4" />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent className="w-64">
-                  <div className="p-2 space-y-2">
-                    <Input
-                      placeholder="Enter label name"
-                      value={newLabel}
-                      onChange={(e) => setNewLabel(e.target.value)}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter') {
-                          e.preventDefault()
-                          handleAddLabel()
-                        }
-                      }}
-                    />
-                    <Button size="sm" onClick={handleAddLabel} className="w-full">
-                      Add Label
-                    </Button>
-                  </div>
-                </DropdownMenuContent>
-              </DropdownMenu>
+              <LabelManager
+                existingLabels={labels}
+                onUpdate={setLabels}
+              />
             </div>
 
             <div className="flex gap-2">