website refactor

apps/website/app/drivers/DriversPageClient.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import React, { useState, useMemo } from 'react';
-import { useRouter } from 'next/navigation';
-import { DriversTemplate } from '@/templates/DriversTemplate';
 import type { DriversViewData } from '@/lib/types/view-data/DriversViewData';
+import { DriversTemplate } from '@/templates/DriversTemplate';
 import { Container } from '@/ui/Container';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import { useRouter } from 'next/navigation';
+import { useMemo, useState } from 'react';
 
 import { routes } from '@/lib/routing/RouteConfig';
 

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

@@ -1,13 +1,13 @@
 'use client';
 
-import React, { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { DriverProfileTemplate } from '@/templates/DriverProfileTemplate';
 import type { DriverProfileViewData } from '@/lib/types/view-data/DriverProfileViewData';
-import type { ProfileTab } from '@/ui/ProfileTabs';
+import { DriverProfileTemplate } from '@/templates/DriverProfileTemplate';
 import { Container } from '@/ui/Container';
-import { Stack } from '@/ui/Stack';
+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';
 
 interface DriverProfilePageClientProps {
   viewData: DriverProfileViewData | null;

apps/website/app/leagues/LeaguesPageClient.tsx

@@ -1,32 +1,32 @@
 'use client';
 
-import React, { useState } from 'react';
 import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
-import { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
 import { routes } from '@/lib/routing/RouteConfig';
 import type { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
-import { Box } from '@/ui/Box';
+import { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
+import { Button } from '@/ui/Button';
+import { Heading } from '@/ui/Heading';
+import { Input } from '@/ui/Input';
+import { Box } from '@/ui/primitives/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
-import { Button } from '@/ui/Button';
-import { Input } from '@/ui/Input';
 import {
-  Flame,
-  Globe,
-  Plus,
-  Search,
-  Sparkles,
-  Target,
-  Trophy,
-  Users,
-  Flag,
-  Award,
-  Timer,
-  Clock,
-  type LucideIcon,
+    Award,
+    Clock,
+    Flag,
+    Flame,
+    Globe,
+    Plus,
+    Search,
+    Sparkles,
+    Target,
+    Timer,
+    Trophy,
+    Users,
+    type LucideIcon,
 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
 
 // ============================================================================
 // TYPES

apps/website/app/leagues/[id]/schedule/admin/LeagueAdminSchedulePageClient.tsx

@@ -1,29 +1,29 @@
 'use client';
 
-import { useState } from 'react';
-import { useParams, useRouter } from 'next/navigation';
-import { PageWrapper } from '@/components/shared/state/PageWrapper';
-import { LeagueAdminScheduleTemplate } from '@/templates/LeagueAdminScheduleTemplate';
 import {
-  useLeagueAdminStatus,
-  useLeagueSeasons,
-  useLeagueAdminSchedule
+    createRaceAction,
+    deleteRaceAction,
+    publishScheduleAction,
+    unpublishScheduleAction,
+    updateRaceAction
+} from '@/app/actions/leagueScheduleActions';
+import { PageWrapper } from '@/components/shared/state/PageWrapper';
+import { ConfirmDialog } from '@/components/shared/ux/ConfirmDialog';
+import {
+    useLeagueAdminSchedule,
+    useLeagueAdminStatus,
+    useLeagueSeasons
 } from "@/hooks/league/useLeagueScheduleAdminPageData";
 import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
-import {
-  publishScheduleAction,
-  unpublishScheduleAction,
-  createRaceAction,
-  updateRaceAction,
-  deleteRaceAction
-} from '@/app/actions/leagueScheduleActions';
 import { RaceScheduleCommandModel } from '@/lib/command-models/leagues/RaceScheduleCommandModel';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
+import { LeagueAdminScheduleTemplate } from '@/templates/LeagueAdminScheduleTemplate';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
-import { ConfirmDialog } from '@/components/shared/ux/ConfirmDialog';
+import { Box } from '@/ui/primitives/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
 
 export function LeagueAdminSchedulePageClient() {
   const params = useParams();

apps/website/app/leagues/[id]/stewarding/StewardingPageClient.tsx

@@ -1,22 +1,22 @@
 'use client';
 
-import { StewardingQueuePanel } from '@/components/leagues/StewardingQueuePanel';
-import { PenaltyFAB } from '@/components/races/PenaltyFAB';
+import { PenaltyHistoryList } from '@/components/leagues/PenaltyHistoryList';
 import { QuickPenaltyModal } from '@/components/leagues/QuickPenaltyModal';
 import { ReviewProtestModal } from '@/components/leagues/ReviewProtestModal';
+import { StewardingQueuePanel } from '@/components/leagues/StewardingQueuePanel';
 import { StewardingStats } from '@/components/leagues/StewardingStats';
-import { Button } from '@/ui/Button';
-import { Card } from '@/ui/Card';
+import { PenaltyFAB } from '@/components/races/PenaltyFAB';
 import { useLeagueStewardingMutations } from "@/hooks/league/useLeagueStewardingMutations";
-import { useMemo, useState } from 'react';
-import { PenaltyHistoryList } from '@/components/leagues/PenaltyHistoryList';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import type { StewardingViewData } from '@/lib/view-data/leagues/StewardingViewData';
+import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import { ProtestViewModel } from '@/lib/view-models/ProtestViewModel';
 import { RaceViewModel } from '@/lib/view-models/RaceViewModel';
-import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
+import { Button } from '@/ui/Button';
+import { Card } from '@/ui/Card';
+import { Box } from '@/ui/primitives/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { useMemo, useState } from 'react';
 
 interface StewardingTemplateProps {
   data: StewardingViewData;

apps/website/app/leagues/[id]/stewarding/protests/[protestId]/ProtestDetailPageClient.tsx

@@ -1,51 +1,51 @@
 'use client';
 
-import { Button } from '@/ui/Button';
-import { Card } from '@/ui/Card';
 import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
+import { ProtestDecisionCommandModel } from '@/lib/command-models/protests/ProtestDecisionCommandModel';
 import { useInject } from '@/lib/di/hooks/useInject';
 import { PROTEST_SERVICE_TOKEN } from '@/lib/di/tokens';
-import { ProtestDecisionCommandModel } from '@/lib/command-models/protests/ProtestDecisionCommandModel';
+import { Button } from '@/ui/Button';
+import { Card } from '@/ui/Card';
 import {
-  AlertTriangle,
-  ArrowLeft,
-  Calendar,
-  CheckCircle,
-  ChevronDown,
-  Clock,
-  ExternalLink,
-  Flag,
-  Gavel,
-  Grid3x3,
-  MapPin,
-  MessageCircle,
-  Send,
-  Shield,
-  ShieldAlert,
-  TrendingDown,
-  User,
-  Video,
-  XCircle,
-  AlertCircle,
-  type LucideIcon
+    AlertCircle,
+    AlertTriangle,
+    ArrowLeft,
+    Calendar,
+    CheckCircle,
+    ChevronDown,
+    Clock,
+    ExternalLink,
+    Flag,
+    Gavel,
+    Grid3x3,
+    MapPin,
+    MessageCircle,
+    Send,
+    Shield,
+    ShieldAlert,
+    TrendingDown,
+    User,
+    Video,
+    XCircle,
+    type LucideIcon
 } from 'lucide-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useMemo, useState, useEffect } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 // Shared state components
-import { StateContainer } from '@/components/shared/state/StateContainer';
 import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
+import { StateContainer } from '@/components/shared/state/StateContainer';
 import { useLeagueAdminStatus } from "@/hooks/league/useLeagueAdminStatus";
 import { useProtestDetail } from "@/hooks/league/useProtestDetail";
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
-import { Grid } from '@/ui/Grid';
+import { routes } from '@/lib/routing/RouteConfig';
 import { GridItem } from '@/ui/GridItem';
+import { Heading } from '@/ui/Heading';
 import { Icon as UIIcon } from '@/ui/Icon';
 import { Link as UILink } from '@/ui/Link';
-import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/primitives/Box';
+import { Grid } from '@/ui/primitives/Grid';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 
 type PenaltyUiConfig = {
   label: string;

apps/website/app/leagues/[id]/wallet/LeagueWalletPageClient.tsx

@@ -1,18 +1,17 @@
 'use client';
 
-import React from 'react';
 import { WalletSummaryPanel } from '@/components/leagues/WalletSummaryPanel';
 import type { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
-import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Container } from '@/ui/Container';
+import { Heading } from '@/ui/Heading';
+import { Icon as UIIcon } from '@/ui/Icon';
+import { Box } from '@/ui/primitives/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
-import { Container } from '@/ui/Container';
-import { Icon as UIIcon } from '@/ui/Icon';
 import {
-  Download
+    Download
 } from 'lucide-react';
-import { Button } from '@/ui/Button';
 
 interface WalletTemplateProps {
   viewData: LeagueWalletViewData;

apps/website/app/leagues/create/CreateLeagueWizard.tsx

@@ -1,51 +1,51 @@
 'use client';
 
+import { useAuth } from '@/components/auth/AuthContext';
 import { LeagueReviewSummary } from '@/components/leagues/LeagueReviewSummary';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
-import { Box } from '@/ui/Box';
+import { Box } from '@/ui/primitives/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import { Icon } from '@/ui/Icon';
-import { useAuth } from '@/components/auth/AuthContext';
 import {
-  AlertCircle,
-  Award,
-  Calendar,
-  Check,
-  CheckCircle2,
-  ChevronLeft,
-  ChevronRight,
-  FileText,
-  Loader2,
-  Scale,
-  Sparkles,
-  Trophy,
-  Users,
+    AlertCircle,
+    Award,
+    Calendar,
+    Check,
+    CheckCircle2,
+    ChevronLeft,
+    ChevronRight,
+    FileText,
+    Loader2,
+    Scale,
+    Sparkles,
+    Trophy,
+    Users,
 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { FormEvent, useCallback, useEffect, useState } from 'react';
 
 import { LeagueWizardCommandModel } from '@/lib/command-models/leagues/LeagueWizardCommandModel';
 
-import { useCreateLeagueWizard } from "@/hooks/useLeagueWizardService";
-import { useLeagueScoringPresets } from "@/hooks/useLeagueScoringPresets";
 import { LeagueBasicsSection } from '@/components/leagues/LeagueBasicsSection';
 import { LeagueDropSection } from '@/components/leagues/LeagueDropSection';
 import {
-  ChampionshipsSection,
-  ScoringPatternSection
+    ChampionshipsSection,
+    ScoringPatternSection
 } from '@/components/leagues/LeagueScoringSection';
 import { LeagueStewardingSection } from '@/components/leagues/LeagueStewardingSection';
 import { LeagueStructureSection } from '@/components/leagues/LeagueStructureSection';
 import { LeagueTimingsSection } from '@/components/leagues/LeagueTimingsSection';
 import { LeagueVisibilitySection } from '@/components/leagues/LeagueVisibilitySection';
+import { useLeagueScoringPresets } from "@/hooks/useLeagueScoringPresets";
+import { useCreateLeagueWizard } from "@/hooks/useLeagueWizardService";
 import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
-import type { LeagueScoringPresetViewModel } from '@/lib/view-models/LeagueScoringPresetViewModel';
 import type { Weekday } from '@/lib/types/Weekday';
 import type { WizardErrors } from '@/lib/types/WizardErrors';
+import type { LeagueScoringPresetViewModel } from '@/lib/view-models/LeagueScoringPresetViewModel';
 
 // ============================================================================
 // LOCAL STORAGE PERSISTENCE

apps/website/app/profile/liveries/upload/ProfileLiveryUploadPageClient.tsx

@@ -1,17 +1,17 @@
 'use client';
 
-import React, { useState } from 'react';
-import Link from 'next/link';
+import { UploadDropzone } from '@/components/media/UploadDropzone';
+import { routes } from '@/lib/routing/RouteConfig';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
-import { Text } from '@/ui/Text';
-import { Box } from '@/ui/Box';
-import { routes } from '@/lib/routing/RouteConfig';
-import { UploadDropzone } from '@/components/media/UploadDropzone';
-import { MediaPreviewCard } from '@/ui/MediaPreviewCard';
 import { MediaMetaPanel, mapMediaMetadata } from '@/ui/MediaMetaPanel';
+import { MediaPreviewCard } from '@/ui/MediaPreviewCard';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/primitives/Box';
+import Link from 'next/link';
+import { useState } from 'react';
 
 export function ProfileLiveryUploadPageClient() {
   const [selectedFile, setSelectedFile] = useState<File | null>(null);

apps/website/app/profile/settings/ProfileSettingsPageClient.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import React, { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { ProfileSettingsTemplate } from '@/templates/ProfileSettingsTemplate';
-import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
-import type { Result } from '@/lib/contracts/Result';
-import { ProgressLine } from '@/components/shared/ux/ProgressLine';
 import { InlineNotice } from '@/components/shared/ux/InlineNotice';
-import { Box } from '@/ui/Box';
+import { ProgressLine } from '@/components/shared/ux/ProgressLine';
+import type { Result } from '@/lib/contracts/Result';
+import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
+import { ProfileSettingsTemplate } from '@/templates/ProfileSettingsTemplate';
+import { Box } from '@/ui/primitives/Box';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 
 interface ProfileSettingsPageClientProps {
   viewData: ProfileViewData;

apps/website/app/profile/sponsorship-requests/SponsorshipRequestsClient.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { InlineNotice } from '@/components/shared/ux/InlineNotice';
+import { ProgressLine } from '@/components/shared/ux/ProgressLine';
 import type { Result } from '@/lib/contracts/Result';
 import type { SponsorshipRequestsViewData } from '@/lib/view-data/SponsorshipRequestsViewData';
 import { SponsorshipRequestsTemplate } from '@/templates/SponsorshipRequestsTemplate';
-import { InlineNotice } from '@/components/shared/ux/InlineNotice';
-import { ProgressLine } from '@/components/shared/ux/ProgressLine';
-import { Box } from '@/ui/Box';
+import { Box } from '@/ui/primitives/Box';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 
 interface SponsorshipRequestsClientProps {
   viewData: SponsorshipRequestsViewData;

apps/website/app/sponsor/layout.tsx

@@ -1,7 +1,7 @@
+import { createRouteGuard } from '@/lib/auth/createRouteGuard';
+import { Box } from '@/ui/primitives/Box';
 import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
-import { createRouteGuard } from '@/lib/auth/createRouteGuard';
-import { Box } from '@/ui/Box';
 
 interface SponsorLayoutProps {
   children: React.ReactNode;

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

@@ -1,37 +1,37 @@
 'use client';
 
-import { useState } from 'react';
-import { motion, useReducedMotion } from 'framer-motion';
-import { Card } from '@/ui/Card';
-import { Button } from '@/ui/Button';
-import { Input } from '@/ui/Input';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
+import { SponsorBenefitCard } from '@/components/sponsors/SponsorBenefitCard';
 import { SponsorHero } from '@/components/sponsors/SponsorHero';
 import { SponsorWorkflowMockup } from '@/components/sponsors/SponsorWorkflowMockup';
-import { SponsorBenefitCard } from '@/components/sponsors/SponsorBenefitCard';
-import { siteConfig } from '@/lib/siteConfig';
 import { SponsorSignupCommandModel } from '@/lib/command-models/sponsors/SponsorSignupCommandModel';
+import { siteConfig } from '@/lib/siteConfig';
+import { Button } from '@/ui/Button';
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { Input } from '@/ui/Input';
+import { Box } from '@/ui/primitives/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { motion, useReducedMotion } from 'framer-motion';
 import {
-  Building2,
-  Mail,
-  Globe,
-  Upload,
-  Eye,
-  TrendingUp,
-  Users,
-  ArrowRight,
-  Trophy,
-  Car,
-  Flag,
-  Target,
-  BarChart3,
-  Shield,
-  CheckCircle2,
-  Megaphone
+    ArrowRight,
+    BarChart3,
+    Building2,
+    Car,
+    CheckCircle2,
+    Eye,
+    Flag,
+    Globe,
+    Mail,
+    Megaphone,
+    Shield,
+    Target,
+    TrendingUp,
+    Trophy,
+    Upload,
+    Users
 } from 'lucide-react';
+import { useState } from 'react';
 
 // Sponsorship type definitions
 interface SponsorshipType {

apps/website/app/teams/create/page.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import React from 'react';
-import { useRouter } from 'next/navigation';
 import { CreateTeamForm } from '@/components/teams/CreateTeamForm';
-import { Section } from '@/ui/Section';
+import { routes } from '@/lib/routing/RouteConfig';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/Stack';
-import { routes } from '@/lib/routing/RouteConfig';
+import { Stack } from '@/ui/primitives/Stack';
+import { Section } from '@/ui/Section';
+import { useRouter } from 'next/navigation';
 
 export default function CreateTeamPage() {
   const router = useRouter();