feat: display an “account” button at the top right instead of the “logout” button

frontend/src/components/Header.tsx

 import { useState } from "react";
+import { useClient } from "@/context/ClientContext";
 import {
   AppBar,
   Box,
@@ -9,7 +10,8 @@
   Toolbar,
   Typography,
 } from "@mui/material";
-import AccountCircle from "@mui/icons-material/AccountCircle";
+
+import { AccountCircle, Logout } from "@mui/icons-material";
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
@@ -20,4 +22,8 @@
   const loggedIn = pathname !== "/login";
   const logout = useApiLogout();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const client = useClient();
+  const [currentUserName, setCurrentUserName] = useState<string | undefined>(
+    undefined,
+  );
 
@@ -23,3 +29,3 @@
 
-  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+  const handleMenu = async (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -25,4 +31,6 @@
     setAnchorEl(event.currentTarget);
+    const currentUser = await client.currentUser();
+    setCurrentUserName(currentUser.login);
   };
 
   const handleClose = () => {
@@ -82,7 +90,14 @@
               open={Boolean(anchorEl)}
               onClose={handleClose}
             >
-              <MenuItem onClick={logout}>Déconnexion</MenuItem>
+              <Typography style={{ textAlign: "center" }}>
+                {currentUserName}
+              </Typography>
+              <MenuItem divider />
+              <MenuItem onClick={logout}>
+                <Logout fontSize="small" />
+                Déconnexion
+              </MenuItem>
             </Menu>
           </>
         ) : null}