Add more states to the connection-status

[RubenKelevra]

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.

[lidel]

This is a reasonable feature request, but we already show the number of connected peers.
What we are lacking, is surfacing public addresses.

I think webui could look at multiaddrs returned by ipfs id and check if any of them is not private IP (meaning, upnp did the thing), and display more detailed information about connection status.

The MVP would be to add "PUBLIC ADDRESSES" section to the Status screen. Ideas how to improve UX are welcome.

PR welcome :^)

[SgtPooki]

Pushing into the "needs UX design" column of our project board. Possibly related to #1942