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,39 @@
+import { useState } from 'react'
+import { Badge, IconButton, Popover, Typography } from '@mui/material'
+import { Bell } from 'lucide-react'
+
+export function NotificationButton() {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+
+  function handleOpen(e: React.MouseEvent<HTMLElement>) {
+    setAnchorEl(e.currentTarget)
+  }
+
+  function handleClose() {
+    setAnchorEl(null)
+  }
+
+  return (
+    <>
+      <IconButton size="small" sx={{ color: '#64748b' }} onClick={handleOpen}>
+        <Badge badgeContent={0} color="error">
+          <Bell size={20} />
+        </Badge>
+      </IconButton>
+
+      <Popover
+        open={!!anchorEl}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        slotProps={{ paper: { sx: { width: 280, p: 2 } } }}
+      >
+        <Typography variant="subtitle2" sx={{ mb: 1 }}>Benachrichtigungen</Typography>
+        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+          Keine neuen Benachrichtigungen
+        </Typography>
+      </Popover>
+    </>
+  )
+}