feat: improve drag-and-drop feel in network diagram editor

Grip icons on draggable toolbar items, press effect on drag start,
dashed border overlay with 'Drop to add' text when dragging over canvas.

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

frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx

@@ -50,6 +50,7 @@ function DiagramEditorInner() {
 
   const [deviceTypes, setDeviceTypes] = useState<DeviceTypeResponse[]>([])
   const [loading, setLoading] = useState(!!id)
+  const [isDragOver, setIsDragOver] = useState(false)
 
   useEffect(() => { isDirtyRef.current = isDirty }, [isDirty])
   useEffect(() => { diagramIdRef.current = diagramId }, [diagramId])
@@ -196,10 +197,18 @@ function DiagramEditorInner() {
   const onDragOver = useCallback((event: React.DragEvent) => {
     event.preventDefault()
     event.dataTransfer.dropEffect = 'move'
+    setIsDragOver(true)
+  }, [])
+
+  const onDragLeave = useCallback((event: React.DragEvent) => {
+    const relatedTarget = event.relatedTarget as HTMLElement | null
+    if (relatedTarget && (event.currentTarget as HTMLElement).contains(relatedTarget)) return
+    setIsDragOver(false)
   }, [])
 
   const onDrop = useCallback((event: React.DragEvent) => {
     event.preventDefault()
+    setIsDragOver(false)
 
     const position = screenToFlowPosition({ x: event.clientX, y: event.clientY })
 
@@ -415,6 +424,8 @@ function DiagramEditorInner() {
               onEdgeSelect={setSelectedEdgeId}
               onDrop={onDrop}
               onDragOver={onDragOver}
+              onDragLeave={onDragLeave}
+              isDragOver={isDragOver}
             />
           </div>
           <AIAssistPanel