website refactor

2026-01-20 01:30:17 +01:00
parent 30a31dc44f
commit 3556db494f
6 changed files with 210 additions and 162 deletions
--- a/apps/website/client-wrapper/LeaguesPageClient.tsx
+++ b/apps/website/client-wrapper/LeaguesPageClient.tsx
@@ -24,37 +24,35 @@ const CATEGORIES: Category[] = [
    id: 'all',
    label: 'All',
    icon: Globe,
-    description: 'Browse all available leagues',
+    description: 'All available competition infrastructure.',
    filter: () => true,
  },
  {
    id: 'popular',
    label: 'Popular',
    icon: Flame,
-    description: 'Most active leagues right now',
+    description: 'High utilization infrastructure.',
    filter: (league) => {
      const fillRate = (league.usedDriverSlots ?? 0) / (league.maxDrivers ?? 1);
      return fillRate > 0.7;
    },
-    color: 'text-orange-400',
  },
  {
    id: 'new',
    label: 'New',
    icon: Sparkles,
-    description: 'Fresh leagues looking for members',
+    description: 'Recently deployed infrastructure.',
    filter: (league) => {
      const oneWeekAgo = new Date();
      oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
      return new Date(league.createdAt) > oneWeekAgo;
    },
-    color: 'text-green-500',
  },
  {
    id: 'openSlots',
-    label: 'Open Slots',
+    label: 'Open',
    icon: Target,
-    description: 'Leagues with available spots',
+    description: 'Infrastructure with available capacity.',
    filter: (league) => {
      if (league.maxTeams && league.maxTeams > 0) {
        const usedTeams = league.usedTeamSlots ?? 0;
@@ -64,41 +62,40 @@ const CATEGORIES: Category[] = [
      const max = league.maxDrivers ?? 0;
      return max > 0 && used < max;
    },
-    color: 'text-cyan-400',
  },
  {
    id: 'driver',
    label: 'Driver',
    icon: Trophy,
-    description: 'Compete as an individual',
+    description: 'Individual competition format.',
    filter: (league) => league.scoring?.primaryChampionshipType === 'driver',
  },
  {
    id: 'team',
    label: 'Team',
    icon: Users,
-    description: 'Race together as a team',
+    description: 'Team-based competition format.',
    filter: (league) => league.scoring?.primaryChampionshipType === 'team',
  },
  {
    id: 'nations',
    label: 'Nations',
    icon: Flag,
-    description: 'Represent your country',
+    description: 'National representation format.',
    filter: (league) => league.scoring?.primaryChampionshipType === 'nations',
  },
  {
    id: 'trophy',
    label: 'Trophy',
    icon: Award,
-    description: 'Special championship events',
+    description: 'Special event infrastructure.',
    filter: (league) => league.scoring?.primaryChampionshipType === 'trophy',
  },
  {
    id: 'endurance',
    label: 'Endurance',
    icon: Timer,
-    description: 'Long-distance racing',
+    description: 'Long-duration competition.',
    filter: (league) =>
      league.scoring?.scoringPresetId?.includes('endurance') ??
      league.timingSummary?.includes('h Race') ??
@@ -108,7 +105,7 @@ const CATEGORIES: Category[] = [
    id: 'sprint',
    label: 'Sprint',
    icon: Clock,
-    description: 'Quick, intense races',
+    description: 'Short-duration competition.',
    filter: (league) =>
      (league.scoring?.scoringPresetId?.includes('sprint') ?? false) &&
      !(league.scoring?.scoringPresetId?.includes('endurance') ?? false),
--- a/apps/website/app/leagues/page.tsx
+++ b/apps/website/app/leagues/page.tsx
@@ -1,5 +1,5 @@
 import { notFound } from 'next/navigation';
-import { LeaguesPageClient } from '@/client-wrapper/LeaguesPageClient';
+import { LeaguesPageClient } from './LeaguesPageClient';
 import { LeaguesPageQuery } from '@/lib/page-queries/LeaguesPageQuery';

 export default async function Page() {
--- a/apps/website/components/leagues/LeagueCard.tsx
+++ b/apps/website/components/leagues/LeagueCard.tsx
@@ -8,8 +8,9 @@ import { Text } from '@/ui/Text';
 import { Box } from '@/ui/Box';
 import { Group } from '@/ui/Group';
 import { Surface } from '@/ui/Surface';
+import { Stack } from '@/ui/Stack';
 import { LeagueCard as UILeagueCard, LeagueCardStats, LeagueCardFooter } from '@/ui/LeagueCard';
-import { Calendar as LucideCalendar } from 'lucide-react';
+import { Calendar, Users, Activity } from 'lucide-react';
 import React, { ReactNode } from 'react';

 interface LeagueCardProps {
@@ -54,80 +55,81 @@ export function LeagueCard({
      coverUrl={coverUrl}
      logo={
        <Surface 
-          width="3rem" 
-          height="3rem" 
-          rounded="md" 
+          width="3.5rem" 
+          height="3.5rem" 
+          rounded="lg" 
          overflow="hidden" 
          border 
-          variant="dark"
+          variant="precision"
        >
          {logoUrl ? (
            <Image
              src={logoUrl}
              alt={`${name} logo`}
-              width={48}
-              height={48}
+              width={56}
+              height={56}
              objectFit="cover"
            />
          ) : (
-            <PlaceholderImage size={48} />
+            <PlaceholderImage size={56} />
          )}
        </Surface>
      }
      badges={
-        <React.Fragment>
+        <Group gap={2}>
          {badges}
          {championshipBadge}
-        </React.Fragment>
+        </Group>
      }
    >
-      <Box marginBottom={1}>
-        <Group gap={2}>
-          <Box width="0.25rem" height="1rem" bg="var(--ui-color-intent-primary)" />
-          <Heading level={3} weight="bold" truncate>{name}</Heading>
-        </Group>
-      </Box>
-      
-      <Text size="xs" variant="low" lineClamp={2} style={{ height: '2.5rem' }} block leading="relaxed" marginBottom={4}>
-        {description || 'No description available'}
-      </Text>
-
-      <LeagueCardStats
-        label={slotLabel}
-        value={`${usedSlots}/${maxSlots || '∞'}`}
-        percentage={fillPercentage}
-        intent={fillPercentage >= 90 ? 'warning' : fillPercentage >= 70 ? 'primary' : 'success'}
-      />
-
-      {hasOpenSlots && (
-        <Box marginBottom={4}>
-          <Surface 
-            display="flex" 
-            alignItems="center" 
-            gap={1.5} 
-            paddingX={2} 
-            paddingY={1} 
-            bg="rgba(25, 140, 255, 0.05)" 
-            border="1px solid rgba(25, 140, 255, 0.2)" 
-            rounded="sm" 
-            width="fit-content"
-          >
-            <Box width="0.375rem" height="0.375rem" rounded="full" bg="var(--ui-color-intent-primary)" />
-            <Text size="xs" variant="primary" weight="bold" uppercase>{openSlotsCount} OPEN</Text>
-          </Surface>
-        </Box>
-      )}
-
-      <LeagueCardFooter>
-        {timingSummary && (
-          <Group gap={2}>
-            <Icon icon={LucideCalendar} size={3} intent="low" />
-            <Text size="xs" variant="low" font="mono">
-              {timingSummary.split('•')[1]?.trim() || timingSummary}
-            </Text>
+      <Stack gap={4} fullHeight>
+        <Stack gap={1}>
+          <Group gap={2} align="center">
+            <Box width="2px" height="1rem" bg="var(--ui-color-intent-telemetry)" />
+            <Heading level={3} weight="bold" truncate>{name}</Heading>
          </Group>
-        )}
-      </LeagueCardFooter>
+          <Text size="xs" variant="low" lineClamp={2} block leading="relaxed">
+            {description || 'No infrastructure description provided.'}
+          </Text>
+        </Stack>
+
+        <Box>
+          <LeagueCardStats
+            label={slotLabel}
+            value={`${usedSlots} / ${maxSlots || '∞'}`}
+            percentage={fillPercentage}
+            intent={fillPercentage >= 90 ? 'warning' : fillPercentage >= 70 ? 'primary' : 'success'}
+          />
+          
+          {hasOpenSlots && (
+            <Group gap={2} align="center">
+              <Icon icon={Activity} size={3} intent="success" />
+              <Text size="xs" variant="success" weight="bold" uppercase font="mono">
+                {openSlotsCount} slots available
+              </Text>
+            </Group>
+          )}
+        </Box>
+
+        <LeagueCardFooter>
+          <Stack gap={2}>
+            {timingSummary && (
+              <Group gap={2}>
+                <Icon icon={Calendar} size={3} intent="low" />
+                <Text size="xs" variant="low" font="mono">
+                  {timingSummary.split('•')[1]?.trim() || timingSummary}
+                </Text>
+              </Group>
+            )}
+            <Group gap={2}>
+              <Icon icon={Users} size={3} intent="low" />
+              <Text size="xs" variant="low" font="mono">
+                {usedSlots} active participants
+              </Text>
+            </Group>
+          </Stack>
+        </LeagueCardFooter>
+      </Stack>
    </UILeagueCard>
  );
 }
--- a/apps/website/components/leagues/LeagueCardWrapper.tsx
+++ b/apps/website/components/leagues/LeagueCardWrapper.tsx
@@ -5,6 +5,8 @@ import {
  Flag,
  Award,
  Sparkles,
+  Gamepad2,
+  Layers,
 } from 'lucide-react';
 import type { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
 import { getMediaUrl } from '@/lib/utilities/media';
@@ -152,24 +154,24 @@ export function LeagueCard({ league, onClick }: LeagueCardProps) {
      badges={
        <>
          {isNew && (
-            <Badge variant="success" icon={Sparkles}>
+            <Badge variant="success" icon={Sparkles} size="sm">
              NEW
            </Badge>
          )}
          {league.scoring?.gameName && (
-            <Badge variant={gameVariant}>
+            <Badge variant={gameVariant} icon={Gamepad2} size="sm">
              {league.scoring.gameName}
            </Badge>
          )}
          {league.category && (
-            <Badge variant={categoryVariant}>
+            <Badge variant={categoryVariant} icon={Layers} size="sm">
              {categoryLabel}
            </Badge>
          )}
        </>
      }
      championshipBadge={
-        <Badge variant="default" icon={ChampionshipIcon}>
+        <Badge variant="outline" icon={ChampionshipIcon} size="sm">
          {championshipLabel}
        </Badge>
      }
--- a/apps/website/templates/LeaguesTemplate.tsx
+++ b/apps/website/templates/LeaguesTemplate.tsx
@@ -3,7 +3,7 @@
 import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
 import type { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
 import { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
-import { Heading } from '@/ui/Heading';
+import { PageHeader } from '@/ui/PageHeader';
 import { Input } from '@/ui/Input';
 import { Button } from '@/ui/Button';
 import { Group } from '@/ui/Group';
@@ -12,11 +12,16 @@ import { Container } from '@/ui/Container';
 import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
 import { Section } from '@/ui/Section';
-import { StatusDot } from '@/ui/StatusDot';
+import { ControlBar } from '@/ui/ControlBar';
+import { SegmentedControl } from '@/ui/SegmentedControl';
+import { MetricCard } from '@/ui/MetricCard';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
 import {
  Plus,
  Search,
  Trophy,
+  Filter,
  type LucideIcon,
 } from 'lucide-react';
 import React from 'react';
@@ -68,29 +73,14 @@ export function LeaguesTemplate({
  onClearFilters,
 }: LeaguesTemplateProps) {
  return (
-    <Container size="xl" py={12}>
-      <Group direction="column" gap={16} fullWidth>
-        {/* Hero */}
-        <Group direction={{ base: 'column', md: 'row' } as any} align={{ base: 'start', md: 'end' } as any} justify="between" gap={8} fullWidth>
-          <Group direction="column" gap={4}>
-            <Group direction="row" align="center" gap={3}>
-              <Icon icon={Trophy} size={6} intent="primary" />
-              <Text size="xs" weight="bold" uppercase letterSpacing="widest" color="text-primary-accent">Competition Hub</Text>
-            </Group>
-            <Heading level={1} size="5xl" weight="bold">
-              Find Your <Text as="span" color="text-primary-accent">Grid</Text>
-            </Heading>
-            <Text variant="low" maxWidth="md">
-              From casual sprints to epic endurance battles — discover the perfect league for your racing style.
-            </Text>
-          </Group>
-
-          <Group direction="row" align="center" gap={4}>
-            <Group direction="column" align="end">
-              <Text size="2xl" weight="bold" font="mono">{viewData.leagues.length}</Text>
-              <Text weight="bold" variant="low" uppercase letterSpacing="widest" size="xs">Active Leagues</Text>
-            </Group>
-            <StatusDot intent="telemetry" size="lg" />
+    <Container size="xl" py={8}>
+      <Stack gap={8}>
+        {/* Header Section */}
+        <PageHeader
+          icon={Trophy}
+          title="Leagues"
+          description="Infrastructure for competitive sim racing."
+          action={
            <Button 
              onClick={onCreateLeague}
              variant="primary"
@@ -99,40 +89,62 @@ export function LeaguesTemplate({
            >
              Create League
            </Button>
-          </Group>
-        </Group>
+          }
+        />

-        {/* Search & Filters */}
-        <Group direction="column" gap={8} fullWidth>
-          <Input
-            type="text"
-            placeholder="Search leagues by name, description, or game..."
-            value={searchQuery}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value)}
-            icon={<Search size={20} />}
+        {/* Stats Overview */}
+        <Grid cols={{ base: 1, md: 3 }} gap={4}>
+          <MetricCard 
+            label="Active Leagues" 
+            value={viewData.leagues.length} 
+            icon={Trophy}
+            intent="telemetry"
          />
+          <MetricCard 
+            label="Total Drivers" 
+            value={viewData.leagues.reduce((acc, l) => acc + (l.usedDriverSlots ?? 0), 0)} 
+            icon={Trophy}
+            intent="primary"
+          />
+          <MetricCard 
+            label="Open Slots" 
+            value={viewData.leagues.reduce((acc, l) => acc + Math.max(0, (l.maxDrivers ?? 0) - (l.usedDriverSlots ?? 0)), 0)} 
+            icon={Trophy}
+            intent="success"
+          />
+        </Grid>

-          <Group direction="row" wrap gap={2} fullWidth>
-            {categories.map((category) => {
-              const isActive = activeCategory === category.id;
-              const CategoryIcon = category.icon;
-              return (
-                <Button
-                  key={category.id}
-                  onClick={() => onCategoryChange(category.id)}
-                  variant={isActive ? 'primary' : 'secondary'}
-                  size="sm"
-                  icon={<CategoryIcon size={14} />}
-                >
-                  {category.label}
-                </Button>
-              );
-            })}
-          </Group>
-        </Group>
+        {/* Control Bar */}
+        <ControlBar
+          leftContent={
+            <Group gap={4} align="center">
+              <Icon icon={Filter} size={4} intent="low" />
+              <SegmentedControl
+                options={categories.map(c => ({
+                  id: c.id,
+                  label: c.label,
+                  icon: <Icon icon={c.icon} size={3} />
+                }))}
+                activeId={activeCategory}
+                onChange={(id) => onCategoryChange(id as CategoryId)}
+              />
+            </Group>
+          }
+        >
+          <Box width="300px">
+            <Input
+              type="text"
+              placeholder="Search infrastructure..."
+              value={searchQuery}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value)}
+              icon={<Search size={16} />}
+              size="sm"
+            />
+          </Box>
+        </ControlBar>

-        {/* Grid */}
-        <Group direction="column" fullWidth>
+        {/* Results */}
+        <Stack gap={6}>
          {filteredLeagues.length > 0 ? (
            <Grid cols={{ base: 1, md: 2, lg: 3 }} gap={6}>
              {filteredLeagues.map((league) => (
@@ -145,22 +157,23 @@ export function LeaguesTemplate({
            </Grid>
          ) : (
            <Section variant="dark" padding="lg">
-              <Group direction="column" align="center" justify="center" fullWidth>
+              <Stack align="center" justify="center" gap={4}>
                <Icon icon={Search} size={12} intent="low" />
-                <Heading level={3} weight="bold">No Leagues Found</Heading>
-                <Text variant="low" size="sm">Try adjusting your search or filters</Text>
+                <Stack align="center" gap={1}>
+                  <Text size="lg" weight="bold">No results found</Text>
+                  <Text variant="low" size="sm">Adjust filters to find matching infrastructure.</Text>
+                </Stack>
                <Button 
                  variant="secondary"
                  onClick={onClearFilters}
-                  style={{ marginTop: '1.5rem' }}
                >
-                  Clear All Filters
+                  Reset Filters
                </Button>
-              </Group>
+              </Stack>
            </Section>
          )}
-        </Group>
-      </Group>
+        </Stack>
+      </Stack>
    </Container>
  );
 }
--- a/apps/website/ui/LeagueCard.tsx
+++ b/apps/website/ui/LeagueCard.tsx
@@ -5,6 +5,8 @@ import { Card } from './Card';
 import { Icon } from './Icon';
 import { Image } from './Image';
 import { Text } from './Text';
+import { Stack } from './Stack';
+import { Group } from './Group';

 export interface LeagueCardProps {
  children: ReactNode;
@@ -17,23 +19,37 @@ export interface LeagueCardProps {
 export const LeagueCard = ({ children, onClick, coverUrl, logo, badges }: LeagueCardProps) => {
  return (
    <Card 
-      variant="dark" 
+      variant="precision" 
      onClick={onClick} 
-      style={{ position: 'relative', cursor: onClick ? 'pointer' : 'default', overflow: 'hidden', height: '100%' }}
+      style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+      padding="none"
    >
-      <Box height="8rem" position="relative" style={{ overflow: 'hidden' }}>
-        <Image src={coverUrl} alt="Cover" fullWidth fullHeight objectFit="cover" style={{ opacity: 0.6 }} />
-        <Box position="absolute" inset={0} style={{ background: 'linear-gradient(to top, var(--ui-color-bg-base), transparent)' }} />
-        <Box position="absolute" top={3} left={3} display="flex" gap={2}>
-          {badges}
+      <Box height="10rem" position="relative" overflow="hidden">
+        <Image 
+          src={coverUrl} 
+          alt="Cover" 
+          fullWidth 
+          fullHeight 
+          objectFit="cover" 
+          style={{ opacity: 0.4, filter: 'grayscale(0.2)' }} 
+        />
+        <Box 
+          position="absolute" 
+          inset={0} 
+          style={{ background: 'linear-gradient(to top, var(--ui-color-bg-base), transparent)' }} 
+        />
+        <Box position="absolute" top={4} left={4}>
+          <Group gap={2}>
+            {badges}
+          </Group>
        </Box>
        {logo && (
-          <Box position="absolute" left={4} bottom={-6} zIndex={10}>
+          <Box position="absolute" left={6} bottom={-4} zIndex={10}>
            {logo}
          </Box>
        )}
      </Box>
-      <Box padding={4} paddingTop={8} display="flex" flexDirection="col" fullHeight>
+      <Box padding={6} paddingTop={10} display="flex" flexDirection="col" flex={1}>
        {children}
      </Box>
    </Card>
@@ -44,7 +60,7 @@ export interface LeagueCardStatsProps {
  label: string;
  value: string;
  percentage: number;
-  intent?: 'primary' | 'success' | 'warning';
+  intent?: 'primary' | 'success' | 'warning' | 'telemetry';
 }

 export const LeagueCardStats = ({ label, value, percentage, intent = 'primary' }: LeagueCardStatsProps) => {
@@ -52,17 +68,27 @@ export const LeagueCardStats = ({ label, value, percentage, intent = 'primary' }
    primary: 'var(--ui-color-intent-primary)',
    success: 'var(--ui-color-intent-success)',
    warning: 'var(--ui-color-intent-warning)',
+    telemetry: 'var(--ui-color-intent-telemetry)',
  };

  return (
-    <Box marginBottom={4}>
-      <Box display="flex" alignItems="center" justifyContent="between" marginBottom={1.5}>
-        <Text size="xs" variant="low" weight="bold" uppercase>{label}</Text>
-        <Text size="xs" variant="med" font="mono">{value}</Text>
-      </Box>
-      <Box height="4px" bg="var(--ui-color-bg-surface-muted)" rounded="full" style={{ overflow: 'hidden' }}>
-        <Box height="100%" bg={intentColors[intent]} style={{ width: `${Math.min(percentage, 100)}%` }} />
-      </Box>
+    <Box marginBottom={6}>
+      <Stack gap={2}>
+        <Group justify="between" align="end">
+          <Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest">{label}</Text>
+          <Text size="sm" variant="high" font="mono" weight="bold">{value}</Text>
+        </Group>
+        <Box height="2px" bg="var(--ui-color-bg-surface-muted)" rounded="full" overflow="hidden">
+          <Box 
+            height="100%" 
+            bg={intentColors[intent]} 
+            style={{ 
+              width: `${Math.min(percentage, 100)}%`,
+              boxShadow: `0 0 8px ${intentColors[intent]}44`
+            }} 
+          />
+        </Box>
+      </Stack>
    </Box>
  );
 };
@@ -72,11 +98,19 @@ export interface LeagueCardFooterProps {
 }

 export const LeagueCardFooter = ({ children }: LeagueCardFooterProps) => (
-  <Box marginTop="auto" paddingTop={3} style={{ borderTop: '1px solid var(--ui-color-border-muted)', opacity: 0.5 }} display="flex" alignItems="center" justifyContent="between">
-    {children}
-    <Box display="flex" alignItems="center" gap={1}>
-      <Text size="xs" variant="low" weight="bold" uppercase>VIEW</Text>
-      <Icon icon={ChevronRight} size={3} intent="low" />
-    </Box>
+  <Box 
+    marginTop="auto" 
+    paddingTop={4} 
+    style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}
+  >
+    <Group justify="between" align="center">
+      <Box flex={1}>
+        {children}
+      </Box>
+      <Group gap={1} align="center">
+        <Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest">ACCESS</Text>
+        <Icon icon={ChevronRight} size={3} intent="low" />
+      </Group>
+    </Group>
  </Box>
 );