feat: implement label management with color filtering

keep-notes/components/header-wrapper.tsx

@@ -2,12 +2,19 @@
 
 import { Header } from './header'
 import { useSearchParams, useRouter } from 'next/navigation'
+import { useLabels } from '@/context/LabelContext'
 
-export function HeaderWrapper() {
+interface HeaderWrapperProps {
+  onColorFilterChange?: (color: string | null) => void
+}
+
+export function HeaderWrapper({ onColorFilterChange }: HeaderWrapperProps) {
   const searchParams = useSearchParams()
   const router = useRouter()
+  const { labels } = useLabels()
   
   const selectedLabels = searchParams.get('labels')?.split(',').filter(Boolean) || []
+  const selectedColor = searchParams.get('color') || null
 
   const handleLabelFilterChange = (labels: string[]) => {
     const params = new URLSearchParams(searchParams.toString())
@@ -21,5 +28,25 @@ export function HeaderWrapper() {
     router.push(`/?${params.toString()}`)
   }
 
-  return <Header selectedLabels={selectedLabels} onLabelFilterChange={handleLabelFilterChange} />
+  const handleColorFilterChange = (color: string | null) => {
+    const params = new URLSearchParams(searchParams.toString())
+    
+    if (color) {
+      params.set('color', color)
+    } else {
+      params.delete('color')
+    }
+
+    router.push(`/?${params.toString()}`)
+    onColorFilterChange?.(color)
+  }
+
+  return (
+    <Header
+      selectedLabels={selectedLabels}
+      selectedColor={selectedColor}
+      onLabelFilterChange={handleLabelFilterChange}
+      onColorFilterChange={handleColorFilterChange}
+    />
+  )
 }