Refactor Admin and Settings UI to Ethereal Precision aesthetic and improve note import/export functionality

memento-note/components/ai/ai-settings-panel.tsx

@@ -1,15 +1,13 @@
 'use client'
 
 import { useState } from 'react'
-import { Card } from '@/components/ui/card'
 import { Switch } from '@/components/ui/switch'
-import { Label } from '@/components/ui/label'
-import { Button } from '@/components/ui/button'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import { Label } from '@/components/ui/label'
 import { updateAISettings } from '@/app/actions/ai-settings'
 import { DemoModeToggle } from '@/components/demo-mode-toggle'
 import { toast } from 'sonner'
-import { Loader2 } from 'lucide-react'
+import { Loader2, Sparkles, Brain, Languages, Tag, History, Wand2 } from 'lucide-react'
 import { useLanguage } from '@/lib/i18n'
 
 interface AISettingsPanelProps {
@@ -35,17 +33,13 @@ export function AISettingsPanel({ initialSettings }: AISettingsPanelProps) {
   const { t } = useLanguage()
 
   const handleToggle = async (feature: string, value: boolean) => {
-    // Optimistic update
     setSettings(prev => ({ ...prev, [feature]: value }))
-
     try {
       setIsPending(true)
       await updateAISettings({ [feature]: value })
       toast.success(t('aiSettings.saved'))
-    } catch (error) {
-      console.error('Error updating setting:', error)
+    } catch {
       toast.error(t('aiSettings.error'))
-      // Revert on error
       setSettings(initialSettings)
     } finally {
       setIsPending(false)
@@ -54,31 +48,11 @@ export function AISettingsPanel({ initialSettings }: AISettingsPanelProps) {
 
   const handleFrequencyChange = async (value: 'daily' | 'weekly' | 'custom') => {
     setSettings(prev => ({ ...prev, memoryEchoFrequency: value }))
-
     try {
       setIsPending(true)
       await updateAISettings({ memoryEchoFrequency: value })
       toast.success(t('aiSettings.saved'))
-    } catch (error) {
-      console.error('Error updating frequency:', error)
-      toast.error(t('aiSettings.error'))
-      setSettings(initialSettings)
-    } finally {
-      setIsPending(false)
-    }
-  }
-
-
-
-  const handleLanguageChange = async (value: 'auto' | 'en' | 'fr' | 'es' | 'de' | 'fa' | 'it' | 'pt' | 'ru' | 'zh' | 'ja' | 'ko' | 'ar' | 'hi' | 'nl' | 'pl') => {
-    setSettings(prev => ({ ...prev, preferredLanguage: value }))
-
-    try {
-      setIsPending(true)
-      await updateAISettings({ preferredLanguage: value })
-      toast.success(t('aiSettings.saved'))
-    } catch (error) {
-      console.error('Error updating language:', error)
+    } catch {
       toast.error(t('aiSettings.error'))
       setSettings(initialSettings)
     } finally {
@@ -88,179 +62,154 @@ export function AISettingsPanel({ initialSettings }: AISettingsPanelProps) {
 
   const handleDemoModeToggle = async (enabled: boolean) => {
     setSettings(prev => ({ ...prev, demoMode: enabled }))
-
     try {
       setIsPending(true)
       await updateAISettings({ demoMode: enabled })
-    } catch (error) {
-      console.error('Error toggling demo mode:', error)
+    } catch {
       toast.error(t('aiSettings.error'))
       setSettings(initialSettings)
-      throw error
+      throw new Error()
     } finally {
       setIsPending(false)
     }
   }
 
+  const features = [
+    {
+      key: 'titleSuggestions',
+      icon: Wand2,
+      name: t('titleSuggestions.available').replace('💡 ', ''),
+      description: t('aiSettings.titleSuggestionsDesc'),
+      value: settings.titleSuggestions,
+    },
+    {
+      key: 'paragraphRefactor',
+      icon: Sparkles,
+      name: t('aiSettings.aiNote'),
+      description: t('aiSettings.aiNoteDesc'),
+      value: settings.paragraphRefactor,
+    },
+    {
+      key: 'memoryEcho',
+      icon: Brain,
+      name: t('memoryEcho.title'),
+      description: t('memoryEcho.dailyInsight'),
+      value: settings.memoryEcho,
+    },
+    {
+      key: 'languageDetection',
+      icon: Languages,
+      name: t('aiSettings.languageDetection'),
+      description: t('aiSettings.languageDetectionDesc'),
+      value: settings.languageDetection ?? true,
+    },
+    {
+      key: 'autoLabeling',
+      icon: Tag,
+      name: t('aiSettings.autoLabeling'),
+      description: t('aiSettings.autoLabelingDesc'),
+      value: settings.autoLabeling ?? true,
+    },
+    {
+      key: 'noteHistory',
+      icon: History,
+      name: t('aiSettings.noteHistory'),
+      description: t('aiSettings.noteHistoryDesc'),
+      value: settings.noteHistory ?? false,
+    },
+  ]
+
   return (
-    <div className="space-y-6">
+    <div className="space-y-8">
       {isPending && (
-        <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
           <Loader2 className="h-4 w-4 animate-spin" />
           {t('aiSettings.saving')}
         </div>
       )}
 
-      {/* Feature Toggles */}
-      <div className="space-y-4">
-        <h2 className="text-xl font-semibold">{t('aiSettings.features')}</h2>
-
-        <FeatureToggle
-          name={t('titleSuggestions.available').replace('💡 ', '')}
-          description={t('aiSettings.titleSuggestionsDesc')}
-          checked={settings.titleSuggestions}
-          onChange={(checked) => handleToggle('titleSuggestions', checked)}
-        />
-
-
-        <FeatureToggle
-          name={t('aiSettings.aiNote')}
-          description={t('aiSettings.aiNoteDesc')}
-          checked={settings.paragraphRefactor}
-          onChange={(checked) => handleToggle('paragraphRefactor', checked)}
-        />
-
-        <FeatureToggle
-          name={t('memoryEcho.title')}
-          description={t('memoryEcho.dailyInsight')}
-          checked={settings.memoryEcho}
-          onChange={(checked) => handleToggle('memoryEcho', checked)}
-        />
-
-        {settings.memoryEcho && (
-          <Card className="p-4 ml-6">
-            <Label htmlFor="frequency" className="text-sm font-medium">
-              {t('aiSettings.frequency')}
-            </Label>
-            <p className="text-xs text-gray-500 mb-3">
-              {t('aiSettings.frequencyDesc')}
-            </p>
-            <RadioGroup
-              value={settings.memoryEchoFrequency}
-              onValueChange={handleFrequencyChange}
+      {/* Feature toggles as cards */}
+      <div>
+        <h2 className="text-base font-semibold text-foreground mb-4">{t('aiSettings.features')}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {features.map(({ key, icon: Icon, name, description, value }) => (
+            <div
+              key={key}
+              className="bg-card rounded-lg border border-border p-5 shadow-sm flex items-start justify-between gap-4"
             >
-              <div className="flex items-center space-x-2">
-                <RadioGroupItem value="daily" id="daily" />
-                <Label htmlFor="daily" className="font-normal">
-                  {t('aiSettings.frequencyDaily')}
-                </Label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <RadioGroupItem value="weekly" id="weekly" />
-                <Label htmlFor="weekly" className="font-normal">
-                  {t('aiSettings.frequencyWeekly')}
-                </Label>
-              </div>
-            </RadioGroup>
-          </Card>
-        )}
-
-        {/* Language Detection Toggle */}
-        <FeatureToggle
-          name={t('aiSettings.languageDetection')}
-          description={t('aiSettings.languageDetectionDesc')}
-          checked={settings.languageDetection ?? true}
-          onChange={(checked) => handleToggle('languageDetection', checked)}
-        />
-
-        {/* Auto Labeling Toggle */}
-        <FeatureToggle
-          name={t('aiSettings.autoLabeling')}
-          description={t('aiSettings.autoLabelingDesc')}
-          checked={settings.autoLabeling ?? true}
-          onChange={(checked) => handleToggle('autoLabeling', checked)}
-        />
-
-        <FeatureToggle
-          name={t('aiSettings.noteHistory')}
-          description={t('aiSettings.noteHistoryDesc')}
-          checked={settings.noteHistory ?? false}
-          onChange={(checked) => handleToggle('noteHistory', checked)}
-        />
-
-        {settings.noteHistory && (
-          <div className="space-y-2 rounded-lg border border-border/50 bg-muted/30 p-3">
-            <p className="text-sm font-medium">{t('notes.historyMode')}</p>
-            <RadioGroup
-              value={settings.noteHistoryMode ?? 'manual'}
-              onValueChange={(value) => {
-                const mode = value as 'manual' | 'auto'
-                setSettings((s) => ({ ...s, noteHistoryMode: mode }))
-                updateAISettings({ noteHistoryMode: mode }).then(() => {
-                  toast.success(t('settings.settingsSaved'))
-                })
-              }}
-              className="space-y-2"
-            >
-              <div className="flex items-start gap-2">
-                <RadioGroupItem value="manual" id="history-manual" />
-                <div className="grid gap-0.5 leading-none">
-                  <Label htmlFor="history-manual" className="text-sm font-medium">
-                    {t('notes.historyModeManual')}
-                  </Label>
-                  <p className="text-xs text-muted-foreground">
-                    {t('notes.historyModeManualDesc')}
-                  </p>
+              <div className="flex items-start gap-3">
+                <div className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0 mt-0.5">
+                  <Icon className="h-4 w-4" />
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-foreground">{name}</p>
+                  <p className="text-xs text-muted-foreground mt-0.5">{description}</p>
                 </div>
               </div>
-              <div className="flex items-start gap-2">
-                <RadioGroupItem value="auto" id="history-auto" />
-                <div className="grid gap-0.5 leading-none">
-                  <Label htmlFor="history-auto" className="text-sm font-medium">
-                    {t('notes.historyModeAuto')}
-                  </Label>
-                  <p className="text-xs text-muted-foreground">
-                    {t('notes.historyModeAutoDesc')}
-                  </p>
-                </div>
-              </div>
-            </RadioGroup>
-          </div>
-        )}
-
-        {/* Demo Mode Toggle */}
-        <DemoModeToggle
-          demoMode={settings.demoMode}
-          onToggle={handleDemoModeToggle}
-        />
+              <button
+                type="button"
+                role="switch"
+                aria-checked={value}
+                onClick={() => handleToggle(key, !value)}
+                className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary/30 mt-0.5 ${value ? 'bg-primary' : 'bg-muted-foreground/30'}`}
+              >
+                <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${value ? 'translate-x-6' : 'translate-x-1'}`} />
+              </button>
+            </div>
+          ))}
+        </div>
       </div>
 
+      {/* Memory Echo frequency — shown when enabled */}
+      {settings.memoryEcho && (
+        <div className="bg-card rounded-lg border border-border p-5 shadow-sm">
+          <h3 className="text-sm font-semibold text-foreground mb-1">{t('aiSettings.frequency')}</h3>
+          <p className="text-xs text-muted-foreground mb-4">{t('aiSettings.frequencyDesc')}</p>
+          <RadioGroup value={settings.memoryEchoFrequency} onValueChange={handleFrequencyChange} className="space-y-2">
+            {[
+              { value: 'daily', label: t('aiSettings.frequencyDaily') },
+              { value: 'weekly', label: t('aiSettings.frequencyWeekly') },
+            ].map((opt) => (
+              <div key={opt.value} className="flex items-center space-x-2">
+                <RadioGroupItem value={opt.value} id={`freq-${opt.value}`} />
+                <Label htmlFor={`freq-${opt.value}`} className="font-normal text-sm cursor-pointer">{opt.label}</Label>
+              </div>
+            ))}
+          </RadioGroup>
+        </div>
+      )}
 
+      {/* Note History mode — shown when enabled */}
+      {settings.noteHistory && (
+        <div className="bg-card rounded-lg border border-border p-5 shadow-sm">
+          <h3 className="text-sm font-semibold text-foreground mb-1">{t('notes.historyMode')}</h3>
+          <RadioGroup
+            value={settings.noteHistoryMode ?? 'manual'}
+            onValueChange={(value) => {
+              const mode = value as 'manual' | 'auto'
+              setSettings(s => ({ ...s, noteHistoryMode: mode }))
+              updateAISettings({ noteHistoryMode: mode }).then(() => toast.success(t('settings.settingsSaved')))
+            }}
+            className="space-y-3 mt-3"
+          >
+            {[
+              { value: 'manual', label: t('notes.historyModeManual'), desc: t('notes.historyModeManualDesc') },
+              { value: 'auto', label: t('notes.historyModeAuto'), desc: t('notes.historyModeAutoDesc') },
+            ].map((opt) => (
+              <div key={opt.value} className="flex items-start gap-2">
+                <RadioGroupItem value={opt.value} id={`history-${opt.value}`} className="mt-0.5" />
+                <div>
+                  <Label htmlFor={`history-${opt.value}`} className="text-sm font-medium cursor-pointer">{opt.label}</Label>
+                  <p className="text-xs text-muted-foreground">{opt.desc}</p>
+                </div>
+              </div>
+            ))}
+          </RadioGroup>
+        </div>
+      )}
+
+      {/* Demo Mode */}
+      <DemoModeToggle demoMode={settings.demoMode} onToggle={handleDemoModeToggle} />
     </div>
   )
 }
-
-interface FeatureToggleProps {
-  name: string
-  description: string
-  checked: boolean
-  onChange: (checked: boolean) => void
-}
-
-function FeatureToggle({ name, description, checked, onChange }: FeatureToggleProps) {
-  return (
-    <Card className="p-4">
-      <div className="flex items-center justify-between">
-        <div className="space-y-1">
-          <Label className="text-base font-medium">{name}</Label>
-          <p className="text-sm text-gray-500">{description}</p>
-        </div>
-        <Switch
-          checked={checked}
-          onCheckedChange={onChange}
-          disabled={false}
-        />
-      </div>
-    </Card>
-  )
-}