website refactor

apps/website/components/layout/AppHeader.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { BrandMark } from '@/ui/BrandMark';
+import { HeaderActions } from '@/components/layout/HeaderActions';
+import { PublicNav } from '@/components/layout/PublicNav';
+import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
+import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
+import { usePathname } from 'next/navigation';
+
+export function AppHeader() {
+  const pathname = usePathname();
+  const { data: session } = useCurrentSession();
+  const isAuthenticated = !!session;
+  const homeHref = isAuthenticated ? routes.protected.dashboard : routes.public.home;
+
+  return (
+    <Surface
+      as="header"
+      variant="dark"
+      position="fixed"
+      top={0}
+      left={0}
+      right={0}
+      height="56px"
+      zIndex={50}
+      style={{
+        borderBottom: '1px solid var(--ui-color-border-default)',
+        background: 'rgba(13, 13, 14, 0.8)',
+        backdropFilter: 'blur(12px)',
+      }}
+    >
+      <Box display="flex" alignItems="center" justifyContent="between" width="full" h="full" px={6}>
+        {/* Left: Brand & Context */}
+        <Stack direction="row" align="center" gap={4} h="full">
+          <BrandMark href={homeHref} priority />
+          
+          {isAuthenticated && (
+            <Box 
+              display="flex" 
+              alignItems="center" 
+              gap={3} 
+              paddingLeft={4} 
+              borderLeft={true} 
+              h="24px"
+              style={{ borderLeftColor: 'var(--ui-color-border-muted)' }}
+            >
+               <Text size="xs" weight="medium" variant="low" font="mono" uppercase>
+                 Workspace
+               </Text>
+            </Box>
+          )}
+        </Stack>
+
+        {/* Center: Navigation (if public) */}
+        {!isAuthenticated && (
+          <Box display={{ base: 'none', md: 'flex' }} data-testid="public-top-nav">
+            <PublicNav pathname={pathname} direction="row" />
+          </Box>
+        )}
+        
+        {/* Right: Session Controls */}
+        <Box display="flex" alignItems="center" gap={4}>
+          <Box display={{ base: 'none', sm: 'flex' }} alignItems="center" gap={2}>
+            <Box w="6px" h="6px" rounded="full" bg="var(--ui-color-intent-success)" />
+            <Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.1em">
+              LIVE
+            </Text>
+          </Box>
+          <HeaderActions isAuthenticated={isAuthenticated} />
+        </Box>
+      </Box>
+    </Surface>
+  );
+}