website refactor

2026-01-18 13:26:35 +01:00
parent 350c78504d
commit 0b301feb61
225 changed files with 1678 additions and 26666 deletions
--- a/apps/website/templates/DriverProfileTemplate.tsx
+++ b/apps/website/templates/DriverProfileTemplate.tsx
@@ -11,15 +11,15 @@ import { LoadingSpinner } from '@/ui/LoadingSpinner';
 import { Text } from '@/ui/Text';
 import { AchievementGrid } from '@/components/achievements/AchievementGrid';
 import { FriendsPreview } from '@/components/social/FriendsPreview';
-import { TeamMembershipGrid } from '@/ui/TeamMembershipGrid';
-import { RatingBreakdown } from '@/ui/RatingBreakdown';
+import { TeamMembershipGrid } from '@/components/teams/TeamMembershipGrid';
+import { RatingBreakdown } from '@/components/drivers/RatingBreakdown';

 import { DriverProfileHeader } from '@/components/drivers/DriverProfileHeader';
 import { DriverStatsPanel } from '@/components/drivers/DriverStatsPanel';
 import { DriverProfileTabs, type ProfileTab } from '@/components/drivers/DriverProfileTabs';
 import { DriverPerformanceOverview } from '@/components/drivers/DriverPerformanceOverview';
 import { DriverRacingProfile } from '@/components/drivers/DriverRacingProfile';
-import { CareerStats } from '@/ui/CareerStats';
+import { CareerStats } from '@/components/drivers/CareerStats';

 import type { DriverProfileViewData } from '@/lib/types/view-data/DriverProfileViewData';

--- a/apps/website/templates/DriverRankingsTemplate.tsx
+++ b/apps/website/templates/DriverRankingsTemplate.tsx
@@ -1,13 +1,15 @@
 'use client';

 import React from 'react';
-import { Trophy } from 'lucide-react';
+import { Trophy, ChevronLeft } from 'lucide-react';
 import { Container } from '@/ui/Container';
-import type { DriverRankingsViewData } from '@/lib/view-data/DriverRankingsViewData';
-import { LeaderboardHeader } from '@/components/leaderboards/LeaderboardHeader';
+import { PageHeader } from '@/ui/PageHeader';
+import { RankingsPodium } from '@/components/leaderboards/RankingsPodium';
+import { RankingsTable } from '@/components/leaderboards/RankingsTable';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
 import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
