mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-19 01:24:07 +01:00
parent e1ce3bffd1
commit edc4cd7f21
64 changed files with 1113 additions and 753 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/website/components/leagues/JoinRequestsPanel.tsx
View File

@@ -4,6 +4,9 @@ import { IconButton } from '@/ui/IconButton';
import { Panel } from '@/ui/Panel';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { ListItem, ListItemInfo, ListItemActions } from '@/ui/ListItem';
import { EmptyState } from '@/ui/EmptyState';
import { Check, Clock, X, UserPlus } from 'lucide-react';
@@ -34,17 +37,17 @@ export function JoinRequestsPanel({ requests, onAccept, onDecline }: JoinRequest
return (
<Panel title={`Pending Requests (${requests.length})`}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
<Stack gap={3}>
{requests.map((request) => (
<ListItem key={request.id}>
<ListItemInfo
title={request.driverName}
description={request.message}
meta={
<div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
<Group gap={1.5}>
<Icon icon={Clock} size={3} intent="low" />
<Text size="xs" variant="low" font="mono">{request.requestedAt}</Text>
</div>
</Group>
}
/>
<ListItemActions>
@@ -66,7 +69,7 @@ export function JoinRequestsPanel({ requests, onAccept, onDecline }: JoinRequest
</ListItemActions>
</ListItem>
))}
</div>
</Stack>
</Panel>
);
}

79
apps/website/components/leagues/LeagueBasicsSection.tsx
View File

@@ -7,6 +7,8 @@ import { Icon } from '@/ui/Icon';
import { Input } from '@/ui/Input';
import { Grid } from '@/ui/Grid';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { TextArea } from '@/ui/TextArea';
@@ -46,42 +48,38 @@ export function LeagueBasicsSection({
return (
<Stack gap={8}>
{/* Emotional header for the step */}
<Stack textAlign="center" pb={2}>
<Stack mb={2}>
<Stack textAlign="center" paddingBottom={2}>
<Box marginBottom={2}>
<Heading level={3}>
Every great championship starts with a name
</Heading>
</Stack>
<Stack maxWidth="lg" mx="auto">
<Text size="sm" color="text-gray-400">
</Box>
<Box maxWidth="lg" marginX="auto">
<Text size="sm" variant="low">
This is where legends begin. Give your league an identity that drivers will remember.
</Text>
</Stack>
</Box>
</Stack>
{/* League name */}
<Stack gap={3}>
<Input
label={
<Stack direction="row" align="center" gap={2}>
<Icon icon={FileText} size={4} color="var(--primary-blue)" />
<Text size="sm" weight="medium" color="text-gray-300">League name *</Text>
</Stack>
}
label="League name *"
icon={<Icon icon={FileText} size={4} intent="primary" />}
value={basics.name}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateBasics({ name: e.target.value })}
placeholder="e.g., GridPilot Sprint Series"
variant={errors?.name ? 'error' : 'default'}
errorMessage={errors?.name}
error={errors?.name}
disabled={disabled}
autoFocus
fullWidth
/>
<Stack gap={2}>
<Text size="xs" color="text-gray-500">
<Text size="xs" variant="low">
Make it memorable — this is what drivers will see first
</Text>
<Stack direction="row" wrap gap={2}>
<Text size="xs" color="text-gray-500">Try:</Text>
<Group wrap gap={2}>
<Text size="xs" variant="low">Try:</Text>
{[
'Sunday Showdown Series',
'Midnight Endurance League',
@@ -94,27 +92,19 @@ export function LeagueBasicsSection({
variant="secondary"
size="sm"
disabled={disabled}
rounded="full"
fontSize="0.75rem"
px={2}
py={0.5}
h="auto"
rounded
style={{ fontSize: '0.75rem', height: 'auto', padding: '0.125rem 0.5rem' }}
>
{name}
</Button>
))}
</Stack>
</Group>
</Stack>
</Stack>
{/* Description - Now Required */}
<TextArea
label={
<Stack direction="row" align="center" gap={2}>
<Icon icon={FileText} size={4} color="var(--primary-blue)" />
<Text size="sm" weight="medium" color="text-gray-300">Tell your story *</Text>
</Stack>
}
label="Tell your story *"
value={basics.description ?? ''}
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
updateBasics({
@@ -123,27 +113,27 @@ export function LeagueBasicsSection({
}
rows={4}
disabled={disabled}
variant={errors?.description ? 'error' : 'default'}
errorMessage={errors?.description}
error={errors?.description}
placeholder="What makes your league special? Tell drivers what to expect..."
fullWidth
/>
<Surface variant="muted" rounded="lg" border padding={4}>
<Stack mb={3}>
<Text size="xs" color="text-gray-400">
<Text weight="medium" color="text-gray-300">Great descriptions include:</Text>
<Box marginBottom={3}>
<Text size="xs" variant="low">
<Text weight="medium" variant="med">Great descriptions include:</Text>
</Text>
</Stack>
</Box>
<Grid cols={3} gap={3}>
{[
'Racing style & pace',
'Schedule & timezone',
'Community vibe'
].map(item => (
<Stack key={item} direction="row" align="start" gap={2}>
<Icon icon={Check} size={3.5} color="var(--performance-green)" mt={0.5} />
<Text size="xs" color="text-gray-400">{item}</Text>
</Stack>
<Group key={item} align="start" gap={2}>
<Icon icon={Check} size={3.5} intent="success" style={{ marginTop: '0.125rem' }} />
<Text size="xs" variant="low">{item}</Text>
</Group>
))}
</Grid>
</Surface>
@@ -151,16 +141,13 @@ export function LeagueBasicsSection({
{/* Game Platform */}
<Stack gap={2}>
<Input
label={
<Stack direction="row" align="center" gap={2}>
<Icon icon={Gamepad2} size={4} color="var(--text-gray-400)" />
<Text size="sm" weight="medium" color="text-gray-300">Game platform</Text>
</Stack>
}
label="Game platform"
icon={<Icon icon={Gamepad2} size={4} intent="low" />}
value="iRacing"
disabled
fullWidth
/>
<Text size="xs" color="text-gray-500">
<Text size="xs" variant="low">
More platforms soon
</Text>
</Stack>

50
apps/website/components/leagues/LeagueCard.tsx
View File

@@ -5,6 +5,9 @@ import { Icon } from '@/ui/Icon';
import { Image } from '@/ui/Image';
import { PlaceholderImage } from '@/ui/PlaceholderImage';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Surface } from '@/ui/Surface';
import { LeagueCard as UILeagueCard, LeagueCardStats, LeagueCardFooter } from '@/ui/LeagueCard';
import { Calendar as LucideCalendar } from 'lucide-react';
import React, { ReactNode } from 'react';
@@ -50,7 +53,14 @@ export function LeagueCard({
onClick={onClick}
coverUrl={coverUrl}
logo={
<div style={{ width: '3rem', height: '3rem', borderRadius: '0.5rem', overflow: 'hidden', border: '1px solid var(--ui-color-border-default)', backgroundColor: 'var(--ui-color-bg-base)' }}>
<Surface
width="3rem"
height="3rem"
rounded="md"
overflow="hidden"
border
variant="dark"
>
{logoUrl ? (
<Image
src={logoUrl}
@@ -62,7 +72,7 @@ export function LeagueCard({
) : (
<PlaceholderImage size={48} />
)}
</div>
</Surface>
}
badges={
<React.Fragment>
@@ -71,12 +81,14 @@ export function LeagueCard({
</React.Fragment>
}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
<div style={{ width: '0.25rem', height: '1rem', backgroundColor: 'var(--ui-color-intent-primary)' }} />
<Heading level={3} weight="bold" truncate>{name}</Heading>
</div>
<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', marginBottom: '1rem' }} block leading="relaxed">
<Text size="xs" variant="low" lineClamp={2} style={{ height: '2.5rem' }} block leading="relaxed" marginBottom={4}>
{description || 'No description available'}
</Text>
@@ -88,20 +100,32 @@ export function LeagueCard({
/>
{hasOpenSlots && (
<div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem', padding: '0.25rem 0.5rem', backgroundColor: 'rgba(25, 140, 255, 0.05)', border: '1px solid rgba(25, 140, 255, 0.2)', borderRadius: 'var(--ui-radius-sm)', width: 'fit-content', marginBottom: '1rem' }}>
<div style={{ width: '0.375rem', height: '0.375rem', borderRadius: '9999px', backgroundColor: 'var(--ui-color-intent-primary)' }} />
<Text size="xs" variant="primary" weight="bold" uppercase>{openSlotsCount} OPEN</Text>
</div>
<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 && (
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<Group gap={2}>
<Icon icon={LucideCalendar} size={3} intent="low" />
<Text size="xs" variant="low" font="mono">
{timingSummary.split('•')[1]?.trim() || timingSummary}
</Text>
</div>
</Group>
)}
</LeagueCardFooter>
</UILeagueCard>

48
apps/website/components/leagues/LeagueDropSection.tsx
View File

@@ -4,6 +4,10 @@ import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { InfoFlyout } from '@/ui/InfoFlyout';
import { Stepper } from '@/ui/Stepper';
import { Button } from '@/ui/Button';
@@ -91,14 +95,22 @@ export function LeagueDropSection({
const needsN = dropPolicy.strategy !== 'none';
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<Stack gap={4}>
{/* Section header */}
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
<div style={{ display: 'flex', width: '2.5rem', height: '2.5rem', alignItems: 'center', justifyContent: 'center', borderRadius: '0.75rem', backgroundColor: 'rgba(25, 140, 255, 0.1)' }}>
<Group gap={3}>
<Surface
display="flex"
width="2.5rem"
height="2.5rem"
alignItems="center"
justifyContent="center"
rounded="md"
bg="rgba(25, 140, 255, 0.1)"
>
<Icon icon={TrendingDown} size={5} intent="primary" />
</div>
<div style={{ flex: 1 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
</Surface>
<Stack flex={1} gap={0}>
<Group gap={2}>
<Heading level={3}>Drop Rules</Heading>
<IconButton
ref={dropInfoRef}
@@ -108,10 +120,10 @@ export function LeagueDropSection({
onClick={() => setShowDropFlyout(true)}
title="Help"
/>
</div>
</Group>
<Text size="xs" variant="low">Protect from bad races</Text>
</div>
</div>
</Stack>
</Group>
<InfoFlyout
isOpen={showDropFlyout}
@@ -126,7 +138,7 @@ export function LeagueDropSection({
</InfoFlyout>
{/* Strategy buttons + N stepper inline */}
<div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '0.5rem' }}>
<Group gap={2} wrap>
{DROP_OPTIONS.map((option) => {
const isSelected = dropPolicy.strategy === option.value;
return (
@@ -137,26 +149,26 @@ export function LeagueDropSection({
onClick={() => handleStrategyChange(option.value)}
disabled={disabled}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<Group gap={2}>
{isSelected && <Icon icon={Check} size={3} />}
<span>{option.emoji}</span>
<span>{option.label}</span>
</div>
<Text as="span">{option.emoji}</Text>
<Text as="span">{option.label}</Text>
</Group>
</Button>
);
})}
{needsN && (
<div style={{ marginLeft: '0.5rem' }}>
<Box marginLeft={2}>
<Stepper
value={dropPolicy.n ?? 1}
onChange={handleNChange}
label="N ="
disabled={disabled}
/>
</div>
</Box>
)}
</div>
</Group>
{/* Explanation text */}
<Text size="xs" variant="low" block>
@@ -164,6 +176,6 @@ export function LeagueDropSection({
{dropPolicy.strategy === 'bestNResults' && `Only your best ${dropPolicy.n ?? 1} results will count.`}
{dropPolicy.strategy === 'dropWorstN' && `Your worst ${dropPolicy.n ?? 1} results will be excluded.`}
</Text>
</div>
</Stack>
);
}

18
apps/website/components/leagues/LeagueMembers.tsx
View File

@@ -14,6 +14,8 @@ import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
import { Button } from '@/ui/Button';
import { Select } from '@/ui/Select';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { ControlBar } from '@/ui/ControlBar';
import { useCallback, useEffect, useState } from 'react';
import React from 'react';
@@ -135,7 +137,7 @@ export function LeagueMembers({
}
return (
<div>
<Box>
<ControlBar
leftContent={
<Text size="sm" variant="low">
@@ -143,7 +145,7 @@ export function LeagueMembers({
</Text>
}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<Group gap={2}>
<Text size="sm" variant="low">Sort by:</Text>
<Select
value={sortBy}
@@ -158,10 +160,10 @@ export function LeagueMembers({
]}
fullWidth={false}
/>
</div>
</Group>
</ControlBar>
<div style={{ overflowX: 'auto', marginTop: '1rem' }}>
<Box overflowX="auto" marginTop={4}>
<LeagueMemberTable showActions={showActions}>
{sortedMembers.map((member, index) => {
const isCurrentUser = member.driverId === currentDriverId;
@@ -190,7 +192,7 @@ export function LeagueMembers({
href={routes.driver.detail(member.driverId)}
meta={ratingAndWinsMeta}
actions={showActions && !cannotModify && !isCurrentUser ? (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: '0.5rem' }}>
<Group gap={2} justify="end">
{onUpdateRole && (
<Select
value={member.role}
@@ -212,13 +214,13 @@ export function LeagueMembers({
<Text variant="critical">Remove</Text>
</Button>
)}
</div>
</Group>
) : (showActions && cannotModify ? <Text size="xs" variant="low">—</Text> : undefined)}
/>
);
})}
</LeagueMemberTable>
</div>
</div>
</Box>
</Box>
);
}

14
apps/website/components/leagues/StandingsTableShell.tsx
View File

@@ -4,6 +4,8 @@ import { Icon } from '@/ui/Icon';
import { Panel } from '@/ui/Panel';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { PositionBadge } from '@/ui/ResultRow';
import { TrendingUp, Trophy } from 'lucide-react';
import React from 'react';
@@ -32,7 +34,7 @@ export function StandingsTableShell({ standings, title = 'Championship Standings
<Text size="xs" variant="low">{standings.length} Drivers</Text>
}
>
<div style={{ overflowX: 'auto' }}>
<Box overflowX="auto">
<Table>
<TableHead>
<TableRow>
@@ -50,10 +52,10 @@ export function StandingsTableShell({ standings, title = 'Championship Standings
<PositionBadge position={entry.position} />
</TableCell>
<TableCell>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
<Group gap={3}>
<Text weight="bold" variant="high">{entry.driverName}</Text>
{entry.change !== undefined && entry.change !== 0 && (
<div style={{ display: 'flex', alignItems: 'center', gap: '0.125rem' }}>
<Group gap={0.5}>
<Icon
icon={TrendingUp}
size={3}
@@ -63,9 +65,9 @@ export function StandingsTableShell({ standings, title = 'Championship Standings
<Text size="xs" variant={entry.change > 0 ? 'success' : 'critical'}>
{Math.abs(entry.change)}
</Text>
</div>
</Group>
)}
</div>
</Group>
</TableCell>
<TableCell textAlign="center">
<Text size="sm" variant={entry.wins > 0 ? 'high' : 'low'}>{entry.wins}</Text>
@@ -80,7 +82,7 @@ export function StandingsTableShell({ standings, title = 'Championship Standings
))}
</TableBody>
</Table>
</div>
</Box>
</Panel>
);
}