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 && (

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>