-import { LeaderboardPodium } from '@/components/leaderboards/LeaderboardPodium';
-import { LeaderboardTable } from '@/components/leaderboards/LeaderboardTable';
+import type { DriverRankingsViewData } from '@/lib/view-data/DriverRankingsViewData';

 interface DriverRankingsTemplateProps {
  viewData: DriverRankingsViewData;
@@ -26,17 +28,26 @@ export function DriverRankingsTemplate({
 }: DriverRankingsTemplateProps): React.ReactElement {
  return (
    <Container size="lg" py={8}>
-      <LeaderboardHeader
+      <PageHeader
        title="Driver Leaderboard"
        description="Full rankings of all drivers by performance metrics"
        icon={Trophy}
-        onBack={onBackToLeaderboards}
-        backLabel="Back to Leaderboards"
+        action={
+          onBackToLeaderboards && (
+            <Button 
+              variant="secondary" 
+              onClick={onBackToLeaderboards} 
+              icon={<Icon icon={ChevronLeft} size={4} />}
+            >
+              Back to Leaderboards
+            </Button>
+          )
+        }
      />

      {/* Top 3 Podium */}
      {viewData.podium.length > 0 && !searchQuery && (
-        <LeaderboardPodium 
+        <RankingsPodium 
          podium={viewData.podium.map(d => ({
            ...d,
            rating: Number(d.rating),
@@ -54,7 +65,7 @@ export function DriverRankingsTemplate({
      />

      {/* Leaderboard Table */}
-      <LeaderboardTable 
+      <RankingsTable 
        drivers={viewData.drivers.map(d => ({
          ...d,
          rating: Number(d.rating),
--- a/apps/website/templates/HomeTemplate.tsx
+++ b/apps/website/templates/HomeTemplate.tsx
@@ -11,7 +11,6 @@ import { TeamSummaryPanel } from '@/components/home/TeamSummaryPanel';
 import { HomeFeatureDescription } from '@/components/home/HomeFeatureDescription';
 import { FAQ } from '@/components/landing/FAQ';
 import { HomeFooterCTA } from '@/components/home/HomeFooterCTA';
-import { Footer } from '@/ui/Footer';
 import { ModeGuard } from '@/components/shared/ModeGuard';
 import { CareerProgressionMockup } from '@/components/mockups/CareerProgressionMockup';
 import { RaceHistoryMockup } from '@/components/mockups/RaceHistoryMockup';
@@ -55,7 +54,7 @@ interface HomeTemplateProps {
 */
 export function HomeTemplate({ viewData }: HomeTemplateProps) {
  return (
-    <Box as="main" minHeight="screen" bg="graphite-black" color="text-white">
+    <Box color="text-white">
      {/* Hero Section */}
      <HomeHeader
        title="Modern Motorsport Infrastructure."
@@ -176,9 +175,6 @@ export function HomeTemplate({ viewData }: HomeTemplateProps) {
      {/* CTA & FAQ */}
      <HomeFooterCTA />
      <FAQ />
-      
-      {/* Footer */}
-      <Footer />
    </Box>
  );
 }
--- a/apps/website/templates/LeaderboardsTemplate.tsx
+++ b/apps/website/templates/LeaderboardsTemplate.tsx
@@ -1,12 +1,13 @@
 'use client';

 import React from 'react';
+import { Trophy, Users } from 'lucide-react';
 import { Container } from '@/ui/Container';
 import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
+import { PageHero } from '@/ui/PageHero';
 import { DriverLeaderboardPreview } from '@/components/leaderboards/DriverLeaderboardPreview';
 import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
-import { LeaderboardsHero } from '@/components/leaderboards/LeaderboardsHero';
 import type { LeaderboardsViewData } from '@/lib/view-data/LeaderboardsViewData';

 interface LeaderboardsTemplateProps {
@@ -26,9 +27,24 @@ export function LeaderboardsTemplate({
 }: LeaderboardsTemplateProps) {
  return (
    <Container size="lg" py={8}>
-      <LeaderboardsHero 
-        onNavigateToDrivers={onNavigateToDrivers}
-        onNavigateToTeams={onNavigateToTeams}
+      <PageHero
+        title="Leaderboards"
+        description="Track the best drivers and teams across all competitions. Every race counts. Every position matters. Analyze telemetry-grade rankings and performance metrics."
+        icon={Trophy}
+        actions={[
+          {
+            label: 'Driver Rankings',
+            onClick: onNavigateToDrivers,
+            icon: Trophy,
+            variant: 'primary'
+          },
+          {
+            label: 'Team Rankings',
+            onClick: onNavigateToTeams,
+            icon: Users,
+            variant: 'secondary'
+          }
+        ]}
      />

      <Grid cols={12} gap={6} mt={10}>
--- a/apps/website/templates/LeagueDetailTemplate.tsx
+++ b/apps/website/templates/LeagueDetailTemplate.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
-import { LeagueHeader } from '@/components/leagues/LeagueHeader';
+import { LeagueHeaderPanel } from '@/components/leagues/LeagueHeaderPanel';
 import { LeagueNavTabs } from '@/components/leagues/LeagueNavTabs';
 import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
 import { Link } from '@/ui/Link';
@@ -45,13 +45,7 @@ export function LeagueDetailTemplate({
          <Text size="xs" weight="medium" color="text-zinc-300" uppercase letterSpacing="widest">{viewData.name}</Text>
        </Box>

-        <LeagueHeader
-          leagueId={viewData.leagueId}
-          leagueName={viewData.name}
-          description={viewData.description}
-          ownerId={viewData.ownerSummary?.driverId || ''}
-          ownerName={viewData.ownerSummary?.driverName || ''}
-        />
+        <LeagueHeaderPanel viewData={viewData} />

        <LeagueNavTabs tabs={tabs} currentPathname={pathname} />

--- a/apps/website/templates/LeagueRulebookTemplate.tsx
+++ b/apps/website/templates/LeagueRulebookTemplate.tsx
@@ -6,8 +6,8 @@ import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
 import { Grid } from '@/ui/Grid';
-import { PointsTable } from '@/ui/PointsTable';
-import { RulebookTabs, type RulebookSection } from '@/ui/RulebookTabs';
+import { PointsTable } from '@/components/races/PointsTable';
+import { RulebookTabs, type RulebookSection } from '@/components/leagues/RulebookTabs';
 import type { LeagueRulebookViewData } from '@/lib/view-data/LeagueRulebookViewData';
 import { Surface } from '@/ui/Surface';
 import { Book, Shield, Scale, AlertTriangle, Info, Clock, type LucideIcon } from 'lucide-react';
--- a/apps/website/templates/ProfileTemplate.tsx
+++ b/apps/website/templates/ProfileTemplate.tsx
@@ -7,7 +7,7 @@ import { ProfileNavTabs, type ProfileTab } from '@/components/profile/ProfileNav
 import { ProfileDetailsPanel } from '@/components/profile/ProfileDetailsPanel';
 import { SessionHistoryTable } from '@/components/profile/SessionHistoryTable';
 import { ProfileStatGrid } from '@/ui/ProfileStatGrid';
-import { TeamMembershipGrid } from '@/ui/TeamMembershipGrid';
+import { TeamMembershipGrid } from '@/components/teams/TeamMembershipGrid';
 import { AchievementGrid } from '@/components/achievements/AchievementGrid';
 import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
 import { Box } from '@/ui/Box';
--- a/apps/website/templates/RaceDetailTemplate.tsx
+++ b/apps/website/templates/RaceDetailTemplate.tsx
@@ -8,9 +8,9 @@ import { GridItem } from '@/ui/GridItem';
 import { Skeleton } from '@/ui/Skeleton';
 import { Text } from '@/ui/Text';
 import { Box } from '@/ui/Box';
-import { RaceUserResult } from '@/ui/RaceUserResultWrapper';
+import { RaceUserResult } from '@/components/races/RaceUserResultWrapper';
 import { LeagueSummaryCard } from '@/components/leagues/LeagueSummaryCardWrapper';
-import { RaceActionBar } from '@/ui/RaceActionBar';
+import { RaceActionBar } from '@/components/races/RaceActionBar';
 import { RaceDetailsHeader } from '@/components/races/RaceDetailsHeader';
 import { TrackConditionsPanel } from '@/components/races/TrackConditionsPanel';
 import { EntrantsTable } from '@/components/races/EntrantsTable';
--- a/apps/website/templates/RaceResultsTemplate.tsx
+++ b/apps/website/templates/RaceResultsTemplate.tsx
@@ -10,7 +10,7 @@ import { Icon } from '@/ui/Icon';
 import { Box } from '@/ui/Box';
 import { Trophy, Zap, AlertTriangle, type LucideIcon } from 'lucide-react';
 import type { RaceResultsViewData } from '@/lib/view-data/races/RaceResultsViewData';
-import { RaceResultsTable } from '@/ui/RaceResultsTable';
+import { RaceResultsTable } from '@/components/races/RaceResultsTable';
 import { RaceDetailsHeader } from '@/components/races/RaceDetailsHeader';

 export interface RaceResultsTemplateProps {
--- a/apps/website/templates/RaceStewardingTemplate.tsx
+++ b/apps/website/templates/RaceStewardingTemplate.tsx
@@ -9,10 +9,10 @@ import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
 import { Box } from '@/ui/Box';
 import { Flag, CheckCircle, Gavel, Info } from 'lucide-react';
-import { RaceStewardingStats } from '@/ui/RaceStewardingStats';
-import { StewardingTabs } from '@/ui/StewardingTabs';
+import { RaceStewardingStats } from '@/components/races/RaceStewardingStats';
+import { StewardingTabs } from '@/components/leagues/StewardingTabs';
 import { ProtestCard } from '@/components/leagues/ProtestCardWrapper';
-import { RacePenaltyRow } from '@/ui/RacePenaltyRowWrapper';
+import { RacePenaltyRow } from '@/components/races/RacePenaltyRowWrapper';
 import { RaceDetailsHeader } from '@/components/races/RaceDetailsHeader';
 import type { RaceStewardingViewData } from '@/lib/view-data/races/RaceStewardingViewData';

--- a/apps/website/templates/RacesAllTemplate.tsx
+++ b/apps/website/templates/RacesAllTemplate.tsx
@@ -7,8 +7,8 @@ import { Skeleton } from '@/ui/Skeleton';
 import { Text } from '@/ui/Text';
 import { Box } from '@/ui/Box';
 import { Pagination } from '@/ui/Pagination';
-import { RaceFilterModal } from '@/ui/RaceFilterModal';
-import { RacesHeader } from '@/components/races/RacesHeader';
+import { RaceFilterModal } from '@/components/races/RaceFilterModal';
+import { RacePageHeader } from '@/components/races/RacePageHeader';
 import { RaceScheduleTable } from '@/components/races/RaceScheduleTable';
 import type { RacesViewData } from '@/lib/view-data/RacesViewData';
 import type { SessionStatus } from '@/components/races/SessionStatusBadge';
@@ -80,7 +80,7 @@ export function RacesAllTemplate({
    <Box as="main" minHeight="screen" bg="bg-base-black" py={8}>
      <Container size="lg">
        <Stack gap={8}>
-          <RacesHeader 
+          <RacePageHeader 
            totalCount={viewData.totalCount}
            scheduledCount={viewData.scheduledCount}
            runningCount={viewData.runningCount}
--- a/apps/website/templates/RacesTemplate.tsx
+++ b/apps/website/templates/RacesTemplate.tsx
@@ -7,9 +7,9 @@ import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
 import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
-import { RaceFilterModal } from '@/ui/RaceFilterModal';
+import { RaceFilterModal } from '@/components/races/RaceFilterModal';
 import type { RacesViewData } from '@/lib/view-data/RacesViewData';
-import { RacesHeader } from '@/components/races/RacesHeader';
+import { RacePageHeader } from '@/components/races/RacePageHeader';
 import { LiveRacesBanner } from '@/components/races/LiveRacesBanner';
 import { RaceFilterBar } from '@/components/races/RaceFilterBar';
 import { RaceScheduleTable } from '@/components/races/RaceScheduleTable';
@@ -54,7 +54,7 @@ export function RacesTemplate({
    <Box as="main" minHeight="screen" bg="bg-base-black" py={8}>
      <Container size="lg">
        <Stack gap={8}>
-          <RacesHeader 
+          <RacePageHeader 
            totalCount={viewData.totalCount}
            scheduledCount={viewData.scheduledCount}
            runningCount={viewData.runningCount}
--- a/apps/website/templates/TeamsTemplate.tsx
+++ b/apps/website/templates/TeamsTemplate.tsx
@@ -9,6 +9,7 @@ import { Container } from '@/ui/Container';
 import { EmptyState } from '@/components/shared/state/EmptyState';
 import { TeamsDirectoryHeader } from '@/components/teams/TeamsDirectoryHeader';
 import { TeamGrid } from '@/components/teams/TeamGrid';
+import { TeamCard } from '@/components/teams/TeamCardWrapper';
 import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
 import type { TeamsViewData } from '@/lib/view-data/TeamsViewData';

@@ -35,7 +36,18 @@ export function TeamsTemplate({ viewData, onTeamClick, onViewFullLeaderboard, on
            </Stack>
            
            {teams.length > 0 ? (
-              <TeamGrid teams={teams} onTeamClick={onTeamClick} />
+              <TeamGrid>
+                {teams.map((team) => (
+                  <TeamCard
+                    key={team.teamId}
+                    id={team.teamId}
+                    name={team.teamName}
+                    memberCount={team.memberCount}
+                    logo={team.logoUrl}
+                    onClick={() => onTeamClick?.(team.teamId)}
+                  />
+                ))}
+              </TeamGrid>
            ) : (
              <EmptyState
                icon={Users}
--- a/apps/website/templates/layout/GlobalSidebarTemplate.tsx
+++ b/apps/website/templates/layout/GlobalSidebarTemplate.tsx
@@ -2,25 +2,18 @@

 import { Box } from '@/ui/Box';
 import { DashboardRail } from '@/ui/DashboardRail';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import { Calendar, Home, Layout, Settings, Trophy, Users } from 'lucide-react';
-import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
+import { PublicNav } from '@/components/layout/PublicNav';
+import { AuthedNav } from '@/components/layout/AuthedNav';

 export interface GlobalSidebarViewData {}

 export function GlobalSidebarTemplate(_props: GlobalSidebarViewData) {
  const pathname = usePathname();
-
-  const navItems = [
-    { label: 'Dashboard', href: '/', icon: Home },
-    { label: 'Leagues', href: '/leagues', icon: Trophy },
-    { label: 'Teams', href: '/teams', icon: Users },
-    { label: 'Races', href: '/races', icon: Calendar },
-    { label: 'Leaderboards', href: '/leaderboards', icon: Layout },
-    { label: 'Settings', href: '/settings', icon: Settings },
-  ];
+  const { data: session } = useCurrentSession();
+  const isAuthenticated = !!session;

  return (
    <DashboardRail>
@@ -30,37 +23,13 @@ export function GlobalSidebarTemplate(_props: GlobalSidebarViewData) {
            NAVIGATION
          </Text>
        </Box>
-        <Stack as="nav" flexGrow={1} px={3} direction="col" gap={1}>
-          {navItems.map((item) => {
-            const isActive = pathname === item.href;
-            const Icon = item.icon;
-            return (
-              <Box
-                key={item.href}
-                as={Link}
-                href={item.href}
-                display="flex"
-                alignItems="center"
-                gap={3}
-                px={3}
-                py={2}
-                rounded="md"
-                transition
-                bg={isActive ? 'primary-accent/10' : 'transparent'}
-                color={isActive ? 'primary-accent' : 'text-gray-400'}
-                hoverBg={isActive ? 'primary-accent/10' : 'white/5'}
-                hoverTextColor={isActive ? 'primary-accent' : 'white'}
-                group
-              >
-                <Icon size={20} color={isActive ? '#198CFF' : '#6B7280'} />
-                <Text weight="medium">{item.label}</Text>
-                {isActive && (
-                  <Box ml="auto" w="4px" h="16px" bg="primary-accent" rounded="full" shadow="[0_0_8px_rgba(25,140,255,0.5)]" />
-                )}
-              </Box>
-            );
-          })}
-        </Stack>
+        <Box px={3}>
+          {isAuthenticated ? (
+            <AuthedNav pathname={pathname} />
+          ) : (
+            <PublicNav pathname={pathname} />
+          )}
+        </Box>
      </Box>
    </DashboardRail>
  );
--- a/apps/website/templates/layout/HeaderContentTemplate.tsx
+++ b/apps/website/templates/layout/HeaderContentTemplate.tsx
@@ -1,39 +1,26 @@
 import React from 'react';
-import Image from 'next/image';
-import Link from 'next/link';
 import { Text } from '@/ui/Text';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
+import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
+import { usePathname } from 'next/navigation';
+import { routes } from '@/lib/routing/RouteConfig';
+import { BrandMark } from '@/components/layout/BrandMark';
+import { HeaderActions } from '@/components/layout/HeaderActions';
+import { PublicNav } from '@/components/layout/PublicNav';

 export interface HeaderContentViewData {}

 export function HeaderContentTemplate(_props: HeaderContentViewData) {
+  const pathname = usePathname();
+  const { data: session } = useCurrentSession();
+  const isAuthenticated = !!session;
+  const homeHref = isAuthenticated ? routes.protected.dashboard : routes.public.home;
+
  return (
    <>
      <Stack direction="row" align="center" gap={6}>
-        <Box as={Link} href="/" display="inline-flex" alignItems="center" group>
-          <Box position="relative">
-            <Box h={{ base: '24px', md: '28px' }} w="auto" transition opacity={1} groupHoverOpacity={0.8}>
-              <Image
-                src="/images/logos/wordmark-rectangle-dark.svg"
-                alt="GridPilot"
-                width={160}
-                height={30}
-                priority
-              />
-            </Box>
-            <Box 
-              position="absolute" 
-              bottom="-4px" 
-              left="0" 
-              w="0" 
-              h="2px" 
-              bg="primary-accent" 
-              transition 
-              groupHoverWidth="full" 
-            />
-          </Box>
-        </Box>
+        <BrandMark href={homeHref} priority />
        <Box display={{ base: 'none', sm: 'flex' }} alignItems="center" gap={2} borderLeft borderColor="[#23272B]" pl={6}>
          <Box w="6px" h="6px" rounded="full" bg="primary-accent" animate="pulse" />
          <Text size="xs" color="text-gray-500" weight="bold" font="mono" letterSpacing="0.2em">
@@ -41,12 +28,19 @@ export function HeaderContentTemplate(_props: HeaderContentViewData) {
          </Text>
        </Box>
      </Stack>
+
+      {!isAuthenticated && (
+        <Box display={{ base: 'none', md: 'flex' }} data-testid="public-top-nav">
+          <PublicNav pathname={pathname} direction="row" />
+        </Box>
+      )}
      
      <Box display="flex" alignItems="center" gap={4}>
        <Stack direction="row" display={{ base: 'none', md: 'flex' }} align="center" gap={1} px={3} py={1} border borderColor="[#23272B]" bg="[#141619]/20">
          <Text size="xs" color="text-gray-600" weight="bold" font="mono">STATUS:</Text>
          <Text size="xs" color="text-success-green" weight="bold" font="mono">OPERATIONAL</Text>
        </Stack>
+        <HeaderActions isAuthenticated={isAuthenticated} />
      </Box>
    </>
  );
--- a/apps/website/templates/layout/RootAppShellTemplate.tsx
+++ b/apps/website/templates/layout/RootAppShellTemplate.tsx
@@ -9,6 +9,9 @@ import { GlobalSidebarTemplate } from './GlobalSidebarTemplate';
 import { GlobalFooterTemplate } from './GlobalFooterTemplate';
 import { HeaderContentTemplate } from './HeaderContentTemplate';
 import { Box } from '@/ui/Box';
+import { usePathname } from 'next/navigation';
+import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
+import { routes } from '@/lib/routing/RouteConfig';

 export interface RootAppShellViewData {
  children: React.ReactNode;
@@ -22,6 +25,14 @@ export interface RootAppShellViewData {
 * - ContentViewport = content area
 */
 export function RootAppShellTemplate({ children }: RootAppShellViewData) {
+  const pathname = usePathname();
+  const { data: session } = useCurrentSession();
+  const isAuthenticated = !!session;
+  
+  // Hide sidebar on landing page for unauthenticated users
+  const isLandingPage = pathname === routes.public.home;
+  const showSidebar = isAuthenticated && !isLandingPage;
+
  return (
    <AppShell>
      <ControlBar>
@@ -31,10 +42,10 @@ export function RootAppShellTemplate({ children }: RootAppShellViewData) {
      </ControlBar>
      
      <Box display="flex" flexGrow={1} overflow="hidden">
-        <GlobalSidebarTemplate />
+        {showSidebar && <GlobalSidebarTemplate />}
        
        <Box display="flex" flexGrow={1} flexDirection="col" overflow="hidden">
-          <ContentViewport>
+          <ContentViewport fullWidth={!showSidebar}>
            {children}
          </ContentViewport>
          <GlobalFooterTemplate />