website refactor
This commit is contained in:
@@ -1,72 +1,119 @@
|
||||
'use client';
|
||||
|
||||
import { BrandMark } from '@/ui/BrandMark';
|
||||
import { HeaderActions } from '@/components/layout/HeaderActions';
|
||||
import { PublicNav } from '@/components/layout/PublicNav';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Search, Bell, User, ChevronDown, Command } from 'lucide-react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
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';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { AppShellBar } from './AppShellBar';
|
||||
|
||||
export function AppHeader() {
|
||||
const pathname = usePathname();
|
||||
const { data: session } = useCurrentSession();
|
||||
const isAuthenticated = !!session;
|
||||
const homeHref = isAuthenticated ? routes.protected.dashboard : routes.public.home;
|
||||
|
||||
// Simple breadcrumb logic
|
||||
const pathSegments = pathname.split('/').filter(Boolean);
|
||||
const breadcrumbs = pathSegments.length > 0
|
||||
? pathSegments.map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(' / ')
|
||||
: 'Home';
|
||||
|
||||
// Clock
|
||||
const [time, setTime] = useState<string>('');
|
||||
useEffect(() => {
|
||||
const updateTime = () => {
|
||||
const now = new Date();
|
||||
setTime(now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }));
|
||||
};
|
||||
updateTime();
|
||||
const interval = setInterval(updateTime, 60000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Surface
|
||||
as="header"
|
||||
variant="dark"
|
||||
height="14"
|
||||
zIndex={50}
|
||||
borderBottom
|
||||
backgroundColor="rgba(13, 13, 14, 0.8)"
|
||||
className="backdrop-blur-xl"
|
||||
>
|
||||
<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
|
||||
h="6"
|
||||
borderColor="var(--ui-color-border-muted)"
|
||||
>
|
||||
<Text size="xs" weight="medium" variant="low" font="mono" uppercase>
|
||||
Workspace
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Stack>
|
||||
<AppShellBar position="top">
|
||||
{/* Left: Context & Search */}
|
||||
<Box display="flex" alignItems="center" gap={6} flex={1}>
|
||||
<Text size="sm" className="text-text-med font-medium tracking-wide whitespace-nowrap min-w-[100px]">
|
||||
{breadcrumbs}
|
||||
</Text>
|
||||
|
||||
{/* Center: Navigation (if public) */}
|
||||
{!isAuthenticated && (
|
||||
<Box display={{ base: 'none', md: 'flex' }} data-testid="public-top-nav">
|
||||
<PublicNav pathname={pathname} direction="row" />
|
||||
{/* Command Search - Refined */}
|
||||
<Box
|
||||
className="hidden md:flex items-center gap-3 px-3 h-9 bg-surface-charcoal/50 border border-outline-steel rounded-md w-96 text-text-low hover:border-text-low/50 focus-within:border-primary-accent focus-within:ring-1 focus-within:ring-primary-accent/20 transition-all cursor-text group"
|
||||
>
|
||||
<Search size={14} className="text-text-low group-hover:text-text-med transition-colors" />
|
||||
<Box
|
||||
as="input"
|
||||
type="text"
|
||||
placeholder="Search or type a command..."
|
||||
className="bg-transparent border-none outline-none text-sm w-full text-text-high placeholder:text-text-low/50 h-full"
|
||||
/>
|
||||
<Box className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-white/5 border border-white/5 text-[10px] font-mono text-text-low">
|
||||
<Command size={10} />
|
||||
<span>K</span>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Right: Session Controls */}
|
||||
<Box display="flex" alignItems="center" gap={4}>
|
||||
<Box display={{ base: 'none', sm: 'flex' }} alignItems="center" gap={2}>
|
||||
<Box w="1.5" h="1.5" 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>
|
||||
|
||||
{/* Right: System Status & User */}
|
||||
<Box display="flex" alignItems="center" gap={4}>
|
||||
{/* System Time */}
|
||||
<Box className="hidden lg:flex items-center gap-2 text-text-med border-r border-outline-steel pr-4 h-6">
|
||||
<Text size="sm" font="mono" className="tracking-widest tabular-nums">
|
||||
{time} UTC
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* Notifications */}
|
||||
<Box
|
||||
as="button"
|
||||
className="w-8 h-8 flex items-center justify-center text-text-low hover:text-text-high hover:bg-white/5 transition-colors rounded-md relative"
|
||||
title="Notifications"
|
||||
>
|
||||
<Bell size={16} />
|
||||
<Box className="absolute top-2 right-2 w-1.5 h-1.5 bg-primary-accent rounded-full ring-2 ring-base-black" />
|
||||
</Box>
|
||||
|
||||
{/* User Menu */}
|
||||
{isAuthenticated ? (
|
||||
<Box display="flex" alignItems="center" gap={3} className="pl-2 cursor-pointer group">
|
||||
<Box
|
||||
className="w-8 h-8 rounded-full bg-surface-charcoal flex items-center justify-center text-text-med border border-outline-steel group-hover:border-primary-accent transition-colors"
|
||||
>
|
||||
<User size={14} />
|
||||
</Box>
|
||||
<Box className="hidden md:block text-left">
|
||||
<Text size="sm" weight="medium" className="text-text-high leading-none group-hover:text-primary-accent transition-colors">
|
||||
{session.user.displayName || 'Driver'}
|
||||
</Text>
|
||||
</Box>
|
||||
<ChevronDown size={12} className="text-text-low group-hover:text-text-high transition-colors" />
|
||||
</Box>
|
||||
) : (
|
||||
<Box display="flex" gap={2}>
|
||||
<Button
|
||||
as="a"
|
||||
href={routes.auth.login}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
>
|
||||
Sign In
|
||||
</Button>
|
||||
<Button
|
||||
as="a"
|
||||
href={routes.auth.signup}
|
||||
variant="primary"
|
||||
size="sm"
|
||||
>
|
||||
Join
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</AppShellBar>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user