mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-20 00:10:30 +01:00
parent 92bf97e21a
commit 6df1b50536
14 changed files with 511 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/website/components/admin/AdminToolbar.tsx
View File

@@ -21,7 +21,6 @@ export function AdminToolbar({
return (
<ControlBar
leftContent={leftContent}
variant="dark"
>
{children}
</ControlBar>

96
apps/website/components/layout/AppFooter.tsx
View File

@@ -1,44 +1,72 @@
'use client';
import { Surface } from '@/ui/Surface';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Link } from '@/ui/Link';
import { AppShellBar } from './AppShellBar';
import { Activity, Database, Server, Wifi } from 'lucide-react';
export function AppFooter() {
return (
<Surface
as="footer"
variant="precision"
paddingY={6}
paddingX={6}
borderTop
backgroundColor="rgba(10, 10, 11, 0.92)"
className="backdrop-blur-xl"
style={{
boxShadow: '0 -1px 0 0 rgba(255, 255, 255, 0.05)',
}}
>
<Box display="flex" justifyContent="between" alignItems="center" width="full" gap={4}>
<Stack direction="row" align="center" gap={3}>
<Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
© {new Date().getFullYear()} GridPilot
</Text>
<Box w="px" h="3" bg="var(--ui-color-border-muted)" opacity={0.6} />
<Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
Session ready
</Text>
</Stack>
const currentYear = new Date().getFullYear();
<Box display={{ base: 'none', sm: 'flex' }}>
<Stack direction="row" align="center" gap={2}>
<Box w="1.5" h="1.5" rounded="full" bg="var(--ui-color-intent-success)" />
<Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
System Normal
</Text>
</Stack>
return (
<AppShellBar position="bottom">
{/* Left: System Info */}
<Box display="flex" alignItems="center" gap={6}>
<Box display="flex" alignItems="center" gap={2}>
<Box className="w-2 h-2 bg-success-green rounded-full animate-pulse" />
<Text size="xs" className="text-text-med font-mono text-[10px] uppercase tracking-wider">
GRIDPILOT OS v2.0
</Text>
</Box>
<Text size="xs" className="text-text-low font-mono text-[10px] uppercase tracking-wider hidden md:block">
© {currentYear}
</Text>
</Box>
{/* Center: Telemetry Status */}
<Box display="flex" alignItems="center" gap={6} className="hidden md:flex">
<StatusIndicator icon={Database} label="DB" status="good" />
<StatusIndicator icon={Server} label="API" status="good" />
<StatusIndicator icon={Wifi} label="WS" status="good" />
<Box className="h-3 w-px bg-outline-steel" />
<Box display="flex" alignItems="center" gap={2}>
<Activity size={12} className="text-text-low" />
<Text size="xs" className="text-text-med font-mono text-[10px]">12ms</Text>
</Box>
</Box>
</Surface>
{/* Right: Legal & Tools */}
<Box display="flex" alignItems="center" gap={2}>
<FooterLink href="/terms">Terms</FooterLink>
<FooterLink href="/privacy">Privacy</FooterLink>
<FooterLink href="/status">Status</FooterLink>
</Box>
</AppShellBar>
);
}
function StatusIndicator({ icon: Icon, label, status }: { icon: any, label: string, status: 'good' | 'warn' | 'bad' }) {
const color = status === 'good' ? 'text-success-green' : status === 'warn' ? 'text-warning-amber' : 'text-critical-red';
return (
<Box display="flex" alignItems="center" gap={2} title={`${label}: ${status.toUpperCase()}`}>
<Icon size={10} className={color} />
<Text size="xs" className="text-text-low font-mono text-[10px] uppercase tracking-wider">
{label}
</Text>
</Box>
);
}
function FooterLink({ href, children }: { href: string, children: React.ReactNode }) {
return (
<Link
href={href}
variant="ghost"
className="px-2 py-1 rounded hover:bg-white/5 text-text-low hover:text-text-high font-mono text-[10px] uppercase tracking-wider transition-colors"
>
{children}
</Link>
);
}

157
apps/website/components/layout/AppHeader.tsx
View File

@@ -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>
);
}

34
apps/website/components/layout/AppShellBar.tsx Normal file
View File

@@ -0,0 +1,34 @@
'use client';
import { Box } from '@/ui/Box';
import { ReactNode } from 'react';
interface AppShellBarProps {
position: 'top' | 'bottom';
children: ReactNode;
sidebarOffset?: boolean;
}
export function AppShellBar({ position, children, sidebarOffset = true }: AppShellBarProps) {
const isTop = position === 'top';
return (
<Box
as={isTop ? 'header' : 'footer'}
className={`
fixed ${isTop ? 'top-0' : 'bottom-0'} right-0 z-40
h-14
bg-base-black/70 backdrop-blur-xl
border-${isTop ? 'b' : 't'} border-outline-steel
flex items-center justify-between px-6
transition-all duration-200
`}
// Use style for responsive left offset to ensure it works
// We use a CSS variable or calc if possible, but here we rely on Tailwind classes via className if we could
// But since we need responsive logic that matches Layout, we'll use the Box props
left={sidebarOffset ? { base: 0, lg: 64 } : 0}
>
{children}
</Box>
);
}

82
apps/website/components/layout/AppSidebar.tsx
View File

@@ -1,50 +1,54 @@
'use client';
import { AuthedNav } from '@/components/layout/AuthedNav';
import { PublicNav } from '@/components/layout/PublicNav';
import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
import { BrandMark } from '@/ui/BrandMark';
import { NavLink } from '@/ui/NavLink';
import { routes } from '@/lib/routing/RouteConfig';
import { Box } from '@/ui/Box';
import { DashboardRail } from '@/components/dashboard/DashboardRail';
import { Text } from '@/ui/Text';
import { Surface } from '@/ui/Surface';
import { Stack } from '@/ui/Stack';
import {
LayoutGrid,
Trophy,
Users,
Calendar,
Flag,
Home
} from 'lucide-react';
import { usePathname } from 'next/navigation';
export function AppSidebar() {
const pathname = usePathname();
const { data: session } = useCurrentSession();
const isAuthenticated = !!session;
const navItems = [
{ label: 'Home', href: routes.public.home, icon: Home },
{ label: 'Leagues', href: routes.public.leagues, icon: Trophy },
{ label: 'Drivers', href: routes.public.drivers, icon: Users },
{ label: 'Leaderboards', href: routes.public.leaderboards, icon: LayoutGrid },
{ label: 'Teams', href: routes.public.teams, icon: Flag },
{ label: 'Races', href: routes.public.races, icon: Calendar },
];
return (
<Surface
as="aside"
variant="dark"
width="64"
h="full"
borderRight
backgroundColor="linear-gradient(180deg, #0d0d0e 0%, #0a0a0b 100%)"
style={{
boxShadow: 'inset -1px 0 0 0 rgba(255, 255, 255, 0.01)',
}}
>
<DashboardRail>
<Box py={8} fullWidth>
<Box px={6} mb={10}>
<Box display="flex" alignItems="center" gap={2} mb={2}>
<Box w="0.5" h="3" bg="var(--ui-color-intent-primary)" />
<Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.2em">
DASHBOARD
</Text>
</Box>
</Box>
<Box px={4}>
{isAuthenticated ? (
<AuthedNav pathname={pathname} />
) : (
<PublicNav pathname={pathname} />
)}
</Box>
</Box>
</DashboardRail>
</Surface>
<Box display="flex" flexDirection="col" height="full" className="bg-base-black border-r border-outline-steel">
{/* Brand Header */}
<Box p={6} pb={8}>
<BrandMark />
</Box>
{/* Navigation */}
<Box flex={1} px={2} className="overflow-y-auto">
<Stack gap={1}>
{navItems.map((item) => (
<NavLink
key={item.href}
href={item.href}
label={item.label}
icon={item.icon}
isActive={pathname === item.href}
variant="sidebar"
/>
))}
</Stack>
</Box>
</Box>
);
}

30
apps/website/components/layout/HeaderActions.tsx
View File

@@ -1,45 +1,49 @@
import { routes } from '@/lib/routing/RouteConfig';
import { Button } from '@/ui/Button';
import { Stack } from '@/ui/Stack';
import { LogIn, UserPlus } from 'lucide-react';
import { Box } from '@/ui/Box';
interface HeaderActionsProps {
isAuthenticated: boolean;
}
/**
* HeaderActions provides the primary actions in the header (Login, Signup, Profile).
*/
export function HeaderActions({ isAuthenticated }: HeaderActionsProps) {
if (isAuthenticated) {
return (
<Stack direction="row" gap={3}>
<Button as="a" href={routes.protected.profile} variant="secondary" size="sm">
Profile
</Button>
</Stack>
<Button
as="a"
href={routes.protected.profile}
variant="ghost"
size="sm"
className="text-text-med hover:text-text-high transition-colors duration-200"
>
Profile
</Button>
);
}
return (
<Stack direction="row" gap={3}>
<Stack direction="row" gap={4} align="center">
<Button
as="a"
href={routes.auth.login}
variant="ghost"
size="sm"
icon={<LogIn size={16} />}
data-testid="public-nav-login"
className="text-text-med hover:text-text-high transition-colors duration-200"
>
Login
Sign In
</Button>
<Box className="w-px h-4 bg-outline-steel" />
<Button
as="a"
href={routes.auth.signup}
variant="primary"
size="sm"
icon={<UserPlus size={16} />}
data-testid="public-nav-signup"
className="px-6 font-medium tracking-wide"
>
Sign Up
</Button>

11
apps/website/components/layout/PublicNav.tsx
View File

@@ -1,6 +1,6 @@
import { routes } from '@/lib/routing/RouteConfig';
import { Stack } from '@/ui/Stack';
import { Calendar, Home, Layout, Trophy, Users } from 'lucide-react';
import { Calendar, Home, LayoutGrid, Trophy, Users, Flag } from 'lucide-react';
import { NavLink } from '@/ui/NavLink';
interface PublicNavProps {
@@ -8,21 +8,18 @@ interface PublicNavProps {
direction?: 'row' | 'col';
}
/**
* PublicNav displays navigation items for unauthenticated users.
*/
export function PublicNav({ pathname, direction = 'col' }: PublicNavProps) {
const items = [
{ label: 'Home', href: routes.public.home, icon: Home },
{ label: 'Leagues', href: routes.public.leagues, icon: Trophy },
{ label: 'Drivers', href: routes.public.drivers, icon: Users },
{ label: 'Leaderboards', href: routes.public.leaderboards, icon: Layout },
{ label: 'Teams', href: routes.public.teams, icon: Users },
{ label: 'Leaderboards', href: routes.public.leaderboards, icon: LayoutGrid },
{ label: 'Teams', href: routes.public.teams, icon: Flag },
{ label: 'Races', href: routes.public.races, icon: Calendar },
];
return (
<Stack direction={direction} gap={direction === 'row' ? 4 : 1}>
<Stack direction={direction} gap={direction === 'row' ? 1 : 1}>
{items.map((item) => (
<NavLink
key={item.href}