feat: multiple selected notes panel

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

@@ -7,9 +7,7 @@
     )
     tags-view(application='self.application')
     notes-view(application='self.application')
-    editor-group-view(
-      application='self.application'
-      )
+    editor-group-view.flex-grow(application='self.application')
 
   footer-view(
     ng-if='!self.state.needsUnlock && self.state.ready'

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

@@ -1185,7 +1185,7 @@ class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
      * (and not when our controller is destroyed.)
      */
     angular.element(editor).one('$destroy', () => {
-      this.removeTabObserver();
+      this.removeTabObserver?.();
       this.removeTabObserver = undefined;
     });
   }

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

@@ -1,7 +1,14 @@
-.flex-grow(
-  ng-repeat='editor in self.editors'
-)
-  editor-view(
+.h-full
+  multiple-selected-notes-panel.h-full(
+    app-state='self.appState'
     application='self.application'
-    editor='editor'
+    ng-if='self.state.showMultipleSelectedNotes'
   )
+  .flex-grow.h-full(
+    ng-if='!self.state.showMultipleSelectedNotes'
+    ng-repeat='editor in self.editors'
+  )
+    editor-view(
+      application='self.application'
+      editor='editor'
+    )

app/assets/javascripts/views/editor_group/editor_group_view.ts

@@ -2,16 +2,31 @@ import { WebApplication } from '@/ui_models/application';
 import { WebDirective } from './../../types';
 import template from './editor-group-view.pug';
 import { Editor } from '@/ui_models/editor';
+import { PureViewCtrl } from '../abstract/pure_view_ctrl';
 
-class EditorGroupViewCtrl {
+class EditorGroupViewCtrl extends PureViewCtrl<unknown, {
+  showMultipleSelectedNotes: boolean
+}> {
 
-  private application!: WebApplication
   public editors: Editor[] = []
 
+  /* @ngInject */
+  constructor($timeout: ng.ITimeoutService,) {
+    super($timeout);
+    this.state = {
+      showMultipleSelectedNotes: false
+    }
+  }
+
   $onInit() {
     this.application.editorGroup.addChangeObserver(() => {
       this.editors = this.application.editorGroup.editors;
     });
+    this.autorun(() => {
+      this.setState({
+        showMultipleSelectedNotes: this.appState.notes.selectedNotesCount > 1
+      });
+    });
   }
 }
 
@@ -20,7 +35,6 @@ export class EditorGroupView extends WebDirective {
     super();
     this.template = template;
     this.controller = EditorGroupViewCtrl;
-    this.replace = true;
     this.controllerAs = 'self';
     this.bindToController = true;
     this.scope = {

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

@@ -23,7 +23,6 @@ import {
 } from '@/strings';
 import { PureViewCtrl } from '@Views/abstract/pure_view_ctrl';
 import { alertDialog, confirmDialog } from '@/services/alertService';
-import { autorun, IReactionDisposer } from 'mobx';
 
 /**
  * Disable before production release.
@@ -75,7 +74,6 @@ class FooterViewCtrl extends PureViewCtrl<unknown, {
   private observerRemovers: Array<() => void> = [];
   private completedInitialSync = false;
   private showingDownloadStatus = false;
-  private autorunDisposer?: IReactionDisposer;
 
   /* @ngInject */
   constructor(
@@ -103,7 +101,6 @@ class FooterViewCtrl extends PureViewCtrl<unknown, {
     this.rootScopeListener2 = undefined;
     (this.closeAccountMenu as any) = undefined;
     (this.toggleSyncResolutionMenu as any) = undefined;
-    this.autorunDisposer?.();
     super.deinit();
   }
 
@@ -115,7 +112,7 @@ class FooterViewCtrl extends PureViewCtrl<unknown, {
       });
     });
     this.loadAccountSwitcherState();
-    this.autorunDisposer = autorun(() => {
+    this.autorun(() => {
       const showBetaWarning = this.appState.showBetaWarning;
       this.showAccountMenu = this.appState.accountMenu.show;
       this.setState({

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

@@ -1,7 +1,7 @@
 #notes-column.sn-component.section.notes(aria-label='Notes')
   .content
     #notes-title-bar.section-title-bar
-      .p-4.pt-0
+      .p-4
         .section-title-bar-header
           .sk-h2.font-semibold.title {{self.state.panelTitle}}
           .sk-button.contrast.wide(

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

@@ -297,7 +297,7 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
   }
 
   selectNote(note: SNNote): Promise<void> {
-    return this.appState.notes.selectNote(note);
+    return this.appState.notes.selectNote(note.uuid);
   }
 
   async createNewNote() {