Batch 1: dashboard, maps, segments rewrite, health, sync UX

Fixes: - Dashboard: featured most-recent activity card with map + stats - Maps default to Street; preferCanvas + larger tile buffer for smoother pan/zoom - Running cadence as colour-banded dots + 165 spm guide line - Routes: inline row expansion, rename (PATCH /routes/{id}), podium + deltas, tiled map - Records: remove reversed pace Y-axis - Profile: remove resting HR; add goal weight - Health: snapshot weight carry-forward; VO2 trend axis 30-70; weight goal line + kg/st-lb toggle + axis max; sleep 8h/avg lines - Garmin sync progress moved to global store with persistent floating bar Features: - Speed-coloured activity route (default) with Speed/Solid toggle - GPS-geometry segments: draw on map, match across all activities, 1st/2nd/3rd leaderboard + podium badges (replaces old distance segments) - Lap bests: best time per lap across a route + delta column - Body Battery: highlight activity time windows Schema: users.goal_weight_kg ALTER; new segments/segment_efforts tables. Removes RouteSegment, the Segments page, and segment-bests endpoints. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-08 19:59:06 +01:00
parent e5feeb1178
commit bc437cce92
24 changed files with 1339 additions and 1445 deletions
@@ -1,25 +1,27 @@
-import { useParams, Link } from 'react-router-dom'
-import { useQuery } from '@tanstack/react-query'
+import { useParams } from 'react-router-dom'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useState, useMemo } from 'react'
 import api from '../utils/api'
 import ActivityMap from '../components/activity/ActivityMap'
 import MetricTimeline from '../components/activity/MetricTimeline'
 import HRZoneBar from '../components/activity/HRZoneBar'
 import LapTable from '../components/activity/LapTable'
+import SegmentsPanel from '../components/activity/SegmentsPanel'
 import StatCard from '../components/ui/StatCard'
 import {
  formatDuration, formatDistance, formatPace, formatElevation,
  formatHeartRate, formatDateTime, formatCadence, sportIcon,
 } from '../utils/format'

