Replace right-click behavior with context menu on waypoints

Right-clicking a waypoint now shows a context menu with:
- "Mark as overnight stop" / "Remove overnight stop" (middle waypoints only)
- "Delete" (all waypoints)

Previously first/last waypoints were deleted on right-click and
middle waypoints toggled overnight, with no visual indication of
which action would happen.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/planner/app/components/WaypointContextMenu.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+
+interface WaypointContextMenuProps {
+  position: { x: number; y: number };
+  isFirst: boolean;
+  isLast: boolean;
+  isOvernight: boolean;
+  onDelete: () => void;
+  onToggleOvernight: () => void;
+  onClose: () => void;
+}
+
+export function WaypointContextMenu({
+  position,
+  isFirst,
+  isLast,
+  isOvernight,
+  onDelete,
+  onToggleOvernight,
+  onClose,
+}: WaypointContextMenuProps) {
+  const { t } = useTranslation("planner");
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [onClose]);
+
+  const canToggleOvernight = !isFirst && !isLast;
+
+  return (
+    <div
+      ref={ref}
+      className="fixed z-[2000] min-w-40 rounded-md border border-gray-200 bg-white py-1 shadow-lg"
+      style={{ left: position.x, top: position.y }}
+    >
+      {canToggleOvernight && (
+        <button
+          onClick={() => { onToggleOvernight(); onClose(); }}
+          className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm text-gray-700 hover:bg-gray-100"
+        >
+          <span>☾</span>
+          {isOvernight ? t("multiDay.removeOvernight") : t("multiDay.markOvernight")}
+        </button>
+      )}
+      <button
+        onClick={() => { onDelete(); onClose(); }}
+        className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm text-red-600 hover:bg-red-50"
+      >
+        <span>×</span>
+        {t("common:delete", "Delete")}
+      </button>
+    </div>
+  );
+}