wip

apps/website/app/drivers/[id]/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import Link from 'next/link';
 import { useRouter, useParams } from 'next/navigation';
 import { getDriverRepository } from '@/lib/di-container';
 import DriverProfile from '@/components/drivers/DriverProfile';
@@ -10,7 +11,11 @@ import Breadcrumbs from '@/components/layout/Breadcrumbs';
 import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappers';
 import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
 
-export default function DriverDetailPage() {
+export default function DriverDetailPage({
+  searchParams,
+}: {
+  searchParams?: { [key: string]: string | string[] | undefined };
+}) {
   const router = useRouter();
   const params = useParams();
   const driverId = params.id as string;
@@ -19,6 +24,15 @@ export default function DriverDetailPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  const from =
+    typeof searchParams?.from === 'string' ? searchParams.from : undefined;
+  const leagueId =
+    typeof searchParams?.leagueId === 'string'
+      ? searchParams.leagueId
+      : undefined;
+  const backLink =
+    from === 'league' && leagueId ? `/leagues/${leagueId}` : null;
+
   useEffect(() => {
     loadDriver();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -84,6 +98,17 @@ export default function DriverDetailPage() {
   return (
     <div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-6xl mx-auto">
+        {backLink && (
+          <div className="mb-4">
+            <Link
+              href={backLink}
+              className="inline-flex items-center text-xs font-medium text-gray-300 hover:text-white"
+            >
+              ← Back to league
+            </Link>
+          </div>
+        )}
+
         {/* Breadcrumb */}
         <Breadcrumbs
           items={[

apps/website/app/drivers/page.tsx

@@ -2,15 +2,17 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
+import Image from 'next/image';
 import DriverCard from '@/components/drivers/DriverCard';
 import RankBadge from '@/components/drivers/RankBadge';
 import Input from '@/components/ui/Input';
 import Card from '@/components/ui/Card';
+import { getDriverAvatarUrl } from '@/lib/racingLegacyFacade';
 
 // Mock data (fictional demo drivers only)
 const MOCK_DRIVERS = [
   {
-    id: '1',
+    id: 'driver-1',
     name: 'Alex Vermeer',
     rating: 3245,
     skillLevel: 'pro' as const,
@@ -22,7 +24,7 @@ const MOCK_DRIVERS = [
     rank: 1,
   },
   {
-    id: '2',
+    id: 'driver-2',
     name: 'Liam Hartmann',
     rating: 3198,
     skillLevel: 'pro' as const,
@@ -34,7 +36,7 @@ const MOCK_DRIVERS = [
     rank: 2,
   },
   {
-    id: '3',
+    id: 'driver-3',
     name: 'Michael Schmidt',
     rating: 2912,
     skillLevel: 'advanced' as const,
@@ -46,7 +48,7 @@ const MOCK_DRIVERS = [
     rank: 3,
   },
   {
-    id: '4',
+    id: 'driver-4',
     name: 'Emma Thompson',
     rating: 2789,
     skillLevel: 'advanced' as const,
@@ -58,7 +60,7 @@ const MOCK_DRIVERS = [
     rank: 5,
   },
   {
-    id: '5',
+    id: 'driver-5',
     name: 'Sarah Chen',
     rating: 2456,
     skillLevel: 'advanced' as const,
@@ -70,7 +72,7 @@ const MOCK_DRIVERS = [
     rank: 8,
   },
   {
-    id: '6',
+    id: 'driver-6',
     name: 'Isabella Rossi',
     rating: 2145,
     skillLevel: 'intermediate' as const,
@@ -82,7 +84,7 @@ const MOCK_DRIVERS = [
     rank: 12,
   },
   {
-    id: '7',
+    id: 'driver-7',
     name: 'Carlos Rodriguez',
     rating: 1876,
     skillLevel: 'intermediate' as const,
@@ -94,7 +96,7 @@ const MOCK_DRIVERS = [
     rank: 18,
   },
   {
-    id: '8',
+    id: 'driver-8',
     name: 'Yuki Tanaka',
     rating: 1234,
     skillLevel: 'beginner' as const,
@@ -258,9 +260,15 @@ export default function DriversPage() {
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-4 flex-1">
                 <RankBadge rank={driver.rank} size="lg" />
-                
-                <div className="w-16 h-16 rounded-full bg-primary-blue/20 flex items-center justify-center text-2xl font-bold text-white">
-                  {driver.name.charAt(0)}
+
+                <div className="w-16 h-16 rounded-full bg-primary-blue/20 overflow-hidden flex items-center justify-center">
+                  <Image
+                    src={getDriverAvatarUrl(driver.id)}
+                    alt={driver.name}
+                    width={64}
+                    height={64}
+                    className="w-full h-full object-cover"
+                  />
                 </div>
 
                 <div className="flex-1">