feat: production deployment - full update with providers, admin, glossaries, pricing, tests

Major changes across backend, frontend, infrastructure:
- Provider system with model selection (Google, DeepL, OpenAI, Ollama, Google Cloud)
- Admin panel: user management, pricing, settings
- Glossary system with CSV import/export
- Subscription and tier quota management
- Security hardening (rate limiting, API key auth, path traversal fixes)
- Docker compose for dev, prod, and IONOS deployment
- Alembic migrations for new tables
- Frontend: dashboard, pricing page, landing page, i18n (en/fr)
- Test suite and verification scripts

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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

@@ -1,7 +1,8 @@
 'use client';
 
-import { Loader2, CheckCircle2, Lock } from 'lucide-react';
+import { Loader2, CheckCircle2, Lock, Sparkles } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
 import type { Provider, AvailableProvider } from './types';
 
 interface ProviderSelectorProps {
@@ -19,20 +20,21 @@ export function ProviderSelector({
   isLoadingProviders,
   isPro,
 }: ProviderSelectorProps) {
+  const { t } = useI18n();
+
   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 className="flex items-center gap-2 text-sm text-muted-foreground">
+        <Loader2 className="size-4 animate-spin" />
+        <span>{t('dashboard.translate.provider.loading')}</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 className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700 dark:border-amber-800/50 dark:bg-amber-950/30 dark:text-amber-400">
+        {t('dashboard.translate.provider.noneConfigured')}
       </p>
     );
   }
@@ -49,60 +51,86 @@ export function ProviderSelector({
         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',
+          'flex w-full items-center gap-3 rounded-xl border px-4 py-3 text-start transition-all duration-150',
           isSelected
-            ? 'border-primary bg-primary/5 text-primary'
+            ? 'border-primary bg-primary/8 ring-1 ring-primary/30'
             : 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'
+            ? 'cursor-not-allowed border-border/40 bg-muted/20 opacity-60'
+            : 'border-border/60 bg-background hover:border-primary/40 hover:bg-muted/30 active:scale-[0.99]'
         )}
       >
-        <div className="flex flex-col">
-          <span className="font-medium leading-tight">{p.label}</span>
-          <span className="text-xs text-muted-foreground">{p.description}</span>
+        {/* Selection indicator */}
+        <div className={cn(
+          'flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors',
+          isSelected ? 'border-primary bg-primary' : 'border-border/60'
+        )}>
+          {isSelected && <div className="size-2 rounded-full bg-primary-foreground" />}
+        </div>
+
+        {/* Label + description */}
+        <div className="flex flex-1 flex-col gap-0.5 min-w-0">
+          <span className={cn(
+            'text-sm font-medium leading-tight',
+            isSelected ? 'text-primary' : locked ? 'text-muted-foreground' : 'text-foreground'
+          )}>
+            {p.label}
+          </span>
+          <span className="text-xs text-muted-foreground leading-snug">
+            {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 className="mt-0.5 text-[10px] font-mono text-muted-foreground/70">
+              {t('dashboard.translate.provider.modelTitle')} {p.model}
             </span>
           )}
         </div>
+
+        {/* Right badge */}
         {locked ? (
-          <Lock className="size-3.5 shrink-0 text-muted-foreground/60" />
+          <Lock className="size-4 shrink-0 text-muted-foreground/50" />
         ) : isSelected ? (
-          <CheckCircle2 className="size-4 shrink-0 text-primary" />
+          <CheckCircle2 className="size-5 shrink-0 text-primary" />
         ) : null}
       </button>
     );
   };
 
   return (
-    <div className="space-y-3">
-      <p className="text-xs font-medium text-muted-foreground">Translation Provider</p>
+    <div className="flex flex-col gap-3">
+      <p className="text-sm font-medium text-foreground">
+        {t('dashboard.translate.provider.sectionTitle')}
+      </p>
 
-      {/* Classic providers — available to everyone */}
+      {/* Classic providers */}
       {classicProviders.length > 0 && (
-        <div className="space-y-1.5">
+        <div className="flex flex-col gap-2">
           {classicProviders.map((p) => renderCard(p, false))}
         </div>
       )}
 
       {/* LLM providers — Pro only */}
       {llmProviders.length > 0 && (
-        <div className="space-y-1.5">
+        <div className="flex flex-col gap-2">
           <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 className="flex items-center gap-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+              <Sparkles className="size-3" />
+              {t('dashboard.translate.provider.llmDivider')}
+              {!isPro && (
+                <span className="ms-1 rounded bg-primary/10 px-1 py-0.5 text-primary">
+                  {t('dashboard.translate.provider.llmDividerPro')}
+                </span>
+              )}
             </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
+            <p className="text-xs text-muted-foreground text-center">
+              <a href="/pricing" className="text-primary hover:underline font-medium">
+                {t('dashboard.translate.provider.upgrade')}
               </a>{' '}
-              to use LLM-powered translation.
+              {t('dashboard.translate.provider.upgradeSuffix')}
             </p>
           )}
         </div>