website refactor

apps/website/components/layout/AppFooter.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { Surface } from '@/ui/Surface';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+
+export function AppFooter() {
+  return (
+    <Surface
+      as="footer"
+      variant="precision"
+      paddingY={6}
+      paddingX={6}
+      borderTop={true}
+      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="1px" h="12px" bg="var(--ui-color-border-muted)" opacity={0.6} />
+          <Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
+            Session ready
+          </Text>
+        </Stack>
+
+        <Box display={{ base: 'none', sm: 'flex' }}>
+          <Stack direction="row" align="center" gap={2}>
+            <Box w="6px" h="6px" rounded="full" bg="var(--ui-color-intent-success)" />
+            <Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
+              System Normal
+            </Text>
+          </Stack>
+        </Box>
+      </Box>
+    </Surface>
+  );
+}

apps/website/components/layout/AppHeader.tsx

@@ -0,0 +1,78 @@
+'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>
+  );
+}

apps/website/components/layout/AppSidebar.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { AuthedNav } from '@/components/layout/AuthedNav';
+import { PublicNav } from '@/components/layout/PublicNav';
+import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
+import { Box } from '@/ui/Box';
+import { DashboardRail } from '@/components/dashboard/DashboardRail';
+import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
+import { usePathname } from 'next/navigation';
+
+export function AppSidebar() {
+  const pathname = usePathname();
+  const { data: session } = useCurrentSession();
+  const isAuthenticated = !!session;
+
+  return (
+    <Surface
+      as="aside"
+      variant="dark"
+      width="260px"
+      position="fixed"
+      top="56px"
+      bottom={0}
+      left={0}
+      zIndex={40}
+      style={{
+        borderRight: '1px solid var(--ui-color-border-default)',
+        boxShadow: 'inset -1px 0 0 0 rgba(255, 255, 255, 0.01)',
+        background: 'linear-gradient(180deg, #0d0d0e 0%, #0a0a0b 100%)',
+      }}
+    >
+      <DashboardRail>
+        <Box py={8} fullWidth>
+          <Box px={6} mb={10}>
+            <Box display="flex" alignItems="center" gap={2} mb={2}>
+              <Box w="2px" h="12px" 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>
+  );
+}

apps/website/components/layout/MainContent.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { Box } from '@/ui/Box';
+import { ReactNode } from 'react';
+
+interface MainContentProps {
+  children: ReactNode;
+  hasSidebar: boolean;
+}
+
+export function MainContent({ children, hasSidebar }: MainContentProps) {
+  return (
+    <Box
+      as="main"
+      display="flex"
+      flexDirection="col"
+      flexGrow={1}
+      style={{
+        paddingTop: '56px', // Header height
+        marginLeft: hasSidebar ? '260px' : '0',
+        transition: 'margin-left 0.2s ease-in-out',
+      }}
+    >
+      <Box
+        position="relative"
+        width="full"
+        maxWidth="full"
+        flexGrow={1}
+        display="flex"
+        flexDirection="col"
+      >
+        {/* Background Grid */}
+        <Box
+          position="absolute"
+          inset={0}
+          pointerEvents="none"
+          zIndex={0}
+          style={{
+            backgroundImage:
+              'radial-gradient(circle at 2px 2px, rgba(255,255,255,0.018) 1px, transparent 0)',
+            backgroundSize: '32px 32px',
+            opacity: 0.5,
+            backgroundAttachment: 'fixed',
+          }}
+        />
+
+        {/* Content */}
+        <Box position="relative" zIndex={1} flexGrow={1} display="flex" flexDirection="col">
+          {children}
+        </Box>
+      </Box>
+    </Box>
+  );
+}