feat(sync): display an alert when disconnected

[yohanboniface]

Seems a bit agressive to me (maybe because the alert is so wide ?).

@Aurelie-Jallut thoughts ?

fix #2500
cf #2235

[Aurelie-Jallut]

we can keep the usual size and use the same principle for validation or information messages, but here with a warning icon + red title .

[Aurelie-Jallut]

Maybe we can replace the "Have fun" by something else ; )

[yohanboniface]

Alerts of type error usually render like this, we don't have (yet?) the colored title (red nor green):

[almet]

For the record, here is the phrasing I proposed last time. Not saying it should be this, but putting it here in case it helps somehow.

Here be dragons.

This map has enabled real-time synchronization with other users, but you are currently disconnected. We will try to reconnect in the background and reconcile with other users, but this feature is still experimental, and you might lose data. Have fun!

I personally especially like the "here be dragons" part, because I find it fun, but maybe that's my nerd part talking here 🙊

[yohanboniface]

I personally especially like the "here be dragons" part, because I find it fun, but maybe that's my nerd part talking here 🙊

Je trouve ça amusant aussi (mais je le verrais plutôt en latin), mais à mon avis, ça dépend à qui on s'adresse, et je pense que le commun des mortels qui aura ce message n'aura pas la référence. Mais on pourrait mettre une icône de dragon ou un truc du genre pour que soit moins élitiste.

Aussi peut-être que c'est pas là qu'il faut mettre le message mais au moment où on passe une carte en "collaborative", pour bien prévenir que c'est une fonctionnalité expérimentale ? Enfin, l'un n'empêche pas l'autre… :p

[yohanboniface]

Tests are broken because with this implementation, websocket import Alert, which imports translate, which imports Leaflet, which needs window but it is not available in our JS tests.