refactor: migrate remaining angular components to react (#833)

* refactor: menuRow directive to MenuRow component

* refactor: migrate footer to react

* refactor: migrate actions menu to react

* refactor: migrate history menu to react

* fix: click outside handler use capture to trigger event before re-render occurs which would otherwise cause node.contains to return incorrect result (specifically for the account menu)

* refactor: migrate revision preview modal to react

* refactor: migrate permissions modal to react

* refactor: migrate password wizard to react

* refactor: remove unused input modal directive

* refactor: remove unused delay hide component

* refactor: remove unused filechange directive

* refactor: remove unused elemReady directive

* refactor: remove unused sn-enter directive

* refactor: remove unused lowercase directive

* refactor: remove unused autofocus directive

* refactor(wip): note view to react

* refactor: use mutation observer to deinit textarea listeners

* refactor: migrate challenge modal to react

* refactor: migrate note group view to react

* refactor(wip): migrate remaining classes

* fix: navigation parent ref

* refactor: fully remove angular assets

* fix: account switcher

* fix: application view state

* refactor: remove unused password wizard type

* fix: revision preview and permissions modal

* fix: remove angular comment

* refactor: react panel resizers for editor

* feat: simple panel resizer

* fix: use simple panel resizer everywhere

* fix: simplify panel resizer state

* chore: rename simple panel resizer to panel resizer

* refactor: simplify column layout

* fix: editor mount safety check

* fix: use inline onLoad callback for iframe, as setting onload after it loads will never call it

* chore: fix note view test

* chore(deps): upgrade snjs

app/assets/javascripts/ui_models/app_state/account_menu_state.ts

@@ -77,6 +77,7 @@ export class AccountMenuState {
         runInAction(() => {
           if (isDev && window._devAccountServer) {
             this.setServer(window._devAccountServer);
+            this.application.setCustomHost(window._devAccountServer);
           } else {
             this.setServer(this.application.getHost());
           }

app/assets/javascripts/ui_models/app_state/app_state.ts

@@ -1,6 +1,6 @@
 import { Bridge } from '@/services/bridge';
 import { storage, StorageKey } from '@/services/localStorage';
-import { WebApplication } from '@/ui_models/application';
+import { WebApplication, WebAppEvent } from '@/ui_models/application';
 import { AccountMenuState } from '@/ui_models/app_state/account_menu_state';
 import { isDesktopApplication } from '@/utils';
 import {
@@ -17,7 +17,6 @@ import {
   ComponentViewer,
   SNTag,
   NoteViewController,
-  SNTheme,
 } from '@standardnotes/snjs';
 import pull from 'lodash/pull';
 import {
@@ -68,14 +67,11 @@ export class AppState {
   readonly enableUnfinishedFeatures: boolean =
     window?._enable_unfinished_features;
 
-  $rootScope: ng.IRootScopeService;
-  $timeout: ng.ITimeoutService;
   application: WebApplication;
   observers: ObserverCallback[] = [];
   locked = true;
   unsubApp: any;
-  rootScopeCleanup1: any;
-  rootScopeCleanup2: any;
+  webAppEventDisposer?: () => void;
   onVisibilityChange: any;
   showBetaWarning: boolean;
 
@@ -105,14 +101,7 @@ export class AppState {
   private readonly foldersComponentViewerDisposer: () => void;
 
   /* @ngInject */
-  constructor(
-    $rootScope: ng.IRootScopeService,
-    $timeout: ng.ITimeoutService,
-    application: WebApplication,
-    private bridge: Bridge
-  ) {
-    this.$timeout = $timeout;
-    this.$rootScope = $rootScope;
+  constructor(application: WebApplication, private bridge: Bridge) {
     this.application = application;
     this.notes = new NotesState(
       application,
@@ -203,12 +192,8 @@ export class AppState {
     this.appEventObserverRemovers.forEach((remover) => remover());
     this.features.deinit();
     this.appEventObserverRemovers.length = 0;
-    if (this.rootScopeCleanup1) {
-      this.rootScopeCleanup1();
-      this.rootScopeCleanup2();
-      this.rootScopeCleanup1 = undefined;
-      this.rootScopeCleanup2 = undefined;
-    }
+    this.webAppEventDisposer?.();
+    this.webAppEventDisposer = undefined;
     document.removeEventListener('visibilitychange', this.onVisibilityChange);
     this.onVisibilityChange = undefined;
     this.tagChangedDisposer();
@@ -356,11 +341,7 @@ export class AppState {
             .componentsForArea(ComponentArea.TagsList)
             .find((component) => component.active);
 
-          this.application.performFunctionWithAngularDigestCycleAfterAsyncChange(
-            () => {
-              this.setFoldersComponent(componentViewer);
-            }
-          );
+          this.setFoldersComponent(componentViewer);
         }
       }
     );
@@ -437,13 +418,13 @@ export class AppState {
 
   registerVisibilityObservers() {
     if (isDesktopApplication()) {
-      this.rootScopeCleanup1 = this.$rootScope.$on('window-lost-focus', () => {
-        this.notifyEvent(AppStateEvent.WindowDidBlur);
-      });
-      this.rootScopeCleanup2 = this.$rootScope.$on(
-        'window-gained-focus',
-        () => {
-          this.notifyEvent(AppStateEvent.WindowDidFocus);
+      this.webAppEventDisposer = this.application.addWebEventObserver(
+        (event) => {
+          if (event === WebAppEvent.DesktopWindowGainedFocus) {
+            this.notifyEvent(AppStateEvent.WindowDidFocus);
+          } else if (event === WebAppEvent.DesktopWindowLostFocus) {
+            this.notifyEvent(AppStateEvent.WindowDidBlur);
+          }
         }
       );
     } else {
@@ -462,11 +443,11 @@ export class AppState {
 
   async notifyEvent(eventName: AppStateEvent, data?: any) {
     /**
-     * Timeout is particullary important so we can give all initial
+     * Timeout is particularly important so we can give all initial
      * controllers a chance to construct before propogting any events *
      */
     return new Promise<void>((resolve) => {
-      this.$timeout(async () => {
+      setTimeout(async () => {
         for (const callback of this.observers) {
           await callback(eventName, data);
         }

app/assets/javascripts/ui_models/app_state/notes_view_state.ts

@@ -45,6 +45,7 @@ export class NotesViewState {
   notesToDisplay = 0;
   pageSize = 0;
   panelTitle = 'All Notes';
+  panelWidth = 0;
   renderedNotes: SNNote[] = [];
   searchSubmitted = false;
   selectedNotes: Record<UuidString, SNNote> = {};
@@ -324,7 +325,14 @@ export class NotesViewState {
     if (displayOptionsChanged) {
       this.reloadNotesDisplayOptions();
     }
+
     this.reloadNotes();
+
+    const width = this.application.getPreference(PrefKey.NotesPanelWidth);
+    if (width) {
+      this.panelWidth = width;
+    }
+
     if (freshDisplayOptions.sortBy !== currentSortBy) {
       this.selectFirstNote();
     }
@@ -338,12 +346,9 @@ export class NotesViewState {
     }
 
     await this.appState.openNewNote(title);
-    this.application.performFunctionWithAngularDigestCycleAfterAsyncChange(
-      () => {
-        this.reloadNotes();
-        this.appState.noteTags.reloadTags();
-      }
-    );
+
+    this.reloadNotes();
+    this.appState.noteTags.reloadTags();
   };
 
   createPlaceholderNote = () => {