Exposing the system state to the user

The first step towards being transparent is to tell people about what's going on in the background. We know when synchronization starts, pauses, and ends. Let's put this data to good use by creating an indicator that shows the current status of synchronization. When errors occur, let's show them too.

Creating an online/offline indicator

Let's override these PouchDB events that we've ignored up until now. When we enabled live synchronization, we set up a bunch of empty handlers that listen for different synchronization events. The first thing that we should do is modify our views in order to show off this data regardless of where the user is in the app.

Adding a global toolbar

First, we need a toolbar that is always visible. This toolbar can't be tied to any individual view, so we'll attach it to the Main view instead. To do this, edit todo-app/app/view/Main.js and replace the contents of config with the following code:

layout: 'vbox',
items: [
  {
    xtype...