From 442f911fda27383c9552bd36472227bad7d37d59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= <hi+github@ullrich.is>
Date: Sat, 11 Apr 2026 03:19:52 +0200
Subject: [PATCH] Improve surface legend and hover text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Legend shows actual surface types present in the route (up to 6)
  with colored swatches instead of generic text
- Hover label shows surface type name (e.g. "34m · 12.3km · asphalt")

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/planner/app/components/ElevationChart.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/planner/app/components/ElevationChart.tsx b/apps/planner/app/components/ElevationChart.tsx
index 4ec5f27..fe5c9e6 100644
--- a/apps/planner/app/components/ElevationChart.tsx
+++ b/apps/planner/app/components/ElevationChart.tsx
@@ -302,6 +302,9 @@ export function ElevationChart({ yjs, onHover, days }: ElevationChartProps) {
           const grade = dDist > 0 ? ((p.elevation - prev.elevation) / dDist) * 100 : 0;
           label += ` · ${grade > 0 ? "+" : ""}${grade.toFixed(1)}%`;
         }
+        if (colorMode === "surface" && surfaces[highlightIdx]) {
+          label += ` · ${surfaces[highlightIdx]}`;
+        }
         const labelX = hx + 8 > w - 80 ? hx - 8 : hx + 8;
         ctx.textAlign = hx + 8 > w - 80 ? "right" : "left";
         ctx.fillText(label, labelX, PADDING.top + 10);
@@ -381,9 +384,15 @@ export function ElevationChart({ yjs, onHover, days }: ElevationChartProps) {
             <span className="inline-block h-1.5 w-16 rounded-sm" style={{ background: "linear-gradient(to right, rgb(0, 200, 50), rgb(255, 200, 50), rgb(255, 0, 50))" }} />
             <span>{Math.round(Math.max(...points.map(p => p.elevation)))}m</span>
           </>)}
-          {colorMode === "surface" && (
-            <span>{t("colorMode.surfaceLegend")}</span>
-          )}
+          {colorMode === "surface" && surfaces.length > 0 && (<>
+            {[...new Set(surfaces)].slice(0, 6).map((s) => (
+              <span key={s} className="flex items-center gap-0.5">
+                <span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: SURFACE_COLORS[s] ?? DEFAULT_SURFACE_COLOR }} />
+                {s}
+              </span>
+            ))}
+            {[...new Set(surfaces)].length > 6 && <span>+{[...new Set(surfaces)].length - 6}</span>}
+          </>)}
         </div>
         <select
           value={colorMode}