Display sync changes in channel edit toolbar

[rtibbles]

Summary

Description of the change(s) you made

• Switches the Vuex plugin for monitoring unsynced changes to use a liveQuery rather than the Dexie Observable db.on('changes' in the hope of more reliability
• Switches the final use of the Resource listeners to use a liveQuery to increase reliability of redirect on logout
• Updates the SavingIndicator component to make it use the global state when no nodeIds prop is passed
• Adds the SavingIndicator component to the channel edit toolbar

Manual verification steps performed

1. Checked that the vuex state properly updated when there were unsynced changes
2. Confirmed that the current beforeunload handler does properly alert if there are unsynced changes when closing the tab
3. Opened a second tab and logged out in that, confirmed that both tabs redirected to the accounts page
4. Made a change and quickly exited from the edit modal - confirmed that the SavingIndicator showed up properly

Screenshots (if applicable)

Sequential screenshots after an edit was made:

Does this introduce any tech-debt items?

This does currently mean that if no edit has been made in this browser session there is no indicator, but this seemed ok for now?

---

Reviewer guidance

How can a reviewer test these changes?

Are there any risky areas that deserve extra testing?

References

Fixes #4100

Comments

---

Contributor's Checklist

PR process:

• If this is an important user-facing change, PR or related issue the CHANGELOG label been added to this PR. Note: items with this label will be added to the CHANGELOG at a later time
• If this includes an internal dependency change, a link to the diff is provided
• The docs label has been added if this introduces a change that needs to be updated in the user docs?
• If any Python requirements have changed, the updated requirements.txt files also included in this PR
• Opportunities for using Google Analytics here are noted
• Migrations are safe for a large db

Studio-specifc:

• All user-facing strings are translated properly
• The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. icons, user-generated text)
• All UI components are LTR and RTL compliant
• Views are organized into pages, components, and layouts directories as described in the docs
• Users' storage used is recalculated properly on any changes to main tree files
• If there new ways this uses user data that needs to be factored into our Privacy Policy, it has been noted.

Testing:

• Code is clean and well-commented
• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Any new interactions have been added to the QA Sheet
• Critical and brittle code paths are covered by unit tests

---

Reviewer's Checklist

This section is for reviewers to fill out.

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[marcellamaki]

LGTM, once tests are updated and passing.

Per slack chat, the only small change to make will be not having the "saving" indicator display when the user is offline.