feat: multiple files selected view (#1062)

app/assets/javascripts/Components/ApplicationView/ApplicationView.tsx

@@ -193,7 +193,10 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
         <>
           <NotesContextMenu application={application} viewControllerManager={viewControllerManager} />
           <TagsContextMenuWrapper viewControllerManager={viewControllerManager} />
-          <FileContextMenuWrapper viewControllerManager={viewControllerManager} />
+          <FileContextMenuWrapper
+            filesController={viewControllerManager.filesController}
+            selectionController={viewControllerManager.selectionController}
+          />
           <PurchaseFlowWrapper application={application} viewControllerManager={viewControllerManager} />
           <ConfirmSignoutContainer
             applicationGroup={mainApplicationGroup}

app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx

@@ -7,11 +7,9 @@ import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
-import { ChallengeReason, ContentType, FileItem, SNNote } from '@standardnotes/snjs'
+import { ContentType, FileItem, SNNote } from '@standardnotes/snjs'
-import { confirmDialog } from '@/Services/AlertService'
+import { addToast, ToastType } from '@standardnotes/stylekit'
-import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'
 import { StreamingFileReader } from '@standardnotes/filepicker'
-import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
 import AttachedFilesPopover from './AttachedFilesPopover'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { PopoverTabs } from './PopoverTabs'
@@ -105,29 +103,6 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
     await toggleAttachedFilesMenu()
   }, [toggleAttachedFilesMenu, prospectivelyShowFilesPremiumModal])
 
