added Collision handling for open popups

apps/dispatch/app/(dispatch)/_components/map/ContextMenu.tsx

@@ -5,14 +5,25 @@ import { Popup, useMap } from "react-leaflet";
 
 export const ContextMenu = () => {
 	const map = useMap();
-	const { contextMenu, setContextMenu, setSearchElements } = useMapStore();
+	const { contextMenu, setContextMenu, setSearchElements, setSearchPopup } =
+		useMapStore();
 
 	useEffect(() => {
-		map.on("contextmenu", (e) => {
-			// setOpenMissionMarker({ open: [], close: openMissionMarker });
+		const handleContextMenu = (e: any) => {
 			setContextMenu({ lat: e.latlng.lat, lng: e.latlng.lng });
-			// setSearchPopup(null);
-		});
+		};
+		const handleClick = (e: any) => {
+			setContextMenu(null);
+			setSearchPopup(null);
+		};
+
+		map.on("contextmenu", handleContextMenu);
+		map.on("click", handleClick);
+
+		return () => {
+			map.off("contextmenu", handleContextMenu);
+			map.off("click", handleClick);
+		};
 	}, [contextMenu]);
 
 	if (!contextMenu) return null;
@@ -27,7 +38,7 @@ export const ContextMenu = () => {
 			{/* // TODO: maske: */}
 			<div className="absolute transform -translate-y-1/2 z-1000 opacity-100 pointer-events-auto p-3">
 				<button
-					className="btn btn-sm rounded-full bg-amber-600 hover:bg-amber-700 aspect-square"
+					className="btn btn-sm rounded-full bg-rescuetrack aspect-square"
 					onClick={async () => {
 						const address = await fetch(
 							`https://nominatim.openstreetmap.org/reverse?lat=${contextMenu.lat}&lon=${contextMenu.lng}&format=json`,
@@ -62,7 +73,7 @@ export const ContextMenu = () => {
 					<MapPinned size={20} />
 				</button>
 				<button
-					className="btn btn-sm rounded-full bg-amber-600 hover:bg-amber-700 aspect-square"
+					className="btn btn-sm rounded-full bg-rescuetrack aspect-square"
 					onClick={async () => {
 						const res = await fetch(
 							`https://overpass-api.de/api/interpreter?data=${encodeURIComponent(`