From 32b9af7b027eee135d6bf8c68069f9d844d467ec Mon Sep 17 00:00:00 2001
From: Tetardtek <kvnn64@gmail.com>
Date: Tue, 17 Mar 2026 07:43:48 +0100
Subject: [PATCH] =?UTF-8?q?fix(auth):=20UserMenu=20sessionStorage=20?=
 =?UTF-8?q?=E2=86=92=20AuthContext=20=E2=80=94=20unification=20auth=20stat?=
 =?UTF-8?q?e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/auth/UserMenu.tsx | 43 +++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 frontend/src/components/auth/UserMenu.tsx

diff --git a/frontend/src/components/auth/UserMenu.tsx b/frontend/src/components/auth/UserMenu.tsx
new file mode 100644
index 0000000..91fda33
--- /dev/null
+++ b/frontend/src/components/auth/UserMenu.tsx
@@ -0,0 +1,43 @@
+import { clearAccessToken } from '../../lib/oauth';
+import { useAuthContext } from '../../context/AuthContext';
+import LoginButton from './LoginButton';
+
+interface UserMenuProps {
+  /** Optionnel : si fourni, prend le dessus sur le nickname de l'utilisateur */
+  displayName?: string;
+}
+
+export default function UserMenu({ displayName }: UserMenuProps) {
+  const { user } = useAuthContext();
+
+  function handleLogout() {
+    clearAccessToken();
+    window.location.href = '/';
+  }
+
+  if (!user) {
+    return <LoginButton />;
+  }
+
+  const name = displayName ?? user.nickname ?? 'Mon compte';
+
+  return (
+    <div className="flex items-center gap-3">
+      {/* Avatar placeholder */}
+      <span className="flex h-7 w-7 items-center justify-center rounded-full bg-od-surface border border-[#c9a84c] font-mono text-[10px] text-[#c9a84c]">
+        {name !== 'Mon compte' ? name[0].toUpperCase() : '●'}
+      </span>
+
+      <span className="font-mono text-xs text-[#c9a84c]">
+        {name}
+      </span>
+
+      <button
+        onClick={handleLogout}
+        className="font-mono text-xs text-od-muted hover:text-od-crit transition-colors duration-150"
+      >
+        Se déconnecter
+      </button>
+    </div>
+  );
+}