website refactor

apps/website/app/leagues/[id]/layout.tsx

@@ -23,18 +23,26 @@ export default async function LeagueLayout({
     // Return error state
     return (
       <LeagueDetailTemplate
-        leagueId={leagueId}
-        leagueName="Error"
-        leagueDescription="Failed to load league"
+        viewData={{
+          leagueId,
+          name: 'Error',
+          description: 'Failed to load league',
+          info: { name: 'Error', membersCount: 0, racesCount: 0, avgSOF: 0, structure: '', scoring: '', createdAt: '' },
+          runningRaces: [],
+          sponsors: [],
+          ownerSummary: null,
+          adminSummaries: [],
+          stewardSummaries: [],
+          sponsorInsights: null
+        }}
         tabs={[]}
       >
-        <Text align="center" className="text-gray-400">Failed to load league</Text>
+        <Text align="center">Failed to load league</Text>
       </LeagueDetailTemplate>
     );
   }
   
-  const data = result.unwrap();
-  const league = data.league;
+  const viewData = result.unwrap();
   
   // Define tab configuration
   const baseTabs = [
@@ -58,9 +66,7 @@ export default async function LeagueLayout({
 
   return (
     <LeagueDetailTemplate
-      leagueId={leagueId}
-      leagueName={league.name}
-      leagueDescription={league.description}
+      viewData={viewData}
       tabs={tabs}
     >
       {children}

apps/website/app/leagues/[id]/page.tsx

@@ -2,7 +2,7 @@ import { notFound } from 'next/navigation';
 import { LeagueDetailTemplate } from '@/templates/LeagueDetailTemplate';
 import { LeagueDetailPageQuery } from '@/lib/page-queries/page-queries/LeagueDetailPageQuery';
 import { LeagueDetailViewDataBuilder } from '@/lib/builders/view-data/LeagueDetailViewDataBuilder';
-import { ErrorBanner } from '@/components/ui/ErrorBanner';
+import { ErrorBanner } from '@/ui/ErrorBanner';
 
 interface Props {
   params: { id: string };
@@ -49,5 +49,5 @@ export default async function Page({ params }: Props) {
     sponsors: [],
   });
   
-  return <LeagueDetailTemplate viewData={viewData} />;
+  return <LeagueDetailTemplate viewData={viewData} tabs={[]} children={null} />;
 }

apps/website/app/leagues/[id]/rulebook/LeagueRulebookPageClient.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import React, { useState } from 'react';
+import { LeagueRulebookTemplate } from '@/templates/LeagueRulebookTemplate';
+import { type RulebookSection } from '@/components/leagues/RulebookTabs';
+import type { LeagueRulebookViewData } from '@/lib/view-data/LeagueRulebookViewData';
+
+interface LeagueRulebookPageClientProps {
+  viewData: LeagueRulebookViewData;
+}
+
+export function LeagueRulebookPageClient({ viewData }: LeagueRulebookPageClientProps) {
+  const [activeSection, setActiveSection] = useState<RulebookSection>('scoring');
+
+  return (
+    <LeagueRulebookTemplate
+      viewData={viewData}
+      activeSection={activeSection}
+      onSectionChange={setActiveSection}
+    />
+  );
+}

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

@@ -4,8 +4,8 @@ import PenaltyFAB from '@/components/leagues/PenaltyFAB';
 import QuickPenaltyModal from '@/components/leagues/QuickPenaltyModal';
 import { ReviewProtestModal } from '@/components/leagues/ReviewProtestModal';
 import StewardingStats from '@/components/leagues/StewardingStats';
-import Button from '@/components/ui/Button';
-import Card from '@/components/ui/Card';
+import Button from '@/ui/Button';
+import Card from '@/ui/Card';
 import { useLeagueStewardingMutations } from "@/lib/hooks/league/useLeagueStewardingMutations";
 import {
   AlertCircle,

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

@@ -1,7 +1,7 @@
 'use client';
 
-import Button from '@/components/ui/Button';
-import Card from '@/components/ui/Card';
+import Button from '@/ui/Button';
+import Card from '@/ui/Card';
 import { useEffectiveDriverId } from "@/lib/hooks/useEffectiveDriverId";
 import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
 import { useInject } from '@/lib/di/hooks/useInject';

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

@@ -1,8 +1,8 @@
 'use client';
 
 import React, { useState } from 'react';
-import Card from '@/components/ui/Card';
-import Button from '@/components/ui/Button';
+import Card from '@/ui/Card';
+import Button from '@/ui/Button';
 import TransactionRow from '@/components/leagues/TransactionRow';
 import { LeagueWalletViewModel } from '@/lib/view-models/LeagueWalletViewModel';
 import {

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

@@ -3,8 +3,8 @@
 import React from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import CreateLeagueWizard from '@/components/leagues/CreateLeagueWizard';
-import Section from '@/components/ui/Section';
-import Container from '@/components/ui/Container';
+import Section from '@/ui/Section';
+import Container from '@/ui/Container';
 
 type StepName = 'basics' | 'visibility' | 'structure' | 'schedule' | 'scoring' | 'stewarding' | 'review';