trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve bike route legend: human-readable names, non-judgmental colors

Browse source 
- 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>
This commit is contained in:
Ullrich Schäfer 2026-04-11 11:05:15 +02:00
parent ffb5348396
commit 3787821571
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
2 changed files with 12 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

10
apps/planner/app/components/ColoredRoute.tsx
View file

@ -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";

13
apps/planner/app/components/ElevationChart.tsx
View file

@ -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