website cleanup

apps/website/components/profile/DriverSummaryPill.tsx

@@ -4,6 +4,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import type { DriverDTO } from '@/lib/types/generated/DriverDTO';
 import DriverRating from '@/components/profile/DriverRatingPill';
+import { useServices } from '@/lib/services/ServiceProvider';
 
 export interface DriverSummaryPillProps {
   driver: DriverDTO;
@@ -17,8 +18,10 @@ export interface DriverSummaryPillProps {
 export default function DriverSummaryPill(props: DriverSummaryPillProps) {
   const { driver, rating, rank, avatarSrc, onClick, href } = props;
 
+  const { mediaService } = useServices();
+
   const resolvedAvatar =
-    avatarSrc ?? getImageService().getDriverAvatar(driver.id);
+    avatarSrc ?? mediaService.getDriverAvatar(driver.id);
 
   const content = (
     <>
@@ -70,4 +73,4 @@ export default function DriverSummaryPill(props: DriverSummaryPillProps) {
       {content}
     </div>
   );
-}
+}

apps/website/components/profile/ProfileHeader.tsx

@@ -5,6 +5,7 @@ import type { GetDriverOutputDTO } from '@/lib/types/generated/GetDriverOutputDT
 import Button from '../ui/Button';
 import DriverRatingPill from '@/components/profile/DriverRatingPill';
 import CountryFlag from '@/components/ui/CountryFlag';
+import { useServices } from '@/lib/services/ServiceProvider';
 
 interface ProfileHeaderProps {
   driver: GetDriverOutputDTO;
@@ -25,12 +26,14 @@ export default function ProfileHeader({
   teamName,
   teamTag,
 }: ProfileHeaderProps) {
+  const { mediaService } = useServices();
+
   return (
     <div className="flex items-start justify-between">
       <div className="flex items-start gap-4">
         <div className="w-20 h-20 rounded-full bg-gradient-to-br from-primary-blue to-purple-600 overflow-hidden flex items-center justify-center">
           <Image
-            src={getImageService().getDriverAvatar(driver.id)}
+            src={mediaService.getDriverAvatar(driver.id)}
             alt={driver.name}
             width={80}
             height={80}
@@ -76,4 +79,4 @@ export default function ProfileHeader({
       )}
     </div>
   );
-}
+}

apps/website/components/profile/UserPill.tsx

@@ -104,7 +104,7 @@ export default function UserPill() {
 
       const dto = await driverService.findById(primaryDriverId);
       if (!cancelled) {
-        setDriver(dto);
+        setDriver(dto ? (dto as unknown as DriverDTO) : null);
       }
     }
 
@@ -120,36 +120,10 @@ export default function UserPill() {
       return null;
     }
 
-    const driverStats = getDriverStats(primaryDriverId);
-    const allRankings = getAllDriverRankings();
-
-    let rating: number | null = driverStats?.rating ?? null;
-    let rank: number | null = null;
-    let totalDrivers: number | null = null;
-
-    if (driverStats) {
-      totalDrivers = allRankings.length || null;
-
-      if (typeof driverStats.overallRank === 'number' && driverStats.overallRank > 0) {
-        rank = driverStats.overallRank;
-      } else {
-        const indexInGlobal = allRankings.findIndex(
-          (stat) => stat.driverId === driverStats.driverId,
-        );
-        if (indexInGlobal !== -1) {
-          rank = indexInGlobal + 1;
-        }
-      }
-
-      if (rating === null) {
-        const globalEntry = allRankings.find(
-          (stat) => stat.driverId === driverStats.driverId,
-        );
-        if (globalEntry) {
-          rating = globalEntry.rating;
-        }
-      }
-    }
+    // Driver rating + rank are not exposed by the current API contract for the lightweight
+    // driver DTO used in the header. Keep it null until the API provides it.
+    const rating: number | null = null;
+    const rank: number | null = null;
 
     const avatarSrc = mediaService.getDriverAvatar(primaryDriverId);
 
@@ -369,4 +343,4 @@ export default function UserPill() {
       </AnimatePresence>
     </div>
   );
-}
+}