refactor(ux): consolidate BMAD skills, update design system, and clean up Prisma generated client

keep-notes/components/settings-backup-1776541530/SettingsSearch.tsx

@@ -0,0 +1,105 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Search, X } from 'lucide-react'
+import { Input } from '@/components/ui/input'
+import { cn } from '@/lib/utils'
+import { useLanguage } from '@/lib/i18n'
+
+export interface Section {
+  id: string
+  label: string
+  description: string
+  icon: React.ReactNode
+  href: string
+}
+
+interface SettingsSearchProps {
+  sections: Section[]
+  onFilter: (filteredSections: Section[]) => void
+  placeholder?: string
+  className?: string
+}
+
+export function SettingsSearch({
+  sections,
+  onFilter,
+  placeholder,
+  className
+}: SettingsSearchProps) {
+  const { t } = useLanguage()
+  const [query, setQuery] = useState('')
+  const [filteredSections, setFilteredSections] = useState<Section[]>(sections)
+
+  const searchPlaceholder = placeholder || t('settings.searchNoResults') || 'Search settings...'
+
+  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) => handleSearchChange(e.target.value)}
+        placeholder={searchPlaceholder}
+        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={t('search.placeholder')}
+        >
+          <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">{t('settings.searchNoResults')}</p>
+        </div>
+      )}
+    </div>
+  )
+}