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

app/assets/javascripts/Components/FileContextMenu/FileContextMenu.tsx

@@ -27,7 +27,7 @@ export const FileContextMenu: FunctionComponent<Props> = observer(({ appState })
   const [closeOnBlur] = useCloseOnBlur(contextMenuRef, (open: boolean) => setShowFileContextMenu(open))
   useCloseOnClickOutside(contextMenuRef, () => appState.files.setShowFileContextMenu(false))
 
-  const selectedFile = Object.values(selectedFiles)[0]
+  const selectedFile = selectedFiles[0]
   if (!showFileContextMenu || !selectedFile) {
     return null
   }

app/assets/javascripts/Components/MultipleSelectedNotes/MultipleSelectedNotes.tsx

@@ -4,6 +4,8 @@ import { observer } from 'mobx-react-lite'
 import { NotesOptionsPanel } from '@/Components/NotesOptions/NotesOptionsPanel'
 import { WebApplication } from '@/UIModels/Application'
 import { PinNoteButton } from '@/Components/PinNoteButton/PinNoteButton'
+import { Button } from '../Button/Button'
+import { useCallback } from 'preact/hooks'
 
 type Props = {
   application: WebApplication
@@ -13,6 +15,10 @@ type Props = {
 export const MultipleSelectedNotes = observer(({ application, appState }: Props) => {
   const count = appState.notes.selectedNotesCount
 
+  const cancelMultipleSelection = useCallback(() => {
+    appState.selectedItems.cancelMultipleSelection()
+  }, [appState])
+
   return (
     <div className="flex flex-col h-full items-center">
       <div className="flex items-center justify-between p-4 w-full">
@@ -28,6 +34,9 @@ export const MultipleSelectedNotes = observer(({ application, appState }: Props)
         <IlNotesIcon className="block" />
         <h2 className="text-lg m-0 text-center mt-4">{count} selected notes</h2>
         <p className="text-sm mt-2 text-center max-w-60">Actions will be performed on all selected notes.</p>
+        <Button className="mt-2.5" onClick={cancelMultipleSelection}>
+          Cancel multiple selection
+        </Button>
       </div>
     </div>
   )

app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx

@@ -185,7 +185,7 @@ export const NotesOptions = observer(({ application, appState, closeOnBlur }: No
     return notesMatchingAttribute.length > notesNotMatchingAttribute.length
   }
 
-  const notes = Object.values(appState.notes.selectedNotes)
+  const notes = appState.notes.selectedNotes
   const hidePreviews = toggleOn((note) => note.hidePreview)
   const locked = toggleOn((note) => note.locked)
   const protect = toggleOn((note) => note.protected)

app/assets/javascripts/Components/PinNoteButton/PinNoteButton.tsx

@@ -18,7 +18,7 @@ export const PinNoteButton: FunctionComponent<Props> = observer(
       return null
     }
 
-    const notes = Object.values(appState.notes.selectedNotes)
+    const notes = appState.notes.selectedNotes
     const pinned = notes.some((note) => note.pinned)
 
     const togglePinned = useCallback(async () => {