do to formatters

apps/website/components/leaderboards/DriverLeaderboardPreview.tsx

@@ -1,11 +1,11 @@
 import { RankBadge } from '@/components/leaderboards/RankBadge';
-import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
-import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
+import { RatingFormatter } from '@/lib/formatters/RatingFormatter';
+import { SkillLevelFormatter } from '@/lib/formatters/SkillLevelFormatter';
 import { Avatar } from '@/ui/Avatar';
+import { Group } from '@/ui/Group';
 import { LeaderboardList } from '@/ui/LeaderboardList';
 import { LeaderboardPreviewShell } from '@/ui/LeaderboardPreviewShell';
 import { LeaderboardRow } from '@/ui/LeaderboardRow';
-import { Group } from '@/ui/Group';
 import { Text } from '@/ui/Text';
 import { Trophy } from 'lucide-react';
 
@@ -69,8 +69,8 @@ export function DriverLeaderboardPreview({
                     </Text>
                     <Group gap={2}>
                       <Text size="xs" variant="low" uppercase weight="bold" letterSpacing="wider">{driver.nationality}</Text>
-                      <Text size="xs" weight="bold" color={SkillLevelDisplay.getColor(driver.skillLevel)} uppercase letterSpacing="wider">
-                        {SkillLevelDisplay.getLabel(driver.skillLevel)}
+                      <Text size="xs" weight="bold" color={SkillLevelFormatter.getColor(driver.skillLevel)} uppercase letterSpacing="wider">
+                        {SkillLevelFormatter.getLabel(driver.skillLevel)}
                       </Text>
                     </Group>
                   </Group>
@@ -80,7 +80,7 @@ export function DriverLeaderboardPreview({
                 <Group gap={8}>
                   <Group direction="column" align="end" gap={0}>
                     <Text variant="primary" font="mono" weight="bold" block size="md" align="right">
-                      {RatingDisplay.format(driver.rating)}
+                      {RatingFormatter.format(driver.rating)}
                     </Text>
                     <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px" align="right">
                       Rating

apps/website/components/leaderboards/LeaderboardPodium.tsx

@@ -1,5 +1,5 @@
-import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
-import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
+import { MedalFormatter } from '@/lib/formatters/MedalFormatter';
+import { RatingFormatter } from '@/lib/formatters/RatingFormatter';
 import { Image } from '@/ui/Image';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
@@ -91,8 +91,8 @@ export function LeaderboardPodium({ podium, onDriverClick }: LeaderboardPodiumPr
                   border 
                   transform="translateX(-50%)"
                   borderWidth="2px"
-                  bg={MedalDisplay.getBg(position)}
-                  color={MedalDisplay.getColor(position)}
+                  bg={MedalFormatter.getBg(position)}
+                  color={MedalFormatter.getColor(position)}
                   shadow="lg"
                 >
                   <Text size="sm" weight="bold">{position}</Text>
@@ -122,7 +122,7 @@ export function LeaderboardPodium({ podium, onDriverClick }: LeaderboardPodiumPr
                 block 
                 color={isFirst ? 'text-warning-amber' : 'text-primary-blue'}
               >
-                {RatingDisplay.format(driver.rating)}
+                {RatingFormatter.format(driver.rating)}
               </Text>
 
               <Stack direction="row" align="center" gap={3} mt={1}>
@@ -155,7 +155,7 @@ export function LeaderboardPodium({ podium, onDriverClick }: LeaderboardPodiumPr
                 <Text 
                   weight="bold" 
                   size="4xl" 
-                  color={MedalDisplay.getColor(position)}
+                  color={MedalFormatter.getColor(position)}
                   opacity={0.1}
                   fontSize={isFirst ? '5rem' : '3.5rem'}
                 >

apps/website/components/leaderboards/RankMedal.tsx

@@ -1,11 +1,10 @@
-import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
-import { RankMedal as UiRankMedal, RankMedalProps } from '@/ui/RankMedal';
-import React from 'react';
+import { MedalFormatter } from '@/lib/formatters/MedalFormatter';
+import { RankMedalProps, RankMedal as UiRankMedal } from '@/ui/RankMedal';
 
 export function RankMedal(props: RankMedalProps) {
-  const variant = MedalDisplay.getVariant(props.rank);
-  const bg = MedalDisplay.getBg(props.rank);
-  const color = MedalDisplay.getColor(props.rank);
+  const variant = MedalFormatter.getVariant(props.rank);
+  const bg = MedalFormatter.getBg(props.rank);
+  const color = MedalFormatter.getColor(props.rank);
 
   return (
     <UiRankMedal 

apps/website/components/leaderboards/RankingRow.tsx

@@ -1,12 +1,11 @@
-import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
+import { RatingFormatter } from '@/lib/formatters/RatingFormatter';
+import { SkillLevelFormatter } from '@/lib/formatters/SkillLevelFormatter';
 import { Avatar } from '@/ui/Avatar';
 import { Group } from '@/ui/Group';
+import { LeaderboardRow } from '@/ui/LeaderboardRow';
 import { Text } from '@/ui/Text';
 import { DeltaChip } from './DeltaChip';
 import { RankBadge } from './RankBadge';
-import { LeaderboardRow } from '@/ui/LeaderboardRow';
-import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
-import React from 'react';
 
 interface RankingRowProps {
   id: string;
@@ -65,8 +64,8 @@ export function RankingRow({
             </Text>
             <Group gap={2}>
               <Text size="xs" variant="low" uppercase weight="bold" letterSpacing="wider">{nationality}</Text>
-              <Text size="xs" weight="bold" style={{ color: SkillLevelDisplay.getColor(skillLevel) }} uppercase letterSpacing="wider">
-                {SkillLevelDisplay.getLabel(skillLevel)}
+              <Text size="xs" weight="bold" style={{ color: SkillLevelFormatter.getColor(skillLevel) }} uppercase letterSpacing="wider">
+                {SkillLevelFormatter.getLabel(skillLevel)}
               </Text>
             </Group>
           </Group>
@@ -84,7 +83,7 @@ export function RankingRow({
           </Group>
           <Group direction="column" align="end" gap={0}>
             <Text variant="primary" font="mono" weight="bold" block size="md">
-              {RatingDisplay.format(rating)}
+              {RatingFormatter.format(rating)}
             </Text>
             <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold">
               Rating

apps/website/components/leaderboards/RankingsPodium.tsx

@@ -1,10 +1,7 @@
+import { RatingFormatter } from '@/lib/formatters/RatingFormatter';
 import { Avatar } from '@/ui/Avatar';
 import { Group } from '@/ui/Group';
-import { Text } from '@/ui/Text';
-import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
-import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
 import { Surface } from '@/ui/Surface';
-import React from 'react';
 
 interface PodiumDriver {
   id: string;
@@ -20,7 +17,7 @@ interface RankingsPodiumProps {
   onDriverClick?: (id: string) => void;
 }
 
-export function RankingsPodium({ podium, onDriverClick }: RankingsPodiumProps) {
+export function RankingsPodium({ podium }: RankingsPodiumProps) {
   return (
     <Group justify="center" align="end" gap={4}>
       {[1, 0, 2].map((index) => {
@@ -57,7 +54,7 @@ export function RankingsPodium({ podium, onDriverClick }: RankingsPodiumProps) {
               
               <Text weight="bold" variant="high" size={isFirst ? 'md' : 'sm'}>{driver.name}</Text>
               <Text font="mono" weight="bold" variant={isFirst ? 'warning' : 'primary'}>
-                {RatingDisplay.format(driver.rating)}
+                {RatingFormatter.format(driver.rating)}
               </Text>
             </Group>