personal records tab into athlete page

site/src/components/AthleteView.svelte

@@ -2,6 +2,7 @@
   import { onMount } from 'svelte';
   import type { AthleteJson, BASIndex, ActivitySummary } from '../lib/types';
   import MmpChart from './MmpChart.svelte';
+  import RecordsView from './RecordsView.svelte';
   import AthleteDrawer from './AthleteDrawer.svelte';
 
   let athlete: AthleteJson | null = null;
@@ -10,6 +11,9 @@
   let error: string | null = null;
   let drawerOpen = false;
 
+  type Tab = 'power' | 'records' | 'profile';
+  let activeTab: Tab = 'power';
+
   const editUrl = import.meta.env.PUBLIC_EDIT_URL ?? '';
 
   onMount(async () => {
@@ -21,9 +25,7 @@
       if (!athleteRes.ok) throw new Error('athlete.json not found — run bincio extract first');
       athlete = await athleteRes.json();
       const index: BASIndex = await indexRes.json();
-      // Only activities with power data contribute to the curve
       activities = index.activities.filter(a => a.mmp && a.privacy !== 'private');
-
     } catch (e: any) {
       error = e.message;
     } finally {
@@ -32,7 +34,6 @@
   });
 
   async function onSaved() {
-    // Reload athlete.json after edits are saved
     const res = await fetch(`${import.meta.env.BASE_URL}data/athlete.json?t=${Date.now()}`);
     if (res.ok) athlete = await res.json();
     drawerOpen = false;
@@ -46,6 +47,12 @@
     const [lo, hi] = zones[i];
     return hi >= 900 ? `${lo}+ bpm` : `${lo}–${hi} bpm`;
   }
+
+  const TABS: { key: Tab; label: string }[] = [
+    { key: 'power',   label: 'Power Curve' },
+    { key: 'records', label: 'Records'     },
+    { key: 'profile', label: 'Profile'     },
+  ];
 </script>
 
 {#if loading}
@@ -54,19 +61,31 @@
   <p class="text-red-400 text-sm">{error}</p>
 {:else if athlete}
 
-  <!-- Edit button (only when edit server is configured) -->
-  {#if editUrl}
-    <div class="flex justify-end mb-6">
+  <!-- Header row: tabs + edit button -->
+  <div class="flex items-center justify-between mb-6 border-b border-zinc-800 pb-0">
+    <nav class="flex gap-0">
+      {#each TABS as tab}
+        <button
+          on:click={() => activeTab = tab.key}
+          class="px-4 py-3 text-sm font-medium border-b-2 transition-colors -mb-px"
+          class:border-blue-500={activeTab === tab.key}
+          class:text-white={activeTab === tab.key}
+          class:border-transparent={activeTab !== tab.key}
+          class:text-zinc-500={activeTab !== tab.key}
+          class:hover:text-zinc-300={activeTab !== tab.key}
+        >{tab.label}</button>
+      {/each}
+    </nav>
+    {#if editUrl}
       <button
         on:click={() => drawerOpen = true}
-        class="px-4 py-2 text-sm border border-zinc-700 hover:border-zinc-500 text-zinc-300 hover:text-white rounded-md transition-colors"
+        class="mb-2 px-3 py-1.5 text-xs border border-zinc-700 hover:border-zinc-500 text-zinc-400 hover:text-white rounded-md transition-colors"
       >Edit profile</button>
-    </div>
-  {/if}
+    {/if}
+  </div>
 
-  <!-- Power curve section -->
-  <section class="mb-10">
-    <h2 class="text-lg font-semibold text-white mb-4">Power Curve</h2>
+  <!-- Power Curve tab -->
+  {#if activeTab === 'power'}
     {#if athlete.power_curve.all_time}
       <div class="bg-zinc-900 rounded-xl p-4 border border-zinc-800">
         <MmpChart {athlete} {activities} />
@@ -74,14 +93,15 @@
     {:else}
       <p class="text-zinc-500 text-sm">No power data found. Make sure your activities include power meter data and re-run <code class="text-zinc-300">bincio extract</code>.</p>
     {/if}
-  </section>
 
-  <!-- Profile section -->
-  <section>
-    <h2 class="text-lg font-semibold text-white mb-4">Profile</h2>
+  <!-- Records tab -->
+  {:else if activeTab === 'records'}
+    <RecordsView {athlete} />
+
+  <!-- Profile tab -->
+  {:else if activeTab === 'profile'}
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 
-      <!-- Key numbers -->
       <div class="bg-zinc-900 rounded-xl p-4 border border-zinc-800 space-y-3">
         <h3 class="text-sm font-medium text-zinc-400 uppercase tracking-wide">Key numbers</h3>
         {#if athlete.max_hr}
@@ -97,38 +117,36 @@
           </div>
         {/if}
         {#if !athlete.max_hr && !athlete.ftp_w}
-          <p class="text-zinc-500 text-sm">Set <code>athlete.max_hr</code> and <code>athlete.ftp_w</code> in your config.</p>
+          <p class="text-zinc-500 text-sm">Set <code>athlete.max_hr</code> and <code>athlete.ftp_w</code> in your config, or use Edit profile.</p>
         {/if}
       </div>
 
-      <!-- HR zones -->
       {#if athlete.hr_zones}
         <div class="bg-zinc-900 rounded-xl p-4 border border-zinc-800 space-y-2">
           <h3 class="text-sm font-medium text-zinc-400 uppercase tracking-wide">HR Zones</h3>
-          {#each athlete.hr_zones as zone, i}
+          {#each athlete.hr_zones as _zone, i}
             <div class="flex justify-between items-center text-sm">
               <span class="text-zinc-400">Z{i + 1}</span>
-              <span class="text-white">{fmtHrZone(athlete.hr_zones, i)}</span>
+              <span class="text-white">{fmtHrZone(athlete.hr_zones!, i)}</span>
             </div>
           {/each}
         </div>
       {/if}
 
-      <!-- Power zones -->
       {#if athlete.power_zones}
         <div class="bg-zinc-900 rounded-xl p-4 border border-zinc-800 space-y-2">
           <h3 class="text-sm font-medium text-zinc-400 uppercase tracking-wide">Power Zones</h3>
-          {#each athlete.power_zones as zone, i}
+          {#each athlete.power_zones as _zone, i}
             <div class="flex justify-between items-center text-sm">
               <span class="text-zinc-400">Z{i + 1}</span>
-              <span class="text-white">{fmtZone(athlete.power_zones, i)}</span>
+              <span class="text-white">{fmtZone(athlete.power_zones!, i)}</span>
             </div>
           {/each}
         </div>
       {/if}
 
     </div>
-  </section>
+  {/if}
 
 {/if}