From 729b33a15f61c3cfd63686bf4fbe3527a421051b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= <hi+github@ullrich.is>
Date: Sat, 11 Apr 2026 01:51:39 +0200
Subject: [PATCH] Add Z_WAYPOINT_HIGHLIGHTED (1200) for hovered waypoint
 markers

Highlighted waypoints now render above normal waypoints (1000) but
below POI markers (1500) and the elevation highlight dot (2000).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/planner/app/components/PlannerMap.tsx | 4 ++--
 apps/planner/app/lib/z-index.ts            | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/planner/app/components/PlannerMap.tsx b/apps/planner/app/components/PlannerMap.tsx
index 392f16d..ce969ec 100644
--- a/apps/planner/app/components/PlannerMap.tsx
+++ b/apps/planner/app/components/PlannerMap.tsx
@@ -10,7 +10,7 @@ import { parseGpxAsync, extractWaypoints } from "@trails-cool/gpx";
 import { isOvernight } from "~/lib/overnight";
 import { setOvernight } from "~/lib/overnight";
 import { usePois } from "~/lib/use-pois";
-import { Z_CURSOR, Z_WAYPOINT, Z_HIGHLIGHT } from "~/lib/z-index";
+import { Z_CURSOR, Z_WAYPOINT, Z_WAYPOINT_HIGHLIGHTED, Z_HIGHLIGHT } from "~/lib/z-index";
 import { NoGoAreaLayer } from "./NoGoAreaLayer";
 import { ColoredRoute, findSegmentForPoint, type ColorMode } from "./ColoredRoute";
 import { RouteInteraction } from "./RouteInteraction";
@@ -520,7 +520,7 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition, highlighted
           key={i}
           position={[wp.lat, wp.lon]}
           draggable
-          zIndexOffset={Z_WAYPOINT}
+          zIndexOffset={highlightedWaypoint === i ? Z_WAYPOINT_HIGHLIGHTED : Z_WAYPOINT}
           icon={waypointIcon(i, wp.overnight, highlightedWaypoint === i)}
           eventHandlers={{
             mouseover: () => {
diff --git a/apps/planner/app/lib/z-index.ts b/apps/planner/app/lib/z-index.ts
index 7466427..0d6202e 100644
--- a/apps/planner/app/lib/z-index.ts
+++ b/apps/planner/app/lib/z-index.ts
@@ -5,8 +5,9 @@
  * Rendering order (bottom to top):
  *   POI markers → cursor markers → ghost waypoint → waypoint markers → highlight dot
  */
-export const Z_POI_MARKER = -1000;
 export const Z_CURSOR = -1000;
 export const Z_GHOST_WAYPOINT = -100;
 export const Z_WAYPOINT = 1000;
+export const Z_WAYPOINT_HIGHLIGHTED = 1200;
+export const Z_POI_MARKER = 1500;
 export const Z_HIGHLIGHT = 2000;