refactor(ui): unify low-level controls and expand design system

src/components/layout/UserMenu.tsx

@@ -2,9 +2,7 @@
 
 import Link from 'next/link';
 import { signOut } from 'next-auth/react';
-import { useState, useRef } from 'react';
-import { Avatar } from '@/components/ui';
-import { useClickOutside } from '@/hooks/useClickOutside';
+import { Avatar, DropdownMenu } from '@/components/ui';
 
 interface UserMenuProps {
   userName: string | null | undefined;
@@ -12,51 +10,45 @@ interface UserMenuProps {
 }
 
 export function UserMenu({ userName, userEmail }: UserMenuProps) {
-  const [menuOpen, setMenuOpen] = useState(false);
-  const userMenuRef = useRef<HTMLDivElement>(null);
-  useClickOutside(userMenuRef, () => setMenuOpen(false), menuOpen);
-
   return (
-    <div ref={userMenuRef} className="relative">
-      <button
-        onClick={() => setMenuOpen(!menuOpen)}
-        className="flex h-9 items-center gap-2 rounded-lg border border-border bg-card pl-1.5 pr-3 transition-colors hover:bg-card-hover"
-      >
-        <Avatar email={userEmail} name={userName} size={24} />
-        <span className="text-sm font-medium text-foreground">
-          {userName || userEmail.split('@')[0]}
-        </span>
-        <svg
-          className={`h-4 w-4 text-muted transition-transform ${menuOpen ? 'rotate-180' : ''}`}
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
+    <DropdownMenu
+      panelClassName="absolute right-0 z-20 mt-2 w-48 rounded-lg border border-border bg-card py-1 shadow-lg"
+      trigger={({ open, toggle }) => (
+        <button
+          onClick={toggle}
+          className="flex h-9 items-center gap-2 rounded-lg border border-border bg-card pl-1.5 pr-3 transition-colors hover:bg-card-hover"
         >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M19 9l-7 7-7-7"
-          />
-        </svg>
-      </button>
-
-      {menuOpen && (
-        <div className="absolute right-0 z-20 mt-2 w-48 rounded-lg border border-border bg-card py-1 shadow-lg">
+          <Avatar email={userEmail} name={userName} size={24} />
+          <span className="text-sm font-medium text-foreground">
+            {userName || userEmail.split('@')[0]}
+          </span>
+          <svg
+            className={`h-4 w-4 text-muted transition-transform ${open ? 'rotate-180' : ''}`}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+      )}
+    >
+      {({ close }) => (
+        <>
           <div className="border-b border-border px-4 py-2">
             <p className="text-xs text-muted">Connecté en tant que</p>
             <p className="truncate text-sm font-medium text-foreground">{userEmail}</p>
           </div>
           <Link
             href="/profile"
-            onClick={() => setMenuOpen(false)}
+            onClick={close}
             className="block w-full px-4 py-2 text-left text-sm text-foreground hover:bg-card-hover"
           >
             👤 Mon Profil
           </Link>
           <Link
             href="/users"
-            onClick={() => setMenuOpen(false)}
+            onClick={close}
             className="block w-full px-4 py-2 text-left text-sm text-foreground hover:bg-card-hover"
           >
             👥 Utilisateurs
@@ -67,8 +59,8 @@ export function UserMenu({ userName, userEmail }: UserMenuProps) {
           >
             Se déconnecter
           </button>
-        </div>
+        </>
       )}
-    </div>
+    </DropdownMenu>
   );
 }