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

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

@@ -0,0 +1,87 @@
+'use client'
+
+import { useState } from 'react'
+import { Label } from '@/components/ui/label'
+import { Loader2, Check } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { toast } from 'sonner'
+import { useLanguage } from '@/lib/i18n'
+
+interface SettingInputProps {
+  label: string
+  description?: string
+  value: string
+  type?: 'text' | 'password' | 'email' | 'url'
+  onChange: (value: string) => Promise<void>
+  placeholder?: string
+  disabled?: boolean
+}
+
+export function SettingInput({
+  label,
+  description,
+  value,
+  type = 'text',
+  onChange,
+  placeholder,
+  disabled
+}: SettingInputProps) {
+  const { t } = useLanguage()
+  const [isLoading, setIsLoading] = useState(false)
+  const [isSaved, setIsSaved] = useState(false)
+
+  const handleChange = async (newValue: string) => {
+    setIsLoading(true)
+    setIsSaved(false)
+
+    try {
+      await onChange(newValue)
+      setIsSaved(true)
+      toast.success(t('toast.saved'))
+
+      setTimeout(() => setIsSaved(false), 2000)
+    } catch (err) {
+      console.error('Error updating setting:', err)
+      toast.error(t('toast.saveFailed'))
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className={cn('py-4', 'border-b last:border-0 dark:border-gray-800')}>
+      <Label className="font-medium text-gray-900 dark:text-gray-100 block mb-1">
+        {label}
+      </Label>
+      {description && (
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+          {description}
+        </p>
+      )}
+      <div className="relative">
+        <input
+          type={type}
+          value={value}
+          onChange={(e) => handleChange(e.target.value)}
+          placeholder={placeholder}
+          disabled={disabled || isLoading}
+          className={cn(
+            'w-full px-3 py-2 border rounded-lg',
+            'focus:ring-2 focus:ring-primary-500 focus:border-transparent',
+            'disabled:opacity-50 disabled:cursor-not-allowed',
+            'bg-white dark:bg-gray-900',
+            'border-gray-300 dark:border-gray-700',
+            'text-gray-900 dark:text-gray-100',
+            'placeholder:text-gray-400 dark:placeholder:text-gray-600'
+          )}
+        />
+        {isLoading && (
+          <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-gray-500" />
+        )}
+        {isSaved && !isLoading && (
+          <Check className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-green-500" />
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,86 @@
+'use client'
+
+import { useState } from 'react'
+import { Label } from '@/components/ui/label'
+import { Loader2 } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { toast } from 'sonner'
+import { useLanguage } from '@/lib/i18n'
+
+interface SelectOption {
+  value: string
+  label: string
+  description?: string
+}
+
+interface SettingSelectProps {
+  label: string
+  description?: string
+  value: string
+  options: SelectOption[]
+  onChange: (value: string) => Promise<void>
+  disabled?: boolean
+}
+
+export function SettingSelect({
+  label,
+  description,
+  value,
+  options,
+  onChange,
+  disabled
+}: SettingSelectProps) {
+  const { t } = useLanguage()
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleChange = async (newValue: string) => {
+    setIsLoading(true)
+
+    try {
+      await onChange(newValue)
+      toast.success(t('toast.saved'))
+    } catch (err) {
+      console.error('Error updating setting:', err)
+      toast.error(t('toast.saveFailed'))
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className={cn('py-4', 'border-b last:border-0 dark:border-gray-800')}>
+      <Label className="font-medium text-gray-900 dark:text-gray-100 block mb-1">
+        {label}
+      </Label>
+      {description && (
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+          {description}
+        </p>
+      )}
+      <div className="relative">
+        <select
+          value={value}
+          onChange={(e) => handleChange(e.target.value)}
+          disabled={disabled || isLoading}
+          className={cn(
+            'w-full px-3 py-2 border rounded-lg',
+            'focus:ring-2 focus:ring-primary-500 focus:border-transparent',
+            'disabled:opacity-50 disabled:cursor-not-allowed',
+            'appearance-none bg-white dark:bg-gray-900',
+            'border-gray-300 dark:border-gray-700',
+            'text-gray-900 dark:text-gray-100'
+          )}
+        >
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        {isLoading && (
+          <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-gray-500" />
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,73 @@
+'use client'
+
+import { useState } from 'react'
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+import { Loader2, Check, X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { toast } from 'sonner'
+import { useLanguage } from '@/lib/i18n'
+
+interface SettingToggleProps {
+  label: string
+  description?: string
+  checked: boolean
+  onChange: (checked: boolean) => Promise<void>
+  disabled?: boolean
+}
+
+export function SettingToggle({
+  label,
+  description,
+  checked,
+  onChange,
+  disabled
+}: SettingToggleProps) {
+  const { t } = useLanguage()
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState(false)
+
+  const handleChange = async (newChecked: boolean) => {
+    setIsLoading(true)
+    setError(false)
+
+    try {
+      await onChange(newChecked)
+      toast.success(t('toast.saved'))
+    } catch (err) {
+      console.error('Error updating setting:', err)
+      setError(true)
+      toast.error(t('toast.saveFailed'))
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className={cn(
+      'flex items-center justify-between py-4',
+      'border-b last:border-0 dark:border-gray-800'
+    )}>
+      <div className="flex-1 pr-4">
+        <Label className="font-medium text-gray-900 dark:text-gray-100 cursor-pointer">
+          {label}
+        </Label>
+        {description && (
+          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+            {description}
+          </p>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        {isLoading && <Loader2 className="h-4 w-4 animate-spin text-gray-500" />}
+        {!isLoading && !error && checked && <Check className="h-4 w-4 text-green-500" />}
+        {!isLoading && !error && !checked && <X className="h-4 w-4 text-gray-400" />}
+        <Switch
+          checked={checked}
+          onCheckedChange={handleChange}
+          disabled={disabled || isLoading}
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,97 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { Settings, Sparkles, Palette, User, Database, Info, Check, Key } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { useLanguage } from '@/lib/i18n'
+
+interface SettingsSection {
+  id: string
+  label: string
+  icon: React.ReactNode
+  href: string
+}
+
+interface SettingsNavProps {
+  className?: string
+}
+
+export function SettingsNav({ className }: SettingsNavProps) {
+  const pathname = usePathname()
+  const { t } = useLanguage()
+
+  const sections: SettingsSection[] = [
+    {
+      id: 'general',
+      label: t('generalSettings.title'),
+      icon: <Settings className="h-5 w-5" />,
+      href: '/settings/general'
+    },
+    {
+      id: 'ai',
+      label: t('aiSettings.title'),
+      icon: <Sparkles className="h-5 w-5" />,
+      href: '/settings/ai'
+    },
+    {
+      id: 'appearance',
+      label: t('appearance.title'),
+      icon: <Palette className="h-5 w-5" />,
+      href: '/settings/appearance'
+    },
+    {
+      id: 'profile',
+      label: t('profile.title'),
+      icon: <User className="h-5 w-5" />,
+      href: '/settings/profile'
+    },
+    {
+      id: 'data',
+      label: t('dataManagement.title'),
+      icon: <Database className="h-5 w-5" />,
+      href: '/settings/data'
+    },
+    {
+      id: 'mcp',
+      label: t('mcpSettings.title'),
+      icon: <Key className="h-5 w-5" />,
+      href: '/settings/mcp'
+    },
+    {
+      id: 'about',
+      label: t('about.title'),
+      icon: <Info className="h-5 w-5" />,
+      href: '/settings/about'
+    }
+  ]
+
+  const isActive = (href: string) => pathname === href || pathname.startsWith(href + '/')
+
+  return (
+    <nav className={cn('space-y-1', className)}>
+      {sections.map((section) => (
+        <Link
+          key={section.id}
+          href={section.href}
+          className={cn(
+            'flex items-center gap-3 px-4 py-3 rounded-lg transition-colors',
+            'hover:bg-gray-100 dark:hover:bg-gray-800',
+            isActive(section.href)
+              ? 'bg-gray-100 dark:bg-gray-800 text-primary'
+              : 'text-gray-700 dark:text-gray-300'
+          )}
+        >
+          {isActive(section.href) && (
+            <Check className="h-4 w-4 text-primary" />
+          )}
+          {!isActive(section.href) && (
+            <div className="w-4" />
+          )}
+          {section.icon}
+          <span className="font-medium">{section.label}</span>
+        </Link>
+      ))}
+    </nav>
+  )
+}

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>
+  )
+}

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

@@ -0,0 +1,36 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+interface SettingsSectionProps {
+  title: string
+  description?: string
+  icon?: React.ReactNode
+  children: React.ReactNode
+  className?: string
+}
+
+export function SettingsSection({
+  title,
+  description,
+  icon,
+  children,
+  className
+}: SettingsSectionProps) {
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          {icon}
+          {title}
+        </CardTitle>
+        {description && (
+          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+            {description}
+          </p>
+        )}
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {children}
+      </CardContent>
+    </Card>
+  )
+}

keep-notes/components/settings-backup-1776541530/index.ts

@@ -0,0 +1,6 @@
+export { SettingsNav } from './SettingsNav'
+export { SettingsSection } from './SettingsSection'
+export { SettingToggle } from './SettingToggle'
+export { SettingSelect } from './SettingSelect'
+export { SettingInput } from './SettingInput'
+export { SettingsSearch } from './SettingsSearch'