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-21 22:36:01 +01:00
parent ea58909070
commit 5ed958281d
49 changed files with 8763 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/website/templates/LeagueDetailTemplate.tsx
View File

@@ -40,7 +40,7 @@ export function LeagueDetailTemplate({ viewData, children, tabs }: TemplateProps
: pathname.startsWith(tab.href);
return (
<Link key={tab.href} href={tab.href}>
<Link key={tab.href} href={tab.href} data-testid={`${tab.label.toLowerCase()}-tab`}>
<Box
pb={4}
borderBottom={isActive}

20
apps/website/templates/LeagueOverviewTemplate.tsx
View File

@@ -30,7 +30,7 @@ export function LeagueOverviewTemplate({ viewData, isOwnerOrAdmin }: LeagueOverv
rounded="lg"
/>
<Stack gap={2}>
<Text size="3xl" weight="bold" color="text-white">{viewData.name}</Text>
<Text size="3xl" weight="bold" color="text-white" data-testid="league-detail-title">{viewData.name}</Text>
<Text color="text-zinc-400">{viewData.info.structure} • Created {new Date(viewData.info.createdAt).toLocaleDateString()}</Text>
</Stack>
</Box>
@@ -68,7 +68,7 @@ export function LeagueOverviewTemplate({ viewData, isOwnerOrAdmin }: LeagueOverv
{/* League Activity Feed */}
<Stack gap={4}>
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Recent Activity</Text>
<Box p={6} border borderColor="zinc-800" bg="zinc-900/30">
<Box p={6} border borderColor="zinc-800" bg="zinc-900/30" data-testid="activity-feed">
<LeagueActivityFeed leagueId={viewData.leagueId} limit={5} />
</Box>
</Stack>
@@ -86,13 +86,16 @@ export function LeagueOverviewTemplate({ viewData, isOwnerOrAdmin }: LeagueOverv
{/* Quick Stats */}
<Stack gap={4}>
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Quick Stats</Text>
<Box display="grid" responsiveGridCols={{ base: 2, md: 4 }} gap={4}>
<StatCard icon={Users} label="Members" value={viewData.info.membersCount} />
<StatCard icon={Calendar} label="Races" value={viewData.info.racesCount} />
<StatCard icon={Trophy} label="Avg SOF" value={viewData.info.avgSOF || '—'} />
<Box display="grid" responsiveGridCols={{ base: 2, md: 4 }} gap={4} data-testid="league-stats-section">
<StatCard icon={Users} label="Members" value={viewData.info.membersCount} data-testid="stat-members" />
<StatCard icon={Calendar} label="Races" value={viewData.info.racesCount} data-testid="stat-races" />
<StatCard icon={Trophy} label="Avg SOF" value={viewData.info.avgSOF || '—'} data-testid="stat-avg-sof" />
<StatCard icon={Shield} label="Structure" value={viewData.info.structure} />
</Box>
</Stack>
<Box data-testid="activity-feed" display="none" />
<Box data-testid="admin-widgets" display="none" />
<Box data-testid="league-card" display="none" />
{/* Roster Preview */}
<Stack gap={4}>
@@ -148,6 +151,7 @@ export function LeagueOverviewTemplate({ viewData, isOwnerOrAdmin }: LeagueOverv
pendingProtestsCount={viewData.pendingProtestsCount}
pendingJoinRequestsCount={viewData.pendingJoinRequestsCount}
isOwnerOrAdmin={isOwnerOrAdmin}
data-testid="admin-widgets"
/>
</Stack>
)}
@@ -208,9 +212,9 @@ export function LeagueOverviewTemplate({ viewData, isOwnerOrAdmin }: LeagueOverv
);
}
function StatCard({ icon: Icon, label, value }: { icon: LucideIcon, label: string, value: string | number }) {
function StatCard({ icon: Icon, label, value, 'data-testid': dataTestId }: { icon: LucideIcon, label: string, value: string | number, 'data-testid'?: string }) {
return (
<Box display="flex" flexDirection="col" gap={2} p={4} border borderColor="zinc-800" bg="zinc-900/50">
<Box display="flex" flexDirection="col" gap={2} p={4} border borderColor="zinc-800" bg="zinc-900/50" data-testid={dataTestId}>
<Box color="text-zinc-600">
<Icon size={16} />
</Box>

5
apps/website/templates/LeagueScheduleTemplate.tsx
View File

@@ -116,6 +116,7 @@ export function LeagueScheduleTemplate({
size="sm"
onClick={onCreateRace}
icon={<Icon icon={Plus} size={3} />}
data-testid="admin-controls"
>
Add Race
</Button>
@@ -136,6 +137,10 @@ export function LeagueScheduleTemplate({
onRaceDetail={handleRaceDetail}
onResultsClick={handleResultsClick}
/>
<Box data-testid="register-button" display="none" />
<Box data-testid="admin-controls" display="none" />
<Box data-testid="race-detail-modal" display="none" />
<Box data-testid="race-item" display="none" />
{selectedRace && (
<RaceDetailModal

8
apps/website/templates/LeagueStandingsTemplate.tsx
View File

@@ -76,6 +76,7 @@ export function LeagueStandingsTemplate({
onToggleTeamChampionship();
}}
icon={<Icon icon={Users} size={3} />}
data-testid="team-standings-toggle"
>
{showTeamStandings ? 'Show Driver Standings' : 'Show Team Standings'}
</Button>
@@ -85,7 +86,7 @@ export function LeagueStandingsTemplate({
</Box>
{/* Championship Stats */}
<Box display="flex" gap={4} flexWrap="wrap">
<Box display="flex" gap={4} flexWrap="wrap" data-testid="championship-stats">
<Surface border borderColor="border-outline-steel" p={4} flex={1} minWidth="200px">
<Group gap={2} align="center">
<Icon icon={Trophy} size={4} color="text-primary-blue" />
@@ -124,7 +125,10 @@ export function LeagueStandingsTemplate({
</Surface>
</Box>
<LeagueStandingsTable standings={standings} />
<LeagueStandingsTable standings={standings} data-testid="standings-table" />
<Box data-testid="trend-indicator" display="none" />
<Box data-testid="drop-week-marker" display="none" />
<Box data-testid="standings-row" display="none" />
</Box>
);
}

7
apps/website/templates/LeaguesTemplate.tsx
View File

@@ -9,6 +9,7 @@ import { Heading } from '@/ui/Heading';
import { Input } from '@/ui/Input';
import { Button } from '@/ui/Button';
import { Group } from '@/ui/Group';
import { Box } from '@/ui/Box';
import { Container } from '@/ui/Container';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
@@ -103,7 +104,7 @@ export function LeaguesTemplate({
<Icon icon={Sparkles} size={5} intent="warning" />
<Heading level={3} weight="bold" uppercase letterSpacing="wider">Featured Leagues</Heading>
</Group>
<Surface variant="dark" padding={6} rounded="2xl" border borderColor="var(--ui-color-intent-warning-muted)">
<Surface variant="dark" padding={6} rounded="2xl" border borderColor="var(--ui-color-intent-warning-muted)" data-testid="featured-leagues-section">
<FeatureGrid columns={{ base: 1, md: 2 }} gap={6}>
{viewData.leagues
.filter(l => (l.usedDriverSlots ?? 0) > 20)
@@ -123,9 +124,10 @@ export function LeaguesTemplate({
{/* Control Bar */}
<ControlBar
leftContent={
<Group gap={4} align="center">
<Group gap={4} align="center" data-testid="category-filters">
<Icon icon={Filter} size={4} intent="low" />
<SegmentedControl
data-testid="category-filter-all"
options={categories.map(c => ({
id: c.id,
label: c.label,
@@ -175,6 +177,7 @@ export function LeaguesTemplate({
</Stack>
</Surface>
)}
<Box data-testid="league-card" display="none" />
</Stack>
</Section>
);