feat: ability to cancel multiple selection from UI (#1045)

app/assets/javascripts/UIModels/AppState/FilesState.ts

@@ -62,7 +62,7 @@ export class FilesState extends AbstractState {
     )
   }
 
-  get selectedFiles() {
+  get selectedFiles(): FileItem[] {
     return this.appState.selectedItems.getSelectedItems<FileItem>(ContentType.File)
   }
 

app/assets/javascripts/UIModels/AppState/NotesState.ts

@@ -60,12 +60,12 @@ export class NotesState extends AbstractState {
       application.streamItems<SNNote>(ContentType.Note, ({ changed, inserted, removed }) => {
         runInAction(() => {
           for (const removedNote of removed) {
-            delete this.selectedNotes[removedNote.uuid]
+            this.appState.selectedItems.deselectItem(removedNote)
           }
 
           for (const note of [...changed, ...inserted]) {
-            if (this.selectedNotes[note.uuid]) {
-              this.selectedNotes[note.uuid] = note
+            if (this.appState.selectedItems.isItemSelected(note)) {
+              this.appState.selectedItems.updateReferenceOfSelectedItem(note)
             }
           }
         })
@@ -80,14 +80,14 @@ export class NotesState extends AbstractState {
 
         for (const selectedId of selectedUuids) {
           if (!activeNoteUuids.includes(selectedId)) {
-            delete this.selectedNotes[selectedId]
+            this.appState.selectedItems.deselectItem({ uuid: selectedId })
           }
         }
       }),
     )
   }
 
-  get selectedNotes() {
+  public get selectedNotes(): SNNote[] {
     return this.appState.selectedItems.getSelectedItems<SNNote>(ContentType.Note)
   }
 
@@ -262,7 +262,7 @@ export class NotesState extends AbstractState {
       if (permanently) {
         for (const note of this.getSelectedNotesList()) {
           await this.application.mutator.deleteItem(note)
-          delete this.selectedNotes[note.uuid]
+          this.appState.selectedItems.deselectItem(note)
         }
       } else {
         await this.changeSelectedNotes((mutator) => {

app/assets/javascripts/UIModels/AppState/SelectedItemsState.ts

@@ -51,17 +51,32 @@ export class SelectedItemsState extends AbstractState {
     return Object.keys(this.selectedItems).length
   }
 
-  getSelectedItems = <T extends ListableContentItem>(contentType: ContentType) => {
-    const filteredEntries = Object.entries(this.appState.selectedItems.selectedItems).filter(
-      ([_, item]) => item.content_type === contentType,
-    ) as [UuidString, T][]
-    return Object.fromEntries<T>(filteredEntries)
+  getSelectedItems = <T extends ListableContentItem = ListableContentItem>(contentType?: ContentType): T[] => {
+    return Object.values(this.selectedItems).filter((item) => {
+      return !contentType ? true : item.content_type === contentType
+    }) as T[]
   }
 
   setSelectedItems = (selectedItems: SelectedItems) => {
     this.selectedItems = selectedItems
   }
 
+  public deselectItem = (item: { uuid: ListableContentItem['uuid'] }): void => {
+    delete this.selectedItems[item.uuid]
+
+    if (item.uuid === this.lastSelectedItem?.uuid) {
+      this.lastSelectedItem = undefined
+    }
+  }
+
+  public isItemSelected = (item: ListableContentItem): boolean => {
+    return this.selectedItems[item.uuid] != undefined
+  }
+
+  public updateReferenceOfSelectedItem = (item: ListableContentItem): void => {
+    this.selectedItems[item.uuid] = item
+  }
+
   private selectItemsRange = async (selectedItem: ListableContentItem): Promise<void> => {
     const items = this.appState.contentListView.renderedItems
 
@@ -88,6 +103,32 @@ export class SelectedItemsState extends AbstractState {
     }
   }
 
+  cancelMultipleSelection = () => {
+    this.io.cancelAllKeyboardModifiers()
+
+    const firstSelectedItem = this.getSelectedItems()[0]
+
+    if (firstSelectedItem) {
+      this.replaceSelection(firstSelectedItem)
+    } else {
+      this.deselectAll()
+    }
+  }
+
+  private replaceSelection = (item: ListableContentItem): void => {
+    this.setSelectedItems({
+      [item.uuid]: item,
+    })
+
+    this.lastSelectedItem = item
+  }
+
+  private deselectAll = (): void => {
+    this.setSelectedItems({})
+
+    this.lastSelectedItem = undefined
+  }
+
   selectItem = async (
     uuid: UuidString,
     userTriggered?: boolean,
@@ -119,10 +160,7 @@ export class SelectedItemsState extends AbstractState {
     } else {
       const shouldSelectNote = hasMoreThanOneSelected || !this.selectedItems[uuid]
       if (shouldSelectNote && isAuthorizedForAccess) {
-        this.setSelectedItems({
-          [item.uuid]: item,
-        })
-        this.lastSelectedItem = item
+        this.replaceSelection(item)
       }
     }