WIP

2020-02-09 12:07:18 -06:00
parent 046f6ca5b9
commit 1a87df0db8
18 changed files with 1151 additions and 1130 deletions
--- a/app/assets/javascripts/controllers/abstract/pure_ctrl.js
+++ b/app/assets/javascripts/controllers/abstract/pure_ctrl.js
@@ -1,13 +1,25 @@
 export class PureCtrl {
  constructor(
-    $timeout
+    $scope,
+    $timeout,
+    application,
+    appState
  ) {
-    if(!$timeout) {
+    if (!$scope || !$timeout || !application || !appState) {
      throw 'Invalid PureCtrl construction.';
    }
+    this.$scope = $scope;
    this.$timeout = $timeout;
+    this.appState = appState;
+    this.application = application;
    this.state = {};
    this.props = {};
+    this.addAppStateObserver();
+    this.addAppEventObserver();
+    $scope.$on('$destroy', () => {
+      this.unsubApp();
+      this.unsubState();
+    });
  }

  async setState(state) {
@@ -25,4 +37,25 @@ export class PureCtrl {
    }
    this.props = Object.freeze(Object.assign({}, this.props, props));
  }
+
+  addAppStateObserver() {
+    this.unsubState = this.appState.addObserver((eventName, data) => {
+      this.onAppStateEvent(eventName, data);
+    });
+  }
+
+  addAppEventObserver() {
+    this.unsubApp = this.application.addEventObserver((eventName) => {
+      this.onApplicationEvent(eventName);
+    });
+  }
+
+  onApplicationEvent(eventName) {
+    /** Optional override */
+  }
+
+  onAppStateEvent(eventName, data) {
+    /** Optional override */
+  }
+
 }
--- a/app/assets/javascripts/controllers/editor.js
+++ b/app/assets/javascripts/controllers/editor.js
@@ -49,18 +49,17 @@ const Fonts = {
 class EditorCtrl extends PureCtrl {
  /* @ngInject */
  constructor(
+    $scope,
    $timeout,
    $rootScope,
-    appState,
    application,
+    appState,
    desktopManager,
    keyboardManager,
    preferencesManager,
  ) {
-    super($timeout);
+    super($scope, $timeout, application, appState);
    this.$rootScope = $rootScope;
-    this.application = application;
-    this.appState = appState;
    this.desktopManager = desktopManager;
    this.keyboardManager = keyboardManager;
    this.preferencesManager = preferencesManager;
@@ -77,13 +76,10 @@ class EditorCtrl extends PureCtrl {

    this.leftResizeControl = {};
    this.rightResizeControl = {};
-
-    this.addAppStateObserver();
-    this.addAppEventObserver();
    this.addSyncStatusObserver();
    this.registerKeyboardShortcuts();
-    
-    application.onReady(() => {
+
+    application.onUnlock(() => {
      this.streamItems();
      this.registerComponentHandler();
    });
@@ -94,17 +90,50 @@ class EditorCtrl extends PureCtrl {
    this.prefKeyMarginResizers = PrefKeys.EditorResizersEnabled;
  }

-  addAppStateObserver() {
-    this.appState.addObserver((eventName, data) => {
-      if (eventName === AppStateEvents.NoteChanged) {
-        this.handleNoteSelectionChange(
-          this.appState.getSelectedNote(),
-          data.previousNote
-        );
-      } else if (eventName === AppStateEvents.PreferencesChanged) {
-        this.loadPreferences();
+  /** @override */
+  onAppStateEvent(eventName, data) {
+    if (eventName === AppStateEvents.NoteChanged) {
+      this.handleNoteSelectionChange(
+        this.appState.getSelectedNote(),
+        data.previousNote
+      );
+    } else if (eventName === AppStateEvents.PreferencesChanged) {
+      this.loadPreferences();
+    }
+  }
+
+  /** @override */
+  onApplicationEvent(eventName) {
+    if (!this.state.note) {
+      return;
+    }
+    if (eventName === ApplicationEvents.HighLatencySync) {
+      this.setState({
+        syncTakingTooLong: true
+      });
+    } else if (eventName === ApplicationEvents.CompletedSync) {
+      this.setState({
+        syncTakingTooLong: false
+      });
+      if (this.state.note.dirty) {
+        /** if we're still dirty, don't change status, a sync is likely upcoming. */
+      } else {
+        const saved = this.state.note.updated_at > this.state.note.lastSyncBegan;
+        const isInErrorState = this.state.saveError;
+        if (isInErrorState || saved) {
+          this.showAllChangesSavedStatus();
+        }
      }
-    });
+    } else if (eventName === ApplicationEvents.FailedSync) {
+      /**
+       * Only show error status in editor if the note is dirty.
+       * Otherwise, it means the originating sync came from somewhere else
+       * and we don't want to display an error here.
+       */
+      if (this.state.note.dirty) {
+        this.showErrorStatus();
+      }
+    }
  }

  streamItems() {
@@ -176,42 +205,6 @@ class EditorCtrl extends PureCtrl {
    });
  }

-  addAppEventObserver() {
-    this.application.addEventObserver((eventName) => {
-      if (!this.state.note) {
-        return;
-      }
-      if (eventName === ApplicationEvents.HighLatencySync) {
-        this.setState({
-          syncTakingTooLong: true
-        });
-      } else if (eventName === ApplicationEvents.CompletedSync) {
-        this.setState({
-          syncTakingTooLong: false
-        });
-        if (this.state.note.dirty) {
-          /** if we're still dirty, don't change status, a sync is likely upcoming. */
-        } else {
-          const saved = this.state.note.updated_at > this.state.note.lastSyncBegan;
-          const isInErrorState = this.state.saveError;
-          if (isInErrorState || saved) {
-            this.showAllChangesSavedStatus();
-          }
-        }
-      } else if (eventName === ApplicationEvents.FailedSync) {
-        /**
-         * Only show error status in editor if the note is dirty.
-         * Otherwise, it means the originating sync came from somewhere else
-         * and we don't want to display an error here.
-         */
-        if (this.state.note.dirty) {
-          this.showErrorStatus();
-        }
-      }
-    });
-  }
-
-
  async handleNoteSelectionChange(note, previousNote) {
    this.setState({
      note: this.appState.getSelectedNote(),
--- a/app/assets/javascripts/controllers/footer.js
+++ b/app/assets/javascripts/controllers/footer.js
@@ -1,6 +1,6 @@
 import { dateToLocalizedString } from '@/utils';
-import { 
-  ApplicationEvents, 
+import {
+  ApplicationEvents,
  TIMING_STRATEGY_FORCE_SPAWN_NEW,
  ProtectedActions,
  ContentTypes
@@ -11,23 +11,23 @@ import {
  STRING_GENERIC_SYNC_ERROR,
  STRING_NEW_UPDATE_READY
 } from '@/strings';
+import { PureCtrl } from '@Controllers';

-class FooterCtrl {
+class FooterCtrl extends PureCtrl {

  /* @ngInject */
  constructor(
+    $scope,
    $rootScope,
    $timeout,
-    appState,
    application,
+    appState,
    nativeExtManager,
    statusManager,
    godService
  ) {
+    super($scope, $timeout, application, appState);
    this.$rootScope = $rootScope;
-    this.$timeout = $timeout;
-    this.application = application;
-    this.appState = appState;
    this.nativeExtManager = nativeExtManager;
    this.statusManager = statusManager;
    this.godService = godService;
@@ -36,7 +36,6 @@ class FooterCtrl {
    this.themesWithIcons = [];
    this.showSyncResolution = false;

-    this.addAppStateObserver();
    this.addRootScopeListeners();

    this.statusManager.addStatusObserver((string) => {
@@ -45,7 +44,7 @@ class FooterCtrl {
      });
    });

-    application.onReady(() => {
+    application.onUnlock(() => {
      this.application.hasPasscode().then((value) => {
        this.hasPasscode = value;
      });
@@ -76,55 +75,53 @@ class FooterCtrl {
    });
  }

-  addAppStateObserver() {
-    this.appState.addObserver((eventName, data) => {
-      if(eventName === AppStateEvents.EditorFocused) {
-        if (data.eventSource === EventSources.UserInteraction) {
-          this.closeAllRooms();
-          this.closeAccountMenu();
-        }
-      } else if(eventName === AppStateEvents.BeganBackupDownload) {
-        this.backupStatus = this.statusManager.addStatusFromString(
-          "Saving local backup..."
-        );
-      } else if(eventName === AppStateEvents.EndedBackupDownload) {
-        if(data.success) {
-          this.backupStatus = this.statusManager.replaceStatusWithString(
-            this.backupStatus,
-            "Successfully saved backup."
-          );
-        } else {
-          this.backupStatus = this.statusManager.replaceStatusWithString(
-            this.backupStatus,
-            "Unable to save local backup."
-          );
-        }
-        this.$timeout(() => {
-          this.backupStatus = this.statusManager.removeStatus(this.backupStatus);
-        }, 2000);
+  /** @override */
+  onAppStateEvent(eventName, data) {
+    if (eventName === AppStateEvents.EditorFocused) {
+      if (data.eventSource === EventSources.UserInteraction) {
+        this.closeAllRooms();
+        this.closeAccountMenu();
      }
-    });
+    } else if (eventName === AppStateEvents.BeganBackupDownload) {
+      this.backupStatus = this.statusManager.addStatusFromString(
+        "Saving local backup..."
+      );
+    } else if (eventName === AppStateEvents.EndedBackupDownload) {
+      if (data.success) {
+        this.backupStatus = this.statusManager.replaceStatusWithString(
+          this.backupStatus,
+          "Successfully saved backup."
+        );
+      } else {
+        this.backupStatus = this.statusManager.replaceStatusWithString(
+          this.backupStatus,
+          "Unable to save local backup."
+        );
+      }
+      this.$timeout(() => {
+        this.backupStatus = this.statusManager.removeStatus(this.backupStatus);
+      }, 2000);
+    }
  }

-  addAppEventObserver() {
-    this.application.addEventObserver((eventName) => {
-      if (eventName === ApplicationEvents.LoadedLocalData) {
-        if(this.offline && this.application.getNoteCount() === 0) {
-          this.showAccountMenu = true;
-        }
-      } else if (eventName === ApplicationEvents.EnteredOutOfSync) {
-        this.outOfSync = true;
-    } else if (eventName === ApplicationEvents.ExitedOutOfSync) {
-        this.outOfSync = false;
-    } else if (eventName === ApplicationEvents.CompletedSync) {
-        this.syncUpdated();
-        this.findErrors();
-        this.updateOfflineStatus();
-    } else if (eventName === ApplicationEvents.FailedSync) {
-        this.findErrors();
-        this.updateOfflineStatus();
+  /** @override */
+  onApplicationEvent(eventName) {
+    if (eventName === ApplicationEvents.LoadedLocalData) {
+      if (this.offline && this.application.getNoteCount() === 0) {
+        this.showAccountMenu = true;
      }
-    });
+    } else if (eventName === ApplicationEvents.EnteredOutOfSync) {
+      this.outOfSync = true;
+    } else if (eventName === ApplicationEvents.ExitedOutOfSync) {
+      this.outOfSync = false;
+    } else if (eventName === ApplicationEvents.CompletedSync) {
+      this.syncUpdated();
+      this.findErrors();
+      this.updateOfflineStatus();
+    } else if (eventName === ApplicationEvents.FailedSync) {
+      this.findErrors();
+      this.updateOfflineStatus();
+    }
  }

  streamItems() {
@@ -136,7 +133,7 @@ class FooterCtrl {
        }).filter((candidate) => {
          return candidate.area === 'rooms' && !candidate.deleted;
        });
-        if(this.queueExtReload) {
+        if (this.queueExtReload) {
          this.queueExtReload = false;
          this.reloadExtendedData();
        }
@@ -159,7 +156,7 @@ class FooterCtrl {
        });
        const differ = themes.length !== this.themesWithIcons.length;
        this.themesWithIcons = themes;
-        if(differ) {
+        if (differ) {
          this.reloadDockShortcuts();
        }
      }
@@ -170,14 +167,14 @@ class FooterCtrl {
    this.application.componentManager.registerHandler({
      identifier: "roomBar",
      areas: ["rooms", "modal"],
-      activationHandler: (component) => {},
+      activationHandler: (component) => { },
      actionHandler: (component, action, data) => {
-        if(action === "set-size") {
+        if (action === "set-size") {
          component.setLastSize(data);
        }
      },
      focusHandler: (component, focused) => {
-        if(component.isEditor() && focused) {
+        if (component.isEditor() && focused) {
          this.closeAllRooms();
          this.closeAccountMenu();
        }
@@ -186,7 +183,7 @@ class FooterCtrl {
  }

  reloadExtendedData() {
-    if(this.reloadInProgress) {
+    if (this.reloadInProgress) {
      return;
    }
    this.reloadInProgress = true;
@@ -198,7 +195,7 @@ class FooterCtrl {
    const extWindow = this.rooms.find((room) => {
      return room.package_info.identifier === this.nativeExtManager.extManagerId;
    });
-    if(!extWindow) {
+    if (!extWindow) {
      this.queueExtReload = true;
      this.reloadInProgress = false;
      return;
@@ -249,7 +246,7 @@ class FooterCtrl {
      this.$timeout(() => {
        this.isRefreshing = false;
      }, 200);
-      if(response && response.error) {
+      if (response && response.error) {
        this.application.alertManager.alert({
          text: STRING_GENERIC_SYNC_ERROR
        });
@@ -276,10 +273,10 @@ class FooterCtrl {

  reloadDockShortcuts() {
    const shortcuts = [];
-    for(const theme of this.themesWithIcons) {
+    for (const theme of this.themesWithIcons) {
      const name = theme.content.package_info.name;
      const icon = theme.content.package_info.dock_icon;
-      if(!icon) {
+      if (!icon) {
        continue;
      }
      shortcuts.push({
@@ -293,11 +290,11 @@ class FooterCtrl {
      /** Circles first, then images */
      const aType = a.icon.type;
      const bType = b.icon.type;
-      if(aType === bType) {
+      if (aType === bType) {
        return 0;
-      } else if(aType === 'circle' && bType === 'svg') {
+      } else if (aType === 'circle' && bType === 'svg') {
        return -1;
-      } else if(bType === 'circle' && aType === 'svg') {
+      } else if (bType === 'circle' && aType === 'svg') {
        return 1;
      }
    });
@@ -321,7 +318,7 @@ class FooterCtrl {
  }

  closeAllRooms() {
-    for(const room of this.rooms) {
+    for (const room of this.rooms) {
      room.showRoom = false;
    }
  }
@@ -333,11 +330,11 @@ class FooterCtrl {
      });
    };

-    if(!room.showRoom) {
+    if (!room.showRoom) {
      const requiresPrivilege = await this.application.privilegesManager.actionRequiresPrivilege(
        ProtectedActions.ManageExtensions
      );
-      if(requiresPrivilege) {
+      if (requiresPrivilege) {
        this.godService.presentPrivilegesModal(
          ProtectedActions.ManageExtensions,
          run
@@ -351,7 +348,7 @@ class FooterCtrl {
  }

  clickOutsideAccountMenu() {
-    if(this.godService.authenticationInProgress()) {
+    if (this.godService.authenticationInProgress()) {
      return;
    }
    this.showAccountMenu = false;
--- a/app/assets/javascripts/controllers/lockScreen.js
+++ b/app/assets/javascripts/controllers/lockScreen.js
@@ -1,21 +1,19 @@
 import template from '%/lock-screen.pug';
 import { AppStateEvents } from '@/state';
+import { PureCtrl } from './abstract/pure_ctrl';

 const ELEMENT_ID_PASSCODE_INPUT = 'passcode-input';

-class LockScreenCtrl {
+class LockScreenCtrl extends PureCtrl {
  /* @ngInject */
  constructor(
    $scope,
+    $timeout,
    application,
    appState
  ) {
-    this.$scope = $scope;
-    this.application = application;
-    this.appState = appState;
+    super($scope, $timeout, application, appState);
    this.formData = {};
-    this.addVisibilityObserver();
-    this.addDestroyHandler();
  }

  $onInit() {
@@ -30,25 +28,18 @@ class LockScreenCtrl {
    );
  }

-  addDestroyHandler() {
-    this.$scope.$on('$destroy', () => {
-      this.unregisterObserver();
-    });
-  }
-
-  addVisibilityObserver() {
-    this.unregisterObserver = this.appState.addObserver((eventName, data) => {
-      if (eventName === AppStateEvents.WindowDidFocus) {
-        const input = this.passcodeInput;
-        if(input) {
-          input.focus();
-        }
+  /** @override */
+  async onAppStateEvent(eventName, data) {
+    if (eventName === AppStateEvents.WindowDidFocus) {
+      const input = this.passcodeInput;
+      if (input) {
+        input.focus();
      }
-    });
+    }
  }

  async submitPasscodeForm($event) {
-    if(
+    if (
      !this.formData.passcode ||
      this.formData.passcode.length === 0
    ) {
--- a/app/assets/javascripts/controllers/notes/notes.js
+++ b/app/assets/javascripts/controllers/notes/notes.js
@@ -32,6 +32,7 @@ class NotesCtrl extends PureCtrl {

  /* @ngInject */
  constructor(
+    $scope,
    $timeout,
    $rootScope,
    application,
@@ -40,7 +41,7 @@ class NotesCtrl extends PureCtrl {
    keyboardManager,
    preferencesManager,
  ) {
-    super($timeout);
+    super($scope, $timeout, application, appState);
    this.$rootScope = $rootScope;
    this.application = application;
    this.appState = appState;
@@ -68,58 +69,53 @@ class NotesCtrl extends PureCtrl {
        keepCurrentIfLarger: true
      });
    };
-
-    this.addAppStateObserver();
-    this.addAppEventObserver();
    this.resetPagination();
    this.registerKeyboardShortcuts();
    angular.element(document).ready(() => {
      this.reloadPreferences();
    });
-    application.onReady(() => {
+    application.onUnlock(() => {
      this.streamNotesAndTags();
      this.reloadPreferences();
    });
  }

-  addAppStateObserver() {
-    this.appState.addObserver((eventName, data) => {
-      if (eventName === AppStateEvents.TagChanged) {
-        this.handleTagChange(this.appState.getSelectedTag(), data.previousTag);
-      } else if (eventName === AppStateEvents.NoteChanged) {
-        this.handleNoteSelection(this.appState.getSelectedNote());
-      } else if (eventName === AppStateEvents.PreferencesChanged) {
-        this.reloadPreferences();
-        this.reloadNotes();
-      } else if (eventName === AppStateEvents.EditorFocused) {
-        this.setShowMenuFalse();
-      }
-    });
+  /** @override */
+  onAppStateEvent(eventName, data) {
+    if (eventName === AppStateEvents.TagChanged) {
+      this.handleTagChange(this.appState.getSelectedTag(), data.previousTag);
+    } else if (eventName === AppStateEvents.NoteChanged) {
+      this.handleNoteSelection(this.appState.getSelectedNote());
+    } else if (eventName === AppStateEvents.PreferencesChanged) {
+      this.reloadPreferences();
+      this.reloadNotes();
+    } else if (eventName === AppStateEvents.EditorFocused) {
+      this.setShowMenuFalse();
+    }
  }

-  addAppEventObserver() {
-    this.application.addEventObserver((eventName) => {
-      if (eventName === ApplicationEvents.SignedIn) {
-        /** Delete dummy note if applicable */
-        if (this.state.selectedNote && this.state.selectedNote.dummy) {
-          this.application.deleteItemLocally({ item: this.state.selectedNote });
-          this.selectNote(null).then(() => {
-            this.reloadNotes();
-          });
-          /**
-           * We want to see if the user will download any items from the server.
-           * If the next sync completes and our notes are still 0,
-           * we need to create a dummy.
-           */
-          this.createDummyOnSynCompletionIfNoNotes = true;
-        }
-      } else if (eventName === ApplicationEvents.CompletedSync) {
-        if (this.createDummyOnSynCompletionIfNoNotes && this.state.notes.length === 0) {
-          this.createDummyOnSynCompletionIfNoNotes = false;
-          this.createNewNote();
-        }
+  /** @override */
+  onApplicationEvent(eventName) {
+    if (eventName === ApplicationEvents.SignedIn) {
+      /** Delete dummy note if applicable */
+      if (this.state.selectedNote && this.state.selectedNote.dummy) {
+        this.application.deleteItemLocally({ item: this.state.selectedNote });
+        this.selectNote(null).then(() => {
+          this.reloadNotes();
+        });
+        /**
+         * We want to see if the user will download any items from the server.
+         * If the next sync completes and our notes are still 0,
+         * we need to create a dummy.
+         */
+        this.createDummyOnSynCompletionIfNoNotes = true;
      }
-    });
+    } else if (eventName === ApplicationEvents.CompletedSync) {
+      if (this.createDummyOnSynCompletionIfNoNotes && this.state.notes.length === 0) {
+        this.createDummyOnSynCompletionIfNoNotes = false;
+        this.createNewNote();
+      }
+    }
  }

  streamNotesAndTags() {
@@ -157,11 +153,9 @@ class NotesCtrl extends PureCtrl {
      }
      await this.selectNote(null);
    }
-
    await this.setState({
      tag: tag
    });
-
    this.resetScrollPosition();
    this.setShowMenuFalse();
    this.setNoteFilterText('');
@@ -348,7 +342,7 @@ class NotesCtrl extends PureCtrl {

  resetPagination({ keepCurrentIfLarger } = {}) {
    const clientHeight = document.documentElement.clientHeight;
-    this.pageSize = clientHeight / MIN_NOTE_CELL_HEIGHT;
+    this.pageSize = Math.ceil(clientHeight / MIN_NOTE_CELL_HEIGHT);
    if (this.pageSize === 0) {
      this.pageSize = DEFAULT_LIST_NUM_NOTES;
    }
--- a/app/assets/javascripts/controllers/root.js
+++ b/app/assets/javascripts/controllers/root.js
@@ -17,41 +17,36 @@ class RootCtrl extends PureCtrl {
  /* @ngInject */
  constructor(
    $location,
+    $scope,
    $rootScope,
    $timeout,
    application,
    appState,
    desktopManager,
    lockManager,
-    preferencesManager,
-    themeManager /** Unused below, required to load globally */,
+    preferencesManager /** Unused below, required to load globally */,
+    themeManager,
    statusManager,
  ) {
-    super($timeout);
+    super($scope, $timeout, application, appState);
    this.$location = $location;
    this.$rootScope = $rootScope;
-    this.$timeout = $timeout;
-    this.application = application;
-    this.appState = appState;
    this.desktopManager = desktopManager;
    this.lockManager = lockManager;
-    this.preferencesManager = preferencesManager;
    this.statusManager = statusManager;
+    this.themeManager = themeManager;
    this.platformString = getPlatformString();
    this.state = {
-      needsUnlock: false,
+      needsUnlock: true,
      appClass: ''
    };
    this.loadApplication();
-    this.addAppStateObserver();
    this.addDragDropHandlers();
-
-    application.onReady(() => {
+    application.onUnlock(() => {
      this.handleAutoSignInFromParams();
    });
-
    this.lockScreenPuppet = {
-      focusInput: () => {}
+      focusInput: () => { }
    };
  }

@@ -77,8 +72,8 @@ class RootCtrl extends PureCtrl {
          return this.watchLockscreenValue();
        },
        handleChallengeFailures: (responses) => {
-          for(const response of responses) {
-            if(response.challenge === Challenges.LocalPasscode) {
+          for (const response of responses) {
+            if (response.challenge === Challenges.LocalPasscode) {
              this.application.alertManager.alert({
                text: "Invalid passcode. Please try again.",
                onClose: () => {
@@ -87,16 +82,13 @@ class RootCtrl extends PureCtrl {
              });
            }
          }
-        },
-        onReady: async () => {
-          await this.appState.setApplicationReady();
        }
      }
    });
    await this.application.launch();
    this.setState({ needsUnlock: false });
    this.application.componentManager.setDesktopManager(this.desktopManager);
-    this.preferencesManager.initialize();
+    this.application.registerService(this.themeManager);
    // this.addSyncStatusObserver();
    // this.addSyncEventHandler();
  }
@@ -105,25 +97,24 @@ class RootCtrl extends PureCtrl {
    this.$rootScope.$broadcast('new-update-available');
  };

-  addAppStateObserver() {
-    this.appState.addObserver(async (eventName, data) => {
-      if (eventName === AppStateEvents.PanelResized) {
-        if (data.panel === PANEL_NAME_NOTES) {
-          this.notesCollapsed = data.collapsed;
-        }
-        if (data.panel === PANEL_NAME_TAGS) {
-          this.tagsCollapsed = data.collapsed;
-        }
-        let appClass = "";
-        if (this.notesCollapsed) { appClass += "collapsed-notes"; }
-        if (this.tagsCollapsed) { appClass += " collapsed-tags"; }
-        this.setState({ appClass });
-      } else if (eventName === AppStateEvents.WindowDidFocus) {
-        if (!(await this.application.isPasscodeLocked())) {
-          this.application.sync();
-        }
+  /** @override */
+  async onAppStateEvent(eventName, data) {
+    if (eventName === AppStateEvents.PanelResized) {
+      if (data.panel === PANEL_NAME_NOTES) {
+        this.notesCollapsed = data.collapsed;
      }
-    });
+      if (data.panel === PANEL_NAME_TAGS) {
+        this.tagsCollapsed = data.collapsed;
+      }
+      let appClass = "";
+      if (this.notesCollapsed) { appClass += "collapsed-notes"; }
+      if (this.tagsCollapsed) { appClass += " collapsed-tags"; }
+      this.setState({ appClass });
+    } else if (eventName === AppStateEvents.WindowDidFocus) {
+      if (!(await this.application.isPasscodeLocked())) {
+        this.application.sync();
+      }
+    }
  }

  // addSyncStatusObserver() {
--- a/app/assets/javascripts/controllers/tags.js
+++ b/app/assets/javascripts/controllers/tags.js
@@ -9,26 +9,24 @@ import { PureCtrl } from '@Controllers';
 class TagsPanelCtrl extends PureCtrl {
  /* @ngInject */
  constructor(
+    $scope,
    $rootScope,
    $timeout,
    application,
    appState,
    preferencesManager
  ) {
-    super($timeout);
+    super($scope, $timeout, application, appState);
    this.$rootScope = $rootScope;
-    this.application = application;
-    this.appState = appState;
    this.preferencesManager = preferencesManager;
    this.panelController = {};
-    this.addAppStateObserver();
    this.loadPreferences();
    this.registerComponentHandler();
    this.state = {
      smartTags: [],
      noteCounts: {}
    };
-    application.onReady(() => {
+    application.onUnlock(() => {
      this.beginStreamingItems();
      const smartTags = this.application.getSmartTags();
      this.setState({
@@ -64,16 +62,15 @@ class TagsPanelCtrl extends PureCtrl {
    });
  }

-  addAppStateObserver() {
-    this.appState.addObserver((eventName, data) => {
-      if (eventName === AppStateEvents.PreferencesChanged) {
-        this.loadPreferences();
-      } else if (eventName === AppStateEvents.TagChanged) {
-        this.setState({
-          selectedTag: this.appState.getSelectedTag()
-        });
-      }
-    });
+  /** @override */
+  onAppStateEvent(eventName, data) {
+    if (eventName === AppStateEvents.PreferencesChanged) {
+      this.loadPreferences();
+    } else if (eventName === AppStateEvents.TagChanged) {
+      this.setState({
+        selectedTag: this.appState.getSelectedTag()
+      });
+    }
  }

  reloadNoteCounts() {
--- a/app/assets/javascripts/directives/views/accountMenu.js
+++ b/app/assets/javascripts/directives/views/accountMenu.js
@@ -40,10 +40,8 @@ class AccountMenuCtrl extends PureCtrl {
    godService,
    lockManager,
  ) {
-    super($timeout);
-    this.$scope = $scope;
+    super($scope, $timeout, application, appState);
    this.$rootScope = $rootScope;
-    this.$timeout = $timeout;
    this.appState = appState;
    this.application = application;
    this.archiveManager = archiveManager;
@@ -59,7 +57,7 @@ class AccountMenuCtrl extends PureCtrl {
      },
      mutable: {}
    };
-    application.onReady(async () => {
+    application.onUnlock(async () => {
      this.setState(await this.refreshedCredentialState());
      this.loadHost();
      this.checkForSecurityUpdate();
--- a/app/assets/javascripts/directives/views/actionsMenu.js
+++ b/app/assets/javascripts/directives/views/actionsMenu.js
@@ -4,13 +4,13 @@ import { PureCtrl } from '@Controllers';
 class ActionsMenuCtrl extends PureCtrl {
  /* @ngInject */
  constructor(
+    $scope,
    $timeout,
    application,
+    appState,
    godService
  ) {
-    super($timeout);
-    this.$timeout = $timeout;
-    this.application = application;
+    super($scope, $timeout, application, appState);
    this.godService = godService;
  }

--- a/app/assets/javascripts/directives/views/editorMenu.js
+++ b/app/assets/javascripts/directives/views/editorMenu.js
@@ -5,11 +5,12 @@ import { PureCtrl } from '@Controllers';
 class EditorMenuCtrl extends PureCtrl {
  /* @ngInject */
  constructor(
+    $scope,
    $timeout,
-    application
+    application,
+    appState
  ) {
-    super($timeout);
-    this.application = application;
+    super($scope, $timeout, application, appState);
    this.state = {
      isDesktop: isDesktopApplication()
    };
--- a/app/assets/javascripts/directives/views/privilegesManagementModal.js
+++ b/app/assets/javascripts/directives/views/privilegesManagementModal.js
@@ -11,7 +11,7 @@ class PrivilegesManagementModalCtrl {
    this.$element = $element;
    this.$timeout = $timeout;
    this.application = application;
-    application.onReady(() => {
+    application.onUnlock(() => {
      this.hasPasscode = application.hasPasscode();
      this.hasAccount = !application.noAccount();
      this.reloadPrivileges();
--- a/app/assets/javascripts/services/nativeExtManager.js
+++ b/app/assets/javascripts/services/nativeExtManager.js
@@ -15,8 +15,9 @@ export class NativeExtManager {
    this.resolveExtensionsManager();
    this.resolveBatchManager();

-    application.onReady(() => {
-      this.initialize();
+    application.onUnlock(() => {
+      this.resolveExtensionsManager();
+      this.resolveBatchManager();
    });
  }

@@ -24,11 +25,6 @@ export class NativeExtManager {
    return this.systemExtensions.includes(extension.uuid);
  }

-  async initialize() {
-    this.resolveExtensionsManager();
-    this.resolveBatchManager();
-  }
-
  extensionsManagerTemplatePayload() {
    const url = window._extensions_manager_location;
    if (!url) {
--- a/app/assets/javascripts/services/preferencesManager.js
+++ b/app/assets/javascripts/services/preferencesManager.js
@@ -1,5 +1,4 @@
 import { SFPredicate, CreateMaxPayloadFromAnyObject } from 'snjs';
-import { AppStateEvents } from '../state';

 export const PrefKeys = {
  TagsPanelWidth: 'tagsPanelWidth',
@@ -26,16 +25,12 @@ export class PreferencesManager {
  ) {
    this.application = application;
    this.appState = appState;
-    application.onReady(() => {
-      this.initialize();
+    application.onUnlock(() => {
+      this.streamPreferences();
+      this.loadSingleton();
    });
  }

-  async initialize() {
-    this.streamPreferences();
-    await this.loadSingleton();
-  }
-
  streamPreferences() {
    this.application.streamItems({
      contentType: 'SN|UserPreferences',
--- a/app/assets/javascripts/services/themeManager.js
+++ b/app/assets/javascripts/services/themeManager.js
@@ -1,33 +1,40 @@
 import _ from 'lodash';
-import { ContentTypes, StorageValueModes, EncryptionIntents } from 'snjs';
+import { ContentTypes, StorageValueModes, EncryptionIntents, PureService } from 'snjs';
 import { AppStateEvents } from '@/state';

 const CACHED_THEMES_KEY = 'cachedThemes';

-export class ThemeManager {
+export class ThemeManager extends PureService {
  /* @ngInject */
  constructor(
    application,
    appState,
    desktopManager,
  ) {
+    super();
    this.application = application;
    this.appState = appState;
    this.desktopManager = desktopManager;
    this.activeThemes = [];
    this.registerObservers();
-    application.onReady(() => {
+    application.onStart(() => {
      if (!desktopManager.isDesktop) {
        this.activateCachedThemes();
      }
    });
-    appState.addObserver((eventName, data) => {
+    this.unsubState = appState.addObserver((eventName, data) => {
      if (eventName === AppStateEvents.DesktopExtsReady) {
        this.activateCachedThemes();
      }
    });
  }

+  /** @override */
+  async deinit() {
+    super.deinit();
+    this.unsubState();
+  }
+
  async activateCachedThemes() {
    const cachedThemes = await this.getCachedThemes();
    const writeToCache = false;
--- a/app/assets/javascripts/state.js
+++ b/app/assets/javascripts/state.js
@@ -13,8 +13,6 @@ export const AppStateEvents = {
  DesktopExtsReady: 8,
  WindowDidFocus: 9,
  WindowDidBlur: 10,
-  /** Register observers and streamers on this event */
-  ApplicationReady: 11
 };

 export const EventSources = {
@@ -80,11 +78,6 @@ export class AppState {
    });
  }

-  async setApplicationReady() {
-    this.applicationReady = true;
-    await this.notifyEvent(AppStateEvents.ApplicationReady);
-  }
-
  setSelectedTag(tag) {
    if (this.selectedTag === tag) {
      return;
@@ -93,7 +86,10 @@ export class AppState {
    this.selectedTag = tag;
    this.notifyEvent(
      AppStateEvents.TagChanged,
-      { previousTag: previousTag }
+      { 
+        tag: tag,
+        previousTag: previousTag 
+      }
    );
  }

--- a/app/assets/templates/notes.pug
+++ b/app/assets/templates/notes.pug
@@ -109,9 +109,9 @@
        threshold='200'
        )
        .note(
-          ng-class="{'selected' : self.state.selectedNote == note}",
-          ng-click='self.selectNote(note, true)', 
          ng-repeat='note in self.state.renderedNotes track by note.uuid'
+          ng-class="{'selected' : self.state.selectedNote == note}"
+          ng-click='self.selectNote(note, true)'
        )
          .note-flags(ng-show='note.flags.length > 0')
            .flag(ng-class='flag.class', ng-repeat='flag in note.flags')
--- a/dist/javascripts/app.js
+++ b/dist/javascripts/app.js
--- a/dist/javascripts/app.js.map
+++ b/dist/javascripts/app.js.map