wip

apps/website/components/profile/DriverRatingPill.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { Star, Trophy } from 'lucide-react';
+
+interface DriverRatingProps {
+  rating: number | null;
+  rank: number | null;
+}
+
+export default function DriverRating({ rating, rank }: DriverRatingProps) {
+  return (
+    <div className="mt-0.5 flex items-center gap-2 text-[11px]">
+      <span className="inline-flex items-center gap-1 text-amber-300">
+        <Star className="h-3 w-3" />
+        <span className="tabular-nums">
+          {rating !== null ? rating : '—'}
+        </span>
+      </span>
+
+      {rank !== null && (
+        <span className="inline-flex items-center gap-1 text-primary-blue">
+          <Trophy className="h-3 w-3" />
+          <span className="tabular-nums">#{rank}</span>
+        </span>
+      )}
+    </div>
+  );
+}

apps/website/components/profile/DriverSummaryPill.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
+import DriverRating from '@/components/profile/DriverRatingPill';
+import { getImageService } from '@/lib/di-container';
+
+export interface DriverSummaryPillProps {
+  driver: DriverDTO;
+  rating: number | null;
+  rank: number | null;
+  avatarSrc?: string;
+  onClick?: () => void;
+  href?: string;
+}
+
+export default function DriverSummaryPill(props: DriverSummaryPillProps) {
+  const { driver, rating, rank, avatarSrc, onClick, href } = props;
+
+  const resolvedAvatar =
+    avatarSrc ?? getImageService().getDriverAvatar(driver.id);
+
+  const content = (
+    <>
+      <div className="w-8 h-8 rounded-full overflow-hidden bg-charcoal-outline flex items-center justify-center border border-charcoal-outline/80">
+        <Image
+          src={resolvedAvatar}
+          alt={driver.name}
+          width={32}
+          height={32}
+          className="w-full h-full object-cover"
+        />
+      </div>
+
+      <div className="flex flex-col leading-tight text-left">
+        <span className="text-xs font-semibold text-white truncate max-w-[140px]">
+          {driver.name}
+        </span>
+
+        <DriverRating rating={rating} rank={rank} />
+      </div>
+    </>
+  );
+
+  if (href) {
+    return (
+      <Link
+        href={href}
+        className="flex items-center gap-3 rounded-full bg-iron-gray/70 px-3 py-1.5 border border-charcoal-outline/80 shadow-[0_0_18px_rgba(0,0,0,0.45)] hover:border-primary-blue/60 hover:bg-iron-gray transition-colors"
+      >
+        {content}
+      </Link>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        className="flex items-center gap-3 rounded-full bg-iron-gray/70 px-3 py-1.5 border border-charcoal-outline/80 shadow-[0_0_18px_rgba(0,0,0,0.45)] hover:border-primary-blue/60 hover:bg-iron-gray transition-colors"
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-3 rounded-full bg-iron-gray/70 px-3 py-1.5 border border-charcoal-outline/80">
+      {content}
+    </div>
+  );
+}

apps/website/components/profile/ProfileHeader.tsx

@@ -3,21 +3,34 @@
 import Image from 'next/image';
 import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
 import Button from '../ui/Button';
-import { getDriverTeam, getDriverAvatarUrl } from '@/lib/racingLegacyFacade';
+import { getImageService } from '@/lib/di-container';
+import DriverRatingPill from '@/components/profile/DriverRatingPill';
 
 interface ProfileHeaderProps {
   driver: DriverDTO;
+  rating?: number | null;
+  rank?: number | null;
   isOwnProfile?: boolean;
   onEditClick?: () => void;
+  teamName?: string | null;
+  teamTag?: string | null;
 }
 
-export default function ProfileHeader({ driver, isOwnProfile = false, onEditClick }: ProfileHeaderProps) {
+export default function ProfileHeader({
+  driver,
+  rating,
+  rank,
+  isOwnProfile = false,
+  onEditClick,
+  teamName,
+  teamTag,
+}: ProfileHeaderProps) {
   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={getDriverAvatarUrl(driver.id)}
+            src={getImageService().getDriverAvatar(driver.id)}
             alt={driver.name}
             width={80}
             height={80}
@@ -31,36 +44,30 @@ export default function ProfileHeader({ driver, isOwnProfile = false, onEditClic
             <span className="text-3xl" aria-label={`Country: ${driver.country}`}>
               {getCountryFlag(driver.country)}
             </span>
-            {(() => {
-              const teamData = getDriverTeam(driver.id);
-              if (teamData) {
-                return (
-                  <span className="px-3 py-1 bg-primary-blue/20 text-primary-blue rounded-full text-sm font-medium">
-                    {teamData.team.tag}
-                  </span>
-                );
-              }
-              return null;
-            })()}
+            {teamTag && (
+              <span className="px-3 py-1 bg-primary-blue/20 text-primary-blue rounded-full text-sm font-medium">
+                {teamTag}
+              </span>
+            )}
           </div>
           
           <div className="flex items-center gap-4 text-sm text-gray-400">
             <span>iRacing ID: {driver.iracingId}</span>
-            <span>•</span>
-            <span>Rating: 1450</span>
-            {(() => {
-              const teamData = getDriverTeam(driver.id);
-              if (teamData) {
-                return (
-                  <>
-                    <span>•</span>
-                    <span className="text-primary-blue">{teamData.team.name}</span>
-                  </>
-                );
-              }
-              return null;
-            })()}
+            {teamName && (
+              <>
+                <span>•</span>
+                <span className="text-primary-blue">
+                  {teamTag ? `[${teamTag}] ${teamName}` : teamName}
+                </span>
+              </>
+            )}
           </div>
+
+          {(typeof rating === 'number' || typeof rank === 'number') && (
+            <div className="mt-2">
+              <DriverRatingPill rating={rating ?? null} rank={rank ?? null} />
+            </div>
+          )}
         </div>
       </div>
 

apps/website/components/profile/UserPill.tsx

@@ -0,0 +1,171 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useMemo, useState } from 'react';
+import { LogOut, Star } from 'lucide-react';
+import { useAuth } from '@/lib/auth/AuthContext';
+import {
+  getDriverStats,
+  getLeagueRankings,
+  getAllDriverRankings,
+  getDriverRepository,
+  getImageService,
+} from '@/lib/di-container';
+import { useEffectiveDriverId } from '@/lib/currentDriver';
+import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
+import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappers';
+import DriverSummaryPill from '@/components/profile/DriverSummaryPill';
+
+export default function UserPill() {
+  const { session, login } = useAuth();
+  const [driver, setDriver] = useState<DriverDTO | null>(null);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const user = session?.user as
+    | {
+        id: string;
+        displayName?: string;
+        primaryDriverId?: string | null;
+        avatarUrl?: string | null;
+      }
+    | undefined;
+
+  const primaryDriverId = useEffectiveDriverId();
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadDriver() {
+      if (!primaryDriverId) {
+        if (!cancelled) {
+          setDriver(null);
+        }
+        return;
+      }
+
+      const repo = getDriverRepository();
+      const entity = await repo.findById(primaryDriverId);
+      if (!cancelled) {
+        setDriver(EntityMappers.toDriverDTO(entity));
+      }
+    }
+
+    loadDriver();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [primaryDriverId]);
+
+  const data = useMemo(() => {
+    if (!session?.user || !primaryDriverId || !driver) {
+      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;
+        }
+      }
+    }
+
+    const avatarSrc = getImageService().getDriverAvatar(primaryDriverId);
+
+    return {
+      driver,
+      avatarSrc,
+      rating,
+      rank,
+    };
+  }, [session, driver, primaryDriverId]);
+
+  if (!session) {
+    const loginHref = '/auth/iracing/start?returnTo=/dashboard';
+
+    return (
+      <div className="flex items-center">
+        <Link
+          href={loginHref}
+          className="inline-flex items-center gap-2 rounded-full bg-primary-blue px-4 py-1.5 text-xs font-semibold text-white shadow-[0_0_12px_rgba(25,140,255,0.5)] hover:bg-primary-blue/90 hover:shadow-[0_0_18px_rgba(25,140,255,0.8)] transition-all"
+        >
+          <span className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-white/10">
+            <Star className="h-3 w-3 text-amber-300" />
+          </span>
+          <span>Authenticate with iRacing</span>
+        </Link>
+      </div>
+    );
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <div className="relative inline-flex items-center">
+      <DriverSummaryPill
+        driver={data.driver}
+        rating={data.rating}
+        rank={data.rank}
+        avatarSrc={data.avatarSrc}
+        onClick={() => setIsMenuOpen((open) => !open)}
+      />
+
+      {isMenuOpen && (
+        <div className="absolute right-0 top-full mt-2 w-48 rounded-lg bg-deep-graphite border border-charcoal-outline shadow-lg z-50">
+          <div className="py-1 text-sm text-gray-200">
+            <Link
+              href="/profile"
+              className="block px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              Profile
+            </Link>
+            <Link
+              href="/profile/leagues"
+              className="block px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              Manage leagues
+            </Link>
+          </div>
+          <div className="border-t border-charcoal-outline">
+            <form action="/auth/logout" method="POST">
+              <button
+                type="submit"
+                className="flex w-full items-center justify-between px-3 py-2 text-sm text-gray-400 hover:text-red-400 hover:bg-red-500/10 transition-colors"
+              >
+                <span>Logout</span>
+                <LogOut className="h-4 w-4" />
+              </button>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}