wip

apps/website/app/profile/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
 import {
   User,
   Trophy,
@@ -352,10 +353,14 @@ function FinishDistributionChart({ wins, podiums, topTen, total }: FinishDistrib
 // ============================================================================
 
 export default function ProfilePage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const tabParam = searchParams.get('tab') as ProfileTab | null;
+  
   const [driver, setDriver] = useState<DriverDTO | null>(null);
   const [loading, setLoading] = useState(true);
   const [editMode, setEditMode] = useState(false);
-  const [activeTab, setActiveTab] = useState<ProfileTab>('overview');
+  const [activeTab, setActiveTab] = useState<ProfileTab>(tabParam || 'overview');
   const [teamData, setTeamData] = useState<GetDriverTeamQueryResultDTO | null>(null);
   const [allTeamMemberships, setAllTeamMemberships] = useState<TeamMembershipInfo[]>([]);
   const [friends, setFriends] = useState<Driver[]>([]);
@@ -413,6 +418,27 @@ export default function ProfilePage() {
     void loadData();
   }, [effectiveDriverId]);
 
+  // Update URL when tab changes
+  useEffect(() => {
+    if (tabParam !== activeTab) {
+      const params = new URLSearchParams(searchParams.toString());
+      if (activeTab === 'overview') {
+        params.delete('tab');
+      } else {
+        params.set('tab', activeTab);
+      }
+      const query = params.toString();
+      router.replace(`/profile${query ? `?${query}` : ''}`, { scroll: false });
+    }
+  }, [activeTab, tabParam, searchParams, router]);
+
+  // Sync tab from URL on mount and param change
+  useEffect(() => {
+    if (tabParam && tabParam !== activeTab) {
+      setActiveTab(tabParam);
+    }
+  }, [tabParam]);
+
   const handleSaveSettings = async (updates: Partial<DriverDTO>) => {
     if (!driver) return;
 
@@ -497,7 +523,7 @@ export default function ProfilePage() {
   }
 
   return (
-    <div className="max-w-6xl mx-auto px-4 pb-12 space-y-6">
+    <div className="max-w-7xl mx-auto px-4 pb-12 space-y-6">
       {/* Hero Header Section */}
       <div className="relative rounded-2xl overflow-hidden bg-gradient-to-br from-iron-gray/80 via-iron-gray/60 to-deep-graphite border border-charcoal-outline">
         {/* Background Pattern */}
@@ -1000,13 +1026,13 @@ export default function ProfilePage() {
         </>
       )}
 
-      {activeTab === 'history' && (
+      {activeTab === 'history' && driver && (
         <Card>
           <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
             <History className="w-5 h-5 text-red-400" />
             Race History
           </h2>
-          <ProfileRaceHistory />
+          <ProfileRaceHistory driverId={driver.id} />
         </Card>
       )}