website refactor

apps/website/components/leaderboards/DeltaChip.tsx

@@ -13,7 +13,7 @@ interface DeltaChipProps {
 export function DeltaChip({ value, type = 'rank' }: DeltaChipProps) {
   if (value === 0) {
     return (
-      <Group gap={1}>
+      <Group gap={1} data-testid="trend-indicator">
         <Icon icon={Minus} size={3} intent="low" />
         <Text size="xs" font="mono" variant="low">0</Text>
       </Group>
@@ -26,7 +26,7 @@ export function DeltaChip({ value, type = 'rank' }: DeltaChipProps) {
   const absoluteValue = Math.abs(value);
 
   return (
-    <Badge variant={variant} size="sm">
+    <Badge variant={variant} size="sm" data-testid="trend-indicator">
       <Group gap={0.5}>
         <Icon icon={IconComponent} size={3} />
         <Text size="xs" font="mono" weight="bold">

apps/website/components/leaderboards/RankingRow.tsx

@@ -20,6 +20,7 @@ interface RankingRowProps {
   rating: number;
   wins: number;
   onClick?: () => void;
+  droppedRaceIds?: string[];
 }
 
 export function RankingRow({
@@ -33,12 +34,13 @@ export function RankingRow({
   rating,
   wins,
   onClick,
+  droppedRaceIds,
 }: RankingRowProps) {
   return (
     <LeaderboardRow
       onClick={onClick}
       rank={
-        <Group gap={4}>
+        <Group gap={4} data-testid="standing-position">
           <RankBadge rank={rank} />
           {rankDelta !== undefined && (
             <DeltaChip value={rankDelta} type="rank" />
@@ -46,17 +48,17 @@ export function RankingRow({
         </Group>
       }
       identity={
-        <Group gap={4}>
-          <Avatar 
-            src={avatarUrl} 
-            alt={name} 
+        <Group gap={4} data-testid="standing-driver">
+          <Avatar
+            src={avatarUrl}
+            alt={name}
             size="md"
           />
           <Group direction="column" align="start" gap={0}>
-            <Text 
-              weight="bold" 
-              variant="high" 
-              block 
+            <Text
+              weight="bold"
+              variant="high"
+              block
               truncate
             >
               {name}
@@ -71,7 +73,7 @@ export function RankingRow({
         </Group>
       }
       stats={
-        <Group gap={8}>
+        <Group gap={8} data-testid="standing-points">
           <Group direction="column" align="end" gap={0}>
             <Text variant="low" font="mono" weight="bold" block size="md">
               {racesCompleted}
@@ -96,6 +98,16 @@ export function RankingRow({
               Wins
             </Text>
           </Group>
+          {droppedRaceIds && droppedRaceIds.length > 0 && (
+            <Group direction="column" align="end" gap={0} data-testid="drop-week-marker">
+              <Text variant="warning" font="mono" weight="bold" block size="md">
+                {droppedRaceIds.length}
+              </Text>
+              <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold">
+                Dropped
+              </Text>
+            </Group>
+          )}
         </Group>
       }
     />