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

Made-with: Cursor
2026-03-07 11:42:58 +01:00
parent 3d37ce4582
commit 473b3e26c7
181 changed files with 30617 additions and 7170 deletions
--- a/frontend/src/app/dashboard/translate/ProviderSelector.tsx
+++ b/frontend/src/app/dashboard/translate/ProviderSelector.tsx
@@ -0,0 +1,112 @@
+'use client';
+
+import { Loader2, CheckCircle2, Lock } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { Provider, AvailableProvider } from './types';
+
+interface ProviderSelectorProps {
+  provider: Provider | null;
+  onProviderChange: (provider: Provider) => void;
+  availableProviders: AvailableProvider[];
+  isLoadingProviders: boolean;
+  isPro: boolean;
+}
+
+export function ProviderSelector({
+  provider,
+  onProviderChange,
+  availableProviders,
+  isLoadingProviders,
+  isPro,
+}: ProviderSelectorProps) {
+  if (isLoadingProviders) {
+    return (
+      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+        <Loader2 className="size-3.5 animate-spin" />
+        <span>Loading providers…</span>
+      </div>
+    );
+  }
+
+  if (availableProviders.length === 0) {
+    return (
+      <p className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700">
+        No providers are configured. Ask your administrator to enable at least one in the
+        admin settings.
+      </p>
+    );
+  }
+
+  const classicProviders = availableProviders.filter((p) => p.mode === 'classic');
+  const llmProviders = availableProviders.filter((p) => p.mode === 'llm');
+
+  const renderCard = (p: AvailableProvider, locked: boolean) => {
+    const isSelected = provider === p.id;
+    return (
+      <button
+        key={p.id}
+        type="button"
+        disabled={locked}
+        onClick={() => !locked && onProviderChange(p.id)}
+        className={cn(
+          'flex w-full items-center justify-between rounded-lg border px-3 py-2.5 text-left text-sm transition-colors',
+          isSelected
+            ? 'border-primary bg-primary/5 text-primary'
+            : locked
+            ? 'cursor-not-allowed border-border/40 bg-muted/30 text-muted-foreground'
+            : 'border-border/60 bg-background hover:border-primary/40 hover:bg-muted/40'
+        )}
+      >
+        <div className="flex flex-col">
+          <span className="font-medium leading-tight">{p.label}</span>
+          <span className="text-xs text-muted-foreground">{p.description}</span>
+          {p.mode === 'llm' && p.model && (
+            <span className="mt-0.5 text-[10px] font-mono text-muted-foreground/80" title="Modèle configuré par l'admin">
+              Modèle : {p.model}
+            </span>
+          )}
+        </div>
+        {locked ? (
+          <Lock className="size-3.5 shrink-0 text-muted-foreground/60" />
+        ) : isSelected ? (
+          <CheckCircle2 className="size-4 shrink-0 text-primary" />
+        ) : null}
+      </button>
+    );
+  };
+
+  return (
+    <div className="space-y-3">
+      <p className="text-xs font-medium text-muted-foreground">Translation Provider</p>
+
+      {/* Classic providers — available to everyone */}
+      {classicProviders.length > 0 && (
+        <div className="space-y-1.5">
+          {classicProviders.map((p) => renderCard(p, false))}
+        </div>
+      )}
+
+      {/* LLM providers — Pro only */}
+      {llmProviders.length > 0 && (
+        <div className="space-y-1.5">
+          <div className="flex items-center gap-2">
+            <div className="h-px flex-1 bg-border/50" />
+            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+              LLM · Context-Aware {!isPro && '· Pro'}
+            </span>
+            <div className="h-px flex-1 bg-border/50" />
+          </div>
+          {llmProviders.map((p) => renderCard(p, !isPro))}
+          {!isPro && (
+            <p className="text-xs text-muted-foreground">
+              <a href="/pricing" className="text-primary hover:underline">
+                Upgrade to Pro
+              </a>{' '}
+              to use LLM-powered translation.
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}