feat: F001 app shell & global layout system

Add PageHeader, UserMenu, NotificationButton, OrganizationContextBadge, RightContextPanel, CompareTray, and ActivityTimeline; wire all into AppShell. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-15 11:50:06 +02:00
parent 70c0d79d8c
commit 9a2476c58a
10 changed files with 389 additions and 7 deletions
@@ -0,0 +1,74 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router'
+import { Avatar, Divider, IconButton, ListItemIcon, Menu, MenuItem, Typography } from '@mui/material'
+import { LogOut, Settings, User } from 'lucide-react'
+import { useSessionStore } from '../../stores/sessionStore'
+
+function getUserInitials(name: string): string {
+  return name
+    .split(' ')
+    .map((n) => n[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2)
+}
+
+export function UserMenu() {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const { currentUser, logout } = useSessionStore()
+  const navigate = useNavigate()
+
+  function handleOpen(e: React.MouseEvent<HTMLElement>) {
+    setAnchorEl(e.currentTarget)
+  }
+
+  function handleClose() {
+    setAnchorEl(null)
+  }
+
+  function handleLogout() {
+    handleClose()
+    logout()
+    navigate('/')
+  }
+
+  const initials = getUserInitials(currentUser?.name ?? 'U')
+
+  return (
+    <>
+      <IconButton onClick={handleOpen} size="small" sx={{ p: 0 }}>
+        <Avatar sx={{ width: 32, height: 32, fontSize: '0.75rem', bgcolor: '#1e3a5f' }}>
+          {initials}
+        </Avatar>
+      </IconButton>
+
+      <Menu
+        anchorEl={anchorEl}
+        open={!!anchorEl}
+        onClose={handleClose}
+        slotProps={{ paper: { sx: { width: 200, mt: 1 } } }}
+        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+      >
+        {currentUser && (
+          <MenuItem disabled sx={{ opacity: '1 !important' }}>
+            <Typography variant="body2" sx={{ fontWeight: 600 }}>{currentUser.name}</Typography>
+          </MenuItem>
+        )}
+        <MenuItem onClick={handleClose}>
+          <ListItemIcon><User size={16} /></ListItemIcon>
+          Profil
+        </MenuItem>
+        <MenuItem onClick={handleClose}>
+          <ListItemIcon><Settings size={16} /></ListItemIcon>
+          Einstellungen
+        </MenuItem>
+        <Divider />
+        <MenuItem onClick={handleLogout}>
+          <ListItemIcon><LogOut size={16} /></ListItemIcon>
+          Abmelden
+        </MenuItem>
+      </Menu>
+    </>
+  )
+}