From ec584c8b88c0aeed27ecaffa2b81948bc71b0ba9 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:15:42 +0200
Subject: [PATCH] Add inline color legends next to chart title for all modes

Legends sit between the title and the mode selector dropdown:
- Grade: colored swatches with percentage thresholds
- Elevation: gradient bar from low (green) to high (red)
- Surface: text hint about surface coloring

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../planner/app/components/ElevationChart.tsx | 32 ++++++++++++-------
 packages/i18n/src/locales/de.ts               |  3 ++
 packages/i18n/src/locales/en.ts               |  3 ++
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/apps/planner/app/components/ElevationChart.tsx b/apps/planner/app/components/ElevationChart.tsx
index 9fff833..75b0487 100644
--- a/apps/planner/app/components/ElevationChart.tsx
+++ b/apps/planner/app/components/ElevationChart.tsx
@@ -333,14 +333,31 @@ export function ElevationChart({ yjs, onHover, days }: ElevationChartProps) {
 
   return (
     <div className="border-t border-gray-200 px-2 py-2">
-      <div className="mb-1 flex items-center justify-between px-2">
-        <p className="text-xs font-medium text-gray-500">
+      <div className="mb-1 flex items-center gap-2 px-2">
+        <p className="shrink-0 text-xs font-medium text-gray-500">
           {colorMode === "grade" ? t("elevation.grade") : t("elevation.profile")}
         </p>
+        <div className="flex flex-1 items-center justify-center gap-1.5 text-[10px] text-gray-400">
+          {colorMode === "grade" && (<>
+            <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#22c55e" }} />{"<3%"}</span>
+            <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#eab308" }} />{"<6%"}</span>
+            <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#f97316" }} />{"<10%"}</span>
+            <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#ef4444" }} />{"<15%"}</span>
+            <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#991b1b" }} />{"15%+"}</span>
+          </>)}
+          {colorMode === "elevation" && (<>
+            <span>{t("elevation.low")}</span>
+            <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>{t("elevation.high")}</span>
+          </>)}
+          {colorMode === "surface" && (
+            <span>{t("colorMode.surfaceLegend")}</span>
+          )}
+        </div>
         <select
           value={colorMode}
           onChange={(e) => setMode(e.target.value)}
-          className="rounded border border-gray-200 px-1.5 py-0.5 text-[11px] text-gray-500"
+          className="shrink-0 rounded border border-gray-200 px-1.5 py-0.5 text-[11px] text-gray-500"
         >
           <option value="plain">{t("colorMode.plain")}</option>
           <option value="elevation">{t("colorMode.elevation")}</option>
@@ -354,15 +371,6 @@ 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>
   );
 }
diff --git a/packages/i18n/src/locales/de.ts b/packages/i18n/src/locales/de.ts
index fb7727f..531e717 100644
--- a/packages/i18n/src/locales/de.ts
+++ b/packages/i18n/src/locales/de.ts
@@ -102,6 +102,7 @@ export default {
       elevation: "Höhe",
       surface: "Untergrund",
       grade: "Steigung",
+      surfaceLegend: "Farbe nach Straßenbelag",
       surfaceUnavailable: "Untergrunddaten für dieses Profil nicht verfügbar",
     },
     rateLimitExceeded: "Zu viele Anfragen. Bitte versuche es später erneut.",
@@ -110,6 +111,8 @@ export default {
       loss: "Höhenmeter abwärts",
       profile: "Höhenprofil",
       grade: "Steigungsprofil",
+      low: "Tief",
+      high: "Hoch",
     },
     landing: {
       startPlanning: "Planung starten",
diff --git a/packages/i18n/src/locales/en.ts b/packages/i18n/src/locales/en.ts
index 9ac8127..800ada7 100644
--- a/packages/i18n/src/locales/en.ts
+++ b/packages/i18n/src/locales/en.ts
@@ -102,6 +102,7 @@ export default {
       elevation: "Elevation",
       surface: "Surface",
       grade: "Grade",
+      surfaceLegend: "Color by road surface type",
       surfaceUnavailable: "Surface data not available for this profile",
     },
     rateLimitExceeded: "Too many requests. Please try again later.",
@@ -110,6 +111,8 @@ export default {
       loss: "Elevation Loss",
       profile: "Elevation Profile",
       grade: "Grade Profile",
+      low: "Low",
+      high: "High",
     },
     landing: {
       startPlanning: "Start Planning",