-  const deleteFile = async (file: FileItem) => {
-    const shouldDelete = await confirmDialog({
-      text: `Are you sure you want to permanently delete "${file.name}"?`,
-      confirmButtonStyle: 'danger',
-    })
-    if (shouldDelete) {
-      const deletingToastId = addToast({
-        type: ToastType.Loading,
-        message: `Deleting file "${file.name}"...`,
-      })
-      await application.files.deleteFile(file)
-      addToast({
-        type: ToastType.Success,
-        message: `Deleted file "${file.name}"`,
-      })
-      dismissToast(deletingToastId)
-    }
-  }
-
-  const downloadFile = async (file: FileItem) => {
-    viewControllerManager.filesController.downloadFile(file).catch(console.error)
-  }
-
   const attachFileToNote = useCallback(
     async (file: FileItem) => {
       if (!note) {
@@ -143,98 +118,6 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
     [application.items, note],
   )
 
-  const detachFileFromNote = async (file: FileItem) => {
-    if (!note) {
-      addToast({
-        type: ToastType.Error,
-        message: 'Could not attach file because selected note was deleted',
-      })
-      return
-    }
-    await application.items.disassociateFileWithNote(file, note)
-  }
-
-  const toggleFileProtection = async (file: FileItem) => {
-    let result: FileItem | undefined
-    if (file.protected) {
-      keepMenuOpen(true)
-      result = await application.mutator.unprotectFile(file)
-      keepMenuOpen(false)
-      buttonRef.current?.focus()
-    } else {
-      result = await application.mutator.protectFile(file)
-    }
-    const isProtected = result ? result.protected : file.protected
-    return isProtected
-  }
-
-  const authorizeProtectedActionForFile = async (file: FileItem, challengeReason: ChallengeReason) => {
-    const authorizedFiles = await application.protections.authorizeProtectedActionForItems([file], challengeReason)
-    const isAuthorized = authorizedFiles.length > 0 && authorizedFiles.includes(file)
-    return isAuthorized
-  }
-
-  const renameFile = async (file: FileItem, fileName: string) => {
-    await application.items.renameFile(file, fileName)
-  }
-
-  const handleFileAction = async (action: PopoverFileItemAction) => {
-    const file = action.type !== PopoverFileItemActionType.RenameFile ? action.payload : action.payload.file
-    let isAuthorizedForAction = true
-
-    if (file.protected && action.type !== PopoverFileItemActionType.ToggleFileProtection) {
-      keepMenuOpen(true)
-      isAuthorizedForAction = await authorizeProtectedActionForFile(file, ChallengeReason.AccessProtectedFile)
-      keepMenuOpen(false)
-      buttonRef.current?.focus()
-    }
-
-    if (!isAuthorizedForAction) {
-      return false
-    }
-
-    switch (action.type) {
-      case PopoverFileItemActionType.AttachFileToNote:
-        await attachFileToNote(file)
-        break
-      case PopoverFileItemActionType.DetachFileToNote:
-        await detachFileFromNote(file)
-        break
-      case PopoverFileItemActionType.DeleteFile:
-        await deleteFile(file)
-        break
-      case PopoverFileItemActionType.DownloadFile:
-        await downloadFile(file)
-        break
-      case PopoverFileItemActionType.ToggleFileProtection: {
-        const isProtected = await toggleFileProtection(file)
-        action.callback(isProtected)
-        break
-      }
-      case PopoverFileItemActionType.RenameFile:
-        await renameFile(file, action.payload.name)
-        break
-      case PopoverFileItemActionType.PreviewFile: {
-        keepMenuOpen(true)
-        const otherFiles = currentTab === PopoverTabs.AllFiles ? allFiles : attachedFiles
-        viewControllerManager.filePreviewModalController.activate(
-          file,
-          otherFiles.filter((file) => !file.protected),
-        )
-        break
-      }
-    }
-
-    if (
-      action.type !== PopoverFileItemActionType.DownloadFile &&
-      action.type !== PopoverFileItemActionType.PreviewFile
-    ) {
-      application.sync.sync().catch(console.error)
-    }
-
-    return true
-  }
-
   const [isDraggingFiles, setIsDraggingFiles] = useState(false)
   const dragCounter = useRef(0)
 
@@ -400,12 +283,11 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
           {open && (
             <AttachedFilesPopover
               application={application}
-              viewControllerManager={viewControllerManager}
+              filesController={viewControllerManager.filesController}
               attachedFiles={attachedFiles}
               allFiles={allFiles}
               closeOnBlur={closeOnBlur}
               currentTab={currentTab}
-              handleFileAction={handleFileAction}
               isDraggingFiles={isDraggingFiles}
               setCurrentTab={setCurrentTab}
             />

app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx

@@ -1,6 +1,5 @@
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 import { WebApplication } from '@/Application/Application'
-import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { FileItem } from '@standardnotes/snjs'
 import { FilesIllustration } from '@standardnotes/icons'
 import { observer } from 'mobx-react-lite'
@@ -8,29 +7,28 @@ import { Dispatch, FunctionComponent, SetStateAction, useRef, useState } from 'r
 import Button from '@/Components/Button/Button'
 import Icon from '@/Components/Icon/Icon'
 import PopoverFileItem from './PopoverFileItem'
-import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
+import { PopoverFileItemActionType } from './PopoverFileItemAction'
 import { PopoverTabs } from './PopoverTabs'
+import { FilesController } from '@/Controllers/FilesController'
 
 type Props = {
   application: WebApplication
-  viewControllerManager: ViewControllerManager
+  filesController: FilesController
   allFiles: FileItem[]
   attachedFiles: FileItem[]
   closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
   currentTab: PopoverTabs
-  handleFileAction: (action: PopoverFileItemAction) => Promise<boolean>
   isDraggingFiles: boolean
   setCurrentTab: Dispatch<SetStateAction<PopoverTabs>>
 }
 
 const AttachedFilesPopover: FunctionComponent<Props> = ({
   application,
-  viewControllerManager,
+  filesController,
   allFiles,
   attachedFiles,
   closeOnBlur,
   currentTab,
-  handleFileAction,
   isDraggingFiles,
   setCurrentTab,
 }) => {
@@ -45,20 +43,31 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
       : filesList
 
   const handleAttachFilesClick = async () => {
-    const uploadedFiles = await viewControllerManager.filesController.uploadNewFile()
+    const uploadedFiles = await filesController.uploadNewFile()
     if (!uploadedFiles) {
       return
     }
     if (currentTab === PopoverTabs.AttachedFiles) {
       uploadedFiles.forEach((file) => {
-        handleFileAction({
+        filesController
-          type: PopoverFileItemActionType.AttachFileToNote,
+          .handleFileAction({
-          payload: file,
+            type: PopoverFileItemActionType.AttachFileToNote,
-        }).catch(console.error)
+            payload: { file },
+          })
+          .catch(console.error)
       })
     }
   }
 
+  const previewHandler = (file: FileItem) => {
+    filesController
+      .handleFileAction({
+        type: PopoverFileItemActionType.PreviewFile,
+        payload: { file, otherFiles: currentTab === PopoverTabs.AllFiles ? allFiles : attachedFiles },
+      })
+      .catch(console.error)
+  }
+
   return (
     <div
       className="flex flex-col"
@@ -130,9 +139,10 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
                 key={file.uuid}
                 file={file}
                 isAttachedToNote={attachedFiles.includes(file)}
-                handleFileAction={handleFileAction}
+                handleFileAction={filesController.handleFileAction}
                 getIconType={application.iconsController.getIconForFileType}
                 closeOnBlur={closeOnBlur}
+                previewHandler={previewHandler}
               />
             )
           })

app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx

@@ -2,7 +2,15 @@ import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 import { KeyboardKey } from '@/Services/IOService'
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
 import { FileItem } from '@standardnotes/snjs'
-import { FormEventHandler, FunctionComponent, KeyboardEventHandler, useEffect, useRef, useState } from 'react'
+import {
+  FormEventHandler,
+  FunctionComponent,
+  KeyboardEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { PopoverFileItemActionType } from './PopoverFileItemAction'
 import PopoverFileSubmenu from './PopoverFileSubmenu'
@@ -15,6 +23,7 @@ const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
   handleFileAction,
   getIconType,
   closeOnBlur,
+  previewHandler,
 }) => {
   const [fileName, setFileName] = useState(file.name)
   const [isRenamingFile, setIsRenamingFile] = useState(false)
@@ -27,37 +36,48 @@ const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
     }
   }, [isRenamingFile])
 
-  const renameFile = async (file: FileItem, name: string) => {
+  const renameFile = useCallback(
-    await handleFileAction({
+    async (file: FileItem, name: string) => {
-      type: PopoverFileItemActionType.RenameFile,
+      if (name.length < 1) {
-      payload: {
+        return
-        file,
+      }
-        name,
-      },
-    })
-    setIsRenamingFile(false)
-  }
 
-  const handleFileNameInput: FormEventHandler<HTMLInputElement> = (event) => {
+      await handleFileAction({
+        type: PopoverFileItemActionType.RenameFile,
+        payload: {
+          file,
+          name,
+        },
+      })
+      setIsRenamingFile(false)
+    },
+    [handleFileAction],
+  )
+
+  const handleFileNameInput: FormEventHandler<HTMLInputElement> = useCallback((event) => {
     setFileName((event.target as HTMLInputElement).value)
-  }
+  }, [])
 
