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

memento-note/app/(main)/settings/profile/profile-form.tsx

@@ -1,179 +1,92 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { useRouter } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
-import { Label } from '@/components/ui/label'
-import { Switch } from '@/components/ui/switch'
-
-import { updateProfile, changePassword, updateFontSize, updateShowRecentNotes } from '@/app/actions/profile'
+import { updateProfile, changePassword } from '@/app/actions/profile'
 import { toast } from 'sonner'
 import { useLanguage } from '@/lib/i18n'
-
-
+import { User, Lock } from 'lucide-react'
 
 export function ProfileForm({ user, userAISettings }: { user: any; userAISettings?: any }) {
-  const router = useRouter()
-
-  const [fontSize, setFontSize] = useState(userAISettings?.fontSize || 'medium')
-  const [isUpdatingFontSize, setIsUpdatingFontSize] = useState(false)
-  const [showRecentNotes, setShowRecentNotes] = useState(userAISettings?.showRecentNotes ?? false)
-  const [isUpdatingRecentNotes, setIsUpdatingRecentNotes] = useState(false)
   const { t } = useLanguage()
 
-  const FONT_SIZES = [
-    { value: 'small', label: t('profile.fontSizeSmall'), size: '14px' },
-    { value: 'medium', label: t('profile.fontSizeMedium'), size: '16px' },
-    { value: 'large', label: t('profile.fontSizeLarge'), size: '18px' },
-    { value: 'extra-large', label: t('profile.fontSizeExtraLarge'), size: '20px' },
-  ]
-
-  const handleFontSizeChange = async (size: string) => {
-    setIsUpdatingFontSize(true)
-    try {
-      const result = await updateFontSize(size)
-      if (result?.error) {
-        toast.error(t('profile.fontSizeUpdateFailed'))
-      } else {
-        setFontSize(size)
-        // Apply font size immediately
-        applyFontSize(size)
-        toast.success(t('profile.fontSizeUpdateSuccess'))
-      }
-    } catch (error) {
-      toast.error(t('profile.fontSizeUpdateFailed'))
-    } finally {
-      setIsUpdatingFontSize(false)
-    }
-  }
-
-  const applyFontSize = (size: string) => {
-    // Base font size in pixels (16px is standard)
-    const fontSizeMap = {
-      'small': '14px',    // ~87% of 16px
-      'medium': '16px',   // 100% (standard)
-      'large': '18px',    // ~112% of 16px
-      'extra-large': '20px' // 125% of 16px
-    }
-    const fontSizeFactorMap = {
-      'small': 0.95,
-      'medium': 1.0,
-      'large': 1.1,
-      'extra-large': 1.25
-    }
-    const fontSizeValue = fontSizeMap[size as keyof typeof fontSizeMap] || '16px'
-    const fontSizeFactor = fontSizeFactorMap[size as keyof typeof fontSizeFactorMap] || 1.0
-
-    document.documentElement.style.setProperty('--user-font-size', fontSizeValue)
-    document.documentElement.style.setProperty('--user-font-size-factor', fontSizeFactor.toString())
-    localStorage.setItem('user-font-size', size)
-  }
-
-  // Apply saved font size on mount
-  useEffect(() => {
-    const savedFontSize = localStorage.getItem('user-font-size') || userAISettings?.fontSize || 'medium'
-    applyFontSize(savedFontSize as string)
-  }, [])
-
-
-
-  const handleShowRecentNotesChange = async (enabled: boolean) => {
-    setIsUpdatingRecentNotes(true)
-    const previousValue = showRecentNotes
-
-    try {
-      const result = await updateShowRecentNotes(enabled)
-      if (result?.error) {
-        toast.error(result.error)
-      } else {
-        setShowRecentNotes(enabled)
-        toast.success(t('profile.recentNotesUpdateSuccess') || 'Paramètre mis à jour')
-        // Force full page reload to ensure settings are reloaded
-        window.location.href = '/settings/profile'
-      }
-    } catch (error: any) {
-      setShowRecentNotes(previousValue)
-      toast.error(error?.message || 'Erreur')
-    } finally {
-      setIsUpdatingRecentNotes(false)
-    }
-  }
-
   return (
-    <div className="space-y-6">
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('profile.title')}</CardTitle>
-          <CardDescription>{t('profile.description')}</CardDescription>
-        </CardHeader>
-        <form action={async (formData) => {
-          const result = await updateProfile({ name: formData.get('name') as string })
-          if (result?.error) {
-            toast.error(t('profile.updateFailed'))
-          } else {
-            toast.success(t('profile.updateSuccess'))
-          }
-        }}>
-          <CardContent className="space-y-4">
-            <div className="space-y-2">
-              <label htmlFor="name" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{t('profile.displayName')}</label>
-              <Input id="name" name="name" defaultValue={user.name} />
-            </div>
-            <div className="space-y-2">
-              <label htmlFor="email" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{t('profile.email')}</label>
-              <Input id="email" value={user.email} disabled className="bg-muted" />
-            </div>
-          </CardContent>
-          <CardFooter>
-            <Button type="submit">{t('general.save')}</Button>
-          </CardFooter>
-        </form>
-      </Card>
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight text-foreground">{t('profile.title')}</h1>
+        <p className="text-muted-foreground mt-1">{t('profile.description')}</p>
+      </div>
 
-
-
-
-
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('profile.changePassword')}</CardTitle>
-          <CardDescription>{t('profile.changePasswordDescription')}</CardDescription>
-        </CardHeader>
-        <form action={async (formData) => {
-          const result = await changePassword(formData)
-          if (result?.error) {
-            const msg = '_form' in result.error
-              ? result.error._form[0]
-              : result.error.currentPassword?.[0] || result.error.newPassword?.[0] || result.error.confirmPassword?.[0] || t('profile.passwordChangeFailed')
-            toast.error(msg)
-          } else {
-            toast.success(t('profile.passwordChangeSuccess'))
-            // Reset form manually or redirect
-            const form = document.querySelector('form#password-form') as HTMLFormElement
-            form?.reset()
-          }
-        }} id="password-form">
-          <CardContent className="space-y-4">
-            <div className="space-y-2">
-              <label htmlFor="currentPassword" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{t('profile.currentPassword')}</label>
-              <Input id="currentPassword" name="currentPassword" type="password" required />
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Profile info card */}
+        <div className="bg-card rounded-lg border border-border p-6 shadow-sm flex flex-col gap-4">
+          <div className="flex items-center gap-3 mb-2">
+            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
+              <User className="h-5 w-5" />
             </div>
