Segments: color track green→red along direction of travel

site/src/components/SegmentDetail.svelte

@@ -109,6 +109,7 @@
     map.on('load', () => {
       map.addSource('seg', {
         type: 'geojson',
+        lineMetrics: true,
         data: {
           type: 'Feature',
           geometry: {
@@ -119,7 +120,10 @@
       });
       map.addLayer({ id: 'seg-line', type: 'line', source: 'seg',
         layout: { 'line-cap': 'round', 'line-join': 'round' },
-        paint: { 'line-color': '#f59e0b', 'line-width': 5 } });
+        paint: {
+          'line-gradient': ['interpolate', ['linear'], ['line-progress'], 0, '#22c55e', 1, '#ef4444'],
+          'line-width': 5,
+        } });
 
       // Start/end markers
       const start = segment!.polyline[0];

site/src/components/SegmentsView.svelte

@@ -25,8 +25,7 @@
   let fetchTimer: ReturnType<typeof setTimeout> | null = null;
 
   const TILE_STYLE = 'https://tiles.openfreemap.org/styles/positron';
-  const SEG_COLOR  = '#f59e0b';
+  const SEG_GRADIENT = ['interpolate', ['linear'], ['line-progress'], 0, '#22c55e', 1, '#ef4444'];
-  const SEG_SEL    = '#3b82f6';
 
   $: selectedSeg = segments.find(s => s.id === selectedId) ?? null;
 
@@ -44,6 +43,7 @@
     map.on('load', () => {
       map.addSource('segments', {
         type: 'geojson',
+        lineMetrics: true,
         data: { type: 'FeatureCollection', features: [] },
       });
 
@@ -54,7 +54,7 @@
       map.addLayer({ id: 'seg-line', type: 'line', source: 'segments',
         layout: { 'line-cap': 'round', 'line-join': 'round' },
         paint: {
-          'line-color': ['case', ['==', ['get', 'id'], selectedId ?? ''], SEG_SEL, SEG_COLOR],
+          'line-gradient': SEG_GRADIENT,
           'line-width': ['case', ['==', ['get', 'id'], selectedId ?? ''], 5, 3],
         },
       });
@@ -123,18 +123,13 @@
         properties: { id: s.id, name: s.name },
       })),
     });
-    // Repaint selection colour
     if (map.getLayer('seg-line')) {
-      map.setPaintProperty('seg-line', 'line-color',
-        ['case', ['==', ['get', 'id'], selectedId ?? ''], SEG_SEL, SEG_COLOR]);
       map.setPaintProperty('seg-line', 'line-width',
         ['case', ['==', ['get', 'id'], selectedId ?? ''], 5, 3]);
     }
   }
 
   $: if (map?.getLayer('seg-line') && selectedId !== undefined) {
-    map.setPaintProperty('seg-line', 'line-color',
-      ['case', ['==', ['get', 'id'], selectedId ?? ''], SEG_SEL, SEG_COLOR]);
     map.setPaintProperty('seg-line', 'line-width',
       ['case', ['==', ['get', 'id'], selectedId ?? ''], 5, 3]);
   }