feat: add right-click context menu

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

@@ -33,3 +33,6 @@
     challenge="challenge"
     on-dismiss="self.removeChallenge(challenge)"
   )
+  notes-context-menu(
+    app-state='self.appState'
+  )

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

@@ -19,44 +19,50 @@
             .sk-label.warning
               i.icon.ion-locked
               | {{self.lockText}}
-    #editor-title-bar.section-title-bar(
+    #editor-title-bar.section-title-bar.flex.items-center.justify-between.w-full(
       ng-class="{'locked' : self.noteLocked}",
       ng-show='self.note && !self.note.errorDecrypting'
       )
-      .title
-        input#note-title-editor.input(
-          ng-blur='self.onTitleBlur()',
-          ng-change='self.onTitleChange()',
-          ng-disabled='self.noteLocked',
-          ng-focus='self.onTitleFocus()',
-          ng-keyup='$event.keyCode == 13 && self.onTitleEnter($event)',
-          ng-model='self.editorValues.title',
-          select-on-focus='true',
-          spellcheck='false'
-          )
-      #save-status
-        .message(
-          ng-class="{'warning sk-bold': self.state.syncTakingTooLong, 'danger sk-bold': self.state.saveError}"
-          ) {{self.state.noteStatus.message}}
-        .desc(ng-show='self.state.noteStatus.desc') {{self.state.noteStatus.desc}}
-      .editor-tags
-        #note-tags-component-container(ng-if='self.state.tagsComponent && !self.note.errorDecrypting')
-          component-view.component-view(
-            component-uuid='self.state.tagsComponent.uuid',
-            ng-class="{'locked' : self.noteLocked}",
-            ng-style="self.noteLocked && {'pointer-events' : 'none'}",
-            application='self.application'
+      div
+        .title
+          input#note-title-editor.input(
+            ng-blur='self.onTitleBlur()',
+            ng-change='self.onTitleChange()',
+            ng-disabled='self.noteLocked',
+            ng-focus='self.onTitleFocus()',
+            ng-keyup='$event.keyCode == 13 && self.onTitleEnter($event)',
+            ng-model='self.editorValues.title',
+            select-on-focus='true',
+            spellcheck='false'
             )
-        input.tags-input(
-          ng-blur='self.onTagsInputBlur()',
-          ng-disabled='self.noteLocked',
-          ng-if='!self.state.tagsComponent',
-          ng-keyup='$event.keyCode == 13 && $event.target.blur();',
-          ng-model='self.editorValues.tagsInputValue',
-          placeholder='#tags',
-          spellcheck='false',
-          type='text'
-          )
+        .editor-tags
+          #note-tags-component-container(ng-if='self.state.tagsComponent && !self.note.errorDecrypting')
+            component-view.component-view(
+              component-uuid='self.state.tagsComponent.uuid',
+              ng-class="{'locked' : self.noteLocked}",
+              ng-style="self.notesLocked && {'pointer-events' : 'none'}",
+              application='self.application'
+              )
+          input.tags-input(
+            ng-blur='self.onTagsInputBlur()',
+            ng-disabled='self.noteLocked',
+            ng-if='!self.state.tagsComponent',
+            ng-keyup='$event.keyCode == 13 && $event.target.blur();',
+            ng-model='self.editorValues.tagsInputValue',
+            placeholder='#tags',
+            spellcheck='false',
+            type='text'
+            )
+      div.flex.items-center
+        #save-status
+          .message(
+            ng-class="{'warning sk-bold': self.state.syncTakingTooLong, 'danger sk-bold': self.state.saveError}"
+            ) {{self.state.noteStatus.message}}
+          .desc(ng-show='self.state.noteStatus.desc') {{self.state.noteStatus.desc}}
+        notes-options-panel(
+          app-state='self.appState',
+          ng-if='self.appState.notes.selectedNotesCount > 0'
+        )
     .sn-component(ng-if='self.note')
       #editor-menu-bar.sk-app-bar.no-edges
         .left

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

@@ -396,6 +396,7 @@ class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
 
   toggleMenu(menu: keyof EditorState) {
     this.setMenuState(menu, !this.state[menu]);
+    this.application.getAppState().notes.setContextMenuOpen(false);
   }
 
   closeAllMenus(exclude?: string) {

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

@@ -1,7 +1,6 @@
 .h-full
   multiple-selected-notes-panel.h-full(
     app-state='self.appState'
-    application='self.application'
     ng-if='self.state.showMultipleSelectedNotes'
   )
   .flex-grow.h-full(

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

@@ -127,6 +127,7 @@
         threshold='200'
         )
         .note(
+          ng-attr-id='note-{{note.uuid}}'
           ng-repeat='note in self.state.renderedNotes track by note.uuid'
           ng-class="{'selected' : self.isNoteSelected(note.uuid) }"
           ng-click='self.selectNote(note)'

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

@@ -126,6 +126,7 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
   deinit() {
     for (const remove of this.removeObservers) remove();
     this.removeObservers.length = 0;
+    this.removeAllContextMenuListeners();
     this.panelPuppet!.onReady = undefined;
     this.panelPuppet = undefined;
     window.removeEventListener('resize', this.onWindowResize, true);
@@ -296,8 +297,45 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
     ));
   }
 
-  selectNote(note: SNNote): Promise<void> {
-    return this.appState.notes.selectNote(note.uuid);
+  private openNotesContextMenu = (e: MouseEvent) => {
+    e.preventDefault();
+    this.application.getAppState().notes.setContextMenuPosition({
+      top: e.clientY,
+      left: e.clientX,
+    });
+    this.application.getAppState().notes.setContextMenuOpen(true);
+  }
+
+  private removeAllContextMenuListeners = () => {
+    const { selectedNotes, selectedNotesCount } = this.application.getAppState().notes;
+    if (selectedNotesCount > 0) {
+      Object.values(selectedNotes).forEach(({ uuid }) => {
+        document
+          .getElementById(`note-${uuid}`)
+          ?.removeEventListener('contextmenu', this.openNotesContextMenu);
+      });
+    }
+  }
+
+  async selectNote(note: SNNote): Promise<void> {
+    const noteElement = document.getElementById(`note-${note.uuid}`);
+    if (
+      this.application.io.activeModifiers.has(KeyboardModifier.Meta) ||
+      this.application.io.activeModifiers.has(KeyboardModifier.Ctrl)
+    ) {
+      if (this.application.getAppState().notes.selectedNotes[note.uuid]) {
+        noteElement?.removeEventListener(
+          'contextmenu',
+          this.openNotesContextMenu
+        );
+      } else {
+        noteElement?.addEventListener('contextmenu', this.openNotesContextMenu);
+      }
+    } else {
+      this.removeAllContextMenuListeners();
+      noteElement?.addEventListener('contextmenu', this.openNotesContextMenu);
+    }
+    await this.appState.notes.selectNote(note.uuid);
   }
 
   async createNewNote() {