Add more states to the connection-status

**Is your feature request related to a problem? Please describe.**
Currently, a user doesn't know if their node is directly reachable for other nodes of the network (by UPnP or UDP hole punching) or if the node relies on a relay to have incoming connections work - or if incoming connections doesn't work at all.

**Describe the solution you'd like**
It would be nice to extend the connecton-status, which is currently binary "connected" or "not connected" and only shows the connection between the WebGUI and the IPFS Node itself.

I doubt that's really what a user would understand under "Connected to IPFS" (the tooltip of this icon). I think it should show if the bootstrapping has been completed (orange), connections work via a relay inbound, too (yellow), connections inbound work direct (green).

While bootstrapping there should be a "connecting" animation.

**Describe alternatives you've considered**
None

**Additional context**
I don't know if the autonat functionality has currently a way to receive their status via API, but if not it should be extended.