Merge branch 'develop' into incremental-loading-actions

app/assets/javascripts/app.ts

@@ -1,7 +1,7 @@
 'use strict';
 
 declare const __VERSION__: string;
-declare const __PLATFORM_WEB__: boolean;
+declare const __WEB__: boolean;
 
 import angular from 'angular';
 import { configRoutes } from './routes';
@@ -51,22 +51,22 @@ import {
 
 import { trusted } from './filters';
 import { isDev } from './utils';
-import { Platform, WebPlatform } from './services/platform';
+import { Bridge, BrowserBridge } from './services/bridge';
 
-if (__PLATFORM_WEB__) {
-  startApplication(new WebPlatform());
+if (__WEB__) {
+  startApplication(new BrowserBridge());
 } else {
   (window as any).startApplication = startApplication;
 }
 
-function startApplication(platform: Platform) {
+function startApplication(bridge: Bridge) {
   angular.module('app', ['ngSanitize']);
 
   // Config
   angular
     .module('app')
     .config(configRoutes)
-    .constant('platform', platform)
+    .constant('bridge', bridge)
     .constant('appVersion', __VERSION__);
 
   // Controllers

app/assets/javascripts/services/platform.ts → app/assets/javascripts/services/bridge.ts

@@ -1,13 +1,13 @@
-/** Platform-specific (i-e desktop/web) behavior is handled by a Platform object. */
-export interface Platform {
+/** Platform-specific (i-e Electron/browser) behavior is handled by a Bridge object. */
+export interface Bridge {
   getKeychainValue(): Promise<unknown>;
   setKeychainValue(value: any): Promise<void>;
   clearKeychainValue(): Promise<void>;
 }
 
 const KEYCHAIN_STORAGE_KEY = 'keychain';
 
-export class WebPlatform implements Platform {
+export class BrowserBridge implements Bridge {
   async getKeychainValue(): Promise<unknown> {
     const value = localStorage.getItem(KEYCHAIN_STORAGE_KEY);
     if (value) {
@@ -21,4 +21,4 @@ export class WebPlatform implements Platform {
   async clearKeychainValue(): Promise<void> {
     localStorage.removeItem(KEYCHAIN_STORAGE_KEY);
   }
-}
+}

app/assets/javascripts/services/preferencesManager.ts

@@ -13,20 +13,25 @@ export class PreferencesManager extends ApplicationService {
 
   private userPreferences!: SNUserPrefs
   private loadingPrefs = false;
+  private unubscribeStreamItems?: () => void;
 
   /** @override */
   async onAppLaunch() {
     super.onAppLaunch();
     this.reloadSingleton();
     this.streamPreferences();
   }
+
+  deinit() {
+    this.unubscribeStreamItems && this.unubscribeStreamItems();
+  }
 
   get webApplication() {
     return this.application as WebApplication;
   }
 
   streamPreferences() {
-    this.application!.streamItems(
+    this.unubscribeStreamItems = this.application!.streamItems(
       ContentType.UserPrefs,
       () => {
         this.reloadSingleton();

app/assets/javascripts/ui_models/application.ts

@@ -13,7 +13,7 @@ import {
 import angular from 'angular';
 import { getPlatformString } from '@/utils';
 import { AlertService } from '@/services/alertService';
-import { WebDeviceInterface } from '@/interface';
+import { WebDeviceInterface } from '@/web_device_interface';
 import {
   DesktopManager,
   LockManager,
@@ -26,7 +26,7 @@ import {
 } from '@/services';
 import { AppState } from '@/ui_models/app_state';
 import { SNWebCrypto } from 'sncrypto/dist/sncrypto-web';
-import { Platform } from '@/services/platform';
+import { Bridge } from '@/services/bridge';
 
 type WebServices = {
   appState: AppState
@@ -56,13 +56,13 @@ export class WebApplication extends SNApplication {
     $timeout: ng.ITimeoutService,
     scope: ng.IScope,
     onDeinit: (app: WebApplication) => void,
-    platform: Platform,
+    bridge: Bridge,
   ) {
     const namespace = '';
     const deviceInterface = new WebDeviceInterface(
       namespace,
       $timeout,
-      platform
+      bridge
     );
     super(
       Environment.Web,

app/assets/javascripts/ui_models/application_group.ts

@@ -11,7 +11,7 @@ import {
   ThemeManager
 } from '@/services';
 import { AppState } from '@/ui_models/app_state';
-import { Platform } from '@/services/platform';
+import { Bridge } from '@/services/bridge';
 
 type AppManagerChangeCallback = () => void
 
@@ -29,7 +29,7 @@ export class ApplicationGroup {
     $compile: ng.ICompileService,
     $rootScope: ng.IRootScopeService,
     $timeout: ng.ITimeoutService,
-    private platform: Platform
+    private bridge: Bridge
   ) {
     this.$compile = $compile;
     this.$timeout = $timeout;
@@ -71,7 +71,7 @@ export class ApplicationGroup {
       this.$timeout,
       scope,
       this.onApplicationDeinit,
-      this.platform
+      this.bridge
     );
     const appState = new AppState(
       this.$rootScope,

app/assets/javascripts/views/editor/editor-view.pug

@@ -171,26 +171,27 @@
             application='self.application'
             )
         .sk-app-bar-item(
-          click-outside=`self.setMenuState('showExtensions', false)`,
-          is-open='self.state.showExtensions',
-          ng-class="{'selected' : self.state.showExtensions}",
-          ng-click="self.toggleMenu('showExtensions')"
+          click-outside=`self.setMenuState('showActionsMenu', false)`,
+          is-open='self.state.showActionsMenu',
+          ng-class="{'selected' : self.state.showActionsMenu}",
+          ng-click="self.toggleMenu('showActionsMenu')"
           )
           .sk-label Actions
           actions-menu(
             item='self.note',
-            ng-if='self.state.showExtensions',
+            ng-if='self.state.showActionsMenu',
             application='self.application'
             )
         .sk-app-bar-item(
-          click-outside=`self.setMenuState('showHistory', false)`,
-          is-open='self.state.showHistory',
-          ng-click="self.toggleMenu('showHistory')"
+          click-outside=`self.setMenuState('showHistoryMenu', false)`,
+          is-open='self.state.showHistoryMenu',
+          ng-class="{'selected' : self.state.showHistoryMenu}",
+          ng-click="self.toggleMenu('showHistoryMenu')"
           )
           .sk-label History
           history-menu(
             item='self.note',
-            ng-if='self.state.showHistory',
+            ng-if='self.state.showHistoryMenu',
             application='self.application'
             )
   #editor-content.editor-content(ng-if='!self.note.errorDecrypting')
@@ -205,7 +206,7 @@
       )
     component-view.component-view(
       component-uuid='self.state.editorComponent.uuid',
-      ng-if='self.state.editorComponent && !self.state.editorComponentUnloading',
+      ng-if='self.state.editorComponent && !self.state.editorUnloading',
       on-load='self.onEditorLoad',
       application='self.application'
       )

app/assets/javascripts/views/editor/editor_view.ts

@@ -68,10 +68,10 @@ type EditorState = {
   monospaceFont?: boolean
   isDesktop?: boolean
   syncTakingTooLong: boolean
-  showExtensions: boolean
+  showActionsMenu: boolean
   showOptionsMenu: boolean
   showEditorMenu: boolean
-  showSessionHistory: boolean
+  showHistoryMenu: boolean
   altKeyDown: boolean
   spellcheck: boolean
   /**
@@ -217,10 +217,10 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
       isDesktop: isDesktopApplication(),
       spellcheck: true,
       syncTakingTooLong: false,
-      showExtensions: false,
+      showActionsMenu: false,
       showOptionsMenu: false,
       showEditorMenu: false,
-      showSessionHistory: false,
+      showHistoryMenu: false,
       altKeyDown: false,
       noteStatus: undefined,
       editorUnloading: false,
@@ -275,10 +275,10 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
   async handleEditorNoteChange() {
     this.cancelPendingSetStatus();
     await this.setState({
-      showExtensions: false,
+      showActionsMenu: false,
       showOptionsMenu: false,
       showEditorMenu: false,
-      showSessionHistory: false,
+      showHistoryMenu: false,
       altKeyDown: false,
       noteStatus: undefined
     });
@@ -344,21 +344,25 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
     const newEditor = this.application.componentManager!.editorForNote(this.note);
     const currentEditor = this.state.editorComponent;
     if (currentEditor?.uuid !== newEditor?.uuid) {
-      if (currentEditor) {
-        await this.application.componentManager!.deactivateComponent(currentEditor.uuid);
-      }
-      await this.setState({
-        editorComponent: newEditor,
+      const unloading = this.setState({
         /** Unload current component view so that we create a new one */
         editorUnloading: true
       });
-      if (newEditor && !newEditor.active) {
-        await this.application.componentManager!.activateComponent(newEditor.uuid);
+      if (newEditor) {
+        /** Register this new editor while the editor view is reloading */
+        this.application.componentManager!.registerComponent(newEditor.uuid);
       }
-      await this.setState({
+      await unloading;
+      const reloading = this.setState({
         /** Reload component view */
-        editorUnloading: false
+        editorComponent: newEditor,
+        editorUnloading: false,
       });
+      if (currentEditor) {
+        /** Deregister the current (previous) editor while the editor view is reloading */
+        this.application.componentManager!.deregisterComponent(currentEditor.uuid);
+      }
+      await reloading;
       this.reloadFont();
     }
     this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.Editor);
@@ -379,8 +383,8 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
     const allMenus = [
       'showOptionsMenu',
       'showEditorMenu',
-      'showExtensions',
-      'showSessionHistory'
+      'showActionsMenu',
+      'showHistoryMenu',
     ];
     const menuState: any = {};
     for (const candidate of allMenus) {

app/assets/javascripts/views/notes/notes-view.pug

@@ -94,7 +94,10 @@
                   faded="self.state.hideDate"
                   label="'Date'"
                   )
-    .scrollable
+    p.empty-notes-list.faded(
+      ng-if="self.state.localDataLoaded && !self.state.renderedNotes.length"
+    ) No notes.
+    .scrollable(ng-if="self.state.renderedNotes.length")
       #notes-scrollable.infinite-scroll(
         can-load='true',
         infinite-scroll='self.paginate()',

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

@@ -28,7 +28,7 @@ import { UuidString } from '@node_modules/snjs/dist/@types/types';
 type NotesState = {
   panelTitle: string
   notes?: SNNote[]
-  renderedNotes?: SNNote[]
+  renderedNotes: SNNote[]
   sortBy?: string
   sortReverse?: boolean
   showArchived?: boolean
@@ -37,6 +37,14 @@ type NotesState = {
   hideDate?: boolean
   noteFilter: { text: string }
   mutable: { showMenu: boolean }
+  localDataLoaded: boolean
+  [WebPrefKey.TagsPanelWidth]?: number
+  [WebPrefKey.NotesPanelWidth]?: number
+  [WebPrefKey.EditorWidth]?: number
+  [WebPrefKey.EditorLeft]?: number
+  [WebPrefKey.EditorMonospaceEnabled]?: boolean
+  [WebPrefKey.EditorSpellcheck]?: boolean
+  [WebPrefKey.EditorResizersEnabled]?: boolean
 }
 
 type NoteFlag = {
@@ -53,7 +61,7 @@ const DEFAULT_LIST_NUM_NOTES = 20;
 const ELEMENT_ID_SEARCH_BAR = 'search-bar';
 const ELEMENT_ID_SCROLL_CONTAINER = 'notes-scrollable';
 
-class NotesViewCtrl extends PureViewCtrl {
+class NotesViewCtrl extends PureViewCtrl<{}, NotesState> {
 
   private panelPuppet?: PanelPuppet
   private reloadNotesPromise?: any
@@ -116,13 +124,15 @@ class NotesViewCtrl extends PureViewCtrl {
     return this.setState(state);
   }
 
-  getInitialState() {
+  getInitialState(): NotesState {
     return {
       notes: [],
       renderedNotes: [],
       mutable: { showMenu: false },
       noteFilter: { text: '' },
-    } as Partial<NotesState>;
+      panelTitle: '',
+      localDataLoaded: false,
+    };
   }
 
   async onAppLaunch() {
@@ -157,15 +167,23 @@ class NotesViewCtrl extends PureViewCtrl {
 
   /** @override */
   async onAppEvent(eventName: ApplicationEvent) {
-    if (eventName === ApplicationEvent.SignedIn) {
-      this.appState.closeAllEditors();
-      this.selectFirstNote();
-    } else if (eventName === ApplicationEvent.CompletedFullSync) {
-      this.getMostValidNotes().then((notes) => {
-        if (notes.length === 0) {
-          this.createPlaceholderNote();
-        }
-      });
+    switch (eventName) {
+      case ApplicationEvent.SignedIn:
+        this.appState.closeAllEditors();
+        this.selectFirstNote();
+        break;
+      case ApplicationEvent.CompletedFullSync:
+        this.getMostValidNotes().then((notes) => {
+          if (notes.length === 0) {
+            this.createPlaceholderNote();
+          }
+        });
+        break;
+      case ApplicationEvent.LocalDataLoaded:
+        this.setState({
+          localDataLoaded: true,
+        });
+        break;
     }
   }