feat: revue de code, doc CODE_REVIEW, forfaits 2026, traduction LLM, providers avec modèle

Made-with: Cursor

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

@@ -0,0 +1,104 @@
+'use client';
+
+import { ArrowRight, Loader2, AlertCircle } from 'lucide-react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import type { Language } from './types';
+
+interface LanguageSelectorProps {
+  sourceLang: string;
+  targetLang: string;
+  languages: Language[];
+  isLoading?: boolean;
+  error?: string | null;
+  onSourceChange: (value: string) => void;
+  onTargetChange: (value: string) => void;
+}
+
+export function LanguageSelector({
+  sourceLang,
+  targetLang,
+  languages,
+  isLoading,
+  error,
+  onSourceChange,
+  onTargetChange,
+}: LanguageSelectorProps) {
+  return (
+    <div className="flex flex-col gap-2">
+      {error && (
+        <div className="flex items-center gap-2 rounded-md bg-destructive/10 px-3 py-2 text-xs text-destructive">
+          <AlertCircle className="size-3.5" />
+          <span>Failed to load languages: {error}</span>
+        </div>
+      )}
+      <div className="flex items-center gap-3">
+        <div className="flex flex-1 flex-col gap-1.5">
+          <label className="text-xs font-medium text-muted-foreground">
+            Source Language
+          </label>
+          <Select 
+            value={sourceLang} 
+            onValueChange={onSourceChange}
+            disabled={isLoading}
+          >
+            <SelectTrigger className="w-full">
+              {isLoading ? (
+                <div className="flex items-center gap-2">
+                  <Loader2 className="size-3.5 animate-spin" />
+                  <span className="text-muted-foreground">Loading...</span>
+                </div>
+              ) : (
+                <SelectValue placeholder="Auto-detect" />
+              )}
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="auto">Auto-detect</SelectItem>
+              {languages.map((lang) => (
+                <SelectItem key={lang.code} value={lang.code}>
+                  {lang.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <ArrowRight className="mt-5 size-4 shrink-0 text-muted-foreground" />
+
+        <div className="flex flex-1 flex-col gap-1.5">
+          <label className="text-xs font-medium text-muted-foreground">
+            Target Language
+          </label>
+          <Select 
+            value={targetLang} 
+            onValueChange={onTargetChange}
+            disabled={isLoading}
+          >
+            <SelectTrigger className="w-full">
+              {isLoading ? (
+                <div className="flex items-center gap-2">
+                  <Loader2 className="size-3.5 animate-spin" />
+                  <span className="text-muted-foreground">Loading...</span>
+                </div>
+              ) : (
+                <SelectValue placeholder="Select language" />
+              )}
+            </SelectTrigger>
+            <SelectContent>
+              {languages.map((lang) => (
+                <SelectItem key={lang.code} value={lang.code}>
+                  {lang.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </div>
+  );
+}