website refactor

apps/website/templates/TeamDetailTemplate.tsx

@@ -1,23 +1,20 @@
 'use client';
 
-import { SlotTemplates } from '@/components/sponsors/SlotTemplates';
-import { SponsorInsightsCard } from '@/components/sponsors/SponsorInsightsCard';
-import { useSponsorMode } from '@/hooks/sponsor/useSponsorMode';
+import React from 'react';
+import { useRouter } from 'next/navigation';
 import { Box } from '@/ui/Box';
-import { Breadcrumbs } from '@/ui/Breadcrumbs';
-import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
-import { HorizontalStatItem } from '@/ui/HorizontalStatItem';
-import { Grid } from '@/ui/Grid';
-import { GridItem } from '@/ui/GridItem';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-
-import { TeamAdmin } from '@/components/teams/TeamAdmin';
+import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/Grid';
+import { Button } from '@/ui/Button';
+import { Panel } from '@/ui/Panel';
+import { Breadcrumbs } from '@/ui/Breadcrumbs';
 import { TeamDetailsHeader } from '@/components/teams/TeamDetailsHeader';
 import { TeamMembersTable } from '@/components/teams/TeamMembersTable';
 import { TeamStandingsPanel } from '@/components/teams/TeamStandingsPanel';
+import { TeamAdmin } from '@/components/teams/TeamAdmin';
 import type { TeamDetailViewData } from '@/lib/view-data/TeamDetailViewData';
 
 type Tab = 'overview' | 'roster' | 'standings' | 'admin';
