Visual improvements for edges (patch cables)

[karate]

Some suggestions are:

• increase width
• add arrow heads (https://reactflow.dev/examples/edges/custom-edges)
• animation (https://reactflow.dev/learn/customization/theming)
• change curve type to smoothtype instead of default (bezier) (https://reactflow.dev/examples/edges/edge-types). This is to prevent overlapping like in the screenshot below

[karate]

We're going to skip the animation and arrow heads. It doesn't add anything to the UX, and makes the interface distracting.

[karate]

I run some tests and came up with the following changes that seem to improve the UI:

• smoothtype instead of the default bezier curves, to minimize overlapping.
• thicker patch lines
• better visual cue for the selected patch (when the user clicks on a patch cable). I made it blue to match the controls

Here's some screenshots: (module connections doesn't make any sense. I just wanted to create a 'complex' setup)

BEFORE: AFTER:

[mikezaby]

I like it! We could go like this.