79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
'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>
|
|
);
|
|
}
|