-function segmentTime(points, startM, endM) {
-  let t0 = null
+// Find the cumulative distance along the track nearest a clicked lat/lng.
+function nearestDistance(points, lat, lng) {
+  let best = null, bestD = Infinity
  for (const p of points) {
-    if (t0 === null && p.distance_m >= startM) t0 = new Date(p.timestamp).getTime()
-    if (t0 !== null && p.distance_m >= endM)
-      return (new Date(p.timestamp).getTime() - t0) / 1000
+    if (p.latitude == null || p.longitude == null || p.distance_m == null) continue
+    const d = (p.latitude - lat) ** 2 + (p.longitude - lng) ** 2
+    if (d < bestD) { bestD = d; best = p.distance_m }
  }
-  return null
+  return best
 }

 const METRICS = [
@@ -36,7 +38,12 @@ export default function ActivityDetailPage() {
  const [activeMetrics, setActiveMetrics] = useState(['heart_rate', 'speed_ms', 'altitude_m'])
  const [hoveredDistance, setHoveredDistance] = useState(null)
  const [mapHeight, setMapHeight] = useState(420)
-  const [mapType, setMapType] = useState('dark')
+  const [mapType, setMapType] = useState('street')
+  const [colorMode, setColorMode] = useState('speed')
+  const [segCreate, setSegCreate] = useState(false)
+  const [segPoints, setSegPoints] = useState([])   // [{distance_m}, ...] up to 2
+  const [segName, setSegName] = useState('')
+  const qc = useQueryClient()

  const { data: activity, isLoading } = useQuery({
    queryKey: ['activity', id],
@@ -55,17 +62,36 @@ export default function ActivityDetailPage() {
    enabled: !!activity,
  })

-  const { data: segments } = useQuery({
-    queryKey: ['segments', activity?.named_route_id],
-    queryFn: () => api.get(`/routes/${activity.named_route_id}/segments`).then(r => r.data),
+  const { data: actSegments } = useQuery({
+    queryKey: ['activity-segments', id],
+    queryFn: () => api.get(`/segments/by-activity/${id}`).then(r => r.data),
+    enabled: !!activity,
+  })
+
+  const { data: lapBests } = useQuery({
+    queryKey: ['lap-bests', id],
+    queryFn: () => api.get(`/activities/${id}/lap-bests`).then(r => r.data),
    enabled: !!activity?.named_route_id,
  })

-  const { data: segmentBests } = useQuery({
-    queryKey: ['segment-bests', activity?.named_route_id],
-    queryFn: () => api.get(`/routes/${activity.named_route_id}/segment-bests`).then(r => r.data),
-    enabled: !!activity?.named_route_id,
-  })
+  const handleMapClick = ({ lat, lng }) => {
+    if (!segCreate || !dataPoints) return
+    const dist = nearestDistance(dataPoints, lat, lng)
+    if (dist == null) return
+    setSegPoints(prev => (prev.length >= 2 ? [{ distance_m: dist }] : [...prev, { distance_m: dist }]))
+  }
+
+  const createSegment = async () => {
+    const [a, b] = segPoints
+    await api.post('/segments', {
+      name: segName.trim() || 'Segment',
+      activity_id: Number(id),
+      start_distance_m: a.distance_m,
+      end_distance_m: b.distance_m,
+    })
+    setSegCreate(false); setSegPoints([]); setSegName('')
+    qc.invalidateQueries({ queryKey: ['activity-segments', id] })
+  }

  const toggleMetric = (key) => {
    setActiveMetrics(prev =>
@@ -140,9 +166,31 @@ export default function ActivityDetailPage() {
                {t}
              </button>
            ))}
+            {dataPoints?.length > 0 && (
+              <button
+                onClick={() => { setSegCreate(c => !c); setSegPoints([]); setSegName('') }}
+                className={`text-xs px-2.5 py-1 rounded-full transition-colors ml-2 ${
+                  segCreate ? 'bg-green-600 text-white' : 'text-gray-400 hover:text-white bg-gray-800'
+                }`}
+              >
+                + Segment
+              </button>
+            )}
          </div>
          <div className="flex items-center gap-2">
-            <span className="text-xs text-gray-500">Height:</span>
+            <span className="text-xs text-gray-500">Route:</span>
+            {[['speed', 'Speed'], ['solid', 'Solid']].map(([mode, label]) => (
+              <button
+                key={mode}
+                onClick={() => setColorMode(mode)}
+                className={`text-xs px-2.5 py-1 rounded-full transition-colors ${
+                  colorMode === mode ? 'bg-blue-600 text-white' : 'text-gray-400 hover:text-white bg-gray-800'
+                }`}
+              >
+                {label}
+              </button>
+            ))}
+            <span className="text-xs text-gray-500 ml-2">Height:</span>
            {[280, 420, 560].map(h => (
              <button
                key={h}
@@ -156,6 +204,34 @@ export default function ActivityDetailPage() {
            ))}
          </div>
        </div>
+        {segCreate && (
+          <div className="flex flex-wrap items-center gap-3 px-4 py-2 border-b border-gray-800 bg-green-900/10 text-xs">
+            <span className="text-green-400">
+              Click two points on the route to mark the segment start and end.
+            </span>
+            <span className="text-gray-400">
+              Start: {segPoints[0] ? `${(segPoints[0].distance_m / 1000).toFixed(2)} km` : '—'}
+              {' · '}End: {segPoints[1] ? `${(segPoints[1].distance_m / 1000).toFixed(2)} km` : '—'}
+            </span>
+            {segPoints.length === 2 && (
+              <>
+                <input
+                  value={segName}
+                  onChange={e => setSegName(e.target.value)}
+                  placeholder="Segment name"
+                  className="bg-gray-800 border border-gray-700 rounded-lg px-2 py-1 text-white focus:outline-none focus:ring-2 focus:ring-green-500"
+                />
+                <button onClick={createSegment} disabled={!segName.trim()}
+                  className="bg-green-600 hover:bg-green-700 disabled:opacity-40 text-white px-3 py-1 rounded-lg">
+                  Create
+                </button>
+              </>
+            )}
+            {segPoints.length > 0 && (
+              <button onClick={() => setSegPoints([])} className="text-gray-400 hover:text-white">Reset</button>
+            )}
+          </div>
+        )}
        <div style={{ height: mapHeight }}>
          <ActivityMap
            polyline={activity.polyline}
@@ -163,6 +239,8 @@ export default function ActivityDetailPage() {
            hoveredDistance={hoveredDistance}
            sportType={activity.sport_type}
            mapType={mapType}
+            colorMode={colorMode}
+            onMapClick={segCreate ? handleMapClick : undefined}
          />
        </div>
      </div>
@@ -202,50 +280,18 @@ export default function ActivityDetailPage() {
      </div>

      {/* Laps + Segments side by side */}
-      {((laps && laps.length > 0) || (segments && segments.length > 0 && dataPoints)) && (
+      {((laps && laps.length > 0) || (actSegments && actSegments.length > 0)) && (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
          {laps && laps.length > 0 && (
            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
              <h3 className="text-sm font-medium text-gray-300 mb-3">Laps</h3>
-              <LapTable laps={laps} sportType={activity.sport_type} />
+              <LapTable laps={laps} sportType={activity.sport_type} lapBests={lapBests} />
            </div>
          )}
-          {segments && segments.length > 0 && dataPoints && (
+          {actSegments && actSegments.length > 0 && (
            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
-              <div className="flex items-center justify-between mb-3">
-                <h3 className="text-sm font-medium text-gray-300">Segments</h3>
-                <Link to="/segments" className="text-xs text-blue-400 hover:underline">Manage →</Link>
-              </div>
-              <div className="flex items-center gap-3 pb-1.5 border-b border-gray-800 mb-1">
-                <span className="flex-1 text-xs text-gray-600 uppercase tracking-wide">Segment</span>
-                <span className="font-mono text-xs w-14 text-right text-gray-600 uppercase tracking-wide">This run</span>
-                <span className="font-mono text-xs w-14 text-right text-gray-600 uppercase tracking-wide">Best</span>
-                <span className="font-mono text-xs w-14 text-right text-gray-600 uppercase tracking-wide">Δ</span>
-              </div>
-              <div className="space-y-0.5">
-                {segments.map(seg => {
-                  const t = segmentTime(dataPoints, seg.start_distance_m, seg.end_distance_m)
-                  const best = segmentBests?.find(b => b.segment_id === seg.id)
-                  const isNewBest = t != null && best?.best_s != null && t <= best.best_s + 0.5
-                  const delta = t != null && best?.best_s != null ? t - best.best_s : null
-                  return (
-                    <div key={seg.id} className="flex items-center gap-3 py-1.5 border-b border-gray-800/40 text-sm">
-                      <span className="flex-1 text-gray-300 text-xs truncate">{seg.name}</span>
-                      <span className={`font-mono text-xs w-14 text-right ${isNewBest ? 'text-yellow-400 font-semibold' : 'text-gray-200'}`}>
-                        {t != null ? formatDuration(t) : <span className="text-gray-700">--</span>}
-                      </span>
-                      <span className="font-mono text-xs w-14 text-right text-gray-500">
-                        {best?.best_s != null ? formatDuration(best.best_s) : '--'}
-                      </span>
-                      <span className={`font-mono text-xs w-14 text-right ${
-                        isNewBest ? 'text-yellow-400' : delta == null ? 'text-gray-700' : delta <= 0 ? 'text-green-400' : 'text-red-400'
-                      }`}>
-                        {isNewBest ? '🏆' : delta == null ? '--' : `${delta > 0 ? '+' : ''}${formatDuration(Math.abs(delta))}`}
-                      </span>
-                    </div>
-                  )
-                })}
-              </div>
+              <h3 className="text-sm font-medium text-gray-300 mb-3">Segments</h3>
+              <SegmentsPanel segments={actSegments} />
            </div>
          )}
        </div>