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/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 />