@@ -26,8 +23,6 @@ export interface TeamDetailTemplateProps {
   viewData: TeamDetailViewData;
   activeTab: Tab;
   loading: boolean;
-  
-  // Event handlers
   onTabChange: (tab: Tab) => void;
   onUpdate: () => void;
   onRemoveMember: (driverId: string) => void;
@@ -43,15 +38,14 @@ export function TeamDetailTemplate({
   onRemoveMember,
   onGoBack,
 }: TeamDetailTemplateProps) {
-  const isSponsorMode = useSponsorMode();
   const team = viewData.team;
 
   if (loading) {
     return (
-      <Box bg="base-black" minH="screen" display="flex" center>
-        <Stack align="center" gap={4}>
-          <Box w="12" h="12" border borderColor="primary-accent" borderOpacity={0.2} borderTop borderTopColor="primary-accent" rounded="full" animate="spin" />
-          <Text color="text-gray-500" font="mono" size="xs" uppercase letterSpacing="widest">Synchronizing Telemetry...</Text>
+      <Box bg="var(--ui-color-bg-base)" minHeight="100vh" display="flex" center>
+        <Stack align="center" gap="md">
+          <Box width={12} height={12} border="2px solid var(--ui-color-border-muted)" borderTop="2px solid var(--ui-color-intent-primary)" rounded="full" animate="spin" />
+          <Text variant="low" size="xs" uppercase mono>Synchronizing Telemetry...</Text>
         </Stack>
       </Box>
     );
@@ -59,28 +53,30 @@ export function TeamDetailTemplate({
 
   if (!team) {
     return (
-      <Box bg="base-black" minH="screen">
-        <Container size="md" py={24}>
-          <Box border borderColor="outline-steel" bg="surface-charcoal" p={12} textAlign="center">
-            <Heading level={1}>404: Team Disconnected</Heading>
-            <Text color="text-gray-500" block mt={4} font="mono">
-              The requested team entity is no longer broadcasting.
-            </Text>
-            <Box mt={8}>
-              <Button variant="primary" onClick={onGoBack}>
-                Return to Base
-              </Button>
-            </Box>
-          </Box>
-        </Container>
+      <Box bg="var(--ui-color-bg-base)" minHeight="100vh">
+        <Box paddingY={24}>
+          <Container size="md">
+            <Panel variant="dark" padding="lg">
+              <Stack align="center" gap="lg">
+                <Heading level={1}>404: Team Disconnected</Heading>
+                <Text variant="low" block mono>
+                  The requested team entity is no longer broadcasting.
+                </Text>
+                <Button variant="primary" onClick={onGoBack}>
+                  Return to Base
+                </Button>
+              </Stack>
+            </Panel>
+          </Container>
+        </Box>
       </Box>
     );
   }
 
   return (
-    <Box bg="base-black" minH="screen">
-      <Container size="lg" py={8}>
-        <Stack gap={8}>
+    <Box bg="var(--ui-color-bg-base)" minHeight="100vh" paddingY={8}>
+      <Container size="xl">
+        <Stack gap="lg">
           <Breadcrumbs
             items={[
               { label: 'Home', href: '/' },
@@ -89,42 +85,26 @@ export function TeamDetailTemplate({
             ]}
           />
 
-          {isSponsorMode && (
-            <SponsorInsightsCard
-              entityType="team"
-              entityId={team.id}
-              entityName={team.name}
-              tier="standard"
-              metrics={viewData.teamMetrics}
-              slots={SlotTemplates.team(true, true, '$500', '$250')}
-              trustScoreLabel="90/100"
-              monthlyActivityLabel="85%"
-              onNavigate={(href) => window.location.href = href}
-            />
-          )}
-
           <TeamDetailsHeader
             teamId={team.id}
             name={team.name}
             tag={team.tag}
             description={team.description}
             memberCount={viewData.memberships.length}
-            memberCountLabel={viewData.memberCountLabel}
-            foundedDate={team.createdAt}
             foundedDateLabel={team.foundedDateLabel}
             isAdmin={viewData.isAdmin}
             onAdminClick={() => onTabChange('admin')}
           />
 
           {/* Tabs */}
-          <Box borderBottom borderColor="outline-steel">
-            <Stack direction="row" gap={8}>
+          <Box borderBottom="1px solid var(--ui-color-border-muted)">
+            <Stack direction="row" gap="lg">
               {viewData.tabs.map((tab) => (
                 tab.visible && (
                   <Box
                     key={tab.id}
-                    onClick={() => onTabChange(tab.id)}
-                    pb={4}
+                    onClick={() => onTabChange(tab.id as Tab)}
+                    paddingBottom={4}
                     cursor="pointer"
                     position="relative"
                   >
@@ -132,8 +112,7 @@ export function TeamDetailTemplate({
                       weight="bold" 
                       size="xs"
                       uppercase
-                      letterSpacing="widest"
-                      color={activeTab === tab.id ? 'text-primary-accent' : 'text-gray-500'}
+                      variant={activeTab === tab.id ? 'primary' : 'low'}
                     >
                       {tab.label}
                     </Text>
@@ -141,10 +120,10 @@ export function TeamDetailTemplate({
                       <Box 
                         position="absolute" 
                         bottom="-1px" 
-                        left="0" 
-                        right="0" 
-                        h="2px" 
-                        bg="primary-accent" 
+                        left={0} 
+                        right={0} 
+                        height="2px" 
+                        bg="var(--ui-color-intent-primary)" 
                       />
                     )}
                   </Box>
@@ -155,58 +134,73 @@ export function TeamDetailTemplate({
 
           <Box>
             {activeTab === 'overview' && (
-              <Stack gap={8}>
-                <Grid cols={12} gap={8}>
-                  <GridItem colSpan={12} lgSpan={8}>
-                    <Stack gap={8}>
-                      <Box border borderColor="outline-steel" bg="surface-charcoal" bgOpacity={0.3} p={6}>
-                        <Text size="xs" weight="bold" color="text-gray-400" uppercase>Mission Statement</Text>
-                        <Text color="text-gray-300" leading="relaxed" size="sm" block mt={4}>
+              <Grid cols={3} gap="lg">
+                <Box gridCols={{ lg: 2 }}>
+                  <Stack gap="lg">
+                    <Panel variant="default" padding="md">
+                      <Text size="xs" weight="bold" variant="low" uppercase>Mission Statement</Text>
+                      <Box marginTop={4}>
+                        <Text variant="med" leading="relaxed" size="sm" block>
                           {team.description || 'No description provided.'}
                         </Text>
                       </Box>
+                    </Panel>
 
-                      <Box>
-                        <Text size="xs" weight="bold" color="text-gray-400" uppercase mb={4} block>Recent Operations</Text>
-                        <Box py={12} border borderStyle="dashed" borderColor="outline-steel" bg="surface-charcoal" bgOpacity={0.1} textAlign="center">
-                          <Text color="text-gray-600" font="mono" size="xs">NO RECENT TELEMETRY DATA</Text>
+                    <Box>
+                      <Box marginBottom={4}>
+                        <Text size="xs" weight="bold" variant="low" uppercase block>Recent Operations</Text>
+                      </Box>
+                      <Panel variant="muted" padding="lg">
+                        <Box textAlign="center">
+                          <Text variant="low" mono size="xs">NO RECENT TELEMETRY DATA</Text>
                         </Box>
-                      </Box>
-                    </Stack>
-                  </GridItem>
+                      </Panel>
+                    </Box>
+                  </Stack>
+                </Box>
 
-                  <GridItem colSpan={12} lgSpan={4}>
-                    <Stack gap={6}>
-                      <Box border borderColor="outline-steel" bg="surface-charcoal" bgOpacity={0.5} p={6}>
-                        <Text size="xs" weight="bold" color="text-gray-400" uppercase mb={4} block>Performance Metrics</Text>
-                        <Stack gap={4}>
-                          <HorizontalStatItem label="Avg Rating" value="1450" color="text-primary-accent" />
-                          <HorizontalStatItem label="Win Rate" value="12.5%" color="text-telemetry-aqua" />
-                          <HorizontalStatItem label="Total Podiums" value="42" color="text-warning-amber" />
-                        </Stack>
+                <Box>
+                  <Stack gap="lg">
+                    <Panel variant="default" padding="md">
+                      <Box marginBottom={4}>
+                        <Text size="xs" weight="bold" variant="low" uppercase block>Performance Metrics</Text>
                       </Box>
-                    </Stack>
-                  </GridItem>
-                </Grid>
-              </Stack>
+                      <Stack gap="md">
+                        <Box display="flex" justifyContent="between" alignItems="center">
+                          <Text size="xs" variant="low" uppercase>Avg Rating</Text>
+                          <Text weight="bold" mono variant="primary">1450</Text>
+                        </Box>
+                        <Box display="flex" justifyContent="between" alignItems="center">
+                          <Text size="xs" variant="low" uppercase>Win Rate</Text>
+                          <Text weight="bold" mono variant="telemetry">12.5%</Text>
+                        </Box>
+                        <Box display="flex" justifyContent="between" alignItems="center">
+                          <Text size="xs" variant="low" uppercase>Total Podiums</Text>
+                          <Text weight="bold" mono variant="warning">42</Text>
+                        </Box>
+                      </Stack>
+                    </Panel>
+                  </Stack>
+                </Box>
+              </Grid>
             )}
 
             {activeTab === 'roster' && (
-              <Box>
-                <Stack direction="row" align="center" justify="between" mb={6}>
-                  <Text size="xs" weight="bold" color="text-gray-400" uppercase>Active Personnel</Text>
-                  <Text size="xs" color="text-gray-500" font="mono">{viewData.memberships.length} UNITS ACTIVE</Text>
-                </Stack>
+              <Stack gap="md">
+                <Box display="flex" alignItems="center" justifyContent="between">
+                  <Text size="xs" weight="bold" variant="low" uppercase>Active Personnel</Text>
+                  <Text size="xs" variant="low" mono>{viewData.memberships.length} UNITS ACTIVE</Text>
+                </Box>
                 <TeamMembersTable 
                   members={viewData.memberships} 
                   isAdmin={viewData.isAdmin}
                   onRemoveMember={onRemoveMember}
                 />
-              </Box>
+              </Stack>
             )}
 
             {activeTab === 'standings' && (
-              <TeamStandingsPanel standings={[]} /> // Mocked for now as in original
+              <TeamStandingsPanel standings={[]} />
             )}
 
             {activeTab === 'admin' && viewData.isAdmin && (

apps/website/templates/TeamsTemplate.tsx

@@ -1,67 +1,119 @@
 'use client';
 
-import { TeamCard } from '@/components/teams/TeamCardWrapper';
-import { TeamGrid } from '@/components/teams/TeamGrid';
-import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
-import { TeamsDirectoryHeader } from '@/components/teams/TeamsDirectoryHeader';
-import { TeamsDirectory, TeamsDirectorySection } from '@/components/teams/TeamsDirectory';
-import { EmptyState } from '@/ui/EmptyState';
-import type { TeamsViewData } from '@/lib/view-data/TeamsViewData';
+import React, { useMemo } from 'react';
 import { Users } from 'lucide-react';
 import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
-import React from 'react';
+import { TeamsViewData, TeamSummaryData } from '@/lib/view-data/TeamsViewData';
+import { TeamsDirectoryHeader } from '@/components/teams/TeamsDirectoryHeader';
+import { TeamGrid } from '@/components/teams/TeamGrid';
+import { TeamCard } from '@/components/teams/TeamCard';
+import { TeamSearchBar } from '@/components/teams/TeamSearchBar';
+import { EmptyState } from '@/ui/EmptyState';
+import { Container } from '@/ui/Container';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
 
 interface TeamsTemplateProps extends TemplateProps<TeamsViewData> {
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
   onTeamClick?: (teamId: string) => void;
   onViewFullLeaderboard: () => void;
   onCreateTeam: () => void;
 }
 
-export function TeamsTemplate({ viewData, onTeamClick, onViewFullLeaderboard, onCreateTeam }: TeamsTemplateProps) {
+export function TeamsTemplate({ 
+  viewData, 
+  searchQuery,
+  onSearchChange,
+  onTeamClick, 
+  onViewFullLeaderboard, 
+  onCreateTeam 
+}: TeamsTemplateProps) {
   const { teams } = viewData;
 
+  const filteredTeams = useMemo(() => {
+    return teams.filter(team => 
+      team.teamName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (team.leagueName && team.leagueName.toLowerCase().includes(searchQuery.toLowerCase())) ||
+      (team.region && team.region.toLowerCase().includes(searchQuery.toLowerCase()))
+    );
+  }, [teams, searchQuery]);
+
+  const clusters = useMemo(() => {
+    if (searchQuery) {
+      return [{ title: 'Search Results', teams: filteredTeams }];
+    }
+
+    const topTeams = [...teams]
+      .sort((a, b) => parseFloat(b.ratingLabel) - parseFloat(a.ratingLabel))
+      .slice(0, 3);
+    
+    const recruitingTeams = teams.filter(t => t.isRecruiting && !topTeams.find(top => top.teamId === t.teamId));
+    
+    const otherTeams = teams.filter(t => 
+      !topTeams.find(top => top.teamId === t.teamId) && 
+      !recruitingTeams.find(r => r.teamId === t.teamId)
+    );
+
+    const result = [];
+    if (topTeams.length > 0) result.push({ title: 'Top Rated Teams', teams: topTeams });
+    if (recruitingTeams.length > 0) result.push({ title: 'Recruiting Now', teams: recruitingTeams });
+    if (otherTeams.length > 0) result.push({ title: 'Active Rosters', teams: otherTeams });
+    
+    return result;
+  }, [teams, filteredTeams, searchQuery]);
+
   return (
-    <TeamsDirectory>
-      <TeamsDirectoryHeader onCreateTeam={onCreateTeam} />
-
-      <TeamsDirectorySection title="Active Rosters" accentColor="primary-accent">
-        {teams.length > 0 ? (
-          <TeamGrid>
-            {teams.map((team) => (
-              <TeamCard
-                key={team.teamId}
-                id={team.teamId}
-                name={team.teamName}
-                memberCount={team.memberCount}
-                logo={team.logoUrl}
-                ratingLabel={team.ratingLabel}
-                winsLabel={team.winsLabel}
-                racesLabel={team.racesLabel}
-                onClick={() => onTeamClick?.(team.teamId)}
-              />
-            ))}
-          </TeamGrid>
-        ) : (
-          <EmptyState
-            icon={Users}
-            title="No teams yet"
-            description="Get started by creating your first racing team"
-            action={{
-              label: 'Create Team',
-              onClick: onCreateTeam,
-              variant: 'primary'
-            }}
-          />
-        )}
-      </TeamsDirectorySection>
-
-      <TeamsDirectorySection title="Global Standings" accentColor="telemetry-aqua">
-        <TeamLeaderboardPreview 
-          topTeams={[]} 
-          onTeamClick={(id) => onTeamClick?.(id)} 
-          onViewFullLeaderboard={onViewFullLeaderboard}
+    <div className="min-h-screen bg-[var(--ui-color-bg-base)] py-12">
+      <Container size="xl">
+        <TeamsDirectoryHeader onCreateTeam={onCreateTeam} />
+        
+        <TeamSearchBar 
+          searchQuery={searchQuery} 
+          onSearchChange={onSearchChange} 
         />
-      </TeamsDirectorySection>
-    </TeamsDirectory>
+
+        {clusters.length > 0 ? (
+          <div className="space-y-16">
+            {clusters.map((cluster) => (
+              <div key={cluster.title} className="space-y-8">
+                <div className="flex items-center gap-4">
+                  <Heading level={2} weight="bold" uppercase tracking-widest size="sm">
+                    {cluster.title}
+                  </Heading>
+                  <div className="flex-1 h-px bg-[var(--ui-color-border-muted)]" />
+                  <div className="px-3 py-1 border border-[var(--ui-color-border-muted)]">
+                    <Text size="xs" mono variant="low">{cluster.teams.length}</Text>
+                  </div>
+                </div>
+                
+                <TeamGrid>
+                  {cluster.teams.map((team) => (
+                    <TeamCard
+                      key={team.teamId}
+                      team={team}
+                      onClick={(id) => onTeamClick?.(id)}
+                    />
+                  ))}
+                </TeamGrid>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="py-20 border border-dashed border-[var(--ui-color-border-muted)] flex flex-col items-center justify-center text-center">
+            <EmptyState
+              icon={Users}
+              title={searchQuery ? "No matching teams" : "No teams yet"}
+              description={searchQuery ? "Try adjusting your search filters" : "Get started by creating your first racing team"}
+              action={{
+                label: 'Create Team',
+                onClick: onCreateTeam,
+                variant: 'primary'
+              }}
+            />
+          </div>
+        )}
+      </Container>
+    </div>
   );
 }