From 3787821571c88b96fe8ca95445acbd3a1f20a17f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= <hi+github@ullrich.is>
Date: Sat, 11 Apr 2026 11:05:15 +0200
Subject: [PATCH] Improve bike route legend: human-readable names,
 non-judgmental colors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Legend: International / National / Regional / Local / None
- Hover: shows full names instead of icn/ncn/rcn/lcn
- Palette: purple (intl) → blue (national) → teal (regional) →
  emerald (local) → gray (none). No red/green implied quality.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/planner/app/components/ColoredRoute.tsx   | 10 +++++-----
 apps/planner/app/components/ElevationChart.tsx | 13 +++++++------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/apps/planner/app/components/ColoredRoute.tsx b/apps/planner/app/components/ColoredRoute.tsx
index c8b8f36..ea2b026 100644
--- a/apps/planner/app/components/ColoredRoute.tsx
+++ b/apps/planner/app/components/ColoredRoute.tsx
@@ -104,11 +104,11 @@ const CYCLEWAY_COLORS: Record<string, string> = {
 const DEFAULT_CYCLEWAY_COLOR = "#9ca3af";
 
 const BIKEROUTE_COLORS: Record<string, string> = {
-  icn: "#dc2626",
-  ncn: "#f97316",
-  rcn: "#eab308",
-  lcn: "#22c55e",
-  none: "#d4d4d8",
+  icn: "#7c3aed",    // purple — international
+  ncn: "#2563eb",    // blue — national
+  rcn: "#0891b2",    // teal — regional
+  lcn: "#059669",    // emerald — local
+  none: "#d4d4d8",   // gray — no route
 };
 
 const DEFAULT_BIKEROUTE_COLOR = "#d4d4d8";
diff --git a/apps/planner/app/components/ElevationChart.tsx b/apps/planner/app/components/ElevationChart.tsx
index 6d60b66..b7cd549 100644
--- a/apps/planner/app/components/ElevationChart.tsx
+++ b/apps/planner/app/components/ElevationChart.tsx
@@ -517,7 +517,8 @@ export function ElevationChart({ yjs, onHover, days }: ElevationChartProps) {
           label += ` · ${cycleways[highlightIdx]}`;
         }
         if (colorMode === "bikeroute" && bikeroutes[highlightIdx]) {
-          label += ` · ${bikeroutes[highlightIdx]}`;
+          const names: Record<string, string> = { icn: "International", ncn: "National", rcn: "Regional", lcn: "Local", none: "None" };
+          label += ` · ${names[bikeroutes[highlightIdx]!] ?? bikeroutes[highlightIdx]}`;
         }
         const labelX = hx + 8 > w - 80 ? hx - 8 : hx + 8;
         ctx.textAlign = hx + 8 > w - 80 ? "right" : "left";
@@ -675,11 +676,11 @@ export function ElevationChart({ yjs, onHover, days }: ElevationChartProps) {
             {[...new Set(cycleways)].length > 6 && <span>+{[...new Set(cycleways)].length - 6}</span>}
           </>)}
           {colorMode === "bikeroute" && (<>
-            <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#dc2626" }} />icn</span>
-            <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#f97316" }} />ncn</span>
-            <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#eab308" }} />rcn</span>
-            <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#22c55e" }} />lcn</span>
-            <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#d4d4d8" }} />none</span>
+            <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#7c3aed" }} />International</span>
+            <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#2563eb" }} />National</span>
+            <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#0891b2" }} />Regional</span>
+            <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#059669" }} />Local</span>
+            <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#d4d4d8" }} />None</span>
           </>)}
         </div>
         <select