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

Add waypoint highlighting on sidebar hover

Browse source 
Hovering a waypoint row in the sidebar highlights it on the map with
the same red CircleMarker used by the elevation chart hover. Reuses
the existing highlightPosition state — both sidebar and chart feed
into the same mechanism.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-04-11 00:33:44 +02:00
parent 4a429c8c59
commit 13c2925c18
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
2 changed files with 11 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -30,9 +30,10 @@ interface WaypointSidebarProps {
elevationLoss?: number;
};
days: DayStage[];
onWaypointHover?: (position: [number, number] | null) => void;
}
export function WaypointSidebar({ yjs, routeStats, days }: WaypointSidebarProps) {
export function WaypointSidebar({ yjs, routeStats, days, onWaypointHover }: WaypointSidebarProps) {
const { t } = useTranslation("planner");
const [waypoints, setWaypoints] = useState<WaypointData[]>([]);
@ -86,7 +87,12 @@ export function WaypointSidebar({ yjs, routeStats, days }: WaypointSidebarProps)
const hasMultipleDays = days.length > 1;
const renderWaypointRow = (wp: WaypointData, i: number) => (
<li key={i} className="group flex items-center gap-2 px-4 py-2 hover:bg-gray-50">
<li
key={i}
className="group flex items-center gap-2 px-4 py-2 hover:bg-gray-50"
onMouseEnter={() => onWaypointHover?.([wp.lat, wp.lon])}
onMouseLeave={() => onWaypointHover?.(null)}
>
<span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-100 text-xs font-medium text-blue-700">
{i + 1}
</span>