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/DashboardHeader.tsx
+++ b/frontend/src/app/dashboard/DashboardHeader.tsx
@@ -0,0 +1,145 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { 
+  Languages, 
+  Menu, 
+  X, 
+  ChevronLeft,
+  LogOut
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { useUser } from './useUser';
+import { useLogout } from './useLogout';
+import { getNavItems } from './constants';
+import { getInitials } from './utils';
+
+export function DashboardHeader() {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const pathname = usePathname();
+  const { data: user, isLoading } = useUser();
+  const { logout } = useLogout();
+
+  const navItems = getNavItems(user?.tier === 'pro');
+
+  return (
+    <>
+      <header className="flex h-14 shrink-0 items-center justify-between border-b border-border bg-card px-4 lg:px-6">
+        {/* Mobile menu button */}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="lg:hidden"
+          onClick={() => setMobileOpen(!mobileOpen)}
+          aria-label="Toggle menu"
+        >
+          {mobileOpen ? <X className="size-4" /> : <Menu className="size-4" />}
+        </Button>
+
+        {/* Mobile brand */}
+        <div className="flex items-center gap-2 lg:hidden">
+          <div className="flex size-6 items-center justify-center rounded-md bg-foreground">
+            <Languages className="size-3 text-background" />
+          </div>
+          <span className="text-sm font-semibold text-foreground">Office Translator</span>
+        </div>
+
+        {/* Page title - desktop */}
+        <div className="hidden items-center gap-3 lg:flex">
+          <h1 className="text-sm font-semibold text-foreground">Dashboard</h1>
+          <Separator orientation="vertical" className="h-4" />
+          <span className="text-sm text-muted-foreground">Manage your API and translation settings</span>
+        </div>
+
+        {/* Right side */}
+        {!isLoading && user && (
+          <div className="flex items-center gap-3">
+            <Badge
+              variant="secondary"
+              className={cn(
+                'border border-accent/20',
+                user.tier === 'pro' ? 'bg-accent/10 text-accent' : 'bg-muted text-muted-foreground'
+              )}
+            >
+              {user.tier === 'pro' ? 'Pro Plan' : 'Free Plan'}
+            </Badge>
+            <Avatar className="size-8">
+              <AvatarFallback className="bg-accent text-accent-foreground text-xs font-semibold">
+                {getInitials(user.name)}
+              </AvatarFallback>
+            </Avatar>
+          </div>
+        )}
+      </header>
+
+      {/* Mobile navigation drawer */}
+      {mobileOpen && (
+        <div className="border-b border-border bg-card px-4 py-3 lg:hidden">
+          <nav className="flex flex-col gap-1">
+            {navItems.map((item) => {
+              const isActive = pathname === item.href;
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  onClick={() => setMobileOpen(false)}
+                  className={cn(
+                    'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                    isActive
+                      ? 'bg-secondary text-foreground'
+                      : 'text-muted-foreground hover:bg-secondary/60 hover:text-foreground'
+                  )}
+                >
+                  <item.icon className="size-4 shrink-0" />
+                  {item.label}
+                </Link>
+              );
+            })}
+            <Separator className="my-2" />
+            {!isLoading && user && (
+              <div className="flex items-center gap-3 px-3 py-2">
+                <Avatar className="size-8">
+                  <AvatarFallback className="bg-accent text-accent-foreground text-xs font-semibold">
+                    {getInitials(user.name)}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="flex flex-col gap-0.5">
+                  <span className="text-sm font-medium text-foreground">{user.name}</span>
+                  <Badge 
+                    variant="secondary" 
+                    className={cn(
+                      'text-xs w-fit',
+                      user.tier === 'pro' && 'border border-accent/20 bg-accent/10 text-accent'
+                    )}
+                  >
+                    {user.tier === 'pro' ? 'Pro' : 'Free'}
+                  </Badge>
+                </div>
+              </div>
+            )}
+            <button
+              onClick={logout}
+              className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-secondary/60 hover:text-foreground"
+            >
+              <LogOut className="size-4 shrink-0" />
+              Sign out
+            </button>
+            <Link
+              href="/"
+              className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-secondary/60 hover:text-foreground"
+            >
+              <ChevronLeft className="size-4 shrink-0" />
+              Back to home
+            </Link>
+          </nav>
+        </div>
+      )}
+    </>
+  );
+}