Fixes

app/assets/javascripts/app.ts

@@ -14,7 +14,8 @@ import {
   EditorView,
   TagsView,
   NotesView,
-  FooterView
+  FooterView,
+  ChallengeModal
 } from '@/views';
 
 import {
@@ -32,7 +33,6 @@ import {
 import {
   AccountMenu,
   ActionsMenu,
-  ChallengeModal,
   ComponentModal,
   ComponentView,
   EditorMenu,

app/assets/javascripts/directives/views/componentModal.ts

@@ -5,16 +5,14 @@ import template from '%/directives/component-modal.pug';
 
 export type ComponentModalScope = {
   componentUuid: string
-  callback: () => void
-  onDismiss: (component: SNComponent) => void
+  onDismiss: () => void
   application: WebApplication
 }
 
 export class ComponentModalCtrl implements ComponentModalScope {
   $element: JQLite
   componentUuid!: string
-  callback!: () => void
-  onDismiss!: (component: SNComponent) => void
+  onDismiss!: () => void
   application!: WebApplication
   liveComponent!: LiveItem<SNComponent>
   component!: SNComponent
@@ -41,8 +39,7 @@ export class ComponentModalCtrl implements ComponentModalScope {
   }
 
   dismiss() {
-    this.onDismiss && this.onDismiss(this.component);
-    this.callback && this.callback();
+    this.onDismiss && this.onDismiss();
     const elem = this.$element;
     const scope = elem.scope();
     scope.$destroy();
@@ -60,7 +57,6 @@ export class ComponentModal extends WebDirective {
     this.bindToController = true;
     this.scope = {
       componentUuid: '=',
-      callback: '=',
       onDismiss: '&',
       application: '='
     };

app/assets/javascripts/directives/views/componentView.ts

@@ -226,6 +226,7 @@ class ComponentViewCtrl implements ComponentViewScope {
     }, avoidFlickerTimeout);
   }
 
+  /** @template */
   public getUrl() {
     const url = this.application.componentManager!.urlForComponent(this.component);
     return url;

app/assets/javascripts/directives/views/index.ts

@@ -1,6 +1,5 @@
 export { AccountMenu } from './accountMenu';
 export { ActionsMenu } from './actionsMenu';
-export { ChallengeModal } from './challengeModal';
 export { ComponentModal } from './componentModal';
 export { ComponentView } from './componentView';
 export { EditorMenu } from './editorMenu';

app/assets/javascripts/ui_models/app_state.ts

@@ -59,7 +59,6 @@ export class AppState {
     this.registerVisibilityObservers();
     this.addAppEventObserver();
     this.streamNotesAndTags();
-
     const onVisibilityChange = () => {
       const visible = document.visibilityState === "visible";
       const event = visible

app/assets/javascripts/ui_models/application.ts

@@ -97,7 +97,11 @@ export class WebApplication extends SNApplication {
     (this.scope! as any).application = undefined;
     this.scope!.$destroy();
     this.scope = undefined;
+    /** Allow our Angular directives to be destroyed and any pending digest cycles 
+     * to complete before destroying the global application instance and all its services */
+    setImmediate(() => {
       super.deinit();
+    })
   }
 
   setWebServices(services: WebServices) {

app/assets/javascripts/ui_models/component_group.ts

@@ -20,14 +20,11 @@ export class ComponentGroup {
   }
 
   get componentManager() {
-    return this.application.componentManager!;
+    return this.application?.componentManager!;
   }
 
   public deinit() {
     (this.application as any) = undefined;
-    for (const component of this.allActiveComponents()) {
-      this.componentManager.deregisterComponent(component.uuid);
-    }
   }
 
   async activateComponent(component: SNComponent) {
@@ -50,11 +47,17 @@ export class ComponentGroup {
       return;
     }
     removeFromArray(this.activeComponents, component.uuid);
+    /** If this function is called as part of global application deinit (locking),
+     * componentManager can be destroyed. In this case, it's harmless to not take any 
+     * action since the componentManager will be destroyed, and the component will 
+     * essentially be deregistered. */
+    if(this.componentManager) {
       await this.componentManager.deactivateComponent(component.uuid);
       if(notify) {
         this.notifyObservers();
       }
     }
+  }
 
   async deactivateComponentForArea(area: ComponentArea) {
     const component = this.activeComponentForArea(area);

app/assets/javascripts/ui_models/editor_group.ts

@@ -59,6 +59,9 @@ export class EditorGroup {
     if (this.activeEditor) {
       callback();
     }
+    return () => {
+      removeFromArray(this.changeObservers, callback);
+    }
   }
 
   private notifyObservers() {

app/assets/javascripts/views/challenge_modal/challenge_modal.ts

@@ -1,6 +1,5 @@
-import { WebDirective } from './../../types';
 import { WebApplication } from '@/ui_models/application';
-import template from '%/directives/challenge-modal.pug';
+import template from './challenge-modal.pug';
 import {
   ChallengeType,
   ChallengeValue,
@@ -9,6 +8,7 @@ import {
   ChallengeOrchestrator
 } from 'snjs';
 import { PureViewCtrl } from '@Views/abstract/pure_view_ctrl';
+import { WebDirective } from '@/types';
 
 type InputValue = {
   value: string
@@ -129,11 +129,11 @@ class ChallengeModalCtrl extends PureViewCtrl implements ChallengeModalScope {
     if (!this.validate()) {
       return;
     }
-    this.setState({ processing: true });
+    await this.setState({ processing: true });
     const values = [];
     for (const key of Object.keys(this.getState().values)) {
       const type = Number(key) as ChallengeType;
-      if (!this.getState().values[type]!.invalid) {
+      if (this.getState().values[type]!.invalid) {
         continue;
       }
       const rawValue = this.getState().values[type]!.value;

app/assets/javascripts/views/footer/footer_view.ts

@@ -8,7 +8,8 @@ import {
   SNComponent,
   SNTheme,
   ComponentArea,
-  ComponentAction
+  ComponentAction,
+  topLevelCompare
 } from 'snjs';
 import template from './footer-view.pug';
 import { AppStateEvent, EventSource } from '@/ui_models/app_state';
@@ -231,11 +232,14 @@ class FooterViewCtrl extends PureViewCtrl {
       activationHandler: () => { },
       actionHandler: (component, action, data) => {
         if (action === ComponentAction.SetSize) {
+          /** Do comparison to avoid repetitive calls by arbitrary component */
+          if(!topLevelCompare(component.getLastSize(), data)) {
             this.application!.changeItem(component.uuid, (m) => {
               const mutator = m as ComponentMutator;
               mutator.setLastSize(data);
             })
           }
+        }
       },
       focusHandler: (component, focused) => {
         if (component.isEditor() && focused) {

app/assets/javascripts/views/index.ts

@@ -1,11 +1,9 @@
 export { PureViewCtrl } from './abstract/pure_view_ctrl';
-
 export { ApplicationGroupView } from './application_group/application_group_view';
 export { ApplicationView } from './application/application_view';
-
 export { EditorGroupView } from './editor_group/editor_group_view';
 export { EditorView } from './editor/editor_view';
-
 export { FooterView } from './footer/footer_view';
 export { NotesView } from './notes/notes_view';
 export { TagsView } from './tags/tags_view';
+export { ChallengeModal } from './challenge_modal/challenge_modal'

app/assets/javascripts/views/notes/notes_view.ts

@@ -1,3 +1,4 @@
+import { Editor } from '@/ui_models/editor';
 import { PanelPuppet, WebDirective } from './../../types';
 import angular from 'angular';
 import template from './notes-view.pug';
@@ -26,6 +27,7 @@ type NotesState = {
   panelTitle: string
   notes?: SNNote[]
   renderedNotes?: SNNote[]
+  activeEditor: Editor
   sortBy?: string
   sortReverse?: boolean
   showArchived?: boolean
@@ -62,6 +64,7 @@ class NotesViewCtrl extends PureViewCtrl {
   private previousNoteKeyObserver: any
   private searchKeyObserver: any
   private noteFlags: Partial<Record<UuidString, NoteFlag[]>> = {}
+  private unsubEditorChange: any
 
   /* @ngInject */
   constructor($timeout: ng.ITimeoutService, ) {
@@ -77,6 +80,11 @@ class NotesViewCtrl extends PureViewCtrl {
     this.panelPuppet = {
       onReady: () => this.reloadPreferences()
     };
+    this.unsubEditorChange = this.application.editorGroup.addChangeObserver(() => {
+      this.setNotesState({
+        activeEditor: this.application.editorGroup.activeEditor
+      });
+    })
     this.onWindowResize = this.onWindowResize.bind(this);
     this.onPanelResize = this.onPanelResize.bind(this);
     window.addEventListener('resize', this.onWindowResize, true);
@@ -90,6 +98,8 @@ class NotesViewCtrl extends PureViewCtrl {
   deinit() {
     this.panelPuppet!.onReady = undefined;
     this.panelPuppet = undefined;
+    this.unsubEditorChange();
+    this.unsubEditorChange = undefined;
     window.removeEventListener('resize', this.onWindowResize, true);
     (this.onWindowResize as any) = undefined;
     (this.onPanelResize as any) = undefined;
@@ -142,9 +152,9 @@ class NotesViewCtrl extends PureViewCtrl {
     }
   }
 
-  get activeEditorNote() {
-    const activeEditor = this.appState.getActiveEditor();
-    return activeEditor && activeEditor.note;
+  /** @template */
+  public get activeEditorNote() {
+    return this.getState().activeEditor?.note;
   }
 
   public get editorNotes() {