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,70 @@
+import { Box, Divider, IconButton, Typography } from '@mui/material'
+import { X } from 'lucide-react'
+import { useLayoutStore } from '../../stores/layoutStore'
+import type { RightPanelContentType } from '../../stores/layoutStore'
+
+const PANEL_TITLES: Record<RightPanelContentType, string> = {
+  ai_context: 'KI Kontext',
+  detail_preview: 'Detail Vorschau',
+  compare_preview: 'Vergleich Vorschau',
+  activity_feed: 'Aktivitäts-Feed',
+}
+
+const PANEL_PLACEHOLDERS: Record<RightPanelContentType, string> = {
+  ai_context: 'KI-Kontext wird geladen...',
+  detail_preview: 'Kein Objekt ausgewählt.',
+  compare_preview: 'Vergleichsvorschau nicht verfügbar.',
+  activity_feed: 'Keine Aktivitäten vorhanden.',
+}
+
+export function RightContextPanel() {
+  const { isRightPanelOpen, rightPanelContentType, closeRightPanel } = useLayoutStore()
+
+  const title = rightPanelContentType ? PANEL_TITLES[rightPanelContentType] : ''
+  const placeholder = rightPanelContentType ? PANEL_PLACEHOLDERS[rightPanelContentType] : ''
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        right: 0,
+        top: 56,
+        height: 'calc(100vh - 56px)',
+        width: 320,
+        transform: isRightPanelOpen ? 'translateX(0)' : 'translateX(320px)',
+        transition: 'transform 0.25s ease',
+        bgcolor: '#fff',
+        borderLeft: '1px solid #e2e8f0',
+        boxShadow: '-4px 0 16px rgba(0,0,0,0.08)',
+        zIndex: 1200,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+      }}
+    >
+      <Box
+        sx={{
+          height: 48,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          px: 2,
+          flexShrink: 0,
+        }}
+      >
+        <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>{title}</Typography>
+        <IconButton size="small" onClick={closeRightPanel} sx={{ color: '#64748b' }}>
+          <X size={16} />
+        </IconButton>
+      </Box>
+
+      <Divider />
+
+      <Box sx={{ flex: 1, overflowY: 'auto', p: 2 }}>
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          {placeholder}
+        </Typography>
+      </Box>
+    </Box>
+  )
+}