-            <div className="space-y-2">
-              <label htmlFor="newPassword" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{t('profile.newPassword')}</label>
-              <Input id="newPassword" name="newPassword" type="password" required minLength={6} />
+            <div>
+              <h3 className="font-semibold text-foreground">{t('profile.title')}</h3>
+              <p className="text-sm text-muted-foreground">{t('profile.description')}</p>
             </div>
-            <div className="space-y-2">
-              <label htmlFor="confirmPassword" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{t('profile.confirmPassword')}</label>
-              <Input id="confirmPassword" name="confirmPassword" type="password" required minLength={6} />
+          </div>
+          <form action={async (formData) => {
+            const result = await updateProfile({ name: formData.get('name') as string })
+            if (result?.error) toast.error(t('profile.updateFailed'))
+            else toast.success(t('profile.updateSuccess'))
+          }} className="space-y-4">
+            <div className="space-y-1.5">
+              <label htmlFor="name" className="text-sm font-medium text-foreground">{t('profile.displayName')}</label>
+              <Input id="name" name="name" defaultValue={user.name} className="bg-muted border-border focus:border-primary" />
             </div>
-          </CardContent>
-          <CardFooter>
-            <Button type="submit">{t('profile.updatePassword')}</Button>
-          </CardFooter>
-        </form>
-      </Card>
+            <div className="space-y-1.5">
+              <label htmlFor="email" className="text-sm font-medium text-foreground">{t('profile.email')}</label>
+              <Input id="email" value={user.email} disabled className="bg-muted border-border opacity-60" />
+            </div>
+            <Button type="submit" className="w-full mt-2">{t('general.save')}</Button>
+          </form>
+        </div>
+
+        {/* Password card */}
+        <div className="bg-card rounded-lg border border-border p-6 shadow-sm flex flex-col gap-4">
+          <div className="flex items-center gap-3 mb-2">
+            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
+              <Lock className="h-5 w-5" />
+            </div>
+            <div>
+              <h3 className="font-semibold text-foreground">{t('profile.changePassword')}</h3>
+              <p className="text-sm text-muted-foreground">{t('profile.changePasswordDescription')}</p>
+            </div>
+          </div>
+          <form action={async (formData) => {
+            const result = await changePassword(formData)
+            if (result?.error) {
+              const msg = '_form' in result.error
+                ? result.error._form[0]
+                : result.error.currentPassword?.[0] || result.error.newPassword?.[0] || result.error.confirmPassword?.[0] || t('profile.passwordChangeFailed')
+              toast.error(msg)
+            } else {
+              toast.success(t('profile.passwordChangeSuccess'))
+              const form = document.querySelector('form#password-form') as HTMLFormElement
+              form?.reset()
+            }
+          }} id="password-form" className="space-y-4">
+            <div className="space-y-1.5">
+              <label htmlFor="currentPassword" className="text-sm font-medium text-foreground">{t('profile.currentPassword')}</label>
+              <Input id="currentPassword" name="currentPassword" type="password" required className="bg-muted border-border focus:border-primary" />
+            </div>
+            <div className="space-y-1.5">
+              <label htmlFor="newPassword" className="text-sm font-medium text-foreground">{t('profile.newPassword')}</label>
+              <Input id="newPassword" name="newPassword" type="password" required minLength={6} className="bg-muted border-border focus:border-primary" />
+            </div>
+            <div className="space-y-1.5">
+              <label htmlFor="confirmPassword" className="text-sm font-medium text-foreground">{t('profile.confirmPassword')}</label>
+              <Input id="confirmPassword" name="confirmPassword" type="password" required minLength={6} className="bg-muted border-border focus:border-primary" />
+            </div>
+            <Button type="submit" className="w-full mt-2">{t('profile.updatePassword')}</Button>
+          </form>
+        </div>
+      </div>
     </div>
   )
 }