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

memento-note/components/settings/SettingsNav.tsx

@@ -2,7 +2,7 @@
 
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { Settings, Sparkles, Palette, User, Database, Info, Check, Key } from 'lucide-react'
+import { Settings, Sparkles, Palette, User, Database, Info, Key } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { useLanguage } from '@/lib/i18n'
 
@@ -22,74 +22,32 @@ export function SettingsNav({ className }: SettingsNavProps) {
   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'
-    }
+    { id: 'general', label: t('generalSettings.title'), icon: <Settings className="h-4 w-4" />, href: '/settings/general' },
+    { id: 'ai', label: t('aiSettings.title'), icon: <Sparkles className="h-4 w-4" />, href: '/settings/ai' },
+    { id: 'appearance', label: t('appearance.title'), icon: <Palette className="h-4 w-4" />, href: '/settings/appearance' },
+    { id: 'profile', label: t('profile.title'), icon: <User className="h-4 w-4" />, href: '/settings/profile' },
+    { id: 'data', label: t('dataManagement.title'), icon: <Database className="h-4 w-4" />, href: '/settings/data' },
+    { id: 'mcp', label: t('mcpSettings.title'), icon: <Key className="h-4 w-4" />, href: '/settings/mcp' },
+    { id: 'about', label: t('about.title'), icon: <Info className="h-4 w-4" />, href: '/settings/about' },
   ]
 
   const isActive = (href: string) => pathname === href || pathname.startsWith(href + '/')
 
   return (
-    <nav className={cn('space-y-1', className)}>
+    <nav className={cn('flex items-center gap-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',
+            'flex items-center gap-2 px-3 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap',
             isActive(section.href)
-              ? 'bg-gray-100 dark:bg-gray-800 text-primary'
-              : 'text-gray-700 dark:text-gray-300'
+              ? 'border-primary text-primary'
+              : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
           )}
         >
-          {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>
+          <span>{section.label}</span>
         </Link>
       ))}
     </nav>