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

6
apps/planner/app/components/SessionView.tsx
View file

@ -142,7 +142,7 @@ function ColorModeToggle({ yjs }: { yjs: YjsState }) {
);
}
function SidebarTabs({ yjs, routeStats, days }: { yjs: YjsState; routeStats: ReturnType<typeof useRouting>["routeStats"]; days: ReturnType<typeof useDays> }) {
function SidebarTabs({ yjs, routeStats, days, onWaypointHover }: { yjs: YjsState; routeStats: ReturnType<typeof useRouting>["routeStats"]; days: ReturnType<typeof useDays>; onWaypointHover: (position: [number, number] | null) => void }) {
const { t } = useTranslation("planner");
const [tab, setTab] = useState<"waypoints" | "notes">("waypoints");
@ -165,7 +165,7 @@ function SidebarTabs({ yjs, routeStats, days }: { yjs: YjsState; routeStats: Ret
<div className="flex-1 overflow-hidden">
{tab === "waypoints" ? (
<Suspense fallback={null}>
<WaypointSidebar yjs={yjs} routeStats={routeStats} days={days} />
<WaypointSidebar yjs={yjs} routeStats={routeStats} days={days} onWaypointHover={onWaypointHover} />
</Suspense>
) : (
<NotesPanel yjs={yjs} />
@ -292,7 +292,7 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl,
<ElevationChart yjs={yjs} onHover={handleElevationHover} days={days} />
</Suspense>
</main>
<SidebarTabs yjs={yjs} routeStats={routeStats} days={days} />
<SidebarTabs yjs={yjs} routeStats={routeStats} days={days} onWaypointHover={setHighlightPosition} />
</div>
<YjsDebugPanel yjs={yjs} />
{toasts.length > 0 && (