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

memento-note/app/(main)/settings/data/page.tsx

@@ -1,9 +1,8 @@
 'use client'
 
 import { useState } from 'react'
-import { SettingsSection } from '@/components/settings'
 import { Button } from '@/components/ui/button'
-import { Download, Upload, Trash2, Loader2 } from 'lucide-react'
+import { Download, Upload, Trash2, Loader2, RefreshCw, Sparkles, Database } from 'lucide-react'
 import { toast } from 'sonner'
 import { useLanguage } from '@/lib/i18n'
 import { useRouter } from 'next/navigation'
@@ -14,6 +13,8 @@ export default function DataSettingsPage() {
   const [isExporting, setIsExporting] = useState(false)
   const [isImporting, setIsImporting] = useState(false)
   const [isDeleting, setIsDeleting] = useState(false)
+  const [isReindexing, setIsReindexing] = useState(false)
+  const [isCleaningUp, setIsCleaningUp] = useState(false)
 
   const handleExport = async () => {
     setIsExporting(true)
@@ -24,15 +25,16 @@ export default function DataSettingsPage() {
         const url = window.URL.createObjectURL(blob)
         const a = document.createElement('a')
         a.href = url
-        a.download = `memento-note-export-${new Date().toISOString().split('T')[0]}.json`
+        a.download = `memento-export-${new Date().toISOString().split('T')[0]}.json`
         document.body.appendChild(a)
         a.click()
         document.body.removeChild(a)
         window.URL.revokeObjectURL(url)
         toast.success(t('dataManagement.export.success'))
+      } else {
+        throw new Error()
       }
-    } catch (error) {
-      console.error('Export error:', error)
+    } catch {
       toast.error(t('dataManagement.export.failed'))
     } finally {
       setIsExporting(false)
@@ -42,47 +44,73 @@ export default function DataSettingsPage() {
   const handleImport = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0]
     if (!file) return
-
     setIsImporting(true)
     try {
       const formData = new FormData()
       formData.append('file', file)
-
-      const response = await fetch('/api/notes/import', {
-        method: 'POST',
-        body: formData
-      })
-
+      const response = await fetch('/api/notes/import', { method: 'POST', body: formData })
       if (response.ok) {
         const result = await response.json()
         toast.success(t('dataManagement.import.success', { count: result.count }))
         router.refresh()
       } else {
-        throw new Error('Import failed')
+        const error = await response.json()
+        throw new Error(error.error || 'Import failed')
       }
-    } catch (error) {
-      console.error('Import error:', error)
-      toast.error(t('dataManagement.import.failed'))
+    } catch (err: any) {
+      toast.error(err.message || t('dataManagement.import.failed'))
     } finally {
       setIsImporting(false)
       event.target.value = ''
     }
   }
 
-  const handleDeleteAll = async () => {
-    if (!confirm(t('dataManagement.delete.confirm'))) {
-      return
+  const handleReindex = async () => {
+    setIsReindexing(true)
+    try {
+      const response = await fetch('/api/notes/reindex', { method: 'POST' })
+      if (response.ok) {
+        const result = await response.json()
+        toast.success(t('dataManagement.indexing.success', { count: result.count }))
+      } else {
+        throw new Error()
+      }
+    } catch {
+      toast.error(t('dataManagement.indexing.failed'))
+    } finally {
+      setIsReindexing(false)
     }
+  }
 
+  const handleCleanup = async () => {
+    setIsCleaningUp(true)
+    try {
+      const response = await fetch('/api/notes/cleanup', { method: 'POST' })
+      if (response.ok) {
+        const result = await response.json()
+        toast.success(t('dataManagement.cleanup.success', { count: result.deletedLabels }))
+      } else {
+        throw new Error()
+      }
+    } catch {
+      toast.error(t('dataManagement.cleanup.failed'))
+    } finally {
+      setIsCleaningUp(false)
+    }
+  }
+
+  const handleDeleteAll = async () => {
+    if (!confirm(t('dataManagement.delete.confirm'))) return
     setIsDeleting(true)
     try {
       const response = await fetch('/api/notes/delete-all', { method: 'POST' })
       if (response.ok) {
         toast.success(t('dataManagement.delete.success'))
         router.refresh()
+      } else {
+        throw new Error()
       }
-    } catch (error) {
-      console.error('Delete error:', error)
+    } catch {
       toast.error(t('dataManagement.delete.failed'))
     } finally {
       setIsDeleting(false)
@@ -90,102 +118,114 @@ export default function DataSettingsPage() {
   }
 
   return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-3xl font-bold mb-2">{t('dataManagement.title')}</h1>
-        <p className="text-gray-600 dark:text-gray-400">
-          {t('dataManagement.toolsDescription')}
-        </p>
+    <div className="max-w-4xl mx-auto space-y-8 p-6">
+      <div className="space-y-1">
+        <h1 className="text-3xl font-bold tracking-tight text-foreground">{t('dataManagement.title')}</h1>
+        <p className="text-muted-foreground">{t('dataManagement.toolsDescription')}</p>
       </div>
 
-      <SettingsSection
-        title={`💾 ${t('dataManagement.export.title')}`}
-        icon={<span className="text-2xl">💾</span>}
-        description={t('dataManagement.export.description')}
-      >
-        <div className="flex items-center justify-between py-4">
-          <div>
-            <p className="font-medium">{t('dataManagement.export.title')}</p>
-            <p className="text-sm text-gray-600 dark:text-gray-400">
-              {t('dataManagement.export.description')}
-            </p>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Export card */}
+        <div className="bg-card rounded-xl border border-border p-6 shadow-sm flex flex-col justify-between transition-all hover:shadow-md">
+          <div className="space-y-4">
+            <div className="w-12 h-12 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-600 shrink-0">
+              <Download className="h-6 w-6" />
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold text-foreground">{t('dataManagement.export.title')}</h3>
+              <p className="text-sm text-muted-foreground mt-1 leading-relaxed">
+                {t('dataManagement.export.description')}
+              </p>
+            </div>
           </div>
-          <Button
-            onClick={handleExport}
-            disabled={isExporting}
-          >
-            {isExporting ? (
-              <Loader2 className="h-4 w-4 animate-spin mr-2" />
-            ) : (
-              <Download className="h-4 w-4 mr-2" />
-            )}
+          <Button onClick={handleExport} disabled={isExporting} className="mt-6 w-full">
+            {isExporting ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : <Download className="h-4 w-4 mr-2" />}
             {isExporting ? t('dataManagement.exporting') : t('dataManagement.export.button')}
           </Button>
         </div>
-      </SettingsSection>
 
-      <SettingsSection
-        title={`📥 ${t('dataManagement.import.title')}`}
-        icon={<span className="text-2xl">📥</span>}
-        description={t('dataManagement.import.description')}
-      >
-        <div className="flex items-center justify-between py-4">
-          <div>
-            <p className="font-medium">{t('dataManagement.import.title')}</p>
-            <p className="text-sm text-gray-600 dark:text-gray-400">
-              {t('dataManagement.import.description')}
-            </p>
+        {/* Import card */}
+        <div className="bg-card rounded-xl border border-border p-6 shadow-sm flex flex-col justify-between transition-all hover:shadow-md">
+          <div className="space-y-4">
+            <div className="w-12 h-12 rounded-full bg-emerald-500/10 flex items-center justify-center text-emerald-600 shrink-0">
+              <Upload className="h-6 w-6" />
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold text-foreground">{t('dataManagement.import.title')}</h3>
+              <p className="text-sm text-muted-foreground mt-1 leading-relaxed">
+                {t('dataManagement.import.description')}
+              </p>
+            </div>
+          </div>
+          <input type="file" accept=".json" onChange={handleImport} disabled={isImporting} className="hidden" id="import-file" />
+          <Button onClick={() => document.getElementById('import-file')?.click()} disabled={isImporting} variant="outline" className="mt-6 w-full">
+            {isImporting ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : <Upload className="h-4 w-4 mr-2" />}
+            {isImporting ? t('dataManagement.importing') : t('dataManagement.import.button')}
+          </Button>
+        </div>
+
+        {/* Reindex card */}
+        <div className="bg-card rounded-xl border border-border p-6 shadow-sm flex flex-col justify-between transition-all hover:shadow-md">
+          <div className="space-y-4">
+            <div className="w-12 h-12 rounded-full bg-amber-500/10 flex items-center justify-center text-amber-600 shrink-0">
+              <Sparkles className="h-6 w-6" />
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold text-foreground">{t('dataManagement.indexing.title')}</h3>
+              <p className="text-sm text-muted-foreground mt-1 leading-relaxed">
+                {t('dataManagement.indexing.description')}
+              </p>
+            </div>
+          </div>
+          <Button onClick={handleReindex} disabled={isReindexing} variant="secondary" className="mt-6 w-full">
+            {isReindexing ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : <RefreshCw className="h-4 w-4 mr-2" />}
+            {isReindexing ? t('dataManagement.exporting') : t('dataManagement.indexing.button')}
+          </Button>
+        </div>
+
+        {/* Cleanup card */}
+        <div className="bg-card rounded-xl border border-border p-6 shadow-sm flex flex-col justify-between transition-all hover:shadow-md">
+          <div className="space-y-4">
+            <div className="w-12 h-12 rounded-full bg-purple-500/10 flex items-center justify-center text-purple-600 shrink-0">
+              <Database className="h-6 w-6" />
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold text-foreground">{t('dataManagement.cleanup.title')}</h3>
+              <p className="text-sm text-muted-foreground mt-1 leading-relaxed">
+                {t('dataManagement.cleanup.description')}
+              </p>
+            </div>
+          </div>
+          <Button onClick={handleCleanup} disabled={isCleaningUp} variant="secondary" className="mt-6 w-full">
+            {isCleaningUp ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : <Database className="h-4 w-4 mr-2" />}
+            {isCleaningUp ? t('dataManagement.exporting') : t('dataManagement.cleanup.button')}
+          </Button>
+        </div>
+      </div>
+
+      {/* Danger zone */}
+      <div className="bg-destructive/5 rounded-xl border border-destructive/20 p-6 shadow-sm mt-12">
+        <div className="flex items-center gap-4 mb-6">
+          <div className="w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center text-destructive shrink-0">
+            <Trash2 className="h-6 w-6" />
           </div>
           <div>
-            <input
-              type="file"
-              accept=".json"
-              onChange={handleImport}
-              disabled={isImporting}
-              className="hidden"
-              id="import-file"
-            />
-            <Button
-              onClick={() => document.getElementById('import-file')?.click()}
-              disabled={isImporting}
-            >
-              {isImporting ? (
-                <Loader2 className="h-4 w-4 animate-spin mr-2" />
-              ) : (
-                <Upload className="h-4 w-4 mr-2" />
-              )}
-              {isImporting ? t('dataManagement.importing') : t('dataManagement.import.button')}
-            </Button>
+            <h3 className="text-xl font-bold text-destructive">{t('dataManagement.dangerZone')}</h3>
+            <p className="text-sm text-muted-foreground">{t('dataManagement.dangerZoneDescription')}</p>
           </div>
         </div>
-      </SettingsSection>
-
-      <SettingsSection
-        title={`⚠️ ${t('dataManagement.dangerZone')}`}
-        icon={<span className="text-2xl">⚠️</span>}
-        description={t('dataManagement.dangerZoneDescription')}
-      >
-        <div className="flex items-center justify-between py-4 border-t border-red-200 dark:border-red-900">
-          <div>
-            <p className="font-medium text-red-600 dark:text-red-400">{t('dataManagement.delete.title')}</p>
-            <p className="text-sm text-gray-600 dark:text-gray-400">
-              {t('dataManagement.delete.description')}
-            </p>
+        
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-4 bg-background/50 rounded-lg border border-destructive/10 gap-4">
+          <div className="space-y-1">
+            <p className="font-semibold text-destructive">{t('dataManagement.delete.title')}</p>
+            <p className="text-sm text-muted-foreground">{t('dataManagement.delete.description')}</p>
           </div>
-          <Button
-            variant="destructive"
-            onClick={handleDeleteAll}
-            disabled={isDeleting}
-          >
-            {isDeleting ? (
-              <Loader2 className="h-4 w-4 animate-spin mr-2" />
-            ) : (
-              <Trash2 className="h-4 w-4 mr-2" />
-            )}
+          <Button variant="destructive" onClick={handleDeleteAll} disabled={isDeleting} className="shrink-0 w-full sm:w-auto">
+            {isDeleting ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : <Trash2 className="h-4 w-4 mr-2" />}
             {isDeleting ? t('dataManagement.deleting') : t('dataManagement.delete.button')}
           </Button>
         </div>
-      </SettingsSection>
+      </div>
     </div>
   )
 }