feat: implement label management with color filtering

keep-notes/components/note-input.tsx

@@ -5,14 +5,14 @@ import { Card } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Button } from '@/components/ui/button'
-import { 
-  CheckSquare, 
-  X, 
-  Bell, 
-  Image, 
-  UserPlus, 
-  Palette, 
-  Archive, 
+import {
+  CheckSquare,
+  X,
+  Bell,
+  Image,
+  UserPlus,
+  Palette,
+  Archive,
   MoreVertical,
   Undo2,
   Redo2,
@@ -31,13 +31,14 @@ import {
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { cn } from '@/lib/utils'
 import { useToast } from '@/components/ui/toast'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
 import { MarkdownContent } from './markdown-content'
+import { LabelSelector } from './label-selector'
+import { LabelBadge } from './label-badge'
 
 interface HistoryState {
   title: string
@@ -58,6 +59,7 @@ export function NoteInput() {
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [color, setColor] = useState<NoteColor>('default')
   const [isArchived, setIsArchived] = useState(false)
+  const [selectedLabels, setSelectedLabels] = useState<string[]>([])
   const fileInputRef = useRef<HTMLInputElement>(null)
   
   // Simple state without complex undo/redo - like Google Keep
@@ -240,6 +242,7 @@ export function NoteInput() {
         images: images.length > 0 ? images : undefined,
         reminder: currentReminder,
         isMarkdown,
+        labels: selectedLabels.length > 0 ? selectedLabels : undefined,
       })
 
       // Reset form
@@ -256,6 +259,7 @@ export function NoteInput() {
       setColor('default')
       setIsArchived(false)
       setCurrentReminder(null)
+      setSelectedLabels([])
       
       addToast('Note created successfully', 'success')
     } catch (error) {
@@ -288,12 +292,15 @@ export function NoteInput() {
     setContent('')
     setCheckItems([])
     setImages([])
+    setIsMarkdown(false)
+    setShowMarkdownPreview(false)
     setHistory([{ title: '', content: '' }])
     setHistoryIndex(0)
     setType('text')
     setColor('default')
     setIsArchived(false)
     setCurrentReminder(null)
+    setSelectedLabels([])
   }
 
   if (!isExpanded) {
@@ -364,6 +371,16 @@ export function NoteInput() {
 
         {type === 'text' ? (
           <div className="space-y-2">
+            {/* Labels selector */}
+            <div className="flex items-center gap-2 mb-2">
+              <LabelSelector
+                selectedLabels={selectedLabels}
+                onLabelsChange={setSelectedLabels}
+                triggerLabel="Tags"
+                align="start"
+              />
+            </div>
+
             {/* Markdown toggle button */}
             {isMarkdown && (
               <div className="flex justify-end gap-2">