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

feat(planner): restyle color-mode selector + chart header on tokens

Browse source 
The elevation chart's 10-mode color selector now uses the Select
primitive (token-styled, consistent with ProfileSelector). Chart-header
chrome (top border, title link, legend text) moved onto tokens too.

Kept as a dropdown rather than a segmented control — 10 modes don't fit
a segmented toggle. Canvas/legend data-viz colors are unchanged (task
1.5).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-07-16 00:32:05 +02:00
parent 2bc6afcf4f
commit 28f92d0d8f
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
1 changed files with 10 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,6 +14,7 @@ import {
} from "@trails-cool/map-core";
import { drawElevationChart, PADDING } from "~/lib/elevation-chart-draw";
import { useElevationData } from "~/lib/use-elevation-data";
import { Select } from "@trails-cool/ui";
import { setColorMode, type ColorMode } from "~/lib/route-data";
interface ElevationChartProps {
@ -378,7 +379,7 @@ export function ElevationChart({ yjs, onHover, highlightDistance, onClickPositio
if (points.length < 2) return null;
return (
<div className="border-t border-gray-200 px-2 py-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]">
<div className="border-t border-border px-2 py-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]">
<div className="mb-1 flex items-center gap-2 px-2">
{(() => {
const osmLinks: Record<string, string> = {
@ -402,14 +403,14 @@ export function ElevationChart({ yjs, onHover, highlightDistance, onClickPositio
const title = titles[colorMode] ?? t("elevation.profile");
const link = osmLinks[colorMode];
return link ? (
<a href={link} target="_blank" rel="noopener" className="shrink-0 text-xs font-medium text-gray-500 hover:text-blue-600 hover:underline">
<a href={link} target="_blank" rel="noopener" className="shrink-0 text-xs font-medium text-text-md hover:text-accent hover:underline">
{title}
</a>
) : (
<p className="shrink-0 text-xs font-medium text-gray-500">{title}</p>
<p className="shrink-0 text-xs font-medium text-text-md">{title}</p>
);
})()}
<div className="flex flex-1 items-center justify-center gap-1.5 text-[10px] text-gray-400">
<div className="flex flex-1 items-center justify-center gap-1.5 text-[10px] text-text-lo">
{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>
@ -480,10 +481,12 @@ export function ElevationChart({ yjs, onHover, highlightDistance, onClickPositio
<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
<Select
size="sm"
value={colorMode}
onChange={(e) => setMode(e.target.value)}
className="shrink-0 rounded border border-gray-200 px-1.5 py-0.5 text-[11px] text-gray-500"
aria-label={t("elevation.profile")}
className="shrink-0"
>
<option value="plain">{t("colorMode.plain")}</option>
<option value="elevation">{t("colorMode.elevation")}</option>
@ -495,7 +498,7 @@ export function ElevationChart({ yjs, onHover, highlightDistance, onClickPositio
<option value="tracktype">{t("colorMode.tracktype")}</option>
<option value="cycleway">{t("colorMode.cycleway")}</option>
<option value="bikeroute">{t("colorMode.bikeroute")}</option>
</select>
</Select>
</div>
<canvas
ref={canvasRef}