feat: implement label management with color filtering

keep-notes/app/page.tsx

@@ -6,17 +6,20 @@ import { Note } from '@/lib/types'
 import { getNotes, searchNotes } from '@/app/actions/notes'
 import { NoteInput } from '@/components/note-input'
 import { NoteGrid } from '@/components/note-grid'
+import { useLabels } from '@/context/LabelContext'
 
 export default function HomePage() {
   const searchParams = useSearchParams()
   const [notes, setNotes] = useState<Note[]>([])
   const [isLoading, setIsLoading] = useState(true)
+  const { labels } = useLabels()
 
   useEffect(() => {
     const loadNotes = async () => {
       setIsLoading(true)
       const search = searchParams.get('search')
       const labelFilter = searchParams.get('labels')?.split(',').filter(Boolean) || []
+      const colorFilter = searchParams.get('color')
       
       let allNotes = search ? await searchNotes(search) : await getNotes()
 
@@ -27,12 +30,23 @@ export default function HomePage() {
         )
       }
 
+      // Filter by color (filter notes that have labels with this color)
+      if (colorFilter) {
+        const labelNamesWithColor = labels
+          .filter(label => label.color === colorFilter)
+          .map(label => label.name)
+        
+        allNotes = allNotes.filter(note =>
+          note.labels?.some(label => labelNamesWithColor.includes(label))
+        )
+      }
+
       setNotes(allNotes)
       setIsLoading(false)
     }
 
     loadNotes()
-  }, [searchParams])
+  }, [searchParams, labels])
 
   return (
     <main className="container mx-auto px-4 py-8 max-w-7xl">