Update OnlineStatusContext and Create ConnectivityBars Component with Network Quality

[gkatrakazas]

This pull request introduces improvements to the handling and display of network connectivity status by navigator.connection.downlink within the application. It updates the OnlineStatusContext for better network status management and creates a new ConnectivityBars component to visually represent network quality.

[emlun]

I would probably call this connectionQuality as it's shorter and easier to read and type, while not losing any meaning. 🙂

[gkatrakazas]

The current issue with this feature is that navigator.connection is only supported in Chrome-based browsers (refer to MDN documentation for more details). Given this limitation, I see the following potential solutions in non support navigator.connection cases:

1. Restrict the feature to browsers that support navigator.connection: If the feature is not supported, default to displaying a full connection status without further analysis.
2. Implement periodic polling: Send requests to Google (e.g., every 5 seconds) and estimate network quality based on latency. However, there is a concern about potential exceptions occurring after several attempts.
3. Wrap each request and measure latency based on file size: This approach would involve tracking the latency of each request to gauge network quality.
4. Combine approaches 2 and 3: Reduce polling intervals based on the most recent request's latency data, allowing for more adaptive and efficient monitoring.