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,73 @@
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router'
+import { Box, Button, Chip, Typography } from '@mui/material'
+import { useCompareStore } from '../../stores/compareStore'
+import { useLayoutStore } from '../../stores/layoutStore'
+
+export function CompareTray() {
+  const { compareTray, removeFromCompare, clearCompare } = useCompareStore()
+  const { setCompareTrayVisible } = useLayoutStore()
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    setCompareTrayVisible(compareTray.length > 0)
+  }, [compareTray.length, setCompareTrayVisible])
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 1300,
+        height: 56,
+        bgcolor: '#0f1923',
+        display: 'flex',
+        alignItems: 'center',
+        px: 3,
+        gap: 2,
+        transform: compareTray.length > 0 ? 'translateY(0)' : 'translateY(100%)',
+        transition: 'transform 0.25s ease',
+      }}
+    >
+      <Typography variant="caption" sx={{ color: '#fff', flexShrink: 0 }}>
+        Vergleich ({compareTray.length}/3)
+      </Typography>
+
+      <Box sx={{ flex: 1, display: 'flex', gap: 1, overflow: 'hidden' }}>
+        {compareTray.map((id, i) => (
+          <Chip
+            key={id}
+            label={`Objekt ${i + 1}`}
+            size="small"
+            onDelete={() => removeFromCompare(id)}
+            sx={{
+              bgcolor: 'rgba(255,255,255,0.15)',
+              color: '#fff',
+              '& .MuiChip-deleteIcon': { color: 'rgba(255,255,255,0.6)' },
+            }}
+          />
+        ))}
+      </Box>
+
+      <Button
+        variant="text"
+        size="small"
+        onClick={clearCompare}
+        sx={{ color: 'rgba(255,255,255,0.5)', textTransform: 'none', flexShrink: 0 }}
+      >
+        Alle entfernen
+      </Button>
+
+      <Button
+        variant="contained"
+        size="small"
+        onClick={() => navigate('/demand/compare')}
+        sx={{ bgcolor: '#1e3a5f', textTransform: 'none', flexShrink: 0, '&:hover': { bgcolor: '#162d4a' } }}
+      >
+        Vergleich starten
+      </Button>
+    </Box>
+  )
+}