From 67439df0ee676eb731f617e4cc325e92bd0e61c7 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:14:12 +0200
Subject: [PATCH] Add color legend below grade profile chart

Shows grade thresholds with color swatches: <3% green, <6% yellow,
<10% orange, <15% red, 15%+ dark red. Only visible in grade mode.

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

diff --git a/apps/planner/app/components/ElevationChart.tsx b/apps/planner/app/components/ElevationChart.tsx
index bd62d66..9fff833 100644
--- a/apps/planner/app/components/ElevationChart.tsx
+++ b/apps/planner/app/components/ElevationChart.tsx
@@ -354,6 +354,15 @@ export function ElevationChart({ yjs, onHover, days }: ElevationChartProps) {
         onMouseMove={handleMouseMove}
         onMouseLeave={handleMouseLeave}
       />
+      {colorMode === "grade" && (
+        <div className="mt-1 flex items-center justify-center gap-2 px-2 text-[10px] text-gray-500">
+          <span className="flex items-center gap-0.5"><span className="inline-block h-2 w-3 rounded-sm" style={{ background: "#22c55e" }} />{"<3%"}</span>
+          <span className="flex items-center gap-0.5"><span className="inline-block h-2 w-3 rounded-sm" style={{ background: "#eab308" }} />{"<6%"}</span>
+          <span className="flex items-center gap-0.5"><span className="inline-block h-2 w-3 rounded-sm" style={{ background: "#f97316" }} />{"<10%"}</span>
+          <span className="flex items-center gap-0.5"><span className="inline-block h-2 w-3 rounded-sm" style={{ background: "#ef4444" }} />{"<15%"}</span>
+          <span className="flex items-center gap-0.5"><span className="inline-block h-2 w-3 rounded-sm" style={{ background: "#991b1b" }} />{"15%+"}</span>
+        </div>
+      )}
     </div>
   );
 }