fix: unify theme system - fix theme switching persistence

- Unified localStorage key to 'theme-preference' across all components
- Fixed header.tsx using wrong localStorage key ('theme' instead of 'theme-preference')
- Added localStorage hybrid persistence for instant theme changes
- Removed router.refresh() which was causing stale data revert
- Replaced Blue theme with Sepia
- Consolidated auth() calls to prevent race conditions
- Updated UserSettingsData types to include all themes

keep-notes/components/settings/SettingsSearch.tsx

@@ -1,38 +1,101 @@
 'use client'
 
-import { useState } from 'react'
-import { Search } from 'lucide-react'
+import { useState, useEffect } from 'react'
+import { Search, X } from 'lucide-react'
 import { Input } from '@/components/ui/input'
 import { cn } from '@/lib/utils'
 
+export interface Section {
+  id: string
+  label: string
+  description: string
+  icon: React.ReactNode
+  href: string
+}
+
 interface SettingsSearchProps {
-  onSearch: (query: string) => void
+  sections: Section[]
+  onFilter: (filteredSections: Section[]) => void
   placeholder?: string
   className?: string
 }
 
 export function SettingsSearch({
-  onSearch,
+  sections,
+  onFilter,
   placeholder = 'Search settings...',
   className
 }: SettingsSearchProps) {
   const [query, setQuery] = useState('')
+  const [filteredSections, setFilteredSections] = useState<Section[]>(sections)
 
-  const handleChange = (value: string) => {
-    setQuery(value)
-    onSearch(value)
+  useEffect(() => {
+    if (!query.trim()) {
+      setFilteredSections(sections)
+      return
+    }
+
+    const queryLower = query.toLowerCase()
+    const filtered = sections.filter(section => {
+      const labelMatch = section.label.toLowerCase().includes(queryLower)
+      const descMatch = section.description.toLowerCase().includes(queryLower)
+      return labelMatch || descMatch
+    })
+    setFilteredSections(filtered)
+  }, [query, sections])
+
+  const handleClearSearch = () => {
+    setQuery('')
+    setFilteredSections(sections)
   }
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        handleClearSearch()
+        e.stopPropagation()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [])
+
+  const handleSearchChange = (value: string) => {
+    setQuery(value)
+  }
+
+  const hasResults = query.trim() && filteredSections.length < sections.length
+  const isEmptySearch = query.trim() && filteredSections.length === 0
+
   return (
     <div className={cn('relative', className)}>
       <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
       <Input
         type="text"
         value={query}
-        onChange={(e) => handleChange(e.target.value)}
+        onChange={(e) => handleSearchChange(e.target.value)}
         placeholder={placeholder}
         className="pl-10"
+        autoFocus
       />
+      {hasResults && (
+        <button
+          type="button"
+          onClick={handleClearSearch}
+          className="absolute right-2 top-1/2 text-gray-400 hover:text-gray-600"
+          aria-label="Clear search"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      )}
+      {isEmptySearch && (
+        <div className="absolute top-full left-0 right-0 mt-1 p-2 bg-white rounded-lg shadow-lg border z-50">
+          <p className="text-sm text-gray-600">No settings found</p>
+        </div>
+      )}
     </div>
   )
 }