Display user name in application header

matrixgw_frontend/src/widgets/dashboard/DashboardHeader.tsx

@@ -1,7 +1,9 @@
 import { mdiMessageTextFast } from "@mdi/js";
 import Icon from "@mdi/react";
+import LogoutIcon from "@mui/icons-material/Logout";
 import MenuIcon from "@mui/icons-material/Menu";
 import MenuOpenIcon from "@mui/icons-material/MenuOpen";
+import { Avatar } from "@mui/material";
 import MuiAppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
@@ -12,6 +14,7 @@ import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import * as React from "react";
 import { RouterLink } from "../RouterLink";
+import { userUserInfo as useUserInfo } from "./BaseAuthenticatedPage";
 import ThemeSwitcher from "./ThemeSwitcher";
 
 const AppBar = styled(MuiAppBar)(({ theme }) => ({
@@ -42,6 +45,8 @@ export default function DashboardHeader({
   menuOpen,
   onToggleMenu,
 }: DashboardHeaderProps) {
+  const user = useUserInfo();
+
   const handleMenuOpen = React.useCallback(() => {
     onToggleMenu(!menuOpen);
   }, [menuOpen, onToggleMenu]);
@@ -101,6 +106,7 @@ export default function DashboardHeader({
                     ml: 1,
                     whiteSpace: "nowrap",
                     lineHeight: 1,
+                    display: { xs: "none", sm: "block" },
                   }}
                 >
                   MatrixGW
@@ -108,17 +114,41 @@ export default function DashboardHeader({
               </Stack>
             </RouterLink>
           </Stack>
+
+          {/* User avatar */}
           <Stack
             direction="row"
-            alignItems="center"
-            spacing={1}
-            sx={{ marginLeft: "auto" }}
+            sx={{
+              p: 2,
+              gap: 1,
+              alignItems: "center",
+              borderTop: "1px solid",
+              borderColor: "divider",
+            }}
           >
-            <Stack direction="row" alignItems="center">
-              <ThemeSwitcher />
-            </Stack>
+            <Avatar
+              sizes="small"
+              alt={user.info.name}
+              sx={{ width: 36, height: 36 }}
+            />
+            <Box sx={{ mr: "auto", display: { xs: "none", md: "block" } }}>
+              <Typography
+                variant="body2"
+                sx={{ fontWeight: 500, lineHeight: "16px" }}
+              >
+                {user.info.name}
+              </Typography>
+              <Typography variant="caption" sx={{ color: "text.secondary" }}>
+                {user.info.email}
+              </Typography>
+            </Box>
+            <ThemeSwitcher />
+            <Tooltip title="Sign out">
+              <IconButton size="small" onClick={user.signOut}>
+                <LogoutIcon />
+              </IconButton>
+            </Tooltip>
           </Stack>
-          Hi TODO USER SIGN OUT
         </Stack>
       </Toolbar>
     </AppBar>