website refactor

apps/website/app/auth/forgot-password/page.tsx

@@ -6,9 +6,9 @@
  * 2. Client component renders with ViewData
  */
 
+import { AuthError } from '@/components/auth/AuthError';
 import { ForgotPasswordPageQuery } from '@/lib/page-queries/auth/ForgotPasswordPageQuery';
 import { ForgotPasswordClient } from './ForgotPasswordClient';
-import { AuthError } from '@/ui/AuthError';
 
 export default async function ForgotPasswordPage({
   searchParams,

apps/website/app/auth/login/LoginClient.tsx

@@ -7,17 +7,17 @@
 
 'use client';
 
-import { useState, useEffect, useMemo } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
 import { useAuth } from '@/components/auth/AuthContext';
+import { AuthLoading } from '@/components/auth/AuthLoading';
 import { LoginFlowController, LoginState } from '@/lib/auth/LoginFlowController';
 import { LoginViewData } from '@/lib/builders/view-data/types/LoginViewData';
-import { LoginTemplate } from '@/templates/auth/LoginTemplate';
+import { LoginViewModelBuilder } from '@/lib/builders/view-models/LoginViewModelBuilder';
 import { LoginMutation } from '@/lib/mutations/auth/LoginMutation';
 import { validateLoginForm, type LoginFormValues } from '@/lib/utils/validation';
-import { LoginViewModelBuilder } from '@/lib/builders/view-models/LoginViewModelBuilder';
 import { LoginViewModel } from '@/lib/view-models/auth/LoginViewModel';
-import { AuthLoading } from '@/ui/AuthLoading';
+import { LoginTemplate } from '@/templates/auth/LoginTemplate';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
 
 interface LoginClientProps {
   viewData: LoginViewData;

apps/website/app/auth/login/page.tsx

@@ -6,9 +6,9 @@
  * 2. Client component renders with ViewData
  */
 
+import { AuthError } from '@/components/auth/AuthError';
 import { LoginPageQuery } from '@/lib/page-queries/auth/LoginPageQuery';
 import { LoginClient } from './LoginClient';
-import { AuthError } from '@/ui/AuthError';
 
 export default async function LoginPage({
   searchParams,

apps/website/app/auth/reset-password/page.tsx

@@ -6,9 +6,9 @@
  * 2. Client component renders with ViewData
  */
 
+import { AuthError } from '@/components/auth/AuthError';
 import { ResetPasswordPageQuery } from '@/lib/page-queries/auth/ResetPasswordPageQuery';
 import { ResetPasswordClient } from './ResetPasswordClient';
-import { AuthError } from '@/ui/AuthError';
 
 export default async function ResetPasswordPage({
   searchParams,

apps/website/app/auth/signup/page.tsx

@@ -6,9 +6,9 @@
  * 2. Client component renders with ViewData
  */
 
+import { AuthError } from '@/components/auth/AuthError';
 import { SignupPageQuery } from '@/lib/page-queries/auth/SignupPageQuery';
 import { SignupClient } from './SignupClient';
-import { AuthError } from '@/ui/AuthError';
 
 export default async function SignupPage({
   searchParams,

apps/website/app/drivers/[id]/DriverProfilePageClient.tsx

@@ -1,10 +1,10 @@
 'use client';
 
+import type { ProfileTab } from '@/components/profile/ProfileTabs';
 import type { DriverProfileViewData } from '@/lib/types/view-data/DriverProfileViewData';
 import { DriverProfileTemplate } from '@/templates/DriverProfileTemplate';
 import { Container } from '@/ui/Container';
 import { Stack } from '@/ui/primitives/Stack';
-import type { ProfileTab } from '@/ui/ProfileTabs';
 import { Text } from '@/ui/Text';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';

apps/website/components/auth/AuthError.tsx

@@ -1,6 +1,6 @@
 
 
-import { ErrorBanner } from './ErrorBanner';
+import { ErrorBanner } from '../../ui/ErrorBanner';
 
 interface AuthErrorProps {
   action: string;

apps/website/components/auth/AuthLoading.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
+import { LoadingSpinner } from '../../ui/LoadingSpinner';
-import { Box } from './primitives/Box';
+import { Box } from '../../ui/primitives/Box';
-import { Stack } from './primitives/Stack';
+import { Stack } from '../../ui/primitives/Stack';
-import { LoadingSpinner } from './LoadingSpinner';
+import { Text } from '../../ui/Text';
-import { Text } from './Text';
 
 interface AuthLoadingProps {
   message?: string;

apps/website/components/dashboard/DashboardHero.tsx

@@ -1,12 +1,11 @@
-import React from 'react';
+import { Flag, Star, Trophy, Users } from 'lucide-react';
-import { Box } from './primitives/Box';
+import { Avatar } from '../../ui/Avatar';
-import { Stack } from './primitives/Stack';
+import { Badge } from '../../ui/Badge';
-import { Text } from './Text';
+import { Heading } from '../../ui/Heading';
-import { Heading } from './Heading';
+import { Icon } from '../../ui/Icon';
-import { Avatar } from './Avatar';
+import { Box } from '../../ui/primitives/Box';
-import { Badge } from './Badge';
+import { Stack } from '../../ui/primitives/Stack';
-import { Trophy, Flag, Users, Star } from 'lucide-react';
+import { Text } from '../../ui/Text';
-import { Icon } from './Icon';
 
 interface DashboardHeroProps {
   driverName: string;

apps/website/components/dashboard/DashboardHeroWrapper.tsx

@@ -1,6 +1,6 @@
+import { DashboardHero as UiDashboardHero } from '@/components/dashboard/DashboardHero';
 import { routes } from '@/lib/routing/RouteConfig';
 import { Button } from '@/ui/Button';
-import { DashboardHero as UiDashboardHero } from '@/ui/DashboardHero';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
 import { StatBox } from '@/ui/StatBox';

apps/website/components/onboarding/OnboardingError.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
+import { Box } from '../../ui/primitives/Box';
-import { Box } from './primitives/Box';
+import { Text } from '../../ui/Text';
-import { Text } from './Text';
 
 interface OnboardingErrorProps {
   message: string;

apps/website/components/onboarding/OnboardingForm.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode, FormEvent } from 'react';
+import { FormEvent, ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { Box } from '../../ui/primitives/Box';
 
 interface OnboardingFormProps {
   children: ReactNode;

apps/website/components/profile/ProfileStatGrid.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
+import { Box } from '../../ui/primitives/Box';
-import { Box } from './primitives/Box';
+import { Grid } from '../../ui/primitives/Grid';
-import { Text } from './Text';
+import { Text } from '../../ui/Text';
-import { Grid } from './primitives/Grid';
 
 interface Stat {
   label: string;

apps/website/templates/ProfileTemplate.tsx

@@ -5,6 +5,7 @@ import { CreateDriverForm } from '@/components/drivers/CreateDriverForm';
 import { ProfileDetailsPanel } from '@/components/profile/ProfileDetailsPanel';
 import { ProfileHeader } from '@/components/profile/ProfileHeader';
 import { ProfileNavTabs, type ProfileTab } from '@/components/profile/ProfileNavTabs';
+import { ProfileStatGrid } from '@/components/profile/ProfileStatGrid';
 import { SessionHistoryTable } from '@/components/profile/SessionHistoryTable';
 import { TeamMembershipGrid } from '@/components/teams/TeamMembershipGrid';
 import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
@@ -14,7 +15,6 @@ import { Icon } from '@/ui/Icon';
 import { Box } from '@/ui/primitives/Box';
 import { Stack } from '@/ui/primitives/Stack';
 import { Surface } from '@/ui/primitives/Surface';
-import { ProfileStatGrid } from '@/ui/ProfileStatGrid';
 import { Text } from '@/ui/Text';
 import { User } from 'lucide-react';
 

apps/website/templates/layout/GlobalFooterTemplate.tsx

@@ -1,4 +1,4 @@
-import { AppFooter } from '@/ui/AppFooter';
+import { AppFooter } from '@/components/app/AppFooter';
 import { Box } from '@/ui/primitives/Box';
 import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';

apps/website/templates/layout/RootAppShellTemplate.tsx

@@ -1,8 +1,8 @@
 'use client';
 
+import { AppShell } from '@/components/app/AppShell';
 import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
 import { routes } from '@/lib/routing/RouteConfig';
-import { AppShell } from '@/ui/AppShell';
 import { ContentViewport } from '@/ui/ContentViewport';
 import { ControlBar } from '@/ui/ControlBar';
 import { Box } from '@/ui/primitives/Box';

apps/website/templates/onboarding/OnboardingTemplate.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import { AvatarInfo, AvatarStep } from '@/components/onboarding/AvatarStep';
+import { OnboardingError } from '@/components/onboarding/OnboardingError';
 import { OnboardingHelpPanel } from '@/components/onboarding/OnboardingHelpPanel';
 import { OnboardingPrimaryActions } from '@/components/onboarding/OnboardingPrimaryActions';
 import { OnboardingShell } from '@/components/onboarding/OnboardingShell';
 import { OnboardingStepPanel } from '@/components/onboarding/OnboardingStepPanel';
 import { OnboardingStepper } from '@/components/onboarding/OnboardingStepper';
 import { PersonalInfo, PersonalInfoStep } from '@/components/onboarding/PersonalInfoStep';
-import { OnboardingError } from '@/ui/OnboardingError';
 import { Box } from '@/ui/primitives/Box';
 import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';

apps/website/ui/Accordion.tsx

@@ -17,7 +17,7 @@ interface AccordionProps {
 
 export function Accordion({ title, icon, children, isOpen, onToggle }: AccordionProps) {
   return (
-    <Box border={true} borderColor="border-charcoal-outline" rounded="lg" overflow="hidden" bg="bg-iron-gray/30">
+    <Box border borderColor="border-charcoal-outline" rounded="lg" overflow="hidden" bg="bg-iron-gray/30">
       <Box
         as="button"
         onClick={onToggle}
@@ -27,7 +27,8 @@ export function Accordion({ title, icon, children, isOpen, onToggle }: Accordion
         px={3}
         py={2}
         fullWidth
-        className="hover:bg-iron-gray/50 transition-colors"
+        hoverBg="iron-gray/50"
+        clickable
       >
         <Stack direction="row" align="center" gap={2}>
           {icon}
@@ -39,7 +40,7 @@ export function Accordion({ title, icon, children, isOpen, onToggle }: Accordion
       </Box>
       
       {isOpen && (
-        <Box p={3} borderTop={true} borderColor="border-charcoal-outline">
+        <Box p={3} borderTop borderColor="border-charcoal-outline">
           {children}
         </Box>
       )}

apps/website/ui/Badge.tsx

@@ -3,14 +3,14 @@ import { Box, BoxProps } from './primitives/Box';
 import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
 
-interface BadgeProps extends Omit<BoxProps<'div'>, 'children'> {
+interface BadgeProps {
   children: ReactNode;
   variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
   size?: 'xs' | 'sm' | 'md';
   icon?: LucideIcon;
 }
 
-export function Badge({ children, className = '', variant = 'default', size = 'sm', icon, rounded = 'none', ...props }: BadgeProps) {
+export function Badge({ children, variant = 'default', size = 'sm', icon }: BadgeProps) {
   const baseClasses = 'flex items-center gap-1.5 border font-bold uppercase tracking-widest';
   
   const sizeClasses = {
@@ -19,16 +19,6 @@ export function Badge({ children, className = '', variant = 'default', size = 's
     md: 'px-3 py-1 text-xs'
   };
 
-  const roundedClasses = {
-    none: 'rounded-none',
-    sm: 'rounded-sm',
-    md: 'rounded-md',
-    lg: 'rounded-lg',
-    xl: 'rounded-xl',
-    '2xl': 'rounded-2xl',
-    full: 'rounded-full'
-  };
-
   const variantClasses = {
     default: 'bg-gray-500/10 border-gray-500/30 text-gray-400',
     primary: 'bg-primary-accent/10 border-primary-accent/30 text-primary-accent',
@@ -41,13 +31,11 @@ export function Badge({ children, className = '', variant = 'default', size = 's
   const classes = [
     baseClasses, 
     sizeClasses[size],
-    typeof rounded === 'string' && roundedClasses[rounded as keyof typeof roundedClasses] ? roundedClasses[rounded as keyof typeof roundedClasses] : '',
+    variantClasses[variant],
-    !props.bg && !props.color && !props.borderColor ? variantClasses[variant] : '',
-    className
   ].filter(Boolean).join(' ');
 
   return (
-    <Box className={classes} {...props}>
+    <Box className={classes}>
       {icon && <Icon icon={icon} size={3} />}
       {children}
     </Box>

apps/website/ui/Breadcrumbs.tsx

@@ -10,7 +10,6 @@ export type BreadcrumbItem = {
 
 interface BreadcrumbsProps {
   items: BreadcrumbItem[];
-  className?: string;
 }
 
 export function Breadcrumbs({ items }: BreadcrumbsProps) {

apps/website/ui/DashboardRail.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-interface DashboardRailProps {
-  children?: React.ReactNode;
-  className?: string;
-}
-
-/**
- * DashboardRail is the primary sidebar navigation for the "Telemetry Workspace".
- * It provides a high-density, instrument-grade navigation experience.
- * Aligned with "Precision Racing Minimal" theme.
- */
-export function DashboardRail({ children, className = '' }: DashboardRailProps) {
-  return (
-    <aside 
-      className={`hidden lg:flex flex-col w-64 bg-[#141619] border-r border-[#23272B] overflow-y-auto ${className}`}
-    >
-      {children}
-    </aside>
-  );
-}

apps/website/ui/Layout.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Box } from './primitives/Box';
 import { Grid } from './primitives/Grid';
 import { Stack } from './primitives/Stack';
@@ -14,7 +14,6 @@ import { Stack } from './primitives/Stack';
 
 interface LayoutProps {
   children: ReactNode;
-  className?: string;
   padding?: string;
   gap?: string;
   grid?: boolean;
@@ -27,7 +26,6 @@ interface LayoutProps {
 
 export function Layout({ 
   children, 
-  className = '',
   padding = 'p-6',
   gap = 'gap-4',
   grid = false,
@@ -41,7 +39,7 @@ export function Layout({
     return (
       <Grid 
         cols={gridCols as any} 
-        className={`${padding} ${gap} ${className}`}
+        className={`${padding} ${gap}`}
       >
         {children}
       </Grid>
@@ -54,7 +52,7 @@ export function Layout({
         direction={flexCol ? 'col' : 'row'} 
         align={items} 
         justify={justify} 
-        className={`${padding} ${gap} ${className}`}
+        className={`${padding} ${gap}`}
       >
         {children}
       </Stack>
@@ -62,7 +60,7 @@ export function Layout({
   }
   
   return (
-    <Box className={`${padding} ${gap} ${className}`}>
+    <Box className={`${padding} ${gap}`}>
       {children}
     </Box>
   );

apps/website/ui/OnboardingStepPanel.tsx

@@ -1,22 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Surface } from './primitives/Surface';
-
-interface OnboardingStepPanelProps {
-  children: ReactNode;
-  className?: string;
-}
-
-export function OnboardingStepPanel({ children, className = '' }: OnboardingStepPanelProps) {
-  return (
-    <Surface
-      variant="muted"
-      rounded="2xl"
-      border
-      p={6}
-      borderColor="border-charcoal-outline"
-      className={className}
-    >
-      {children}
-    </Surface>
-  );
-}