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>

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>
   );
 }

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",

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",