Show online/offline state in UI

[mejo-]

• Implement useNetworkState() composable to be used everywhere for detecting online/offline state.
• Indicate online/offline state in toolbar
• Move useNetworkState() to useConnection() and add computed hasConnection() which takes network state and connection into account

[juliusknorr]

I'm not sure the checkmark with the dot is actually something easy to understand. It would be nice to align on this with @marcoambrosini

The whiteboard also introduced an indicator which ideally we get all apps use the same/similar design (cc @hweihwang @grnd-alt for the whiteboard)

[marcoambrosini]

Hi @mejo- I think we should use different approaches depending on whether this is for the desktop app or the web.

if we're talking about a desktop app, we shouldn't bug the user about whether they're online or not. Imo it's better not interrupt the user's work and try to handle all the possible scenarios gracefully ourselves. I've checked several other document editing apps and many of them do not even have a simple indicator.

E.g. we could

• Show red or amber dot if sync is not happening
• Prevent closing the window if un-synced and showing a warning dialog
• Store the changes locally and auto sync when the network is back, offer a way to handle conflicts when present

For the browser version, we could be a bit more loud about the fact that there's no network and show a permanent banner, which we already do!

For the indicator, I wouldn't show a checkmark, and instead replace the whole icon with a bigger dot

[mejo-]

For the browser version, we could be a bit more loud about the fact that there's no network and show a permanent banner, which we already do!

The plan is to make editing possible while being offline in the browser version as well. That's why the current banner will go away once synchronizing the editing session to a local y-indexeddb provider in the browser is implemented.

We started working on handling offline state in the text app and went with the following indicators for now:

• Replace session list button with a cloud offline icon that has "Offline since 4 minutes ago" as tooltip.
• Show the red indicator dot in save button if we have unsaved changes and are currently offline

See the following screenshots:

Online with unsaved changes	Offline with unsaved changes

[marcoambrosini]

I do not think it's necessary to show an icon if online