-  const handleFileNameInputKeyDown: KeyboardEventHandler = (event) => {
+  const handleFileNameInputKeyDown: KeyboardEventHandler = useCallback(
-    if (event.key === KeyboardKey.Enter) {
+    (event) => {
-      itemRef.current?.focus()
+      if (fileName.length > 0 && event.key === KeyboardKey.Enter) {
-    }
+        itemRef.current?.focus()
-  }
+      }
+    },
+    [fileName.length],
+  )
 
-  const handleFileNameInputBlur = () => {
+  const handleFileNameInputBlur = useCallback(() => {
     renameFile(file, fileName).catch(console.error)
-  }
+  }, [file, fileName, renameFile])
 
-  const clickPreviewHandler = () => {
+  const handleClick = useCallback(() => {
-    handleFileAction({
+    if (isRenamingFile) {
-      type: PopoverFileItemActionType.PreviewFile,
+      return
-      payload: file,
+    }
-    }).catch(console.error)
+
-  }
+    previewHandler(file)
+  }, [file, isRenamingFile, previewHandler])
 
   return (
     <div
@@ -65,7 +85,7 @@ const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
       className="flex items-center justify-between p-3 focus:shadow-none"
       tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
     >
-      <div onClick={clickPreviewHandler} className="flex items-center cursor-pointer">
+      <div onClick={handleClick} className="flex items-center cursor-pointer">
         {getFileIconComponent(getIconType(file.mimeType), 'w-8 h-8 flex-shrink-0')}
         <div className="flex flex-col mx-4">
           {isRenamingFile ? (
@@ -97,7 +117,7 @@ const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
         handleFileAction={handleFileAction}
         setIsRenamingFile={setIsRenamingFile}
         closeOnBlur={closeOnBlur}
-        previewHandler={clickPreviewHandler}
+        previewHandler={previewHandler}
       />
     </div>
   )

app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItemAction.tsx

@@ -14,13 +14,19 @@ export type PopoverFileItemAction =
   | {
       type: Exclude<
         PopoverFileItemActionType,
-        PopoverFileItemActionType.RenameFile | PopoverFileItemActionType.ToggleFileProtection
+        | PopoverFileItemActionType.RenameFile
+        | PopoverFileItemActionType.ToggleFileProtection
+        | PopoverFileItemActionType.PreviewFile
       >
-      payload: FileItem
+      payload: {
+        file: FileItem
+      }
     }
   | {
       type: PopoverFileItemActionType.ToggleFileProtection
-      payload: FileItem
+      payload: {
+        file: FileItem
+      }
       callback: (isProtected: boolean) => void
     }
   | {
@@ -30,3 +36,10 @@ export type PopoverFileItemAction =
         name: string
       }
     }
+  | {
+      type: PopoverFileItemActionType.PreviewFile
+      payload: {
+        file: FileItem
+        otherFiles: FileItem[]
+      }
+    }

app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItemProps.tsx

@@ -1,10 +1,21 @@
 import { IconType, FileItem } from '@standardnotes/snjs'
+import { Dispatch, SetStateAction } from 'react'
 import { PopoverFileItemAction } from './PopoverFileItemAction'
 
-export type PopoverFileItemProps = {
+type CommonProps = {
   file: FileItem
   isAttachedToNote: boolean
-  handleFileAction: (action: PopoverFileItemAction) => Promise<boolean>
+  handleFileAction: (action: PopoverFileItemAction) => Promise<{
-  getIconType(type: string): IconType
+    didHandleAction: boolean
+  }>
   closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
+  previewHandler: (file: FileItem) => void
+}
+
+export type PopoverFileItemProps = CommonProps & {
+  getIconType(type: string): IconType
+}
+
+export type PopoverFileSubmenuProps = CommonProps & {
+  setIsRenamingFile: Dispatch<SetStateAction<boolean>>
 }

app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx

@@ -1,19 +1,14 @@
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
-import { Dispatch, FunctionComponent, SetStateAction, useCallback, useEffect, useRef, useState } from 'react'
+import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import Switch from '@/Components/Switch/Switch'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
-import { PopoverFileItemProps } from './PopoverFileItemProps'
+import { PopoverFileSubmenuProps } from './PopoverFileItemProps'
 import { PopoverFileItemActionType } from './PopoverFileItemAction'
 
-type Props = Omit<PopoverFileItemProps, 'renameFile' | 'getIconType'> & {
+const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
-  setIsRenamingFile: Dispatch<SetStateAction<boolean>>
-  previewHandler: () => void
-}
-
-const PopoverFileSubmenu: FunctionComponent<Props> = ({
   file,
   isAttachedToNote,
   handleFileAction,
@@ -88,7 +83,7 @@ const PopoverFileSubmenu: FunctionComponent<Props> = ({
                 onBlur={closeOnBlur}
                 className="sn-dropdown-item focus:bg-info-backdrop"
                 onClick={() => {
-                  previewHandler()
+                  previewHandler(file)
                   closeMenu()
                 }}
               >
@@ -102,7 +97,7 @@ const PopoverFileSubmenu: FunctionComponent<Props> = ({
                   onClick={() => {
                     handleFileAction({
                       type: PopoverFileItemActionType.DetachFileToNote,
-                      payload: file,
+                      payload: { file },
                     }).catch(console.error)
                     closeMenu()
                   }}
@@ -117,7 +112,7 @@ const PopoverFileSubmenu: FunctionComponent<Props> = ({
                   onClick={() => {
                     handleFileAction({
                       type: PopoverFileItemActionType.AttachFileToNote,
-                      payload: file,
+                      payload: { file },
                     }).catch(console.error)
                     closeMenu()
                   }}
@@ -132,7 +127,7 @@ const PopoverFileSubmenu: FunctionComponent<Props> = ({
                 onClick={() => {
                   handleFileAction({
                     type: PopoverFileItemActionType.ToggleFileProtection,
-                    payload: file,
+                    payload: { file },
                     callback: (isProtected: boolean) => {
                       setIsFileProtected(isProtected)
                     },
@@ -157,7 +152,7 @@ const PopoverFileSubmenu: FunctionComponent<Props> = ({
                 onClick={() => {
                   handleFileAction({
                     type: PopoverFileItemActionType.DownloadFile,
-                    payload: file,
+                    payload: { file },
                   }).catch(console.error)
                   closeMenu()
                 }}
@@ -181,7 +176,7 @@ const PopoverFileSubmenu: FunctionComponent<Props> = ({
                 onClick={() => {
                   handleFileAction({
                     type: PopoverFileItemActionType.DeleteFile,
-                    payload: file,
+                    payload: { file },
                   }).catch(console.error)
                   closeMenu()
                 }}

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

@@ -1,20 +1,19 @@
 import { MAX_MENU_SIZE_MULTIPLIER, MENU_MARGIN_FROM_APP_BORDER } from '@/Constants/Constants'
+import { FilesController } from '@/Controllers/FilesController'
+import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
 import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
-import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
-import { PopoverFileItemAction } from '../AttachedFilesPopover/PopoverFileItemAction'
-import { PopoverTabs } from '../AttachedFilesPopover/PopoverTabs'
 import FileMenuOptions from './FileMenuOptions'
 
 type Props = {
-  viewControllerManager: ViewControllerManager
+  filesController: FilesController
+  selectionController: SelectedItemsController
 }
 
-const FileContextMenu: FunctionComponent<Props> = observer(({ viewControllerManager }) => {
+const FileContextMenu: FunctionComponent<Props> = observer(({ filesController, selectionController }) => {
-  const { selectedFiles, showFileContextMenu, setShowFileContextMenu, fileContextMenuLocation } =
+  const { showFileContextMenu, setShowFileContextMenu, fileContextMenuLocation } = filesController
-    viewControllerManager.filesController
 
   const [contextMenuStyle, setContextMenuStyle] = useState<React.CSSProperties>({
     top: 0,
@@ -24,9 +23,7 @@ const FileContextMenu: FunctionComponent<Props> = observer(({ viewControllerMana
   const [contextMenuMaxHeight, setContextMenuMaxHeight] = useState<number | 'auto'>('auto')
   const contextMenuRef = useRef<HTMLDivElement>(null)
   const [closeOnBlur] = useCloseOnBlur(contextMenuRef, (open: boolean) => setShowFileContextMenu(open))
-  useCloseOnClickOutside(contextMenuRef, () => viewControllerManager.filesController.setShowFileContextMenu(false))
+  useCloseOnClickOutside(contextMenuRef, () => filesController.setShowFileContextMenu(false))
-
-  const selectedFile = selectedFiles[0]
 
   const reloadContextMenuLayout = useCallback(() => {
     const { clientHeight } = document.documentElement
@@ -86,17 +83,6 @@ const FileContextMenu: FunctionComponent<Props> = observer(({ viewControllerMana
     }
   }, [reloadContextMenuLayout])
 
-  const handleFileAction = useCallback(
-    async (action: PopoverFileItemAction) => {
-      const { didHandleAction } = await viewControllerManager.filesController.handleFileAction(
-        action,
-        PopoverTabs.AllFiles,
-      )
-      return didHandleAction
-    },
-    [viewControllerManager.filesController],
-  )
-
   return (
     <div
       ref={contextMenuRef}
@@ -107,8 +93,8 @@ const FileContextMenu: FunctionComponent<Props> = observer(({ viewControllerMana
       }}
     >
       <FileMenuOptions
-        file={selectedFile}
+        filesController={filesController}
-        handleFileAction={handleFileAction}
+        selectionController={selectionController}
         closeOnBlur={closeOnBlur}
         closeMenu={() => setShowFileContextMenu(false)}
         shouldShowRenameOption={false}
@@ -120,8 +106,9 @@ const FileContextMenu: FunctionComponent<Props> = observer(({ viewControllerMana
 
 FileContextMenu.displayName = 'FileContextMenu'
 
-const FileContextMenuWrapper: FunctionComponent<Props> = ({ viewControllerManager }) => {
+const FileContextMenuWrapper: FunctionComponent<Props> = ({ filesController, selectionController }) => {
-  const { selectedFiles, showFileContextMenu } = viewControllerManager.filesController
+  const { showFileContextMenu } = filesController
+  const { selectedFiles } = selectionController
 
   const selectedFile = selectedFiles[0]
 
@@ -129,7 +116,7 @@ const FileContextMenuWrapper: FunctionComponent<Props> = ({ viewControllerManage
     return null
   }
 
-  return <FileContextMenu viewControllerManager={viewControllerManager} />
+  return <FileContextMenu filesController={filesController} selectionController={selectionController} />
 }
 
 export default observer(FileContextMenuWrapper)

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

@@ -1,16 +1,17 @@
+import { FunctionComponent, useCallback, useMemo } from 'react'
+import { PopoverFileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
-import { FileItem } from '@standardnotes/snjs'
-import { FunctionComponent } from 'react'
-import { PopoverFileItemAction, PopoverFileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
 import Icon from '@/Components/Icon/Icon'
 import Switch from '@/Components/Switch/Switch'
+import { observer } from 'mobx-react-lite'
+import { FilesController } from '@/Controllers/FilesController'
+import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
 
 type Props = {
   closeMenu: () => void
   closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
-  file: FileItem
+  filesController: FilesController
-  fileProtectionToggleCallback?: (isProtected: boolean) => void
+  selectionController: SelectedItemsController
-  handleFileAction: (action: PopoverFileItemAction) => Promise<boolean>
   isFileAttachedToNote?: boolean
   renameToggleCallback?: (isRenamingFile: boolean) => void
   shouldShowRenameOption: boolean
@@ -20,72 +21,73 @@ type Props = {
 const FileMenuOptions: FunctionComponent<Props> = ({
   closeMenu,
   closeOnBlur,
-  file,
+  filesController,
-  fileProtectionToggleCallback,
+  selectionController,
-  handleFileAction,
   isFileAttachedToNote,
   renameToggleCallback,
   shouldShowRenameOption,
   shouldShowAttachOption,
 }) => {
+  const { selectedFiles } = selectionController
+  const { handleFileAction } = filesController
+
+  const hasProtectedFiles = useMemo(() => selectedFiles.some((file) => file.protected), [selectedFiles])
+
+  const onPreview = useCallback(() => {
+    void handleFileAction({
+      type: PopoverFileItemActionType.PreviewFile,
+      payload: {
+        file: selectedFiles[0],
+        otherFiles: selectedFiles.length > 1 ? selectedFiles : filesController.allFiles,
+      },
+    })
+    closeMenu()
+  }, [closeMenu, filesController.allFiles, handleFileAction, selectedFiles])
+
+  const onDetach = useCallback(() => {
+    const file = selectedFiles[0]
+    void handleFileAction({
+      type: PopoverFileItemActionType.DetachFileToNote,
+      payload: { file },
+    })
+    closeMenu()
+  }, [closeMenu, handleFileAction, selectedFiles])
+
+  const onAttach = useCallback(() => {
+    const file = selectedFiles[0]
+    void handleFileAction({
+      type: PopoverFileItemActionType.AttachFileToNote,
+      payload: { file },
+    })
+    closeMenu()
+  }, [closeMenu, handleFileAction, selectedFiles])
+
   return (
     <>
-      <button
+      <button onBlur={closeOnBlur} className="sn-dropdown-item focus:bg-info-backdrop" onClick={onPreview}>
-        onBlur={closeOnBlur}
-        className="sn-dropdown-item focus:bg-info-backdrop"
-        onClick={() => {
-          handleFileAction({
-            type: PopoverFileItemActionType.PreviewFile,
-            payload: file,
-          }).catch(console.error)
-          closeMenu()
-        }}
-      >
         <Icon type="file" className="mr-2 color-neutral" />
         Preview file
       </button>
-      {isFileAttachedToNote ? (
+      {selectedFiles.length === 1 && (
-        <button
+        <>
-          onBlur={closeOnBlur}
+          {isFileAttachedToNote ? (
-          className="sn-dropdown-item focus:bg-info-backdrop"
+            <button onBlur={closeOnBlur} className="sn-dropdown-item focus:bg-info-backdrop" onClick={onDetach}>
-          onClick={() => {
+              <Icon type="link-off" className="mr-2 color-neutral" />
-            handleFileAction({
+              Detach from note
-              type: PopoverFileItemActionType.DetachFileToNote,
+            </button>
-              payload: file,
+          ) : shouldShowAttachOption ? (
-            }).catch(console.error)
+            <button onBlur={closeOnBlur} className="sn-dropdown-item focus:bg-info-backdrop" onClick={onAttach}>
-            closeMenu()
+              <Icon type="link" className="mr-2 color-neutral" />
-          }}
+              Attach to note
-        >
+            </button>
-          <Icon type="link-off" className="mr-2 color-neutral" />
+          ) : null}
-          Detach from note
+        </>
-        </button>
+      )}
-      ) : shouldShowAttachOption ? (
-        <button
-          onBlur={closeOnBlur}
-          className="sn-dropdown-item focus:bg-info-backdrop"
-          onClick={() => {
-            handleFileAction({
-              type: PopoverFileItemActionType.AttachFileToNote,
-              payload: file,
-            }).catch(console.error)
-            closeMenu()
-          }}
-        >
-          <Icon type="link" className="mr-2 color-neutral" />
-          Attach to note
-        </button>
-      ) : null}
       <div className="min-h-1px my-1 bg-border"></div>
       <button
         className="sn-dropdown-item justify-between focus:bg-info-backdrop"
         onClick={() => {
-          handleFileAction({
+          void filesController.setProtectionForFiles(!hasProtectedFiles, selectionController.selectedFiles)
-            type: PopoverFileItemActionType.ToggleFileProtection,
-            payload: file,
-            callback: (isProtected: boolean) => {
-              fileProtectionToggleCallback?.(isProtected)
-            },
-          }).catch(console.error)
         }}
         onBlur={closeOnBlur}
       >
@@ -93,18 +95,18 @@ const FileMenuOptions: FunctionComponent<Props> = ({
           <Icon type="password" className="mr-2 color-neutral" />
           Password protection
         </span>
-        <Switch className="px-0 pointer-events-none" tabIndex={FOCUSABLE_BUT_NOT_TABBABLE} checked={file.protected} />
+        <Switch
+          className="px-0 pointer-events-none"
+          tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+          checked={hasProtectedFiles}
+        />
       </button>
       <div className="min-h-1px my-1 bg-border"></div>
       <button
         onBlur={closeOnBlur}
         className="sn-dropdown-item focus:bg-info-backdrop"
         onClick={() => {
-          handleFileAction({
+          void filesController.downloadFiles(selectionController.selectedFiles)
-            type: PopoverFileItemActionType.DownloadFile,
-            payload: file,
-          }).catch(console.error)
-          closeMenu()
         }}
       >
         <Icon type="download" className="mr-2 color-neutral" />
@@ -126,11 +128,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
         onBlur={closeOnBlur}
         className="sn-dropdown-item focus:bg-info-backdrop"
         onClick={() => {
-          handleFileAction({
+          void filesController.deleteFilesPermanently(selectionController.selectedFiles)
-            type: PopoverFileItemActionType.DeleteFile,
-            payload: file,
-          }).catch(console.error)
-          closeMenu()
         }}
       >
         <Icon type="trash" className="mr-2 color-danger" />
@@ -140,4 +138,4 @@ const FileMenuOptions: FunctionComponent<Props> = ({
   )
 }
 
-export default FileMenuOptions
+export default observer(FileMenuOptions)

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

@@ -0,0 +1,93 @@
+import Icon from '@/Components/Icon/Icon'
+import VisuallyHidden from '@reach/visually-hidden'
+import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
+import { useCallback, useRef, useState } from 'react'
+import { observer } from 'mobx-react-lite'
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
+import FileMenuOptions from './FileMenuOptions'
+import { FilesController } from '@/Controllers/FilesController'
+import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
+
+type Props = {
+  filesController: FilesController
+  selectionController: SelectedItemsController
+}
+
+const FilesOptionsPanel = ({ filesController, selectionController }: Props) => {
+  const [open, setOpen] = useState(false)
+  const [position, setPosition] = useState({
+    top: 0,
+    right: 0,
+  })
+  const [maxHeight, setMaxHeight] = useState<number | 'auto'>('auto')
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+  const [closeOnBlur] = useCloseOnBlur(panelRef, setOpen)
+
+  const onDisclosureChange = useCallback(async () => {
+    const rect = buttonRef.current?.getBoundingClientRect()
+    if (rect) {
+      const { clientHeight } = document.documentElement
+      const footerElementRect = document.getElementById('footer-bar')?.getBoundingClientRect()
+      const footerHeightInPx = footerElementRect?.height
+      if (footerHeightInPx) {
+        setMaxHeight(clientHeight - rect.bottom - footerHeightInPx - 2)
+      }
+      setPosition({
+        top: rect.bottom,
+        right: document.body.clientWidth - rect.right,
+      })
+      setOpen((open) => !open)
+    }
+  }, [])
+
+  return (
+    <Disclosure open={open} onChange={onDisclosureChange}>
+      <DisclosureButton
+        onKeyDown={(event) => {
+          if (event.key === 'Escape') {
+            setOpen(false)
+          }
+        }}
+        onBlur={closeOnBlur}
+        ref={buttonRef}
+        className="sn-icon-button border-contrast"
+      >
+        <VisuallyHidden>Actions</VisuallyHidden>
+        <Icon type="more" className="block" />
+      </DisclosureButton>
+      <DisclosurePanel
+        onKeyDown={(event) => {
+          if (event.key === 'Escape') {
+            setOpen(false)
+            buttonRef.current?.focus()
+          }
+        }}
+        ref={panelRef}
+        style={{
+          ...position,
+          maxHeight,
+        }}
+        className="sn-dropdown sn-dropdown--animated min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto fixed"
+        onBlur={closeOnBlur}
+        tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+      >
+        {open && (
+          <FileMenuOptions
+            filesController={filesController}
+            selectionController={selectionController}
+            closeOnBlur={closeOnBlur}
+            closeMenu={() => {
+              setOpen(false)
+            }}
+            shouldShowAttachOption={false}
+            shouldShowRenameOption={false}
+          />
+        )}
+      </DisclosurePanel>
+    </Disclosure>
+  )
+}
+
+export default observer(FilesOptionsPanel)

app/assets/javascripts/Components/MultipleSelectedFiles/MultipleSelectedFiles.tsx

@@ -0,0 +1,41 @@
+import { IlNotesIcon } from '@standardnotes/icons'
+import { observer } from 'mobx-react-lite'
+import Button from '../Button/Button'
+import { useCallback } from 'react'
+import FileOptionsPanel from '../FileContextMenu/FileOptionsPanel'
+import { FilesController } from '@/Controllers/FilesController'
+import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
+
+type Props = {
+  filesController: FilesController
+  selectionController: SelectedItemsController
+}
+
+const MultipleSelectedFiles = ({ filesController, selectionController }: Props) => {
+  const count = selectionController.selectedFilesCount
+
+  const cancelMultipleSelection = useCallback(() => {
+    selectionController.cancelMultipleSelection()
+  }, [selectionController])
+
+  return (
+    <div className="flex flex-col h-full items-center">
+      <div className="flex items-center justify-between p-4 w-full">
+        <h1 className="sk-h1 font-bold m-0">{count} selected files</h1>
+        <div className="flex">
+          <FileOptionsPanel filesController={filesController} selectionController={selectionController} />
+        </div>
+      </div>
+      <div className="flex-grow flex flex-col justify-center items-center w-full max-w-md">
+        <IlNotesIcon className="block" />
+        <h2 className="text-lg m-0 text-center mt-4">{count} selected files</h2>
+        <p className="text-sm mt-2 text-center max-w-60">Actions will be performed on all selected files.</p>
+        <Button className="mt-2.5" onClick={cancelMultipleSelection}>
+          Cancel multiple selection
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default observer(MultipleSelectedFiles)

app/assets/javascripts/Components/NoteGroupView/NoteGroupView.tsx

@@ -3,10 +3,12 @@ import { PureComponent } from '@/Components/Abstract/PureComponent'
 import { WebApplication } from '@/Application/Application'
 import MultipleSelectedNotes from '@/Components/MultipleSelectedNotes/MultipleSelectedNotes'
 import NoteView from '@/Components/NoteView/NoteView'
+import MultipleSelectedFiles from '../MultipleSelectedFiles/MultipleSelectedFiles'
 import { ElementIds } from '@/Constants/ElementIDs'
 
 type State = {
   showMultipleSelectedNotes: boolean
+  showMultipleSelectedFiles: boolean
   controllers: NoteViewController[]
 }
 
@@ -21,6 +23,7 @@ class NoteGroupView extends PureComponent<Props, State> {
     super(props, props.application)
     this.state = {
       showMultipleSelectedNotes: false,
+      showMultipleSelectedFiles: false,
       controllers: [],
     }
   }
@@ -37,11 +40,21 @@ class NoteGroupView extends PureComponent<Props, State> {
     })
 
     this.autorun(() => {
+      if (!this.viewControllerManager) {
+        return
+      }
+
       if (this.viewControllerManager && this.viewControllerManager.notesController) {
         this.setState({
           showMultipleSelectedNotes: this.viewControllerManager.notesController.selectedNotesCount > 1,
         })
       }
+
+      if (this.viewControllerManager.selectionController) {
+        this.setState({
+          showMultipleSelectedFiles: this.viewControllerManager.selectionController.selectedFilesCount > 1,
+        })
+      }
     })
   }
 
@@ -59,6 +72,13 @@ class NoteGroupView extends PureComponent<Props, State> {
           <MultipleSelectedNotes application={this.application} viewControllerManager={this.viewControllerManager} />
         )}
 
+        {this.state.showMultipleSelectedFiles && (
+          <MultipleSelectedFiles
+            filesController={this.viewControllerManager.filesController}
+            selectionController={this.viewControllerManager.selectionController}
+          />
+        )}
+
         {!this.state.showMultipleSelectedNotes && (
           <>
             {this.state.controllers.map((controller) => {

app/assets/javascripts/Constants/Strings.ts

@@ -106,9 +106,11 @@ export const Strings = {
   protectingNoteWithoutProtectionSources:
     'Access to this note will not be restricted until you set up a passcode or account.',
   openAccountMenu: 'Open Account Menu',
-  trashNotesTitle: 'Move to Trash',
+  trashItemsTitle: 'Move to Trash',
   trashNotesText: 'Are you sure you want to move these notes to the trash?',
+  trashFilesText: 'Are you sure you want to move these files to the trash?',
   enterPasscode: 'Please enter a passcode.',
+  deleteMultipleFiles: 'Are you sure you want to permanently delete these files?',
 }
 
 export const StringUtils = {
@@ -139,6 +141,9 @@ export const StringUtils = {
         : 'Are you sure you want to move these notes to the trash?'
     }
   },
+  deleteFile(title: string): string {
+    return `Are you sure you want to permanently delete ${title}?`
+  },
   archiveLockedNotesAttempt(archive: boolean, notesCount = 1): string {
     const archiveString = archive ? 'archive' : 'unarchive'
     return notesCount === 1

app/assets/javascripts/Controllers/FilesController.ts

@@ -3,9 +3,9 @@ import {
   PopoverFileItemAction,
   PopoverFileItemActionType,
 } from '@/Components/AttachedFilesPopover/PopoverFileItemAction'
-import { PopoverTabs } from '@/Components/AttachedFilesPopover/PopoverTabs'
 import { BYTES_IN_ONE_MEGABYTE } from '@/Constants/Constants'
 import { confirmDialog } from '@/Services/AlertService'
+import { Strings, StringUtils } from '@/Constants/Strings'
 import { concatenateUint8Arrays } from '@/Utils/ConcatenateUint8Arrays'
 import {
   ClassicFileReader,
@@ -16,11 +16,10 @@ import {
 } from '@standardnotes/filepicker'
 import { ChallengeReason, ClientDisplayableError, ContentType, FileItem, InternalEventBus } from '@standardnotes/snjs'
 import { addToast, dismissToast, ToastType, updateToast } from '@standardnotes/stylekit'
-import { action, computed, makeObservable, observable, reaction } from 'mobx'
+import { action, makeObservable, observable, reaction } from 'mobx'
 import { WebApplication } from '../Application/Application'
 import { AbstractViewController } from './Abstract/AbstractViewController'
 import { NotesController } from './NotesController'
-import { SelectedItemsController } from './SelectedItemsController'
 
 const UnprotectedFileActions = [PopoverFileItemActionType.ToggleFileProtection]
 const NonMutatingFileActions = [PopoverFileItemActionType.DownloadFile, PopoverFileItemActionType.PreviewFile]
@@ -36,14 +35,12 @@ export class FilesController extends AbstractViewController {
   override deinit(): void {
     super.deinit()
     ;(this.notesController as unknown) = undefined
-    ;(this.selectionController as unknown) = undefined
     ;(this.filePreviewModalController as unknown) = undefined
   }
 
   constructor(
     application: WebApplication,
     private notesController: NotesController,
-    private selectionController: SelectedItemsController,
     private filePreviewModalController: FilePreviewModalController,
     eventBus: InternalEventBus,
   ) {
@@ -55,8 +52,6 @@ export class FilesController extends AbstractViewController {
       showFileContextMenu: observable,
       fileContextMenuLocation: observable,
 
-      selectedFiles: computed,
-
       reloadAllFiles: action,
       reloadAttachedFiles: action,
       setShowFileContextMenu: action,
@@ -80,10 +75,6 @@ export class FilesController extends AbstractViewController {
     )
   }
 
-  get selectedFiles(): FileItem[] {
-    return this.selectionController.getSelectedItems<FileItem>(ContentType.File)
-  }
-
   setShowFileContextMenu = (enabled: boolean) => {
     this.showFileContextMenu = enabled
   }
@@ -170,11 +161,10 @@ export class FilesController extends AbstractViewController {
 
   handleFileAction = async (
     action: PopoverFileItemAction,
-    currentTab: PopoverTabs,
   ): Promise<{
     didHandleAction: boolean
   }> => {
-    const file = action.type !== PopoverFileItemActionType.RenameFile ? action.payload : action.payload.file
+    const file = action.payload.file
     let isAuthorizedForAction = true
 
     const requiresAuthorization = file.protected && !UnprotectedFileActions.includes(action.type)
@@ -211,10 +201,7 @@ export class FilesController extends AbstractViewController {
         await this.renameFile(file, action.payload.name)
         break
       case PopoverFileItemActionType.PreviewFile:
-        this.filePreviewModalController.activate(
+        this.filePreviewModalController.activate(file, action.payload.otherFiles)
-          file,
-          currentTab === PopoverTabs.AllFiles ? this.allFiles : this.attachedFiles,
-        )
         break
     }
 
@@ -399,4 +386,31 @@ export class FilesController extends AbstractViewController {
 
     return undefined
   }
+
+  deleteFilesPermanently = async (files: FileItem[]) => {
+    const title = Strings.trashItemsTitle
+    const text = files.length === 1 ? StringUtils.deleteFile(files[0].name) : Strings.deleteMultipleFiles
+
+    if (
+      await confirmDialog({
+        title,
+        text,
+        confirmButtonStyle: 'danger',
+      })
+    ) {
+      await Promise.all(files.map((file) => this.application.mutator.deleteItem(file)))
+    }
+  }
+
+  setProtectionForFiles = async (protect: boolean, files: FileItem[]) => {
+    if (protect) {
+      await this.application.mutator.protectItems(files)
+    } else {
+      await this.application.mutator.unprotectItems(files, ChallengeReason.UnprotectFile)
+    }
+  }
+
+  downloadFiles = async (files: FileItem[]) => {
+    await Promise.all(files.map((file) => this.downloadFile(file)))
+  }
 }

app/assets/javascripts/Controllers/NotesController.ts

@@ -257,7 +257,7 @@ export class NotesController extends AbstractViewController {
       return false
     }
 
-    const title = Strings.trashNotesTitle
+    const title = Strings.trashItemsTitle
     let noteTitle = undefined
     if (this.selectedNotesCount === 1) {
       const selectedNote = this.getSelectedNotesList()[0]

app/assets/javascripts/Controllers/SelectedItemsController.ts

@@ -35,6 +35,8 @@ export class SelectedItemsController extends AbstractViewController {
       selectedItems: observable,
 
       selectedItemsCount: computed,
+      selectedFiles: computed,
+      selectedFilesCount: computed,
 
       selectItem: action,
       setSelectedItems: action,
@@ -73,6 +75,14 @@ export class SelectedItemsController extends AbstractViewController {
     return Object.keys(this.selectedItems).length
   }
 
+  get selectedFiles(): FileItem[] {
+    return this.getSelectedItems<FileItem>(ContentType.File)
+  }
+
+  get selectedFilesCount(): number {
+    return this.selectedFiles.length
+  }
+
   getSelectedItems = <T extends ListableContentItem = ListableContentItem>(contentType?: ContentType): T[] => {
     return Object.values(this.selectedItems).filter((item) => {
       return !contentType ? true : item.content_type === contentType

app/assets/javascripts/Services/ViewControllerManager.ts

@@ -97,7 +97,6 @@ export class ViewControllerManager {
     this.filesController = new FilesController(
       application,
       this.notesController,
-      this.selectionController,
       this.filePreviewModalController,
       this.eventBus,
     )