replace browswer popups with toast

public/src/components/map/DrawingHandler.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useMapEvents, Polyline, Marker } from 'react-leaflet';
 import L from 'leaflet';
 import { useDrawingStore } from '../../stores/drawingStore';
+import { useUIStore } from '../../stores/uiStore';
 import { mapItemService } from '../../services/mapItemService';
 import { CABLE_COLORS, type CableType } from '../../types/mapItem';
 
@@ -13,6 +14,7 @@ interface DrawingHandlerProps {
 export function DrawingHandler({ mapId, onItemCreated }: DrawingHandlerProps) {
   const { activeTool, isDrawing, drawingPoints, setIsDrawing, addDrawingPoint, resetDrawing, setActiveTool } =
     useDrawingStore();
+  const { showToast } = useUIStore();
   const [cursorPosition, setCursorPosition] = useState<[number, number] | null>(null);
   const [allItems, setAllItems] = useState<any[]>([]);
   const [startDeviceId, setStartDeviceId] = useState<string | null>(null);
@@ -86,7 +88,7 @@ export function DrawingHandler({ mapId, onItemCreated }: DrawingHandlerProps) {
             const portCount = clickedDevice.properties.port_count || 0;
             const usedPorts = clickedDevice.properties.connections?.length || 0;
             const deviceName = clickedDevice.properties.name || clickedDevice.type;
-            alert(`${deviceName} has no available ports (${usedPorts}/${portCount} ports used). Please select a different device or increase the port count.`);
+            showToast(`${deviceName} has no available ports (${usedPorts}/${portCount} ports used). Please select a different device or increase the port count.`, 'error');
             return;
           }
 
@@ -144,7 +146,7 @@ export function DrawingHandler({ mapId, onItemCreated }: DrawingHandlerProps) {
         // Must click on an AP
         const ap = findNearbyDevice(lat, lng, 5);
         if (!ap || !['indoor_ap', 'outdoor_ap'].includes(ap.type)) {
-          alert('Wireless mesh can only connect between Access Points. Please click on an AP.');
+          showToast('Wireless mesh can only connect between Access Points. Please click on an AP.', 'error');
           return;
         }
 
@@ -152,7 +154,7 @@ export function DrawingHandler({ mapId, onItemCreated }: DrawingHandlerProps) {
         const meshCount = getWirelessMeshCount(ap.id);
         if (meshCount >= 4) {
           const apName = ap.properties.name || ap.type;
-          alert(`${apName} already has the maximum of 4 wireless mesh connections. Please select a different AP.`);
+          showToast(`${apName} already has the maximum of 4 wireless mesh connections. Please select a different AP.`, 'error');
           return;
         }
 
@@ -165,7 +167,7 @@ export function DrawingHandler({ mapId, onItemCreated }: DrawingHandlerProps) {
         } else if (drawingPoints.length === 1) {
           // Second AP clicked - check if it's different from first
           if (ap.id === startDeviceId) {
-            alert('Cannot create wireless mesh to the same Access Point. Please select a different AP.');
+            showToast('Cannot create wireless mesh to the same Access Point. Please select a different AP.', 'error');
             return;
           }