feat(translate): refonte du design de la page de traduction et du sélecteur de moteurs (Etapes 1-3)

frontend/src/app/dashboard/translate/LanguageSelector.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useRef, useEffect, useCallback } from 'react';
-import { Loader2, AlertCircle, ChevronDown, Check } from 'lucide-react';
+import { Loader2, AlertCircle, ChevronDown, Check, ArrowRightLeft } from 'lucide-react';
 import { useI18n } from '@/lib/i18n';
 import { cn } from '@/lib/utils';
 import type { Language } from './types';
@@ -61,35 +61,33 @@ function Combobox({
   const label = value === 'auto' ? autoLabel : allOptions.find(l => l.code === value)?.name ?? value;
 
   return (
-    <div ref={ref} className="relative">
+    <div ref={ref} className="relative text-left">
       <button
         type="button"
         onClick={() => setOpen(!open)}
         className={cn(
-          'flex w-full items-center justify-between rounded-lg border px-3 py-2 text-sm transition-colors',
-          open
-            ? 'border-primary ring-2 ring-primary/15 outline-none'
-            : 'border-border bg-background hover:border-muted-foreground/40'
+          'w-full py-2 px-3 bg-brand-muted/60 dark:bg-white/5 rounded-xl border text-[10px] font-bold uppercase tracking-wider text-brand-dark dark:text-white flex items-center justify-between hover:border-brand-accent/50 transition-all select-none cursor-pointer',
+          open ? 'border-brand-accent/50' : 'border-brand-accent/20 dark:border-white/10'
         )}
       >
-        <span className="truncate text-foreground">{label || placeholder}</span>
-        <ChevronDown className={cn('size-4 shrink-0 text-muted-foreground transition-transform ms-2', open && 'rotate-180')} />
+        <span className="truncate">{label || placeholder}</span>
+        <ChevronDown className={cn('size-3 shrink-0 text-brand-accent transition-transform ms-2', open && 'rotate-180')} />
       </button>
       {open && (
-        <div className="absolute top-full left-0 right-0 z-50 mt-1 overflow-hidden rounded-lg border border-border bg-popover shadow-md">
-          <div className="border-b border-border px-2 py-1.5">
+        <div className="absolute top-[102%] right-0 left-0 bg-white dark:bg-[#1a1a1a] border border-black/10 dark:border-white/10 rounded-xl shadow-2xl p-2 z-50 max-h-48 overflow-y-auto animate-fade-in">
+          <div className="border-b border-black/5 dark:border-white/5 px-2 py-1">
             <input
               ref={inputRef}
               type="text"
               value={query}
               onChange={e => setQuery(e.target.value)}
               placeholder="Search..."
-              className="w-full bg-transparent px-1 py-1 text-sm outline-none placeholder:text-muted-foreground"
+              className="w-full bg-transparent px-1 py-1 text-[10px] outline-none placeholder:text-brand-dark/30 dark:placeholder:text-white/30 text-brand-dark dark:text-white"
             />
           </div>
-          <div className="max-h-[200px] overflow-y-auto p-1">
+          <div className="max-h-[160px] overflow-y-auto p-1 mt-1 space-y-0.5">
             {filtered.length === 0 && (
-              <div className="px-3 py-3 text-center text-xs text-muted-foreground">No results</div>
+              <div className="px-3 py-3 text-center text-[9px] text-brand-dark/40 dark:text-white/40">No results</div>
             )}
             {filtered.map(lang => (
               <button
@@ -97,14 +95,14 @@ function Combobox({
                 type="button"
                 onClick={() => { onChange(lang.code); setOpen(false); setQuery(''); }}
                 className={cn(
-                  'flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-sm transition-colors',
+                  'flex w-full items-center justify-between rounded-lg px-2.5 py-1.5 text-[9px] font-bold uppercase tracking-wider transition-colors cursor-pointer',
                   value === lang.code
-                    ? 'bg-primary/10 text-primary font-medium'
-                    : 'text-foreground hover:bg-muted'
+                    ? 'bg-brand-accent/10 text-brand-accent'
+                    : 'text-brand-dark/70 dark:text-white/70 hover:bg-brand-muted dark:hover:bg-white/5'
                 )}
               >
-                <span className="flex-1 text-start">{lang.name}</span>
-                {value === lang.code && <Check className="size-3.5 shrink-0" />}
+                <span className="truncate">{lang.name}</span>
+                {value === lang.code && <Check className="size-3 text-brand-accent shrink-0" />}
               </button>
             ))}
           </div>
@@ -142,51 +140,47 @@ export default function LanguageSelector({
   const canSwap = sourceLang !== 'auto';
 
   return (
-    <div className="space-y-3">
+    <div className="grid grid-cols-11 gap-2 items-center">
       {/* Source */}
-      <div>
-        <label className="mb-1.5 block text-xs font-medium uppercase tracking-wider text-muted-foreground">
-          {t('dashboard.translate.language.source')}
-        </label>
+      <div className="col-span-5 relative text-left">
+        <span className="text-[8px] font-bold text-brand-dark/30 dark:text-white/30 uppercase tracking-widest block mb-1">Source</span>
         <Combobox
           value={sourceLang}
           options={languages}
           includeAuto
-          autoLabel={t('dashboard.translate.language.autoDetect')}
-          placeholder={t('dashboard.translate.language.selectPlaceholder')}
+          autoLabel={t('dashboard.translate.language.autoDetect') || 'Auto-détecté'}
+          placeholder={t('dashboard.translate.language.selectPlaceholder') || 'Langue...'}
           onChange={onSourceChange}
         />
       </div>
 
-      {/* Swap */}
-      <div className="flex justify-center -my-0.5">
+      {/* Swap Button */}
+      <div className="col-span-1 flex justify-center pt-3 text-brand-dark/30 dark:text-white/30">
         <button
           type="button"
           onClick={() => canSwap && (() => { const s = sourceLang; onSourceChange(targetLang); onTargetChange(s); })()}
           disabled={!canSwap}
           className={cn(
-            'flex size-8 items-center justify-center rounded-full border shadow-sm transition-colors',
+            'flex size-7 items-center justify-center rounded-xl transition-all cursor-pointer',
             canSwap
-              ? 'border-border bg-background text-muted-foreground hover:border-primary hover:text-primary'
-              : 'cursor-not-allowed border-border/50 bg-muted text-muted-foreground/40'
+              ? 'text-brand-dark/50 dark:text-white/50 hover:text-brand-accent hover:bg-brand-muted/50 dark:hover:bg-white/5'
+              : 'cursor-not-allowed opacity-30'
           )}
           title="Inverser"
         >
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+          <ArrowRightLeft size={12} />
         </button>
       </div>
 
       {/* Target */}
-      <div>
-        <label className="mb-1.5 block text-xs font-medium uppercase tracking-wider text-muted-foreground">
-          {t('dashboard.translate.language.target')}
-        </label>
+      <div className="col-span-5 relative text-left">
+        <span className="text-[8px] font-bold text-brand-dark/30 dark:text-white/30 uppercase tracking-widest block mb-1">Cible</span>
         <Combobox
           value={targetLang}
           options={languages}
           includeAuto={false}
           autoLabel=""
-          placeholder={t('dashboard.translate.language.selectPlaceholder')}
+          placeholder={t('dashboard.translate.language.selectPlaceholder') || 'Langue...'}
           onChange={onTargetChange}
         />
       </div>