Segments Phase 4: detail page, activity efforts, athlete tab, new APIs

New API endpoints:
- GET /api/segments/{id} — single segment metadata
- GET /api/activities/{id}/segment_efforts — efforts for an activity (auth)
- GET /api/users/{handle}/segment_summary — public best time + count per segment

New components:
- SegmentDetail.svelte — map + metadata + effort table (with PR/Δ) + rescan button
- SegmentsPage.svelte — URL router: shows detail when /segments/{id}/, list otherwise

Updated:
- segments/index.astro — now uses SegmentsPage router
- nginx-activity.conf — add /segments/ try_files rule for client-side routing
- ActivityDetail.svelte — segment efforts block below laps
- AthleteView.svelte — Segments tab with best time + effort count per segment
- format.ts — add formatElapsed() for compact m:ss display

site/src/components/ActivityDetail.svelte

@@ -3,7 +3,7 @@
   import { marked } from 'marked';
   import DOMPurify from 'dompurify';
   import type { ActivitySummary, ActivityDetail, AthleteZones, Timeseries } from '../lib/types';
-  import { formatDistance, formatDuration, formatElevation, formatSpeed, formatDate, formatTime, sportIcon, sportLabel, sportColor } from '../lib/format';
+  import { formatDistance, formatDuration, formatElevation, formatSpeed, formatDate, formatTime, formatElapsed, sportIcon, sportLabel, sportColor } from '../lib/format';
   import ActivityMap from './ActivityMap.svelte';
   import ActivityCharts from './ActivityCharts.svelte';
   import EditDrawer from './EditDrawer.svelte';
@@ -27,6 +27,15 @@
   let editOpen = false;
   let lightboxIndex: number | null = null;
 
+  interface SegmentEffortHit {
+    segment_id: string;
+    segment_name: string;
+    segment_distance_m: number;
+    elapsed_s: number;
+    pr_elapsed_s: number;
+  }
+  let segmentEfforts: SegmentEffortHit[] = [];
+
   // Local overrides applied immediately after a save (no re-fetch needed)
   let localTitle = '';
   let localDescription = '';
@@ -38,6 +47,11 @@
       .then(u => { if (u?.handle) currentHandle = u.handle; })
       .catch(() => {});
 
+    fetch(`/api/activities/${activity.id}/segment_efforts`, { credentials: 'include' })
+      .then(r => r.ok ? r.json() : [])
+      .then(d => { segmentEfforts = d; })
+      .catch(() => {});
+
     try {
       detail = await loadActivity(activity.id, activity.detail_url ?? '', base);
       if (!detail) throw new Error('Activity not found');
@@ -373,3 +387,35 @@
     </table>
   </div>
 {/if}
+
+<!-- Segment efforts -->
+{#if segmentEfforts.length > 0}
+  <div class="mt-4 bg-zinc-900 rounded-xl border border-zinc-800 overflow-hidden">
+    <div class="px-4 py-3 border-b border-zinc-800">
+      <h3 class="text-sm font-semibold text-white">Segments</h3>
+    </div>
+    <table class="w-full text-sm">
+      <tbody>
+        {#each segmentEfforts as hit}
+          {@const isPR = hit.elapsed_s === hit.pr_elapsed_s}
+          {@const delta = hit.elapsed_s - hit.pr_elapsed_s}
+          <tr class="border-b border-zinc-800/50 last:border-0 hover:bg-zinc-800/50 transition-colors">
+            <td class="px-4 py-2.5">
+              <a href="{base}segments/{hit.segment_id}/"
+                 class="text-white hover:text-blue-400 transition-colors font-medium">
+                {hit.segment_name}
+              </a>
+              <span class="text-zinc-500 text-xs ml-2">{formatDistance(hit.segment_distance_m)}</span>
+            </td>
+            <td class="px-4 py-2.5 font-mono text-white text-right">{formatElapsed(hit.elapsed_s)}</td>
+            <td class="px-4 py-2.5 text-right text-xs font-medium w-16"
+                class:text-green-400={isPR}
+                class:text-zinc-500={!isPR}>
+              {#if isPR}PR{:else}+{Math.floor(delta/60) > 0 ? `${Math.floor(delta/60)}m${(delta%60).toString().padStart(2,'0')}s` : `${delta}s`}{/if}
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+{/if}